No replies
usbToaster
Offline
newbie
Last seen: 9 years 45 weeks ago
Timezone: GMT+1
Joined: 2011-11-01
Posts: 1
Points: 2

Hey everyone!

I'm relatively new to using CSS and I just ran into a problem I can't seem to fix. My page consists of three elements; a logo, a menu and text-content. At first, I used absolute positioning to place the menu and the content, but then my container-background didn't show, so I used floats instead. The problem is that I just can't seem to get te logo to stay behind the menu and now the top part of the menu isn't clickable.
<<
How can I fix this?

Here's the CSS code:

Quote:

@charset "utf-8";
/* CSS Document */

/*Independant formatting*/
html {
margin:0;
padding:0;
}

body {
margin:0;
padding:0;
}

/*DIVs*/
#container {
position:relative;
margin:0 auto;
width:1000px;
background-image:url(images/contentbackground.png);
background-repeat:repeat-y;
}

#content {
position:absolute;
top:0px;
left:253px;
padding-top:280px;
padding-left:50px;
padding-right:20px;
width:677px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
letter-spacing:.15em;
line-height:22px;
color:#3e3e3e;
background-color:#0F3;
}

#menu {
padding-top:300px;
width:253px;
background-color:#6CF;
z-index:1;
}

/*CLASSes*/
.clear {
clear:both;
}

#logo {
z-index:9;
position:absolute;
top:-90px;
left:-100px;
margin:0;
padding:0;
width:647px;
height:456px;
background-image:url(images/logo.png);
background-repeat:no-repeat;
background-color:#C33;
}

#menu ul {
list-style-type:none;
}

/*MENU common formatting*/
.home, .bio, .ps, .ai, .id, .fl, .mar, .overig, .workflow, .cv {
width:213px;
height:44px;
background-repeat:no-repeat;
display:block;
text-indent:-9999px;
margin-bottom:20px;
}

/*MENUlinks*/
.home:link { background-image:url(images/menu/home.png); }
.bio:link { background-image:url(images/menu/bio.png); }
.ps:link { background-image:url(images/menu/ps.png); }
.ai:link { background-image:url(images/menu/ill.png); }
.id:link { background-image:url(images/menu/ind.png); }
.fl:link { background-image:url(images/menu/flash.png); }
.mar:link { background-image:url(images/menu/mar.png); }
.overig:link { background-image:url(images/menu/overig.png); }
.workflow:link { background-image:url(images/menu/work.png); }
.cv:link { background-image:url(images/menu/cv.png); }

/*MENUhovers*/
.home:hover { background-image:url(images/menu/homehover.png); }
.bio:hover { background-image:url(images/menu/biohover.png); }
.ps:hover { background-image:url(images/menu/pshover.png); }
.ai:hover { background-image:url(images/menu/illhover.png); }
.id:hover { background-image:url(images/menu/indhover.png); }
.fl:hover { background-image:url(images/menu/flashhover.png); }
.mar:hover { background-image:url(images/menu/marhover.png); }
.overig:hover { background-image:url(images/menu/overighover.png); }
.workflow:hover { background-image:url(images/menu/workhover.png); }
.cv:hover { background-image:url(images/menu/cvhover.png); }

Here's the HTML code:

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ik Ben Bas .com</title>
<style type="text/css" title="currentStyle" media="screen">
@import "style2.css";
</style>
</head>

<body>
<div id="container">

<div id="logo">
<h1>Ik Ben Bas .com</h1>
</div>

<div id="menu">
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="bio">Biografie</a></li>
<li><a href="#" class="ps">Photoshop</a></li>
<li><a href="#" class="ai">Illustrator</a></li>
<li><a href="#" class="id">Indesign</a></li>
<li><a href="#" class="fl">Flash</a></li>
<li><a href="#" class="mar">Marketing</a></li>
<li><a href="#" class="overig">Overig</a></li>
<li><a href="#" class="workflow">Workflow</a></li>
<li><a href="#" class="cv">CV</a></li>
</ul>
<br class="clear" />
</div>

