zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Inhaltsdiv bis zum unteren Rand

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.02.2010, 14:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.02.2010
Beiträge: 10
hansegirl2 befindet sich auf einem aufstrebenden Ast
Standard 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% }
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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.02.2010, 15:34
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.02.2010
Beiträge: 162
Duderinho befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.02.2010, 09:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.02.2010
Beiträge: 10
hansegirl2 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 17.02.2010, 09:19
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.02.2010
Beiträge: 162
Duderinho befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 17.02.2010, 09:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.02.2010
Beiträge: 10
hansegirl2 befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #6 (permalink)  
Alt 17.02.2010, 10:18
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.02.2010
Beiträge: 162
Duderinho befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 17.02.2010, 12:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.02.2010
Beiträge: 10
hansegirl2 befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #8 (permalink)  
Alt 17.02.2010, 12:49
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.02.2010
Beiträge: 162
Duderinho befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 17.02.2010, 12:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Duderinho Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.02.2010, 12:56
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.02.2010
Beiträge: 162
Duderinho befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:15 Uhr.