zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mal wieder: div mit maximal möglicher Höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.08.2006, 02:35
Benutzerbild von Zen5656
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 378
Zen5656 befindet sich auf einem aufstrebenden Ast
Standard Mal wieder: div mit maximal möglicher Höhe

Moin

ich weiß es hängt euch sicher zum Halse raus aber es muss sein Ich hab mir jetzt ne Stunde lang Tuts dazu inkl FAQ durchgelesen und krieg das einfach nicht hin. Ich möchte einfach das das <div> in dem das Menü drin ist immer auf voller möglicher Höhe ist. Immerhin hab ich es schon erreicht das es auf voller Anzeigehöhe gedehnt wird. Aber seht selbst

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Kontrollzentum</title>
<style type="text/css">

body, p a {
    color: black; background-color: white;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0;
    height: 100%;
  }

html, body {
	height: 100%;
	}

.box100{
	min-height: 100%;
	height:auto !important; /* moderne Browser */
    height:100%; /* IE */
	position: relative;
	}

#footer {
	position: absolute;
	bottom: 0; /* wichtig */
	}

.navigation1 {
    margin: 0.7em;
    font-weight: bold;
    display: block;
    border: 1px solid black;
    }

.navigation1 a {
    color: black;
    display: block;
    padding: 0.2em;
    text-decoration: none;
    background-color: #CCCCCC;
    }

.navigation1 a:hover {
    background-color: #0066CC;
    color: black;
	}

.navigation2 {
    margin: 0.7em;
    font-weight: bold;
    display: block;
    border: 1px solid black;
    }

.navigation2 a {
    color: black;
    display: block;
    padding: 0.2em;
    text-decoration: none;
    background-color: #999999;
    }

.navigation2 a:hover {
    background-color: #0066CC;
    color: black;
	}

.logout {
    margin: 0.7em;
    font-weight: bold;
    display: block;
    border: 1px solid black;
    background-color: #CCCCCC;
    color: black;
    }

.logout a {
	color: black;
	display: block;
	padding: 0.1em;
	text-decoration: none;
    background-color:#CCCCCC;
    }

.logout a:hover {
    background-color: #990000;
    color: black;
	}

.ueberschrift {
	font-size: xx-large;
	font-weight: bold;
	text-decoration: underline;
    padding: 0.4em;
    }



</style>
</head>

<body>


<div style="width: 100%;  background-color:#3366cc; border-bottom: 2px solid black;">
  <div class="ueberschrift">Kontrollzentrum</div>

</div>

<div class="box100" style="width: 15em; float:left; border-right: 2px solid black; margin-right: 4em;">

  <div style="background-color:#999999; padding: 0.4em;">
    <div class="navigation1" style="text-align: center; background-color:#666666;">Men&uuml;</div>
    <div class="navigation1"><a href="kontrollzentrum.php?mode=menue_eintrag">Eintrag erstellen</a></div>
    <div class="navigation1"><a href="kontrollzentrum.php?mode=menue_aendern1">Eintrag ändern/löschen</a></div>
  </div>


  <div style="background-color:#CCCCCC; padding: 0.4em; ">
    <div class="navigation2" style="text-align: center; background-color:#666666;">Artikel</div>
    <div class="navigation2"><a href="kontrollzentrum.php?mode=menue_eintrag">Eintrag erstellen</a></div>
    <div class="navigation2"><a href="kontrollzentrum.php?mode=menue_aendern1">Eintrag ändern/löschen</a></div>
  </div>

  <div style="background-color:#999999; padding: 0.4em; ">

    <div class="logout" style="text-align:center"><a href="veri.php?action=logout">Logout</a></div>

  </div>

</div>



<div style="margin-top: 2em;"><h2>Eintrag ändern / löschen</h2>

X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />
X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />
X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />



</div>

</body>
</html>
Er schneidet dann einfach ab Könnt ihr mir bitte helfen... ich verzweifel noch

MfG Zen
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.08.2006, 06:25
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Zen
Immerhin hab ich es schon erreicht das es auf voller Anzeigehöhe gedehnt wird. (...) Er schneidet dann einfach ab
Natürlich, denn min-height bedeutet, daß das Element mindestens 100% der Browserfenster-Höhe einnimmt (und genau dies tut es bei Dir). Mehr als diese 100% erreicht es nur, wenn sein Inhalt dies erfordert, jedoch nicht, wenn z.B. die benachbarte Spalte höher wird. Benachbarte Spalten "kommunizieren" nicht miteinander (im Gegensatz zu Tabellenzellen), und daher wachsen sie auch nicht mit. Siehe unsere FAQ.

Dein Vorhaben ist so nicht möglich. Aber Du kannst auf andere Weise einen Effekt erzeugen, der exakt Dein gewünschtes Ergebnis bringt (und dafür brauchst Du noch nicht einmal Faux Columns): Gib z.B. dem Body (oder einem alles einschließenden Container) die Hintergrundfarbe, die #box100 haben soll.

Die schwarze border (sowie seine eigene Hintergrundfarbe) bekommt dann das große Inhalts-div daneben. Wenn Du noch einen Footer dazunimmst, wird dieser alles sauber abschließen, und solange das Inhalts-div höher ist als #box100, wird immer alles so aussehen wie gewünscht. Sollte es jedoch möglich sein, daß auch #box100 mal höher ist, brauchst Du doch noch Faux Columns (ist aber ebenfalls kein Problem, auch nicht bei der relativen Breite von #box100).

Mal etwas anderes: Dein Markup ist wirklich desolat, z.B. <div class="ueberschrift"> sollte einfach <h1> werden, und ein umgebendes div ist hier auch nicht nötig. Aus dem Menü mache eine Liste <ul>, bzw. in Deinem Falle zwei, da Überschriften dazwischen liegen (auch diese bitte nicht als div, sondern als <h3> oder <h4>).

Wenn Du Dir Deine Seite mal ohne CSS ansiehst, wirst Du merken, wozu die sog. "Semantik" gut ist, die Deiner Seite noch total fehlt. Ausgenommen <h2>Eintrag ändern / löschen</h2>; dies ist die einzige löbliche Ausnahme in Deiner ansonsten klassischen div-Suppe.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.08.2006, 14:47
Benutzerbild von Zen5656
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 378
Zen5656 befindet sich auf einem aufstrebenden Ast
Standard

Woa danke für deine zahlreichen Tipps. Werde mich gleich mal dran versuchen. Nur verstehe ich nicht so ganz warum ich eine Liste machen soll statt der divs... wo ist da der Vorteil?

Außerdem noch ein weiteres Problem: Eigentlich wollte ich noch haben das der Inhalt rechts vom Menü immer zentriert im verbleibenden weißen Feld steht. Dann geht aber dein Trick mit dem div Rand nicht mehr Wie krieg ich das hin. Hab bereits text-align: center; margin: auto; und padding: auto; ausprobiert....

Danke für deine Hilfe

MfG Zen

Edit: so mein ich das mit der Mitte:

http://img161.imageshack.us/img161/5663/mittext1.jpg

Edit2: ok jetzt weiß ich warum ich die Listensachen nehmen soll

Geändert von Zen5656 (02.08.2006 um 15:03 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 02.08.2006, 15:23
Benutzerbild von Zen5656
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 378
Zen5656 befindet sich auf einem aufstrebenden Ast
Standard

So ich hab mal am manü rumgewerkelt. Oben das Neue, unten das alte. Ergebnis: im IE wird garnix mehr gescheid angezeigt ->

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Kontrollzentum</title>
<style type="text/css">

body, p a {
    color: black; background-color: white;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0;
    height: 100%;
  }

html, body {
	height: 100%;
	}

.box100{
	min-height: 100%;
	height:auto !important; /* moderne Browser */
    height:100%; /* IE */
	position: relative;
	}

#footer {
	position: absolute;
	bottom: 0; /* wichtig */
	}

.navigation1 {
    margin: 0.7em;
    font-weight: bold;
    display: block;
    border: 1px solid black;
    }

.navigation1 a {
    color: black;
    display: block;
    padding: 0.2em;
    text-decoration: none;
    background-color: #CCCCCC;
    }

