Stuey

Hello, I have just bought a web design training programme from blue mountain training. The only problem I have is that they don't tell you where you are suppose to start, you just get a long list of courses and you just pick one. I started with dreamweaver cs4 but I don't know what to pick after that.

You can only do it with a <span> tag if the element is set to display:block; like this:
 
<span class="center"> Centered text </span> .center { display:block; text-align:center; }  
This is because a <span> is an inline element so text-align:center; will work off the elements content width (e.g. the width of the text inside the span). However, a block element takes its width off it's container (in this case the <span> element), so the text will move to the middle of the container.
 
Alternatively, use a block-level element like a <div>, which will work without using display:block inside the CSS (as it's display:block by default).
 
Hope I made sense
Lyndsey

Add a class to the list element e.g.
 
<li class="products"> Products </li>  
Then use CSS to center the text:
 
li.products { text-align: center; } Lyndsey.

I have a smexi Ford Focus Zetec S 12 plate and someone bumped into my back arch while parked at the train station, how I'd love to find that specimen I know it's hard to say but when I contacted the British Transport Police they asked me how much I think it would cost :S why they'd ask me that when I have no idea I don't know. But imagine a few scratches going from the back arch then scratches continue going down to the bumper and a small bump in the arch how much do you reckon it would cost?

Well without the help I probably would of been stuck for a while. Doesn't take a minute to say thank you

Well without the help I probably would of been stuck for a while. Doesn't take a minute to say thank you

Thank you all for your help. Thank you for showing me how to manage the wrap, and here is the finished result now

Good man.
 
It's nice to see people work hard and overcome the various obstacles in order to reach their goal. Even nicer to see someone come back and thank us for our help even after completing the project, don't see that too often

I do have one tip. On every site I design in the css i make a class as follows;
 
.clear { clear: both; } When using anything which floats it will always try to float left or right inline with the others. By adding an extra div with the class "clear" then it jams a line in and starts a fresh aligning, like a new row. In addition float can also cause images to 'overhang' like your first example showed the car in the foooter nav (unless that was intended). Here is an example for you.
 
<html> <head> <title>Untitled Document</title> <style type="text/css"> html { font-family: Arial, Helvetica, sans-serif; } #wrap { width: 1000px; margin: 0 auto; background: #ccc; } #wrap .col { width: 240px; margin: 5px; float: left; } </style></head> <body> <div id="wrap"> <div class="col"><b>Col 1:</b> A little bit of text. This is a little bit of text to show small.</div> <div class="col"><b>Col 2:</b> More text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et libero libero, in tincidunt diam. Curabitur massa ipsum, interdum vel porta at, facilisis in sem. Maecenas ornare turpis vel nunc vestibulum feugiat. Integer augue erat, faucibus nec rhoncus sit amet, facilisis nec metus. Suspendisse vitae risus sed nunc laoreet condimentum. Duis id dapibus est. Sed enim quam, vestibulum at varius nec, ultricies nec neque. Sed non libero ligula, vitae imperdiet nisi. Phasellus viverra, nulla a iaculis posuere, mi erat malesuada urna, quis euismod risus lorem vitae est.</div> <div class="col"><b>Col 3:</b> A little bit of text. This is a little bit of text to show small again but will start issues.</div> <div class="col"><b>Col 4:</b> This is a little bit of text to show small again but watch the next one.</div> <div class="col"><b>Col 5:</b> More text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et libero libero, in tincidunt diam. Curabitur massa ipsum, interdum vel porta at, facilisis in sem. Maecenas ornare turpis vel nunc vestibulum feugiat. Integer augue erat, faucibus nec rhoncus sit amet, facilisis nec metus. Suspendisse vitae risus sed nunc laoreet condimentum. Duis id dapibus est. Sed enim quam, vestibulum at varius nec, ultricies nec neque. Sed non libero ligula, vitae imperdiet nisi. Phasellus viverra, nulla a iaculis posuere, mi erat malesuada urna, quis euismod risus lorem vitae est.</div> <div class="col"><b>Col 6:</b> This is a little bit of text to show small again but watch the next one.</div> </div> </body> </html> In a browser you'll see this has them all over the place but by adding the class "clear" we can change this and make the background grey wrap around the cols.
 
<html> <head> <title>Untitled Document</title> <style type="text/css"> html { font-family: Arial, Helvetica, sans-serif; } #wrap { width: 1000px; margin: 0 auto; background: #ccc; } #wrap .col { width: 240px; margin: 5px; float: left; } .clear { clear: both; } </style></head> <body> <div id="wrap"> <div class="col"><b>Col 1:</b> A little bit of text. This is a little bit of text to show small.</div> <div class="col"><b>Col 2:</b> More text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et libero libero, in tincidunt diam. Curabitur massa ipsum, interdum vel porta at, facilisis in sem. Maecenas ornare turpis vel nunc vestibulum feugiat. Integer augue erat, faucibus nec rhoncus sit amet, facilisis nec metus. Suspendisse vitae risus sed nunc laoreet condimentum. Duis id dapibus est. Sed enim quam, vestibulum at varius nec, ultricies nec neque. Sed non libero ligula, vitae imperdiet nisi. Phasellus viverra, nulla a iaculis posuere, mi erat malesuada urna, quis euismod risus lorem vitae est.</div> <div class="col"><b>Col 3:</b> A little bit of text. This is a little bit of text to show small again but will start issues.</div> <div class="col"><b>Col 4:</b> This is a little bit of text to show small again but watch the next one.</div> <div class="clear"></div> <!-- This starts a new row ---> <div class="col"><b>Col 5:</b> More text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et libero libero, in tincidunt diam. Curabitur massa ipsum, interdum vel porta at, facilisis in sem. Maecenas ornare turpis vel nunc vestibulum feugiat. Integer augue erat, faucibus nec rhoncus sit amet, facilisis nec metus. Suspendisse vitae risus sed nunc laoreet condimentum. Duis id dapibus est. Sed enim quam, vestibulum at varius nec, ultricies nec neque. Sed non libero ligula, vitae imperdiet nisi. Phasellus viverra, nulla a iaculis posuere, mi erat malesuada urna, quis euismod risus lorem vitae est.</div> <div class="col"><b>Col 6:</b> This is a little bit of text to show small again but watch the next one.</div> <div class="clear"></div> <!-- This clears the float to allow the wrap bg to show ---> </div> </body> </html>  
There are other ways to space cols, this is just an example of the clear method. I hope this helps.