Be Excellent To Each Other

I know a little bit of HTML and have created basic sites using tables but it's frustrating.

What is the best means to learn layout and positioning using CSS?

Just get stuck in and expect a fair bit of utter tedium, trial and error as you try to get it to work completely consistently (saying that it's been a couple of years since I've done all that much, things might have improved a bit). I guess start with a look at this, though:

http://www.w3.org/TR/CSS2/box.html

I have learnt a bit and cobbled something together as a test.

Question: why is the image of a tree nacking everything up and not fitting perfectly over the div#bannerimg? I have defined the size of the div to be 498px wide and 99px tall as those are the dimensions of the image.

In the page

<div id="bannerimg">

<img src="http://www.hughpaterson.co.uk/hpbanner.jpg" width="498" height="99" alt=" a tree" border=0>

</div>

in the css

div#bannerimg {
background-color: #000000;
width:498px;
height:99px;
}

It should do: http://jsfiddle.net/Grimdotdotdot/7tuqt/

But in your code, you've got it next to another div that's floating, so some of its width is behind that floated div. Either increase the width of #bannerimg to make up the space (731px), or add 'float: left;' to #bannerimg too. Then, after the close of #bannerimg, put to make everything after it starts on a new line.

Craig Grannell's written a good book on the subject.

Thanks Grim... that worked.

Craig Grannell done a poo. (I will look at his bookington).

You know how to use the 'inspect element' bit of your browser, right?

Um.

If you use Firefox, install Firebug. If not (or once you've done that), press F12 and a "magic bit" will appear at the bottom of the screen. You can choose page elements on the left, and on the right will be the CSS styles that make them. You can edit the styles live to test things out before you commit them to your CSS file.

I honestly don't know how I did web development without it.

Wonderful stuff.

May I ask another probably stupid question? I promise this is the last one. FOR NOWN.

Why is the content in my footer not centring properly?

Get rid of 'text-align: center' in the parent div and put 'margin: 8px auto;' on .footer .
8px is the margin above and below, and 'auto' will automatically center it.

Here are a few general handy hints, which you can ignore or take onboard as desired.

• Use % for font sizes
• Don't style on IDs (#something), style on classes
• Use a reset to stop different browsers behaving differently. Yahoo's is good.
• Get the hang of using more than one class per element, such as <div class="box right"></div> to put a border on a div and float it to the right.
• Run it through a validator every now and again.

There's going to be arguments about the first two, reckon

Hmm. That moved everything over to the left, albeit neatly, rather than putting it in the centre.

<div id="footer" align="center">

Seems to have resolved it.

Sorry, check the edit - you put 'margin: ?px auto' on the .footer class (ie. the paragraphs themselves). align="center" on the parent will work fine (although it isn't valid XHTML).

If I don't use valid XHTML will I be earmarked for destruction come the day the meek inherit the Earth?

It's taken me about 5 hours to do what you see on that page. I passed the 11+. I thought I was clever!

When I was doing webstuff (about 6 years ago) I always did the 2nd one, much easier imo, I used px size for the font size tho.

Malc