mAu
Erfahrenes Mitglied
Hi !
Ich hab mich heute mal etwas mit dem Thema DIV's statt Tabellen beschäftigt. Um mich etwas einzuarbeiten hab ich eine Kleine Page gemacht (nur testsite).
Ich poste erstmal den Quelltext, damit sie jeder ma anschauen kann.
css file
So, nun ist aber das Contentfenser nicht ganz am rechten Rand der Page, also, wenn man den rechten Border von dem Header verlängern würde, dass es dann mit dem rechten Border des Contents auf einer Linie liegt. Das klappt irgendwie nicht ...
Und wenn ich die Navigation width: 15% und dann das Content auf width: 85% stelle, springt es in die nächste Zeile, obwohl im Navigations-DIV float: left; eingetragen ist ...
Fragen verstanden ?
Etwas kompliziert ausgedrückt ... 
mfg mAu
*p.s.*: Falls ich es in schlechtem CSS Stil geschrieben hab, sgat es ruhig, ich will ja von Anfang an das "reine" CSS lernen
Ich hab mich heute mal etwas mit dem Thema DIV's statt Tabellen beschäftigt. Um mich etwas einzuarbeiten hab ich eine Kleine Page gemacht (nur testsite).
Ich poste erstmal den Quelltext, damit sie jeder ma anschauen kann.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css webpage test !</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body >
<div id="page">
<!-- HEADER -->
<div id="logo">
<div id="logotext">css rockt !</div>
</div>
<!-- END HEADER -->
<div id="middle">
<!-- NAVIGATION -->
<div id="navi">
<div id="navi-top">Navigation</div>
<div id="navi-links">
Links <br />
Links <br />
Links <br />
Links <br />
Links <br />
</div>
</div>
<!-- END NAVIGATION -->
<!-- START CONTENT -->
<div id="cont">
<div id="cont-top">Content ...</div>
<div id="cont-text">Text Text </div>
</div>
<!-- END CONTENT -->
</div>
</div>
</body>
</html>css file
Code:
/*
Die Page verzichtet voll auf Tabel Tags. Sie ist zu 100% mit css formatiert.
Die Page ist nach folgendem Muster aufgebaut:
-body
-logo
-content
-navi
+navi-top
-cont
+cont-top
-footer
*/
body{
background-color: #f0f0f0;
color: #000000;
font-family: arial,verdana;
font-size: 11px;
text-align: center;
}
#page{
background-color: #e0e0e0;
border: 1px solid #000000;
margin-top: 5px;
margin-bottom: 5px;
position: relative;
width: 60%;
white-space: nowrap;
text-align: left;
}
#logo{
background-color: #C0C7CB;
border: 1px solid #000000;
margin-top: 5px;
margin-left: 10px;
margin-right: 10px;
padding-top: 16px;
width: 100%;
height: 40px;
}
#logotext{
color: #456276;
font-size: 26px;
font-weight: bold;
text-align: center;
}
#navi{
background-color: #C0C7CB;
border: 1px solid #aaaaaa;
width: 15%;
text-align: left;
float: left;
}
#navi-top{
background-color: #2A505B;
color: #ffffff;
font-weight: bold;
text-align: center;
}
#navi-links{
color: #000000;
padding-left: 3px;
text-align: left;
}
#cont{
background-color: #C0C7CB;
border: 1px solid #000000;
margin-left: 4px;
width: 83%;
text-align: left;
}
#cont-top{
background-color: #2A505B;
color: #ffffff;
font-weight: bold;
text-align: center;
}
#cont-font{
color: #000000;
padding-left: 3px;
text-align: left;
}
#middle{
margin: 5px 10px 5px 10px;
width: 100%;
}So, nun ist aber das Contentfenser nicht ganz am rechten Rand der Page, also, wenn man den rechten Border von dem Header verlängern würde, dass es dann mit dem rechten Border des Contents auf einer Linie liegt. Das klappt irgendwie nicht ...
Und wenn ich die Navigation width: 15% und dann das Content auf width: 85% stelle, springt es in die nächste Zeile, obwohl im Navigations-DIV float: left; eingetragen ist ...
Fragen verstanden ?
Etwas kompliziert ausgedrückt ... mfg mAu
*p.s.*: Falls ich es in schlechtem CSS Stil geschrieben hab, sgat es ruhig, ich will ja von Anfang an das "reine" CSS lernen
Zuletzt bearbeitet:
