On Mon, Aug 9, 2010 at 1:19 PM, Joe Jackson <priory...@googlemail.com>wrote:
> Hi > > How can I have the logo sit on top of the slideshow image? At present the > logo pushes the slideshow image further down the page? I have tried Z > index > on the logo but it still pushes the slideshow down the page instead of the > logo sitting on top of the slideshow? > > <div id="mainheader"> > > <div id="logo"></div> > <div id="navigation"> > <ul id="navigs"> > <li><a href="index.html">HOME</a></li> > <li><a href="aboutus.html">ABOUT US</a></li> > <li><a href="classes.html">CLASSES</a></li> > <li><a href="contact.html">CONTACT US</a></li> > </ul> > </div> > > </div> > <div id="slideshow-border"> > <div id="slideshow"> > > <div id="cycle-home"> > <img src="images/hp1.jpg" alt="Dance Studios" /> > <img src="images/hp2.jpg" alt="Music and Dance Studio" /> > <img src="images/hp3.jpg" alt="test" /> > <img src="images/hp4.jpg" alt="test" /> > > </div> > > My CSS for these elements are > > #logo { > width: 211px; > height: 177px; > float: left; > margin: 0px 0px 0px 10px; > background: url(../images/logo1.png) > } > > > #slideshow-border { > width: 900px; > height: 348px; > padding: 10px; > margin: 0 auto; > background: #FFF; > } > #slideshow { > width: 900px; > height: 348px; > overflow: hidden; > position: relative; > background: #222; > } > Try absolute positioning on the logo. set the position of the slideshow to relative, then nest the logo inside of it and adjust the positioning as such. #logo { width: 211px; height: 177px; background: url(../images/logo1.png) position:absolute; /* edits start here */ left:5px; top:5px; /* end of edits */ } #slideshow-border { width: 900px; height: 348px; padding: 10px; margin: 0 auto; background: #FFF; } #slideshow { width: 900px; height: 348px; overflow: hidden; position: relative; background: #222; } <div id="mainheader"> <div id="navigation"> <ul id="navigs"> <li><a href="index.html">HOME</a></li> <li><a href="aboutus.html">ABOUT US</a></li> <li><a href="classes.html">CLASSES</a></li> <li><a href="contact.html">CONTACT US</a></li> </ul> </div> </div> <div id="slideshow-border"> <div id="slideshow"> <!-- insert logo --> <div id="logo"></div> <div id="cycle-home"> <img src="images/hp1.jpg" alt="Dance Studios" /> <img src="images/hp2.jpg" alt="Music and Dance Studio" /> <img src="images/hp3.jpg" alt="test" /> <img src="images/hp4.jpg" alt="test" /> </div> Many people may think this would affect SEO benefits of having your logo at the top of the html, but seeing how there's no actual content in the logo area, a search engine won't see anything. And because it's a div, not even an h1 tag, it will have no SEO costs. However, if you would like the SEO benefits, you can use an h1 tag instead of a div, and set the text-indent to some huge number (ie text-indent:-5000px;) then set the overflow to hidden so that nobody ever sees it (overflow:hidden;). Hope this helps, Alex Mitchell http://gumware.com/ ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/