|
|||
Column-Layout
Hallo an alle,
ich bin neu hier und habe eine spezifische Frage zu einem Buch-Tutorial welches ich gerade lese. Der Code lautet folgendermaßen: HTML-Code:
<html> <head> <style type="text/css"> <!-- @import url(style.css) screen; //--> </style> </head> <body> <div id="wrapper"> <div id="container"> <div class="columns"> <h1>Drop Caps - Designing with Typography</h1> <p><span class="cap" title="L">L</span>orem 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p><span class="cap" title="L">L</span>orem 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p><span class="cap" title="L">L</span>orem 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p><span class="cap" title="L">L</span>orem 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <p><span class="cap" title="L">L</span>orem 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> </div> </div> </body> </html> Code:
#container { width:800px; margin:0 auto; } h1 { font: 36px/1.1 Georgia,"Times New Roman",Times,serif; padding:4px 0 0 0; margin:0 0 79px 0; } p { font:17px "Times New Roman",Times,serif; margin:0 0 20px 0; text-align:justify; } span.cap { color:#000; float:left; padding:5px 15px 0 0; font-size:450%; line-height:0.66em; } span.cap[title="L"] { background:url("dropcaps-rose.png") no-repeat scroll 0 0 transparent; text-indent:-9999em; line-height:1em; margin:0 5px 0 0; padding:0 75px 0 0; } span.cap[title="L"] { background-position:-35px -26px; } .columns { margin:5em auto; -moz-column-count:3; -moz-column-gap:40px; -moz-column-rule: 1px solid #000; -webkit-column-count:3; -webkit-column-gap:40px; -webkit-column-rule: 1px solid #000; column-count:3; column-gap:40px; column-rule: 1px solid #000; } @media screen and (max-width: 850px) { div.wrapper { width:90%; margin:2em auto; -moz-column-count:2; -webkit-column-count:2; column-count:2; } } @media screen and (max-width: 550px) { div.wrapper{ -moz-column-count:1; -webkit-column-count:1; column-count:1; } } Ich habe auch schon gegoogelt und keine passende Antwort gefunden. Grüße Manu |
Sponsored Links |
|
|||
Wenn du den Code aus einem Buch übernommen hast, wirf das Buch weg (oder besser: verbrenne es) und lese stattdessen (kostenlos) Little Boxes.
Füge eine Dokumenttypangabe hinzu. Entferne die HTML und JavaScript-Kommentare aus dem style-Element. Nutze zum Einbinden von Stylesheets lieber das link-Element. Dein Problem liegt darin, dass du die Anweisung, drei Spalten zu erstellen, dem Element .columns zuweist, die Anweisung für weniger Spalten aber dem Element .wrapper
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Probleme mit holygrail layout - background-image | chrishilli | CSS | 8 | 27.01.2010 20:01 |
Problem mit Umsetzung eines Layouts | Seel-Media | CSS | 10 | 25.01.2009 14:15 |
Div im IE zu hoch | RancoR | CSS | 10 | 10.07.2007 00:11 |
Simples Layout! | BigBuddha | CSS | 2 | 05.03.2007 15:44 |
Nicht valieder Code von Map24 | sveniboy | (X)HTML | 7 | 06.11.2005 20:19 |