|
|||
Inhaltsdiv bis zum unteren Rand
Ich sehe schon wie ihr alle aufstöhnt, daher nehme ich vorweg, dass ich sowohl die FAQ durchgelesen und ausprobiert habe und auch die Themensuche bemüht habe, aber die Lösungen wollen bei mir nicht klappen.
Zu meinem Problem: Unbenannte Seite wenn ihr auf die anderen beiden Menupunkte klickt, fällt euch auf, dass die gepunktete Linie am Rand des Inhaltframes auch nur bis zum Ende des Inhalts geht. Ich möchte, dass sie bis zum unteren Rand der Website geht und wenn mehr Inhalt da ist, auch darüber hinaus weitergeführt wird. Den body hab ich jetzt mit 100% height versehen und den Inhalts-Div mit min-height=100%. Vielleicht sollte ich erwähnen, dass im Body als Hintergrund ein Bild in repeat-y läuft und wg dem Verlauf ein Bild in einem Div eingefügt wurde... HTML-Code:
<body bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <div id="site"> <div id="header"> <ul id="Navigation"> <li id="aktuell"><a href="index.html">Login</a></li> <ul id="submenu"> <li><a href="hilfe.html">Test</a></li> <li><a href="hilfe.html">Test</a></li> </ul> <li><a href="hilfe.html">Hilfe</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul> <div id="Inhalt"> <h1>LOGIN</h1> <p> </p> </div> </div> </div> </body> HTML-Code:
html, body { color: #fff; background-image: url("Bilder/bg.jpg"); background-repeat: repeat-y; background-position: 50% 0; margin: 0; padding: 0; height: 100% } div#site { background-position: 50% 0; text-align: left; margin: 0 auto; padding: 0; width: 900px } div#header { background-image: url("Bilder/mk_bg.jpg"); background-repeat: no-repeat; background-position: 50% 0; margin-top: 0; margin-bottom: 0; padding-top: 330px; border-right: 2px dotted #4c8fc6; border-left: 2px dotted #4c8fc6 } * html #inhalt {height: 100%;} #Inhalt { margin-left: 173px; padding-bottom: 20px; padding-left: 40px; width: 510px; border-left: 2px dotted black; min-height: 100% } Tut mir leid, dass diese Frage schon wieder beantwortet werden muss, ich komm einfach mit gegeben Lösungsvorschlägen nicht weiter. |
Sponsored Links |
|
|||
Ich schau mir das grad mal mit deinem hier geposteten Code an, eine Lösung hab ich noch nicht.
Aber: Im .css File muss jede Angabe mit einem Semikolon beendet werden, auch die letzte. Den body hast du sowohl in der .css als auch in der .html definiert. Code:
* html #inhalt {height: 100%;} |
Sponsored Links |
|
|||
oh, na klar:
Code:
html, body { color: #fff; font-size: 1em; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; background-image: url("Bilder/bg.jpg"); background-repeat: repeat-y; background-position: 50% 0; margin: 0; padding: 0; height: 100%; } h1 { color: #fff; font-size: 20px; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-style: italic; font-weight: bold; margin-right: 0; margin-bottom: 0.67em; margin-left: 0; padding-top: 2px; } p { color: #fff; font-size: 13px; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; } div#site { background-position: 50% 0; text-align: left; margin: 0 auto; padding: 0; width: 900px; } div#header { background-image: url("Bilder/mk_bg.jpg"); background-repeat: no-repeat; background-position: 50% 0; margin-top: 0; margin-bottom: 0; padding-top: 330px; border-right: 2px dotted #4c8fc6; border-left: 2px dotted #4c8fc6; } #Inhalt { margin-left: 173px; padding-bottom: 20px; padding-left: 40px; width: 510px; border-left: 2px dotted black; } ul#Navigation { font-size: 18px; background-color: #4c8fc6; margin: 10px 0 0; padding: 0; z-index: 3; width: 173px; float: left; } ul#Navigation li { list-style: none; margin: 0; padding: 5px 0.5em; } ul#Navigation a { font-weight: bold; text-decoration: none; display: block; margin-right: -9px; margin-left: -9px; padding: 0.2em 0 0.2em 22px; } ul#Navigation #aktuell a { font-weight: bold; text-decoration: none; background-color: #91cae8; display: block; padding: 0.2em 0.2em 0.2em 22px; } ul#Navigation a:link { color: #fff; text-decoration: none; padding-left: 18px; } ul#Navigation a:visited { color: #fff; background-color: #4c8fc6; } ul#Navigation a:hover { color: #fff; background-color: #91cae8; } ul#Navigation a:active { color: white; background-color: #91cae8; } ul#Navigation li ul { display: none; } ul#Navigation li:hover ul { display: block; } ul#submenu { display: block; } ul#submenu a { display: block; border-top: 1px solid #91cae8; border-bottom: 1px solid #91cae8; } ul#submenu li { display: block; margin-left: -30px; } HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <meta name="generator" content="Adobe GoLive"> <title>Unbenannte Seite</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="site"> <div id="header"> <ul id="Navigation"> <li id="aktuell"><a href="index.html">Login</a></li> <ul id="submenu"> <li><a href="hilfe.html">Test</a></li> <li><a href="hilfe.html">Test</a></li> </ul> <li><a href="hilfe.html">Hilfe</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul> <div id="Inhalt"> <h1>LOGIN</h1> <p>Bitte melde dich mit deinen persönlichen Daten an. Du gelangst nach deiner Anmeldung in den internen Bereich von. <br /> <br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br />Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br /> <br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br />Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br /> <br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br />Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br /> <br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br />Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> </div> </div> </body> </html> |
|
|||
Wenn ich mir dein COde kopiere, sieht mein Ergebnis komplett anders aus ^^
Hast du den anderen Menupunkten auch die id #Inhalt zugewiesen? (Es wäre besser hier classes zu verwenden, da man ids nur einmal benutzt). Generell würde ich das Menü auch in einen div Container packen und dann mit floats für Menü und Content arbeiten. |
|
|||
hmmm, also ich hab jetzt nochmal den code hier raus kopiert und es sieht gut aus soweit...
ja, alle anderen Seiten haben auch die id #Inhalt... heisst das, ich muss für jede Seite den content Bereich neu mit classes definieren? mit containern und floats arbeiten? wenn ich ehrlich bin, dachte ich, ich würde genau das tun... |
|
|||
Du hast schon Container und zumindest ein float für's Menü. Nur du lässt den Inhalt dann nicht rechts vorbei floaten sondern arbeitest mit margin-left.
Änder mal #Inhalt in: Code:
#Inhalt { padding-bottom: 20px; padding-left: 40px; width: 510px; border-left: 2px dotted black; float:right; } --- Da du die Formatierungen von #Inhalt ja auch für Hilfe und Kontakt willst, ist es sinnvoller, mit einer class zu arbeiten (ich persönlich nutze gar keine IDs, spielt wohl erst beim Zusammenspiel mit JavaScript eine Rolle - soweit bin ich aber selbst noch nicht). Ändere <div id="Inhalt"></div> in <div class="text"></div>. Dann kannst du jeder Unterseite die Klasse text zuweisen und brauchst nicht für jede eine neue ID in der du letztendlich 3 Mal das gleiche definierst. |
|
|||
Hilfe und Kontakt sind doch neue Seiten. Da darf die ID wieder je einmal auftauchen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Ich unterstelle hansegirl jetzt einfach mal, dass sie dafür #Hilfe und #Kontakt angelegt hätte. Sprich sie hätte 3 IDs mit den gleichen Formatierungsangaben. Aber prinzipiell hast du natürlich, mal wieder, recht.
|
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Container am unteren Rand & Content 100% Höhe | KILLHILL | CSS | 1 | 23.10.2009 15:46 |
Hintergrundbild immer am unteren Rand ausrichten | washy | CSS | 2 | 15.10.2007 16:42 |
Wie Liste am unteren Rand eines div darstellen? | Stadtmensch | CSS | 0 | 21.01.2007 00:18 |
schrift soll bis an den linken rand gehen. | Palorux | CSS | 5 | 22.09.2006 16:37 |