Thema: Column-Layout
Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 01.09.2012, 19:31
RauschenderBach RauschenderBach ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.09.2012
Beiträge: 4
RauschenderBach befindet sich auf einem aufstrebenden Ast
Standard 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>
CSS:

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;
	}
}
herauskommen sollte eigentlich ein Column-Layout mit 3 Spalten bzw. bei Verkleinerung des Fensters 2 oder 1 Spalte werden. Leider bleiben die 3 Spalten egal wie klein ich es mache. Kann mir jemand helfen?

Ich habe auch schon gegoogelt und keine passende Antwort gefunden.

Grüße Manu
Mit Zitat antworten
Sponsored Links