paper107
Threadersteller
Dabei seit: 15.01.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 15.01.2009 12:39
Titel css div container höhe? |
  |
|
hallo zusammen, bin ziehmlicher anfänger bezüglich tabellenlosem aufbau einer webseite also zerreisst mich nicht gleich =) hoffe ich bin hier gut aufgehoben,
geht darum das ich eine webseite ohne tabellen nur mit css schreiben möchte. hab schon mal den anfang gemacht und die webseite würde auch so aussehen wie sie soll. zur veranschaulichung:
| Code: | <body>
<div id="links"></div>
<div id="nav1"></div>
<div id="nav2"></div>
<div id="nav3"></div>
<div id="nav4"></div>
<div id="center1"></div>
<div id="center2"></div>
<div id="center3"></div>
<div id="center4"></div>
<div id="content"></div>
<div id="contentright"></div>
<div id="footer"></div>
</body> |
hier mal der inhalt der im body der index.html
| Code: | body {
padding: 0px;
margin: 0px;
background-color: #4b525a;
}
#links {
position: absolute;
top: 0px;
left: 0px;
width: 18px;
height: 1190px;
background-color: #d2d3d3;
}
#nav1 {
position: absolute;
top: 0px;
left: 18px;
width: 217px;
height: 15px;
background-color: #4b525a;
}
#nav2 {
position: absolute;
background-image: url(logo.gif);
top: 15px;
left: 18px;
width: 217px;
height: 164px;
background-color: #ffffff;
}
#nav3 {
position: absolute;
top: 179px;
left: 18px;
width: 217px;
height: 199px;
background-color: #4b525a;
}
#nav4 {
position: absolute;
top: 378px;
left: 18px;
width: 217px;
height: 776px;
background-color: #70af28;
}
#center1 {
position: absolute;
top: 0px;
left: 235px;
width: 740px;
height: 15px;
background-color: #ffffff;
}
#center2 {
position: absolute;
top: 15px;
left: 235px;
width: 740px;
height: 138px;
background-color: #70af28;
}
#center3 {
background-image: url(nav.gif);
position: absolute;
top: 153px;
left: 235px;
width: 740px;
height: 25px;
background-color: #4b525a;
}
#center4 {
background-image: url(start.jpg);
position: absolute;
top: 179px;
left: 235px;
width: 559px;
height: 199px;
background-color: #ffffff;
}
#content {
position: absolute;
top: 378px;
left: 235px;
width: 559px;
height: 776px;
background-color: #ffffff;
}
#contentright {
position: absolute;
top: 179px;
left: 794px;
width: 181px;
height: 1011px;
background-color: #d2d3d3;
}
#footer {
position: absolute;
top: 1154px;
left: 18px;
width: 776px;
height: 36px;
background-color: #4b525a;
} |
hier die css datei dazu
die darstellung passt und auch meinen inhalt könnt ich hinschreiben wo ich möchte und würde so passen, mein problem ist die höhe, ich drücks mal so aus und ich hoffe mich versteht jemand =)
links das grüne feld sowie rechts davon das weiße feld sind für navi und content gedacht, rechts davon das graue soll frei bleiben evtl. auch inhalt. unten das dunkelgraue sollen die footerlinks rein.
soweit wirds auch so dargestellt nur hab ich für das grüße, das weiße und das hellgraue feste werte vergeben und somit hab ich immer scrolleisten. bei tabellen hätt ichs jetzt so gemacht das grün, weiß und hellgrau 100% bekommen hätten und hätten sich so an den bildschirm angepasst wenn navigation und/oder content nicht über die seite hinaus gehen, setzte ich die höhenangaben jetzt auf 100% bekomme ich die im ie7 auch allerdings da sie ja von der höhe her versetzt werden hören sie unten unterschiedlich "hoch" auf und somit hab ich wieder die scrolleiste. ziel ist das die footer leiste unten am ende des browserfensters "klebt" es sei denn der inhalt im weissen contentbereich ist größer ,d ann hab ich ja so oder so scrolleisten.
so würds aussehen: 
|
|
Willkommen auf dem Portal für Mediengestalter