<div id="content">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis, dolor eu ornare sagittis, elit quam consequat purus, in pharetra purus tellus sed urna. Quisque et fermentum sapien. Suspendisse urna enim, iaculis sed lacinia sed, tempus at dolor. Fusce sed accumsan lectus. Quisque ut ligula vel sapien fringilla posuere. Donec in arcu quis ligula tincidunt tristique quis vitae ipsum. Donec pretium semper sapien feugiat condimentum. In nec eros vestibulum mi bibendum dictum et vitae enim. Etiam nulla lacus, posuere quis rhoncus id, mollis vel leo. Sed varius nisl ut est congue a dapibus erat dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam non velit et mi convallis condimentum vitae ut quam. Etiam suscipit euismod sem, dictum aliquet justo porttitor eget.
</p><p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus pellentesque sollicitudin metus, a blandit lacus consequat et. Nulla iaculis interdum mauris, sit amet varius sem fermentum ac. Vivamus sapien erat, porta et venenatis eu, lacinia sit amet magna. Cras et elit vel nisl vestibulum mattis sit amet a sem. Donec malesuada nisi at sapien eleifend bibendum. Proin posuere bibendum magna nec egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sollicitudin interdum porta. Aliquam posuere mauris a odio interdum sed ornare erat cursus. Vestibulum pretium tincidunt tincidunt. Fusce commodo ultricies ante, vel ultricies magna iaculis non. Quisque congue condimentum felis, a laoreet libero convallis sit amet. Duis vulputate auctor mi luctus tempor. Donec mi elit, dapibus non laoreet in, faucibus eu sapien.
</p><p>
Praesent purus libero, vulputate eu hendrerit facilisis, convallis in sem. Aliquam hendrerit justo nec arcu accumsan lacinia. Curabitur non tellus nibh. Quisque quis fringilla nulla. Aenean non iaculis erat. Praesent ac malesuada sem. Proin consectetur lorem ac lorem ultricies pretium. Fusce sodales condimentum augue in commodo. Aliquam molestie lectus at tellus suscipit id tempus eros hendrerit.
</p><p>
Nam dapibus nulla et turpis iaculis non mollis velit cursus. Duis iaculis neque quis felis porta porta. Donec eget semper tellus. Vestibulum tellus orci, dictum pellentesque molestie quis, tincidunt fringilla nulla. Quisque sollicitudin diam tincidunt nulla aliquam sit amet eleifend risus pellentesque. Nunc facilisis, nibh sit amet ultrices ultricies, urna urna convallis nulla, nec rhoncus ipsum lorem sit amet turpis. Pellentesque sagittis bibendum volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tempor, augue a placerat accumsan, magna eros imperdiet tellus, pellentesque dapibus mi enim ut nisl.
</p><p>
Fusce venenatis mollis urna, ullamcorper adipiscing lorem lacinia in. Cras ligula ipsum, faucibus sodales viverra nec, accumsan eu orci. Vivamus venenatis libero ac risus ornare accumsan. Fusce imperdiet convallis eros, nec sollicitudin ligula consectetur eu. Nam eget leo mauris. Curabitur et turpis at elit elementum suscipit. Nam venenatis dignissim tellus quis tincidunt. Ut tristique augue adipiscing libero facilisis rhoncus.
</p><p>
Fusce congue, nisl et lobortis malesuada, ipsum turpis ultricies ante, sit amet blandit massa nulla eu metus. Cras risus ligula, adipiscing malesuada porta id, egestas ut mi. Fusce risus ante, interdum sed dignissim nec, euismod sed sem. Suspendisse faucibus dapibus sem vitae consectetur. Integer ut dui est, ac pellentesque est. Sed consectetur, massa et ultricies mattis, libero eros sollicitudin enim, eu aliquam justo dui in tortor. Suspendisse porta nisi sit amet ligula dapibus bibendum gravida erat elementum. Suspendisse ac ipsum lorem, fermentum tristique nulla. Morbi bibendum tempus felis, eget aliquet nulla rhoncus ac. Ut pharetra metus ac nisi interdum eget ornare lacus laoreet. Curabitur gravida, nibh id tristique dapibus, erat arcu congue augue, et accumsan erat arcu eu justo. Quisque tempor nulla id justo suscipit et imperdiet mi ornare. In ut lacus vel metus rutrum fermentum.
</p>
<br class="clear" />
</div>
<br class="clear" />
</div>

</body>
</html>