|
|||
Kinder div genauso gross wie eltern Div - Frage #23456
Ich weiss wurd schon sau oft gefragt jedoch über die suche nichts zwingendes gefunden oO
hab 3 Divs, 1 Container, 1 navi und 1 content, content weitet den container aus, umso mehr content-text umso länger der content und container, und navi soll jetzt mitwachsen. navi hab ich height:100%, brignt aber nix weil container ja keine feste höhe hat. hat jemand ne idee ?! code braucht man dazu ja nicht wissen, kann man sich ja denken |
Sponsored Links |
|
|||
Stimmt schon x-mal gefragt, geht nicht wirklich, nichts desto trotz habe ich heute dieses entdeckt.
http://www.stunicholls.myby.co.uk/layouts/3cols.html Leider noch keine Zeit für eine Analyse gehabt.....viel Erfolg
__________________
</ulle> |
Sponsored Links |
|
|||
So habe mir mal das 2. Beispiel von obigen Link genauer angesehen
Nun Valide ist das verwendete CSS nicht, da gibt es solche Eigenschaften wie display:inline-block; und overflow:visible;. Die Container, die ge'float'et sind, haben die Eigenschaft display:inline; und sind somit Inline-Elemente ?! Des weiteren wird ein DOCTYPE XHTML 1.1 / content="text/xml; charset=UTF-8" Das Highlight ist dass die Rahmen links und rechts vom umschliessenden Container, beide 200px breit, als Hintergrundfarbe für die ge'float'eten Container genutzt werden Da muß man erstmal darauf kommen, Respekt. Hier habe ich mal den CODE, schon ein wenig aufbereitet. Nur ist es mir jetzt zu spät...... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>xxxx</title> <style type="text/css" media="screen" title="Druckvorschau-semantic-Test"> /*<![CDATA[*/ html,body { margin: 0; padding: 0; background-color: #FF9933; color: #000000; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 100.01%; } .clear { clear:both; height:1px; overflow:hidden; } .box { margin: 0 3px; border: 1px solid #000000; padding: 3px; font-size: 0.8em; } /* The header and footer */ .headfoot { display:block; height:70px; background:#fc6; color:#000; text-align:center; padding:5px; font-size:30px; } /* This bit does all the work */ #container { /* workaround = IE-Float-Bug ? */ position: relative; display: block; background:#ddf; border-left: 200px solid #aa8; /* = background #left */ border-right: 200px solid #a8a; /* = background #right */ overflow:visible; } * html #container {display:inline-block;} #left { float:left; position:relative; width:198px; margin-left:-197px; display:inline; } * html #left {width:197px;} #right { float:right; position:relative; width:198px; margin-right:-197px; display:inline; } /* Just to extend each column */ #container a:visited, a {color:#000; text-decoration:none;} #container a span {display:none;} #container a:hover {color:#c00; text-decoration:none; background:transparent;} #container a:hover span {display:block;} /*]]>*/ </style> </head><body> <div class="headfoot">Header</div> <div id="container"> <div id="right"> <div class="box"> <a href="#">Hover here to make the right column the longest <span>this is the right column this is the right column this is the right column this is the right column this is the right column this is the right column this is the right column this is the right column this is the right column this is the right column this is the right column </span> </a> </div> </div> <div id="left"> <div class="box"> <a href="#">Hover here to make the left column the longest <span>this is the right column this is the right column this is the right column this is the right column this is the right column this is the right column this is the right column </span> </a> </div> </div> <div class="box"> <a href="#">Hover here to make the middle column the longest <span>this is the right column this is the right column this is the right column this is the right column this is the right column </span> </a> </div> <div class="clear"></div> </div> <div class="headfoot">Footer</div> </body></html>
__________________
</ulle> |
|
||||
Zitat:
Zitat:
Gruß Thomas
__________________
toscho.de |
|
|||
Mal ne Zwischenfrage: was genau bedeutet " display:inline-block " ?
Der Unterschied zwischen Block und Inline-Elementen ist klar - aber inline-block? - Was muß ich mir darunter vorstellen und wozu ist es gut? Zitat:
|
|
||||
Zitat:
Ein Inline-Block verhält sich nach innen wie eine Blockbox und nach außen wie eine Inlinebox; er fließt also ganz normal in der Zeile mit, kann aber umgebrochene Zeilen enthalten und spricht auf »height« und »width« an (wie es der IE 5.0 bei jeder Inlinebox tut). Der Nutzen sollte auf der Hand liegen. <textarea> oder ein Bild, dessen Alternativtext dargestellt wird, wären klassische Beispiele dafür. Inline-Blöcke sind manchmal ein guter Ersatz für »float«, weil sie sich ähnlich verhalten, aber nicht ganz so bugbehaftet sind. Dennoch kenne ich keine wirklich saubere Implementation: Der IE wandelt Blockelemente nicht korrekt um, Opera errechnet die baseline irgendwie komisch (auf jeden Fall falsch). Mit Safari habe ich noch keine größeren Experimente machen können; dazu kann ich also nichts sagen. @Greg: Du mußt gegen das passende Profil »validieren« (sofern man im Zusammenhang mit CSS überhaupt diesen Ausdruck benutzen kann). Mal ein Beispiel, das bisher nur in Opera funktioniert: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="de"> <title>display:inline-block</title> <style type="text/css"> html, body, ul, li { margin: 0; padding: 0; color: #000; background: #ccc; } ul { color: #000; background: #aaa; } li { color: #000; background: #fff; display: inline-block; width: 6em; text-align: center; } </style> <ul>[*]eins zwei[*]drei vier[/list] Thomas
__________________
toscho.de |
|
|||
hm die url die ulle da gepostet hat von stu nicchols oder wie der heisst war mir bereits bekannt aber ganz durchsteigen tuh ich leider nicht hm nochmal genau ankucken
edit: Ja er benutzt einfach links und rechts nen border, das sieht dann so aus als wenn das genau gleich lang wär .. das geht klar aber bei meinem layout muss ich links nen hintergrund reintun also mit border komm ich nich weit :/ |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Absoluter Anfänger - Frage zum Div und Positionierung | eenux | (X)HTML | 7 | 22.01.2007 21:00 |
flexibles Div soll Div mit fester Breite links umfliessen? | braindead | CSS | 3 | 23.09.2006 13:58 |
Die maximale breite wird nicht erkannt | notebook20000 | CSS | 9 | 22.06.2006 21:14 |
table -> eltern div --anpassen--> kinderdiv (problem) | pixelholic | CSS | 4 | 14.08.2005 23:09 |
div frage | Igi | CSS | 1 | 19.03.2005 23:22 |