Sponsored Links |
|
||||
Zitat:
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. |
Sponsored Links |
|
||||
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) |
|
||||
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ü</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) |
|
||||
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ü</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> Code:
<h4 style="text-align: center; background-color:#666666;">Menü</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> |
|
||||
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ü</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> MfG Zen Geändert von Zen5656 (02.08.2006 um 16:42 Uhr) |
|
||||
Zitat:
|
|
||||
Zitat:
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 |
|
||||
Zitat:
|
Sponsored Links |
|
||||
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ü</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> Inline Sachen mache ich immer wenn ich fertig bin. Das verwirrt nur wenn ich nicht alles auf einen Blick sehe. Danke MfG Zen |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |