positioning text

[mossawi]

Hi,

I have a paragraph with bullet points,

1- how can i indent that text/span?
2- how can i hide the bullet points without removing them from the html?
3- if my text in the html shows in 1 line for example, how can i break it into 2 lines through css, is that possible?

thanks.

[inn8]

Hi Mossawi,

Can you post your code please?

Without really knowing what you mean, you could simply put your bullet points in a ul.

html for a ul works as follows:


<ul>
<li>bullet point</li>
<li>bullet point 2</li>
</ul>

As far as hiding the bullet points, not really sure exactly what you mean. If you mean getting rid of the bullet format, you can style the ul by saying
list-style:none; in your CSS.

You can also control line width of your <li> elements by giving them a fixed width, e.g.


li{

width: 300px;

}


Hope this helped a little..but again please post the code.

[mossawi]

thx a lot, that really helped...

heres my code:
http://illinoisaaf.org/test/test/index2.html
http://illinoisaaf.org/test/test/style_main.css

i'm having a few problems with it:

------------------------------------------------------------------
1- I need to get these links each in its own box, after I do that, I need to break each link into 2 lines, so that it can be something like this:

Link name
by Author Name

instead of

Link name by Author name

http://img204.imageshack.us/my.php?image=picture5cp1.png


------------------------------------------------------------------
2- For both of these, I'm having a problem making them align in the center relative to the box they are in, it works fine for me in firefox but messes up in other browsers.

http://img147.imageshack.us/my.php?image=65875311sg7.jpg
http://img258.imageshack.us/my.php?image=87922727su6.jpg


------------------------------------------------------------------
3- The gray background that goes behind the right part, (video, upcoming events, daily photo), it either extends way down beyond the design/layout, or its too short, it keeps giving me different results in each browser.



Any help would be greatly appreciated.

Many thanks in advance.

[bluewalrus]

1. Ok you got this right.
<li><a href="?cssfile=/213/213.css&amp;page=0" title="AccessKey: a" accesskey="a">Under the Sea!</a> by <a href="http://www.ericstoltz.com/" class="c">Eric Stoltz</a></li>

Separate them. Cause by default each <li> will make a line break unless you set it which you haven't to display in line. aka
<li><a href="?cssfile=/213/213.css&amp;page=0" title="AccessKey: a" accesskey="a">Under the Sea!</a></li><li>by <a href="http://www.ericstoltz.com/" class="c">Eric Stoltz</a></li>
2. Don't know what your referring to your image link doesn't work and you didn't say anything other then centering but if its text put text-align:center; in the tag that refers to it.
3.Set a height (height:212px;) into whatever div that grey background is set in. Don't know what that winking face is but its suppose to show a ; then a ) you dont use the (or) thats just for the sentence structure.

[mossawi]

thx a lot,

for the first one is there a way of doing it without touching the html, just through the css?

and for the third one, i set a height on it but it doesnt seem to be accurate, its fine on my firefox browser but looks either longer or shrter in internet explorer and google chrome.

one more question i had if its not too much, for some reason my layout looks centered and top margin is 0 in dreamweaver, in the browser its not centered and theres space at the top, any clue?

many thanks again for everyone's help and looking forward to hear form you.

[bluewalrus]

no theres no way to have css specify at a word to make a line break. You'd need java or php or some other language to do that; if your not going to alter the html yourself and want it to figure out where to put the breaks. You could make it a certain width but not all of the names would fit in there unless you used &nbsp;'s for spaces when they were too short and when they were to long they would also overflow to the next line and that would make a third line and also for this method you'd be altering the html still. So the short awnser no...as far as i know maybe someone else knows of a way.

you have this in the body tag right now:
margin-left: auto;
margin-right: auto;

I'd just use margin:auto;.

No space at the top add this in:
html {
padding:0;
margin:0;
}

The background is over exteneding i believe cause you are using an image with the height subtract 896 from the height and i think it i will work if some how you measured the page to be 1100px longs before. Also in my ff the grey is extending longer than the page I can't test chrome or ie beyond 5.2 i'm on a mac in safari and opera it overextends as well though. Not as much in ie 5.2 but still beyond you want it to stop at the watches?

also should fix these http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fillinoisaaf.org%2Ftest%2Ftest%2Findex2.html&profile=css21&usermedium=all&warning=1&lang=en

[mossawi]

thanks a lot,

ya i would like the gray box to end aligning with the white in the bog of the box on its left.

i also changed the margins but the page still has a space at the top.

thanks in advance.

[bluewalrus]

these go into html not body.

padding:0;
margin:0;