Hompage mittig + CSS box randabfallend in beide richtungen.

von **Munic** » 09.03.2010, 21:43

Ich habe ein für mich kniffliges Problem
Mit Hilfe von CSS habe ich jetzt eine Homepage mittig fast ganz oben angeordnet aber jetzt möchte ich noch einen hintergrund (eine CSS Box) anlegen die Nach links und rechts randabfallend ist.

Also mein gewünschtes Resultat wäre:
Die Website die ja schon mittig angeordnet ist aber noch mit einer Hintergrundfarbe im Browserfenster. Ich weiß das man das über den Body regeln kann aber ich will für die obere und untere hälfte des Fensters jeweils eine eigene Farbe.
also width: 100% height: 300px; backround-color: green;
Das lässt sich bei der "Alles schön Mittig" Website von mir nicht realisieren.
Ich kriegs einfach nicht hin. :oops:

Printlerin braucht eure Hilfe

von **Laus** » 09.03.2010, 23:03

Ein Link dazu oder wenigstens der Quellcode und das CSS wären sehr hilfreich.

Gruß Xaver

von **Munic** » 09.03.2010, 23:23

Also ich meine das man dem oberen Bereich meiner Seite eine Andere "bodyhintergrundfarbe" gibt als dem unteren.
Im Prinzip möchte ich nur wissen wie ich eine Box hinter den anderen einbau die endlos in die Breite und 300px in der höhe ist.

von **Munic** » 09.03.2010, 23:24

Sorry noch mal den Quellcode

* {margin: 0; padding: 0;}

body {
background-color: #999;
font-family: Verdana, Geneva, sans-serif;
font-size: small;
position: absolute;
margin-top: 0px;
margin-left: 0px;
left: 50%;
top: 0%;
}

html { /* erzwingt Scrollbar im Firefox */
height: 101%;
}

#grundflaeche {
background-color: #000;
position: absolute;
margin-left: -500px;
margin-top: 20px;
width: 1000px;
height: 980px;
}

#kopfhintergrund {
background-color: #0F0;
float:left;
width: 100%;
height: 300px;
margin-left: -800px

}

#kopf {
position: absolute;
margin-left: -500px;
margin-top: 20px;
width: 1000px;
height: 280px;
}

#navi1 {
background-color: #666;
position: absolute;
margin-left: -500px;
margin-top: 300px;
width: 200px;
height: 30px;
}

#navi2 {
background-color: #CCC;
position: absolute;
margin-left: -300px;
margin-top: 300px;
width: 200px;
height: 30px;
}

#navi3 {
background-color: #666;
position: absolute;
margin-left: -100px;
margin-top: 300px;
width: 200px;
height: 30px;
}

#navi4 {
background-color: #CCC;
position: absolute;
margin-left: 100px;
margin-top: 300px;
width: 200px;
height: 30px;
}

#navi5 {
background-color: #666;
position: absolute;
margin-left: 300px;
margin-top: 300px;
width: 200px;
height: 30px;
}

#textblock {
background-color: #903;
position: absolute;
margin-left: -450px;
margin-top: 350px;
width: 500px;
height: 300px;
}

#bild1 {
background-color: #03F;
position: absolute;
margin-left: 150px;
margin-top: 350px;
width: 300px;
height: 300px;
}

#footer {
background-color: #FC0;
position: absolute;
margin-left: -500px;
margin-top: 950px;
width: 1000px;
height: 50px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>cameleon</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="grundflaeche"><img on mouse down=verboten()" src="images/cameleon.png" width="1000" height="280" /></div>
<div id="kopfhintergrund"></div>
<div id="kopf"></div>

<div id="navi1"></div>
<div id="navi2"></div>
<div id="navi3"></div>
<div id="navi4"></div>
<div id="navi5"></div>

<div id="textblock"></div>

<div id="bild1"></div>

<div id="footer"></div>

</body>
</html>

von **sejuma** » 10.03.2010, 07:03

Zunächst solltest du die Seite anders zentrieren, damit sie auch bei unterschiedlich großen Bildschirmfenstern zentriert bleibt.
Besser deshalb:

Code: Alles auswählen: #grundflaeche { background-color: #000; width: 1000px; height: 980px; margin: 0 auto; }

Siehe http://www.ohne-css.gehts-gar.net/0001.php

Aus dem gleichen Grund verzichte ebenso auch bei allen anderen Elementen auf absolute Posiitonierungen und ordne sie besser mit float- und margin-Angaben an, siehe http://www.ohne-css.gehts-gar.net/0045.php
Merksatz: Absolute Positionierungen heißen so, weil sie meist "absolut unnötig" sind. :wink:

Unterschiedliche Hintergründe sind durch entsprechende Verschachtelungen bzw. Nutzung von html für den Hintergrund möglich.
Am besten verwendest du einmal eine Farbe und zum andern eine sich kachelnde Hintergrundgrafik mit entsprechender Farbe.
Beispiel:

Code: Alles auswählen: html {background-color: green;} body {background-image: url(red.jpg); background-position: 0 300px;}

html wäre dann für die Gesamtfarbe bzw. den oberen Teil zuständig, der Hintergrund von body beginnt erst 300px von oben.
Das Prinzip findest du an einem ähnlichen Beispiel hier erklärt:
http://www.ohne-css.gehts-gar.net/0049.php

von **Munic** » 10.03.2010, 19:07

Mensch vielen Lieben Dank für die aufschlussreiche Antwort. :-D

Manchmal ist man an einem Punkt wo man ned weiterkommt und nur noch vor sich hinwurschtelt.
Danke Danke

Hompage mittig + CSS box randabfallend in beide richtungen.

Hompage mittig + CSS box randabfallend in beide richtungen.

Re: Hompage mittig + CSS box randabfallend in beide richtungen.

Re: Hompage mittig + CSS box randabfallend in beide richtungen.

Re: Hompage mittig + CSS box randabfallend in beide richtungen.

Re: Hompage mittig + CSS box randabfallend in beide richtungen.

Re: Hompage mittig + CSS box randabfallend in beide richtungen.

Ähnliche Beiträge zu "Hompage mittig + CSS box randabfallend in beide richtungen."

Wer ist online?