Inhaltsdiv bis zum unteren Rand

hansegirl2 · #1 (**permalink**) 16.02.2010, 14:52

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% }

sooo, ja also ich möchte einfach, dass das Inhaltsdiv bis zum unteren Rand fortgeführt wird, egal wie viel Text vorhanden ist.

Tut mir leid, dass diese Frage schon wieder beantwortet werden muss, ich komm einfach mit gegeben Lösungsvorschlägen nicht weiter.

Duderinho · #2 (**permalink**) 16.02.2010, 15:34

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%;}

Das kannst du streichen, hast du auch doppelt definiert.

hansegirl2 · #3 (**permalink**) 17.02.2010, 09:06

hallo duderinho,

das mit den semikolons habe ich schon korrigiert und auch die doppelten definitionen habe ich entfernt.
jetzt warte ich sehnlichst auf eine antwort

Duderinho · #4 (**permalink**) 17.02.2010, 09:19

Wäre schön, wenn du den korrigierten und kompletten COde hier posten würdest, spart einiges an Bastelei und wir können schneller helfen

hansegirl2 · #5 (**permalink**) 17.02.2010, 09:27

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&ouml;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>

Duderinho · #6 (**permalink**) 17.02.2010, 10:18

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.

hansegirl2 · #7 (**permalink**) 17.02.2010, 12:09

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...

Duderinho · #8 (**permalink**) 17.02.2010, 12:49

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;
}

Dann kannst du die Breite anpassen, wenn du die Box gerne breiter hättest.

---

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.

fricca · #9 (**permalink**) 17.02.2010, 12:51

Zitat:

Zitat von Duderinho

Da du die Formatierungen von #Inhalt ja auch für Hilfe und Kontakt willst,

Hilfe und Kontakt sind doch neue Seiten. Da darf die ID wieder je einmal auftauchen.

Duderinho · #10 (**permalink**) 17.02.2010, 12:56

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.

Ä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