On Mon, Aug 9, 2010 at 1:19 PM, Joe Jackson <[email protected]>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 [[email protected]]
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/
