Layout help

[cmg27]

I have just finally got around to updating my site, its only been about a year or so... but anyway... having some layout problems, I can't figure out the best way to layout what I want. It is the header for my site and consists of two images on the left, two lines of text, two more images

I want the whole header to center on the page, and I want the text centered both vert and horiz between the two sets of pictures. Any suggestions would be helpful.

Thanks!

[Gwaihir]

Ehm.. got a rough sketch handy? I'm honing my CSS skills currently, so I wouldn't mind giving this one a go.

Step 1 would be to put the whole thing in a <div id="header"></div> and center that from the style sheet.

[cmg27]

you can see the header here cory.goz.net, my css is very rusty.. ive got it pretty close to the way I want it, I just want the second row of text to move up, and the pictures to move in a bit so they are not at the edges.

[Gwaihir]

Ah; good to have that reference; I was thinking vertically:

img1 img2

textline1
textline2

img3 img4

So, you've got:

<!-- header -->
<div id="thumbnails">
<div align="center">
<img src="/randompic/coryandally/rotate.php" width="75" height="75" align="left" class="logoimg">
<img src="/randompic/morgan/rotate.php" width="75" height="75" align="left" class="logoimg">
<img src="/randompic/zoey/rotate.php" width="75" height="75" align="right" class="logoimg">
<img src="/randompic/sophie/rotate.php" width="75" height="75" align="right" class="logoimg">
	
</div>
<div id="title" align="center">
<h1>Cory, Allyson, Morgan and Sophie</h1>
<h2>"who wouldn't be interested in everything we do?!"</h2>
</div>
</div>
<!-- end header -->

-> Ok, first, I don't think those two inner divs are doing anything for you, so just remove them. As you're calling the thing "header" anyway, I suggest to call the div that too.
-> Then, you aim for xhtml 1.0 strict, which means no deprecated lay out code is allowed, so all "align" and "center" stuff will have to move to the stylesheet. For this reason I put the images in two classes: one goes to the left, one to the right.
-> A text alternative for each image is also mandatory (alt="lovely pic"), as is closing img tags with '/>'
-> In the stylesheet, I removed the width line from #header; it didn't do anything, as you missed the ';' at the end of it, but looking at what it would do, I assumed it's better without it. This probably kept your margin settings from working as well.
-> Now, to keep that second line of the text nicely in the "header box" and to keep FireFox from bringing the next line (the line + home, etc.) into it, just define a nice height for it.

That gives us, xhtml:

<!-- header -->
<div id="header">
<img src="http://cory.goz.net/randompic/coryandally/rotate.php" width="75" height="75" class="logoimg1" alt="Cory and Allyson" />
<img src="http://cory.goz.net/randompic/morgan/rotate.php" width="75" height="75" class="logoimg1" alt="Morgan" />
<img src="http://cory.goz.net/randompic/zoey/rotate.php" width="75" height="75" class="logoimg2" alt="Zoey" />
<img src="http://cory.goz.net/randompic/sophie/rotate.php" width="75" height="75" class="logoimg2" alt="Sophie" />
<h1>Cory, Allyson, Morgan and Sophie</h1>
<h2>"who wouldn't be interested in everything we do?!"</h2>
</div>
<!-- end header -->

And CSS:

#header {
       margin-left: 0.5%;
       margin-right: 0.5%;
       height: 85px;
}
#header h1 {
       text-align: center;
       color: #a1b7e3;
       font-size: 25px;
       font-weight: bold;
}
#header h2 {
       text-align: center;
}
#header .logoimg1 {
       float: left;
}
#header .logoimg2 {
       float: right;
}

[cmg27]

thanks! I have not done any CSS work in a while and could not wrap my head around it for some reason.