xthetronx
Erfahrenes Mitglied
Hallo zusammen,
meine Suche im Forum hat mir leider keine Antwort geliefert, deshalb meine Bitte um Hilfe.
Ich habe mir ein CSS Layout zusammen gebastelt, was soweit funktioniert, bis ich zu den Div s komme, welche sowohl neben, als auch untereinander angeordnet sein sollen.
Zur Veranschaulichung habe ich mal einen Screenshot angehängt.
Ich bin nicht farbenblind, ist nur zum besseren Verständniss so bunt. ;-)
Was ich erreichen möchte ist, dass das DIV "Unten Links" unterhalb von DIV "Oben Links" angezeigt wird, mit einem Abstand von 0.5em, also margin: 0 0 0.5em
Auf der rechten Seite soll es genauso sein.
Leider wird das gelbe "Unten Links" DIV nur neben dem grünen DIV "Oben Links angezeigt.
Unten mein bisheriger Code.
Bin dankbar für eure Vorschläge.
Gruß
Torsten
meine Suche im Forum hat mir leider keine Antwort geliefert, deshalb meine Bitte um Hilfe.
Ich habe mir ein CSS Layout zusammen gebastelt, was soweit funktioniert, bis ich zu den Div s komme, welche sowohl neben, als auch untereinander angeordnet sein sollen.
Zur Veranschaulichung habe ich mal einen Screenshot angehängt.
Ich bin nicht farbenblind, ist nur zum besseren Verständniss so bunt. ;-)
Was ich erreichen möchte ist, dass das DIV "Unten Links" unterhalb von DIV "Oben Links" angezeigt wird, mit einem Abstand von 0.5em, also margin: 0 0 0.5em
Auf der rechten Seite soll es genauso sein.
Leider wird das gelbe "Unten Links" DIV nur neben dem grünen DIV "Oben Links angezeigt.
Unten mein bisheriger Code.
HTML:
<!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=iso-8859-1" />
<title>Testseite</title>
<style type="text/css">
body {
color: black; background-color: gray;
font-size: 90.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0 3em 0 3em; padding: 1em;
min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
div#content{
border:1px solid white;
padding:0 0em;
}
div#header {
margin: 0 0em 0em 0em;
padding: 0 30em;
height:108px;
/*background-image:url(fileadmin/template/images/header_background.jpg);*/
background-color:#0033CC;
}
ul#navigation {
margin: 0.0em 0 0.1em; padding: 0.1em 0em 0em;
height:29px;
background-image:url(fileadmin/template/images/navi_background.gif);
font-size:14px;
font-weight:normal;
border-bottom:1px solid white;
}
ul#navigation li{
list-style:none;
display:inline;
}
ul#navigation a, ul#navigation span {
float:left; width:5em;
margin: 0.0em; padding: 0.41em 1em 0.5em;
text-decoration: none; font-weight: normal; text-align:center;
color: maroon;
border-right:1px solid white;
border-left:1px solid white;
}
* html ul#navigation a, * html ul#navigation span { /* Korrektur fuer IE 5.x */
width: 8em;
w\idth: 6em;
}
ul#navigation a:hover, ul#navigation span {
border-color: white;
background-image:url(fileadmin/template/images/hintergrund_rot.jpg);
}
div#diashow {
margin: 0 0 0.5em 0;
height:100px;
background-image:url(fileadmin/template/images/diashow_background.jpg);
}
div#mitte {
margin: 0 12em 1em 16em;
padding: 0 1em;
border: 1px dashed silver;
background-color:#FF00FF;
}
div#oben_links {
font-size: 0.83em;
float: left; width: 18em;
margin: 0 0 1.2em; padding: 0;
border: 1px dashed silver;
background-color:#009966;
}
div#unten_links {
font-size: 0.83em;
float: left; width: 18em;
margin: 0 0 1.2em; padding: 0;
border: 1px dashed silver;
background-color:#FFFF00;
}
div#oben_rechts {
font-size: 0.9em;
float: right; width: 12em;
margin: 0 0 1.1em; padding: 0;
background-color: #e7e7e7; border: 1px dashed silver;
}
div#unten_rechts {
}
p#Fusszeile {
clear: both;
font-size: 0.9em;
margin: 0; padding: 0.1em;
text-align: center;
/*background-image:url(fileadmin/template/images/infokasten_header.gif);*/
background-color:#000066;
border-left: 1px solid white;
border-right:1px solid white;
border-bottom:1px solid white;
}
</style>
</head>
<body>
<div id="content">
<div id="header"></div>
<ul id="navigation">
<li><a href="../seite.htm">Home</a></li>
<li><a href="../seite2.htm">Seite</a></li>
<li><a href="../seite3.htm">Seite</a></li>
<li><a href="../seite3.htm">Seite</a></li>
<li><a href="../seite3.htm">Seite</a></li>
<li><a href="../seite3.htm">Seite</a></li>
<li><a href="../seite3.htm">Seite</a></li>
<li><a href="../seite3.htm">Seite</a></li>
</ul>
<div id="diashow"></div>
<div id="oben_links">Oben Links<br />
<br />
<br />
<br /><br />
<br />
<br />
</div>
<div id="unten_links">Unten Links<br />
<br />
<br />
<br />
</div>
<div id="oben_rechts">Oben Rechts<br />
<br />
<br />
<br />
<br />
</div>
<div id="mitte">Inhalt<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
</div>
</div>
<p id="Fusszeile">Fusszeile</p>
</body>
</html>
Gruß
Torsten