3Dnavigator
Erfahrenes Mitglied
Hallo Zusammen!
Ich arbeite mich gerade nach jahrelangem Tabellendesignen endlich in CSS ein. Nun möchte ich untenstehendes "Layout" Umsetzen, komme aber schon bei der Aufteilung nicht weiter. Auf der mittleren "Design-Zeile" wird ständig die letzte Spalte nach unten geschoben... Kann mir da jemand helfen
Vielen Dank schon im Voraus!
3Dnavigator
design.htm:
design.css:
basic.css:
Ich arbeite mich gerade nach jahrelangem Tabellendesignen endlich in CSS ein. Nun möchte ich untenstehendes "Layout" Umsetzen, komme aber schon bei der Aufteilung nicht weiter. Auf der mittleren "Design-Zeile" wird ständig die letzte Spalte nach unten geschoben... Kann mir da jemand helfen
Vielen Dank schon im Voraus!
3Dnavigator
design.htm:
HTML:
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="./styles/basic.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="./styles/design.css" media="screen, projection" />
</head>
<body><div id="container">
<div id="topdiv"> </div><!-- topdiv -->
<div id="leftdiv"> </div><!-- leftdiv -->
<div id="navigation">
<ul>
<li>Navipunkt 1</li>
<li>Navipunkt 2</li>
</ul>
</div><!-- navigation -->
<div id="fivepix"><img src="./images/spacer.gif"></div><!-- fivepix -->
<div id="contentdiv">
Content-Bereich
</div><!-- contentdiv -->
<div id="rightdiv"> </div><!-- rightdiv -->
<div id="bottomdiv"> </div><!-- bottomdiv -->
</div><!-- container -->
</body>
</html>design.css:
Code:
body {
color: #000000;
background: #FFFFFF;
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
#container {
width: 758px;
margin: 0 auto;
text-align: left;
}
#topdiv {
height: 220px;
width: 758px;
background-image: url(../images/red_top.jpg);
background-position: top;
background-repeat: no-repeat;
}
#leftdiv {
height: 360px;
width: 19px;
background-image: url(../images/red_left.jpg);
background-position: top;
background-repeat: repeat-y;
float: left;
}
#rightdiv {
height: 360px;
width: 19px;
background-image: url(../images/red_right.jpg);
background-position: top;
background-repeat: repeat-y;
float: right;
}
#bottomdiv {
height: 19px;
width: 758px;
background-image: url(../images/red_bottom.jpg);
background-position: top;
background-repeat: no-repeat;
}
#navigation {
height: 360px;
width: 169px;
float: left;
}
#fivepix {
width: 5px;
float: left;
}
#contentdiv {
height: 360px;
width: 565px;
}basic.css:
Code:
* {
margin: 0px;
padding: 0px;
}
html, body {
border: 0 solid;
}
a img {
border: 0 none;
}
th,td {
text-align: left;
}
h1, h2, h3 {
background: transparent;
}
ul {
list-style-type: square;
}