I'm just starting to learn about HTML and I'm trying to create a header with a logo overlapping on an image slider. I followed the method mentioned in this post: How would you make two <div>s overlap?
Unfortunately, I'm still having trouble getting the logo to overlap the slider properly.
Here's how it currently looks:
HTML
<div id="logo"><img src="engine1/logo.png" /></div>
<div id="content"><div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/1.jpg" alt="1" title="1" id="wows1_0"/></li>
<li><img src="data1/images/2.jpg" alt="2" title="2" id="wows1_1"/></li>
</ul></div>
<span class="wsl"><a href="http://wowslider.com">Gallery Javascript</a> by WOWSlider.com v5.0</span>
<div class="ws_shadow"></div>
</div></div></div>CSS
#wowslider-container1 {
zoom: 1;
position: relative;
max-width:940px;
margin:0px auto 0px;
z-index:90;
border:none;
text-align:left;
font-size: 10px;
}
#wowslider-container1 .ws_images ul {
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#html, body {
width: 940px;
margin: auto;
}
#logo {
position: absolute;
left: 75px;
top: 0px;
width: 150px;
height: 150px;
z-index: 2;
}
#content {
margin-top: 100px;
}