.navigation1 a:hover {
    background-color: #0066CC;
    color: black;
	}

.navigation2 {
    margin: 0.7em;
    font-weight: bold;
    display: block;
    border: 1px solid black;
    }

.navigation2 a {
    color: black;
    display: block;
    padding: 0.2em;
    text-decoration: none;
    background-color: #999999;
    }

.navigation2 a:hover {
    background-color: #0066CC;
    color: black;
	}

.logout {
    margin: 0.7em;
    font-weight: bold;
    display: block;
    border: 1px solid black;
    background-color: #CCCCCC;
    color: black;
    }

.logout a {
	color: black;
	display: block;
	padding: 0.1em;
	text-decoration: none;
    background-color:#CCCCCC;
    }

.logout a:hover {
    background-color: #990000;
    color: black;
	}

h1 {
	font-size: xx-large;
	font-weight: bold;
	text-decoration: underline;
    padding: 0.4em;
	margin: 0;
    }



</style>
</head>

<body>


<div style="width: 100%;  background-color:#3366cc; border-bottom: 2px solid black;">
  <h1>Kontrollzentrum</h1>

</div>

<div class="box100" style="width: 15em; float:left; border-right: 2px solid black; margin-right: 4em;">

  <ul style="background-color:#999999; padding: 0.4em; list-style:none; margin: 0;">
    <li><h4 class="navigation1" style="text-align: center; background-color:#666666;">Men&uuml;</h4></li>
    <li><h4 class="navigation1"><a href="kontrollzentrum.php?mode=menue_eintrag">Eintrag erstellen</a></h4></li>
    <li><h4 class="navigation1"><a href="kontrollzentrum.php?mode=menue_aendern1">Eintrag ändern/löschen</a></h4></li>
  </ul>


  <div style="background-color:#CCCCCC; padding: 0.4em; list-style:none;">
    <div class="navigation2" style="text-align: center; background-color:#666666;">Artikel</div>
    <div class="navigation2"><a href="kontrollzentrum.php?mode=menue_eintrag">Eintrag erstellen</a></div>
    <div class="navigation2"><a href="kontrollzentrum.php?mode=menue_aendern1">Eintrag ändern/löschen</a></div>
  </div>

  <div style="background-color:#999999; padding: 0.4em; ">

    <div class="logout" style="text-align:center"><a href="veri.php?action=logout">Logout</a></div>

  </div>

</div>



<div style="margin-top: 2em;"><h2>Eintrag ändern / löschen</h2>

X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />
X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />
X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />X<br />



</div>

</body>
</html>

