Jag sitter och försöker bygga en sida i CSS och har fasliga problem med positioneringen av boxarna.
Hur jag än vrider och vänder på det hela är det ALLTID en eller flera boxar som envisas med att inte stanna på samma plats hela tiden. Får jag dem där jag vill att de ska vara så rör de sig garranterat när jag förminskar eller förstorar webläsarens fönster.
Är det någon som kan tala om vad jag gör för fel?
Koden:
<body>
<div id="Bakgrund">
<div id="Bild"></div>
<div id="Header"></div>
<div id="menycontainer">
<ul id="meny">
<li><a href="info.html">Info</a></li>
<li><a href="images.html">Images</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="discography.html>Discography</a></li> <li><a href="contact.html">Contact</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="guestbook/guestbook.php">Guestbook</a></li>
</ul>
</div>
<div id="Content"></div>
<div id="Nyhetsbox"></div>
<div id="RSS"></div>
<div id="Nyheter"></div>
<div id="Footer">
<div id="Player"></div>
<div id="Subscribe"></div>
</div>
</div>
</body>
och min css:
/*Bakgrund*/
#Bakgrund { background-color: #000; width: 900px; height: 750px; margin: 20px auto; padding: 0; border: solid 2px #eee1c0; }
#Bild { background-image: url(../images/bakgrund.jpg); background-repeat: no-repeat; position: relative; left: 467px; width: 433px; height: 488px; float: none; clear: none; margin-top: 15px; }
#Header { font-family: georgia; background-image: url(../images/header.jpg); background-repeat: no-repeat; background-position: 10px 10px; position: absolute; top: 15px; width: 800px; height: 100px; z-index: 2; }
/*Meny*/
#content{ position: absolute; z-index: 4; float: left; }
#menycontainer ul{ color: #2b2b2b; font: 70% georgia; position: relative; right: 21px; bottom: 135px; z-index: 4; margin-left: 10px; }
#menycontainer li{ position: relative; right: 10px; bottom: 135px; z-index: 4; display: inline; list-style: none; }
#menycontainer li a{ color: #fff; background: yellow; text-decoration: none; padding: 5px 7px; margin-right: 12px; position: relative; right: 10px; bottom: 135px; z-index: 4; border: solid 1px #2b2b2b; }
#menycontainer a:link{ color: #2b2b2b; position: relative; right: 10px; bottom: 135px; z-index: 4; }
#menycontainer a:visited{ color: #2b2b2b; position: relative; right: 10px; bottom: 135px; z-index: 4; }
#menycontainer a:hover{ color: #fff; position: relative; right: 10px; bottom: 135px; z-index: 4; border: solid 1px #ffffff; }
/*Boxar*/
#Content { background-color: yellow; position: absolute; top: 150px; width: 561px; height: 440px; z-index: 3; overflow-x: hidden; float: none; clear: none; margin-top: 10px; margin-left: 10px; }
#Footer { background-color: olive; position: absolute; top: 600px; width: 561px; height: 172px; z-index: 3; float: none; clear: none; margin-left: 10px; }
#Player { background-color: blue; position: absolute; top: 11px; left: 0; width: 275px; height: 151px; z-index: 4; float: none; clear: none; }
#Subscribe { background-color: red; position: absolute; top: 11px; right: 0; width: 275px; height: 151px; z-index: 5; float: none; clear: none; }
#Nyhetsbox { background-color: orange; position: absolute; top: 600px; left: 10px; right: 10px; width: 331px; height: 172px; z-index: 3; }
