Warped Template

Hi,

I've recently got to work on a new Web Template, I'm trying to add two images (of flags) into the header, but once this is done it knocks the content out of whack.

The website is: www.joannaporter.com

Can anyone help explain why this is happening, I'm really new to all this and so a little tip off here or there would be lovely!

Thanks

where is that code from ?

The "isi" class must have the same positionning as the top and bottom div

Try this. Replace:

<img src="flags/esp.jpg" alt="Lengua español" align="right" height="25"
width="40" /><img src="flags/eng.jpg" ;alt="English language"
align="right" height="25" width="40" />

With:

<div align="right"><img src="flags/esp.jpg" alt="Lengua español" height="25"
width="40" /><img src="flags/eng.jpg" alt="English language" height="25" width="40" /></div>

try adding this


#content .isi {
background: #ECF1B1 url(images/loadfoo_layoutv2_cut_08.gif) repeat-y center;
margin: auto;
margin: 0 0px 0 14px;
padding: 0 0 0 50px;
width: 840px;
}

adding the margin: auto should center your div on the page u may also want to do the same for the rest of your divs and also giving them a set width to be sure everything is working properly all the time

also not sure why you have a semi-colon here but u should prolly remove it and put the </ul> tag b4 the image coding since they r not a listed item of the unordered list but just slapped into it and throwing it out of whack my guess is that is the problem right there


<img src="flags/eng.jpg" ;alt="English language"
align="right" height="25" width="40" /></ul>

The flags are not the problem here. Removing the flags entirely from your html does not sort the text alignment in .isi.

On the alignment, I don't think there's anything too far off with the css. I think your html is wrong. You have a #wrapper div which is centred, unlike anything else. This div is, however, only enclosing #header, everything else is outside it.

I think you have too many </div> statements at line 21. Remove one of these and put it right at the bottom before your </body> tag.

With no other changes this sorts out your middle alignment.

Re the flags themselves, at the moment you do have an errant semi-colon as others have indicated, but you also have the flag <img> tags within the <ul> tags for your menu.

If the flags are to be part of your menu then wrap the <img> tags with <li> tags like the rest of the menu, and remove the align="right" attribute.

If not they just need to be outside the <ul> tags. No need to wrap them with divs.

Hope that makes sense.