Huhu,
folgendes Webdesign möchte ich gerade in CSS umsetzen:
http://www.imagebanana.com/img/ike44jns/01.jpg
Ihr seht, dass unter dem Content zwei Objekte folgen: Shoutbox und Umfrage. Nun versuche ich diese Elemente mittels CSS einzufügen. Wenn ich floaten möchte, geschieht folgendes:
http://www.imagebanana.com/img/d7ygceqe/02.jpg
Wenn ich die float:; - Befehle entferne, zieht sich das weiß durch, führt aber natürlich nicht zum gewünschten Ergebnis:
http://www.imagebanana.com/img/0twe999/03.jpg
Was muss ich nun tun, um zum gewünschten Ergebnis wie im angefertigten Webdesign zu kommen?
Am Rande eine kleine Frage: Bei der transparenten Navigation seht ihr ja nach jedem Menüpunkt eine Linie. Nach dem ersten Punkt erscheint diese heller, was daran liegt, dass sie über dem transparenten Hintergrund bei den li-Tags gesetzt ist. Der Hintergrund vermischt sich somit mit dem schwarzen Balken und es kommt bei der Linie zu einer Farbänderung, die unschön aussieht.
Danke für eure hoffentlich folgende Hilfe! =)
Damit ihr versteht, was hier vor sich geht, ist hier der relevante Code (img, url usw., also irrelevantes, zur Vereinfachung ausgelassen):
folgendes Webdesign möchte ich gerade in CSS umsetzen:
http://www.imagebanana.com/img/ike44jns/01.jpg
Ihr seht, dass unter dem Content zwei Objekte folgen: Shoutbox und Umfrage. Nun versuche ich diese Elemente mittels CSS einzufügen. Wenn ich floaten möchte, geschieht folgendes:
http://www.imagebanana.com/img/d7ygceqe/02.jpg
Wenn ich die float:; - Befehle entferne, zieht sich das weiß durch, führt aber natürlich nicht zum gewünschten Ergebnis:
http://www.imagebanana.com/img/0twe999/03.jpg
Was muss ich nun tun, um zum gewünschten Ergebnis wie im angefertigten Webdesign zu kommen?
Am Rande eine kleine Frage: Bei der transparenten Navigation seht ihr ja nach jedem Menüpunkt eine Linie. Nach dem ersten Punkt erscheint diese heller, was daran liegt, dass sie über dem transparenten Hintergrund bei den li-Tags gesetzt ist. Der Hintergrund vermischt sich somit mit dem schwarzen Balken und es kommt bei der Linie zu einer Farbänderung, die unschön aussieht.
Danke für eure hoffentlich folgende Hilfe! =)
Damit ihr versteht, was hier vor sich geht, ist hier der relevante Code (img, url usw., also irrelevantes, zur Vereinfachung ausgelassen):
HTML:
<body>
<!-- WRAPPER -->
<div id="wrapper">
<!-- NAVIGATION -->
<div id="navi">
</div>
<!-- ENDE NAVIGATION -->
<!-- NAVIGATION -->
<div id="navi_overlay">
<ul>
<li><span id="first_link">startseite</span></li>
<li>news</li>
<li>über mich</li>
<li>tutorials</li>
<li>flash</li>
</ul>
</div>
<!-- ENDE NAVIGATION -->
<!-- ALLES -->
<div id="all">
<!-- CONTENT -->
<div id="content">
<h2>02.02.2010 - 21:49 Uhr</h2>
<h1>Es weihnachtet bald!</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd <a href="#">gubergren</a>, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<img src="rikkupq7.png" />
</div>
<!-- ENDE CONTENT -->
<div id="shoutbox">
asdasd
</div>
<div id="poll">
asdasdasd
</div>
</div>
<!-- ENDE ALLES -->
</div>
<!-- ENDE WRAPPER -->
</body>
HTML:
* {
padding: 0;
margin: 0;
}
body {
background: #335a6b;
font-family: Arial, Helvetica, sans-serif;
color: #53524e;
}
#wrapper {
width: 760px;
margin: auto;
position: relative;
}
#all {
background: white;
border-top: 15px solid #53524e;
border-bottom: 15px solid #53524e;
margin-top: 59px;
}
#content {
margin-top: 30px;
padding-left: 240px;
padding-right: 30px;
height: 400px;
border-bottom: 15px solid #53524e;
}
#navi {
left: 26px;
width: 190px;
height: 517px;
background: url(navi.gif);
opacity: 0.5;
position: absolute;
padding-left: 0;
border: 1px solid #53524e;
}
#navi_overlay {
margin-left: 1px;
left: 26px;
width: 191px;
height: 515px;
position: absolute;
padding-left: 0;
}
#navi_overlay li {
padding-left: 10px;
list-style-type: none;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #bebdbc;
color: #53524e;
margin-right: 1px;
}
#shoutbox {
width: 360px;
margin: 10px;
background: red;
}
#poll {
width: 360px;
margin: 10px;
background: green;
}
#first_link {
color: white;
}
