✔ 3 Zeilenlayout (an Fenstergröße anpassen)

Status
Nicht offen für weitere Antworten.
K

kai0r

Grünschnabel
Hallo,

ich bin was Webdesign mit CSS angeht leider kompletter Anfänger. Text/Links stylen ist ja OK, aber wenns an die Ausrichtung von ganzen Layoutelementen geht, fand ich bis jetzt leider noch kein gutes Tutorial im Netz. Deswegen schon mal die Frage: Kann mir wer nen gutes Tutorial nennen oder gar nen Buch das speziell auf CSS-Design ausgelegt ist?

Aber zum Problem:

Ich benötige ein Layout das in 3 Zeilen aufgeteilt ist. Also Oben - Mitte - Unten. Die Seite soll in 2 Farben aufgeteilt werden (horizontal) und im Mittelcontainer ist dann ein Bild das jeweils einen Farbverlauf zu der unteren und oberen Farbe hat.

Wie bekomm ich das hin, das die untere und obere Zeile (Container?) sich jeweils auf 100% der Höhe & Breite des Browser anpasst?

Als Beispiel
------------- FARBE 1 --------------
------------- Bildverlag --------------
------------- FARBE 2 --------------

Vielen Dank!
 
Hi,

vielleicht kannst du mit diesem "Grundgerüst" etwas anfangen?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_kai0r</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

html,body {
height:100%;
}

#wrap {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
background:yellow;
}

#top {
height:100px;
background:red;
}

#middle { }

#bottom {
width:100%;
height:100px;
background:red;
position:absolute;
bottom:0;
}
-->
</style>

</head>
<body>

<div id="wrap">
     <div id="top">top</div>
     <div id="middle">middle</div>
     <div id="bottom">bottom</div>
</div>

</body>
</html>
 
Hi Maik!
Vielen Dank für deine Antwort. Genau in diese Richtung sollte es gehen. Ich habe gestern nochmal im Eigenstudium was ausprobiert. Dabei kam folgendes heraus:


Code: 
html {height:100%;}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFFFFF;
	height: 100%;
}

#logo {
	position: absolute;
	top: 40%;
	left: 0px;
	height: 255px;
	width: 100%;
	background-image:url(../img/ks_bg_03.gif);
	text-align: center;
}

#main {
	height: 100%;
}

#kopf {
	position: static;
	background-color: #b7190c;
	height: 50%;
}

#fuss {
	position: static;
	background-color: #fdf9e4;
	height: 50%;
}





<div id="logo">
    <img src="img/logo_05.gif" height="255" width="640" border="0" alt="kreativ-schief.de" />
</div>
<div id="main">
	<div id="kopf"></div>
    <div id="fuss"></div>
</div>


Zu sehen unter: http://www.kreativ-schief.de

Hat im IE7 & FireFox 3.2 Beta funktioniert. Heute in der Schule (Win XP IE6.0.x280) hat er jedoch unter dem Logo nen roten STrich angezeigt.

Ist sicherlich nicht optimal die Lösung.
Vielleicht könnte mir ja einer mal ne Verbesserung "erklären".

Ich danke dir auf jeden Fall schonmal für deinen Code!

MFG,
kai0r
 
Hi,

freut mich, dass dir mein Beispiel weitergeholfen hat. :)

Nimm mal die folgende Regel im Stylesheet auf, damit der IE6 keine Lücke nach dem Grafikelement erzeugt, die von den "White Spaces" (Zeilenumbrüche, Tab-Einrückungen) rund um das <img>-Tag stammt, und in der das Hintergrundbild "ks_bg_03.gif" wiederholt wird:

Code: 
#logo img { display:block; }
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück