Einzelnen Beitrag anzeigen
  #8 (permalink)  
Alt 07.02.2010, 16:50
Benutzerbild von etux
etux etux ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Hallo mantiz,

Du hast offensichtlich den falschen Code gepostet. Oder?

Zitat:
Zitat von mantiz Beitrag anzeigen
Und zwar soll ich nun ein Layout umsetzen, wo es 3 nebeneinander liegende Boxen gibt, welche alle einen Border von 1px haben und jeweils ein kleiner Abstand zwischen den Boxen gegeben ist.
Das verstehe ich so, dass Du eine Lösung ohne Grafiken suchst.
Dein Quellcode sagt mir auch, dass Du dem Layout eine Breite in „em“ gibst, die Spaltenbreiten aber in Prozenten haben willst. Wahrscheinlich, um für das Layout min- und/oder max-width einfacher definieren zu können.

Aus dem Layout
Demo-Layout : Gleich hohe Spalten (Drei-Spalten-flüssiges Layout) :: emil-webdesign.net
wird also das hier
HTML-Code:
<?xml version="1.0" encoding="utf-8"?>
<!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=utf-8" />
		<meta name="Content-Language" content="de" />
		<meta name="language" content="de" />
		<title>mantiz - testcase</title>
		<style type="text/css" media="screen, projection">

* { margin: 0; padding: 0; border: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100.01%; }
html {
	font-size: 100.01%;
}
body {
	font-size: small;
	color: #fff;
	background: #262626;
}

#container {
	width: 50em;
	margin: 100px auto;
}
#container:after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}

/* Hintergrundspalten */
#column-one {
	float: left;
	width: 31%;
}
#column-two {
	float: right;
	width: 100%;
	margin: -1px -110% -1px 10.1%;
}
#column-three {
	float: right;
	width: 100%;
	margin: -1px -110% -1px 10.1%;
}

#column-one,
#column-two,
#column-three {
	border: 1px solid #fff;
}

/* Inhaltspalten */
#content-three {
	float: right;
	width: 90%;
	margin-right: 5%;
}
#content-two {
	float: left;
	width: 90%;
	margin-left: -105%;
}
#content-one {
	float: left;
	width: 90%;
	margin-left: -215%;
}
#content-three,
#content-two,
#content-one {
	padding: 1em 0 1.6em;
}
</style>
		<!--[if lte IE 7]><style type="text/css" media="screen">
* html body {
	text-align /**/: center;
	font-size /**/: x-small;
	f\ont-size: x-small;

}
* html div#container {
	text-align /**/: left;
}
* html #content-three {
	display: inline;
}
* html #column-two,
* html #column-three,
* html #content-two,
* html #content-one {
	position: relative;
}
</style><![endif]-->
	</head>
	<body>
		<div id="container">
			<div id="column-one">
				<div id="column-two">
					<div id="column-three">
						<div id="content-three">
							<h2>column-one</h2>
							<h3>content-three</h3>
							<p>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. 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 ...</p>
						</div>
						<div id="content-two">
							<h2>column-two</h2>
							<h3>content-two</h3>
							<p>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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr ...</p>
						</div>
						<div id="content-one">
							<h2>column-three</h2>
							<h3>content-one</h3>
							<p>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 ...</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
(IE absichtlich im Quirksmode. Mir fällt es nicht ein, wie ich es vor ein Paar Monaten ohne Quirksmode gelöst habe)


EDIT: Habe es hoch geladen:
mantiz - testcase
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (07.02.2010 um 16:58 Uhr)
Mit Zitat antworten