|
|||
Merkwürdigkeiten bei fixed/fluid Layout und table-cell
Hallo,
ich habe mir zu Übungszwecken ein Layout einmal im fixed und dann das Gleiche einmal im Fluid Layout gebastelt. Im Div .main_wrapper sind die nav, article class="main" und aside. Alle drei gefloatet und mit display:table-cell ausgezeichnet. Hier ein Ausschnitt aus der CSS Fixed Layout nav { text-align:left; display:table-cell; padding:20px; width:140px; background-color:LightBlue; } .gap { display:table-cell; width:20px; } #main_wrapper > article { display:table-cell; padding:20px; width:460px; background-color:LemonChiffon; } aside { display:table-cell; padding:20px; width:140px; background-color:LightBlue; } Also die nav ist 140 plus jeweils 20 padding, der main ist 460 plus jeweils 20 padding und die aside ist wie die nav. Zwischen den Containern gibt es das div .gap um einen Abstand von 20 px hinzubekommen. Im FLuid muß ich jedoch die Gesamtbreite als width eingeben, was ja nach Box-Modell unlogisch ist, um dann ein korrektes Ergebnis zu bekommen. Woran liegt das ? Hier die Fluid nav { display:table-cell; padding: 2.22222222222222%; width:20%; background-color:LightBlue; } .gap { display:table-cell; width:2.22222222222222%; } .main { display:table-cell; width:55.555555555556%; background-color:LemonChiffon; } aside { display:table-cell; padding: 2.22222222222222%; width:20%; background-color:LightBlue; } Vielen Dank für Eure Hilfe. Herzlichen Gruß, Simone |
Sponsored Links |
|
|||
Ich habe table-cell genommen, um alle Spalten auf die gleiche Höhe zu bekommen.
Anbei der Code jeweils für fixed und fluid <!doctype html> <html> <head> <title>Responsive Design</title> <meta charset="utf-8"> <meta name="description" content="responsive design"> <meta name="keywords" content="responsive, webdesign, layout"> <meta name="author" content="SW"> <style> * { padding:0; margin:0; } a { display:block; text-decoration:none; color:black; } li { list-style-type:none; } body { width:960px; margin:0 auto; background-color:SeaShell; } #wrapper { width:900px; padding:30px; background-color: PapayaWhip; } header { width:860px; padding:20px; background-color:salmon; margin-bottom:20px; } #main_wrapper { display:table; } nav { text-align:left; display:table-cell; padding:20px; width:140px; background-color:LightBlue; } .gap { display:table-cell; width:20px; } #main_wrapper > article { display:table-cell; padding:20px; width:460px; background-color:LemonChiffon; } aside { display:table-cell; padding:20px; width:140px; background-color:LightBlue; } aside > section > article { margin-bottom:10px; } aside > section > article h3 { padding-bottom:5px; } footer { clear:both; width:860px; padding:20px; background-color:salmon; margin-top:20px; } </style> </head> <body> <div id="wrapper"> <header> <h1> Responsive Design </h1> </header> <div id="main_wrapper"> <nav> <ul> <li><a href="">Produkte</a></li> <li><a href="">Herstellung</a></li> <li><a href="">Anlieferung</a></li> <li><a href="">Kontakt</a></li> </ul> </nav> <div class="gap"></div> <article> <section> <h2> Lorem Ipsum </h2> <p> Gleiche Schuld treffe Die, welche aus geistiger Schwäche, d.h. um der Arbeit und dem Schmerze zu entgehen, ihre Pflichten verabsäumen. Man kann hier leicht und schnell den richtigen Unterschied treffen; zu einer ruhigen Zeit, wo die Wahl der Entscheidung völlig frei ist und nichts hindert, das zu thun, was den Meisten gefällt, hat man jede Lust zu erfassen und jeden Schmerz abzuhalten; aber zu Zeiten trifft es sich in Folge von schuldigen Pflichten oder von sachlicher Noth, dass man die Lust zurückweisen und Beschwerden nicht von sich weisen darf. </p> </section> </article> <div class="gap"></div> <aside> <section> <article> <h3> Neu eingetroffen </h3> <p> Zeiten trifft es sich in Folge von schuldigen Pflichten oder von sachlicher Noth. </p> </article> <article> <h3> Aktuelles </h3> <p> Die, welche aus geistiger Schwäche, d.h. um der Arbeit und dem Schmerze zu entgehen. </p> </article> </section> </aside> </div> <!-- ende content --> <footer> <p> (c) by friendlybit </p> </footer> </div> <!-- ende wrapper --> </body> </html> Hier das CSS für fluid * { padding:0; margin:0; } a { display:block; text-decoration:none; color:black; } li { list-style-type:none; } body { max-width:960px; margin:0 auto; background-color:SeaShell; } #wrapper { width:93.75%; padding:3.125%; background-color: PapayaWhip; } header { width:95.55555555555556%; padding:2.22222222222222%; background-color:salmon; margin-bottom:2.32558139534884%; } #main_wrapper { display:table; width:100%; } nav { display:table-cell; padding: 2.22222222222222%; width:20%; background-color:LightBlue; } .gap { display:table-cell; width:2.22222222222222%; } .main { display:table-cell; width:55.555555555556%; background-color:LemonChiffon; } aside { display:table-cell; padding: 2.22222222222222%; width:20%; background-color:LightBlue; } aside > section > article { margin-bottom:10px; } aside > section > article h3 { padding-bottom:5px; } footer { clear:both; width:95.55555555555556%; padding:2.22222222222222%; background-color:salmon; margin-top:2.32558139534884%; } Danke |
|
|||
in display:table kein normales box-model ?
Ich habe nun mal die display:table rausgenommen und dann stimmen die Breiten.
Ist es möglich, daß display:cell das box-modell mit Gesamtbreit-margin-border-padding = width ausser Kraft setzt? So quasi wie ein border-sizing:box? Danke Gruß, Simone |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Myspace Fehler zwischen FF und IE? | soren.designs | (X)HTML | 1 | 05.09.2009 17:02 |
Untermenü im IE | nici | CSS | 10 | 22.06.2009 22:19 |
Myspace problem... Rechte Säule verschiebt sich im IE. | calledmarcel | CSS | 1 | 27.02.2009 10:12 |
Myspace-Probleme | Nora-B | CSS | 3 | 16.09.2008 00:17 |
Falsche Darstellung im Internet Explorer | Janizzle | CSS | 0 | 30.08.2007 20:44 |