17.06.2010, 14:54
|
|||
|
|||
CSS Style Seite komplett 100% Höhe
Hallo,
meine Seite sieht vom Code derzeit so aus: HTML-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" xml:lang="de" > <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <!--Platz für Meta-Tags//--> <link rel="stylesheet" type="text/css" href="inc/style.css" /> </head> <body> <div id="website"> <div id="header"> <h1>Hier kommt der Inhalt</h1> </div> <div id="navigation"> <div class="menu"><ul class="nav"> <li><a class="menu" href="index.php">Startseite</a></li> <li><a href="#" class="menu" id="active">Seite2</a></li> <li><a class="menu" href="seite3.php">Seite3</a></li> </ul> </div> </div> <div id="inhalt"> <!--START INHALT//--> <h1>Seite 2</h1> <!--ENDE INHALT//--> </div> <div style="clear:both"></div> <div id="footer"> ©2010 </div> </div> </body> </html> Code:
/*<![CDATA[*/
/* Verhalten des Body-Bereichs
*/
body{
font-size:smaller;
font-family:verdana,arial,helvetica,sans-serif;
background-color:#f1f1f1;
margin:10px;
}
/* Die ganze sichtbare Website
*/
#website{
padding: 10px;
border: 1px solid #92a9cd;
}
/* Kopfbereich (Header)
*/
#header{
padding:10px;
border:1px solid #92a9cd;
background-color:white;
margin-bottom:10px;
}
/* Navigation
*/
#navigation{
float:left;
width:160px;
padding:0px;
border:1px solid blue;
margin-bottom:5px;
}
/* Der eigentliche Inhalt der Sites
*/
#inhalt{
margin-left:180px;padding:5px;line-height:150%;
border:1px solid #92a9cd;
background-color:white;
height: 800px;
}
/* Der Fußbereich (Footer)
*/
#footer{
margin-top:5px;
border:1px solid orange;
background-color:white;
text-align:center;
}
/* Verhalten bei bestimmten Tags
*/
ul,li{list-style:none;margin:0;padding:5px;}
h1{margin-top:2px;}
/*]]>*/
A.menu {
BORDER-BOTTOM: #99d 4px groove;
BORDER-LEFT: #99d 4px groove;
PADDING-BOTTOM: 4px;
MARGIN-TOP: 2px;
PADDING-LEFT: 4px;
WIDTH: 120px;
PADDING-RIGHT: 4px;
DISPLAY: block;
FONT-FAMILY: Arial, Verdana, sans-serif;
FONT-SIZE: 12px;
BORDER-TOP: #99d 4px groove;
FONT-WEIGHT: bold;
BORDER-RIGHT: #99d 4px groove;
PADDING-TOP: 4px;
}
A.menu:link {
BACKGROUND-COLOR: #fff;
COLOR: #44a;
TEXT-DECORATION: none
}
A.menu:visited {
BACKGROUND-COLOR: #fff;
COLOR: #44a;
TEXT-DECORATION: none
}
A.menu:hover {
BACKGROUND-COLOR: #ffed00;
COLOR: #44a;
TEXT-DECORATION: none
}
A.menu:active {
BACKGROUND-COLOR: #ffed00;
COLOR: #44a;
TEXT-DECORATION: none;
}
DIV.menu {
TEXT-ALIGN: center;
PADDING-BOTTOM: 10px;
BACKGROUND-COLOR: #eef3f8;
PADDING-LEFT: 10px;
WIDTH: 105px;
PADDING-RIGHT: 30px;
COLOR: #000;
PADDING-TOP: 10px;
}
Bei dem Content Bereich habe ich derzeit eine Pixel Höhe drin, würde das aber gerne dynamisch halten und 100% Höhe haben, gleiches bei der Navigation Mache ich etwas falsch? Ich finde den Fehler nicht. Danke 
|
| Sponsored Links |
|
17.06.2010, 14:59
|
||||
|
||||
|
Ggf. eine Kombination aus [FAQ]FAQ[/FAQ] 1 und 7.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
| Sponsored Links |
|
17.06.2010, 15:12
|
|||
|
|||
|
Zitat:
http://www.scasper.de/test.html Ich habe da keinen Link für die 100% Container gefunden *leider* body heigt: 100% habe ich schon versucht
|
|
17.06.2010, 15:24
|
||||
|
||||
|
In jedem Fall FAQ 1, und wenn die komplette Seite immer die volle Viewport-Höhe einnehmen soll, auch FAQ 7.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
|
17.06.2010, 15:32
|
|||
|
|||
|
habe mir jetzt die FAQ angesehen aber egal was ich im Background mit repeat mache es wird nicht höher
wo muss ich denn was einfügen ich kenne mich damit noch nicht so aus und verstehe daher manches vielleicht noch nicht
|
|
17.06.2010, 15:46
|
|||
|
|||
|
Zitat:
Müsste das 100% nicht eigentlich in das div content und navi hinein?
|
|
17.06.2010, 16:28
|
||||
|
||||
|
Nein, min-height lässt sich nicht verschachteln. Du musst übrigens immer auch FAQ 2 beachten.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| CSS Menu - active Seite hervorheben | celine70 | CSS | 2 | 20.12.2008 00:59 |
| CSS style position problem ie, safari | CongoFX | CSS | 4 | 28.02.2008 20:26 |
| Höhe mit CSS? | googolplex | CSS | 6 | 26.06.2007 17:37 |
| CSS Linksleiste komplett veschoben | hectic | CSS | 4 | 14.05.2007 18:24 |
| Seite "halbiert" nach Klick auf Link - CSS Bug? | Nina | CSS | 1 | 14.01.2004 15:20 |
Linear-Darstellung
