Hi, I was hoping somebody could help me with a CSS issue I'm experincing. I want to add a flash logo so that it appears within the header. The header is an image using the background attribute. I would like the flash logo to appear in the middle of the sky of the image, however, it only seems to want to display underneath the image. Another problem is that because the logo is now showing underneath the image, it is pushing the remainder of my content out of position. The link to the template with the flash logo is http://www.hire-limo-london.co.uk/TESTSITE2/ The link to the template without the flash logo (that works) is http://www.hire-limo-london.co.uk/TESTSITE1/ I would be grateful if someone could tell me what I'm doing wrong. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Limo hire London</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <? $page="home"; ?> <div id="header"> <div id="flashlogo"><object type="application/x-shockwave-flash" data="http://www.limotek.co.uk/images/logo.swf" width="353" height="77"> <param name="movie" value="http://www.limotek.co.uk/images/logo.swf" /> <param name="wmode" value="transparent" /> <img src="http://www.limotek.co.uk/images/logo.gif" width="353" height="77" alt="limotek logo" /></object></div> <div id="logo"> <h1><a href="#">Limo hire London</a></h1> </div> <div id="menu"> <ul> <li <? if ($page=="home") { ?>class="active"<? } ?>><a href="http://www.hire-limo-london.co.uk/TestSite1" title="">Limo hire</a></li> <li <? if ($page=="quote") { ?>class="active"<? } ?>><a href="http://www.hire-limo-london.co.uk/TestSite1/find-a-limo.php" title="">Find a limo</a></li> <li <? if ($page=="fleet") { ?>class="active"<? } ?>><a href="http://www.hire-limo-london.co.uk/TestSite1/fleet.php" title="">Fleet</a></li> <li <? if ($page=="events") { ?>class="active"<? } ?>><a href="http://www.hire-limo-london.co.uk/TestSite1/events.php" title="">Events</a></li> <li <? if ($page=="coverage") { ?>class="active"<? } ?>><a href="http://www.hire-limo-london.co.uk/TestSite1/coverage.php" title="">Coverage</a></li> <li <? if ($page=="about") { ?>class="active"<? } ?>><a href="http://www.hire-limo-london.co.uk/TestSite1/about-limotek.php" title="">About Us</a></li> <li <? if ($page=="contact") { ?>class="active"<? } ?>><a href="http://www.hire-limo-london.co.uk/TestSite1/contact-us.php" title="">Contact</a></li> </ul> </div> </div><div id="wrapper"> <div id="content"> etc. HTML: * { margin: 0; padding: 0; } body { margin-top: 220px; background: #000000 url(images/img01.jpg) no-repeat center top; font: normal small Verdana, Arial, Helvetica, sans-serif; color: #999999; } h1, h2, h3 { color: #FFFFFF; } h2 { } h3 { } p, blockquote, ul, ol { margin-bottom: 1.4em; line-height: 1.8em; text-align: justify; } p { } blockquote { margin-left: 2em; margin-right: 2em; font-style: italic; } ul { margin-left: 3em; } ul li { } ol { margin-left: 3em; } ol li { } a { text-decoration: none; color: #FFFFFF; } a:hover { text-decoration: underline; } .left { float: left; margin-right: 3px; } .right { float: right; margin-left: 3px; } /* Boxed Style */ .boxed { margin-bottom: 20px; } .boxed .title { margin: 0; padding: 5px 0; background: url(images/img07.gif) repeat-x left bottom; font-size: 1em; } .boxed .content { padding: 15px; } /* Post */ .post { } .post .title { padding: 10px 0; background: url(images/img07.gif) repeat-x left bottom; font-size: 1.6em; font-weight: normal; } .post .date { padding-top: 5px; font-size: .8em; font-weight: normal; } .post .date .month { } .post .date .day { } .post .date .year { } .post .meta { padding-bottom: 10px; background: url(images/img07.gif) repeat-x left bottom; font-size: .8em; } .post .meta p { margin: 0; line-height: normal; } .post .story { padding: 20px; } /* Header */ #header { height: 61px; background: url(images/img02.gif) repeat-x; } /* Header > Logo */ #flashlogo { top: 20px; left: 100px; } #logo { width: 700px; height: 19px; margin: 0 auto; padding: 6px 0 0 0; } #logo h1, #logo h2 { text-transform: uppercase; letter-spacing: 1px; font-size: 11px; } #logo h1 { float: left; } #logo h2 { float: right; } #logo a { } /* Header > Menu */ #menu { width: 700px; height: 27px; margin: 0 auto; } #menu ul { margin: 0; padding: 7px 0 0 0; list-style: none; } #menu li { display: inline; } #menu a { display: block; float: left; height: 25px; margin: 0 5px 0 0; padding: 2px 25px 0 25px; background: url(images/img03.gif) repeat-x; border: 1px solid #222222; text-align: center; font-size: 9px; font-weight: bold; color: #FFFFFF; } #menu a:hover { background-image: url(images/img04.gif); text-decoration: none; } #menu .active a { background-image: url(images/img05.gif); } /* Wrapper */ #wrapper { background: url(images/img06.gif) repeat-x; } /* Content */ #content { width: 700px; margin: 0 auto; padding: 20px 0 0 0; } /* Content > Main */ #main { float: right; width: 460px; } /* Content > Main > Welcome */ #welcome { padding-top: 5px; } /* Content > Main > Example */ #example { } /* Content > Sidebar */ #sidebar { float: left; width: 220px; } /* Content > Sidebar > Support */ #support { padding: 20px 15px; color: #FF8A00; } #support h2 { margin: 0; font-size: 1.3em; color: #FF8A00; } #support h3 { margin: 0; font-size: 1em; color: #FF8A00; } /* Content > Sidebar > Login */ #login { } #login form { } #login fieldset { border: none; } #login legend { display: none; } #login label { font-size: x-small; font-weight: bold; } #login input { margin-bottom: 5px; padding: 2px 5px; border: 1px solid #385B88; font-family: Verdana, Arial, Helvetica, sans-serif; } #inputtext1, #inputtext2 { color: #385B88; } #inputsubmit1 { background: #385B88; color: #FFFFFF; } #login p { font-size: .8em; } /* Content > Sidebar > Updates*/ #updates { } #updates ul { margin: 0; list-style: none; } #updates h3 { margin: 0; font: bold x-small Verdana, Arial, Helvetica, sans-serif; } #updates p { margin-bottom: 1.4em; font-size: smaller; line-height: normal; } /* Content > Sidebar > Partners*/ #partners { } #partners .content { padding: 10px 0; } #partners ul { margin: 0; border-bottom: 1px solid #D1BC5C; list-style: none; line-height: normal; } #partners li { padding: 10px; border-top: 1px solid #D1BC5C; } /* Footer */ #footer { clear: both; padding: 20px 50px; border-top: 4px solid #393F4D; background: #444C5D; } #footer p { width: 700px; margin: 0 auto; font-size: x-small; color: #FFFFFF; } #footer a { text-decoration: underline; color: #FFFFFF; } #footer a:hover { text-decoration: underline; } /* Footer > Legal */ #legal { } /* Footer > Links */ #links { } Code (CSS):
Try this: #flashlogo { position: relative; top: -220px; } Code (markup): If it works out for you, rep would be appreciated
Thanks HypertextFever. That worked and I'm now able to position the logo wherever I want. (rep given) The only problem now is that the other layout is now out of balance. i.e. in IE the header background image is now skewed to the right and the menu & title now fall below the grey banding whereas they should be inside it. In Firefox, the title and menu are below where they should be but the header background image seems ok. Is this because of the positioning: relative; statement? Link: http://www.hire-limo-london.co.uk/TESTSITE1
Thank you! Oh I see... sorry about that. Try this out: #flashlogo { position: absolute; top: 0px; } Code (markup):