zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Column-Layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.09.2012, 19:31
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
  #2 (permalink)  
Alt 01.09.2012, 19:45
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.09.2012, 20:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.09.2012
Beiträge: 4
RauschenderBach befindet sich auf einem aufstrebenden Ast
Standard

Nene die Code-Snippets hab ich nur abgetippt.^^
Aber danke für die Hilfe mit den Columns. Jetzt funktioniert es.
Mit Zitat antworten
  #4 (permalink)  
Alt 01.09.2012, 20:09
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Beherzige meinen Rat dennoch (wenn auch nur als Zusatz). Das erspart dir Probleme in der Zukunft.
Mit Zitat antworten
  #5 (permalink)  
Alt 01.09.2012, 20:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.09.2012
Beiträge: 4
RauschenderBach befindet sich auf einem aufstrebenden Ast
Standard

Kommt aufjedenfall auf meine "Zu lesen Liste", aber das gekaufte Buch wird trotzdem erstmal durchgearbeitet. :P
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:54 Uhr.