Geändert von Zen5656 (02.08.2006 um 16:05 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 02.08.2006, 16:12
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Wir machen jetzt erstmal das Markup, dann das CSS

Aus

Code:
<ul style="background-color:#999999; padding: 0.4em; list-style:none; margin: 0;">
<li><h4 class="navigation1" style="text-align: center; background-color:#666666;">Men&uuml;</h4></li>
<li><h4 class="navigation1"><a href="kontrollzentrum.php?mode=menue_eintrag">Eintrag erstellen</a></h4></li>
<li><h4 class="navigation1"><a href="kontrollzentrum.php?mode=menue_aendern1">Eintrag ändern/löschen</a></h4></li>
</ul>
wird

Code:
<h4 style="text-align: center; background-color:#666666;">Men&uuml;</h4>

<ul class="navigation1" style="background-color:#999999; padding: 0.4em; list-style:none; margin: 0;">
<li><a href="kontrollzentrum.php?mode=menue_eintrag">Eintrag erstellen</a></li>
<li><a href="kontrollzentrum.php?mode=menue_aendern1">Eintrag ändern/löschen</a></li>
</ul>
Und die Inline-Styles solltest Du schnellstmöglich ersetzen.
Mit Zitat antworten
  #6 (permalink)  
Alt 02.08.2006, 16:39
Benutzerbild von Zen5656
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 378
Zen5656 befindet sich auf einem aufstrebenden Ast
Standard

Ehm du zerhaust mir gerade das gesammte design Sry aber irgendwie reden wir andeinander vorbei

Meine neuste version sah so aus. Falls CSS nicht funktioniert hat man trotzdem eine schöne Liste.

Code:
  <ul style="background-color:#999999; padding: 0.4em; list-style:none; margin: 0;">
    <li><h4 class="navigation1" style="text-align: center; background-color:#666666;">Men&uuml;</h4>
	  <ul style="list-style:none; margin: 0; padding: 0;">
            <li><h4 class="navigation1"><a href="kontrollzentrum.php?mode=menue_eintrag">Eintrag erstellen</a></h4></li>
            <li><h4 class="navigation1"><a href="kontrollzentrum.php?mode=menue_aendern1">Eintrag ändern/löschen</a></h4></li>
	  </ul>
    </li>
  </ul>
So und das muss jetzt auch irgendwie im IE funktionieren

MfG Zen

Geändert von Zen5656 (02.08.2006 um 16:42 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 02.08.2006, 17:22
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Zen
Ehm du zerhaust mir gerade das gesammte design
Aus dem direkt vorher von Dir geposteten Code war nicht ersichtlich, daß Du vorhattest, die Listen zu verschachteln. Und welchen Sinn es ergibt, sowohl die Links als auch die Überschriften der Navigationen als <h4> auszuzeichnen, erschließt sich mir nicht so ganz... Für IE-Anpassungen (die garantiert nötig sein werden) siehe mein FAQ-Beitrag.
Mit Zitat antworten
  #8 (permalink)  
Alt 02.08.2006, 17:40
Benutzerbild von Zen5656
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 378
Zen5656 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs
Und welchen Sinn es ergibt, sowohl die Links als auch die Überschriften der Navigationen als <h4> auszuzeichnen, erschließt sich mir nicht so ganz...
Ja irgendwo muss ich ein Blockelement setzen damit der Kasten mit dem Rand um die Schrift zustandekommt.

Ich mach grad das mit der IE Anpassung auch wenn ich mir nicht ganz im klaren drüber bin ob das die Lösung meines Problems ist.... die Links gehen ja, nur die Box außenrum nicht

Danke

MfG Zen
Mit Zitat antworten
  #9 (permalink)  
Alt 02.08.2006, 17:44
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Zen
Ja irgendwo muss ich ein Blockelement setzen damit der Kasten mit dem Rand um die Schrift zustandekommt.
Blockelemente hast Du für diesen Zweck genug: <li> und <a> (letzteres mit display: block;. was es eh bekommen sollte).
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.08.2006, 17:52
Benutzerbild von Zen5656
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 378
Zen5656 befindet sich auf einem aufstrebenden Ast
Standard

Ah ich dummbatz

Code:
  <ul style="background-color:#999999; padding: 0.4em; list-style:none; margin: 0;">
    <li><h4 class="navigation1" style="text-align: center; background-color:#666666;">Men&uuml;</h4>
	 <ul style="list-style:none; margin: 0; padding: 0;">
            <li class="navigation1"><a href="kontrollzentrum.php?mode=menue_eintrag">Eintrag erstellen</a></li>
            <li class="navigation1"><a href="kontrollzentrum.php?mode=menue_aendern1">Eintrag ändern/löschen</a></li>
	 </ul>
    </li>
  </ul>
Hoffe es passt jetzt so. Und was muss ich jetzt machen damit die CSS Sachen (Rand und Hintergrundfarbe) im IE richtig angezeigt werden? Im FAQ steht von diesem Fehler nichts.

Inline Sachen mache ich immer wenn ich fertig bin. Das verwirrt nur wenn ich nicht alles auf einen Blick sehe.

Danke

MfG Zen
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
DIV Höhe 100% Daniel86 CSS 12 29.07.2011 13:40
DIV automatische Höhe in-flames CSS 13 20.05.2011 20:49
DIV: Ausfüllen restlicher Höhe bei weiterem DIV mit fixer Höhe danoman CSS 5 24.04.2011 19:38
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
div container Höhe anpassen funktioniert nicht! hopaba CSS 4 21.02.2010 18:23


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:32 Uhr.