nicht angemeldet
Gunnar Bittersmann@@Sebastian:
nuqneH
Hey, ich bin momentan dabei ein simples Layout zu entwerfen, dass aus drei DIVs besteht, die vertikal nebeneinander gefloatet werden. Die beiden äußeren DIVs weisen lediglich einen Hintergrund auf und umschließen das mittlere DIV, welches den Content enthält.
Die beiden haben also nichts im Markup zu suchen. Weg damit! Wenn man Elemente zum Layouten braucht, schafft man sich welche – mit CSS!
Und dann ist auch das dritte 'div' überflüssig, 'body' als Container reicht.
body { width: 800px; }
#content { width: 740px; }
Das ist keine gute Idee.
Wenn’s denn auch zentriert sein darf:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>TEST</title>
<style type="text/css">
[code lang=css]body
{
margin: auto;
max-width: 740px;
padding: 0 30px;
position: relative;
}
body::before, body::after
{
content: '\A0';
height: 100%;
position: absolute;
top: 0;
width: 30px;
}
body::before
{
background: -moz-linear-gradient(left, #2989d8 0%, #2989d8 31%, #2989d8 62%, #1e5799 96%);
left: -30px;
}
body::after
{
background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 31%, #2989d8 62%, #2989d8 94%);
right: -30px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>[/code]
Die Angabe der Gradienten mit allen Präfixen spar ich mir mal.
Eigentlich wäre das auch ein Fall für 'border-image', aber da warten wir mal auf Browserunterstützung …
Qapla'
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)