Willkommen auf dem Portal für Mediengestalter

kitikonti · Threadersteller

hi,

also es handelt sich um folgende seite:
klick

ich möchte das grobe layout der seite nachbauen.
ich hab ja schon rumprobiert aber komm irgend wie auf keine lösung.

wie ja zu sehen ist gibt es oben und unten einen balken der druchgezogen ist
und in der mitte ist mehr oder weniger der inhaltsbereich, ganz oben mit den buttons.....

ich weis ehrlich gesagt nicht genau wie ich das angehn soll.
normalerweise würde ich den oberen und unteren balken in html mit einem div container erstellen
und zwischen den zwei div containern noch einen für den inhalt der immer mittig ist
(durch width:600px & margin-left:auto & margin-right:auto)

so das problem ist jetzt aber das der mittlere container den oberen überdeckt.
um das zu erreichen hätte ich float verwendet nur dan kann ich den container nicht mehr mittig
des browserfensters machen. oder geht das doch?

was ich auch noch probiert hätte ist in html den container für den inhalt (mittlerer container) in den oberen
container zu verschieben. dan liegen zwar die beiden container übereinander und der mittlere container ist
in der mitte des browserfensters, jedoch spinnt dan der untere container und ignoriert die höhe des
mittleren containers und rutscht ganz rauf zu dem oberen container???

was mach ich falsch?
welcher der beiden ansätze ist richtig?
ist einer der beiden ansätze richtige?
wenn nicht, ist es überhaupt realisierbar mit html und css?

mfg
martin

vecto · **Verfasst** Di 17.03.2009 20:10 **Titel**

kitikonti · Threadersteller

also derzeit siehts so aus

html:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Unbenanntes Dokument</title>
</head>

<body>
<div id="header"></div>
<div id="all"></div>
<div id="footer"></div>
</body>
</html>

css:

* {
margin:0px;
padding:0px;
}

body {
background-color:#CCFFCC;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
}

#header {
height:200px;
background-image:url(../images/header.jpg);
background-repeat:no-repeat;
background-position:center;
background-color:#0099FF;
}

#all {
background-color:#990033;
width:800px;
margin-left:auto;
margin-right:auto;
height:600px;
}

#footer {
background-color:#0099FF;
height:100px;
}

so wies jetzt ist überlappt eben der mittlere bereich den oberen nicht.
das background-image beim header kann man derzeit noch ignorieren

vecto · **Verfasst** Di 17.03.2009 22:57 **Titel**

Die "Überlappung" würde ich so realisieren:

Den dunklen Bereich oben, der überlappt wird, dem body als Hintergrundbild zuweisen.
So wurde das auch bei deiner Beispiel-Seite gemacht.

Kash · **Verfasst** Mi 18.03.2009 09:59 **Titel**

Thema verschoben, HTML/CSS sind keine Programmiersprachen

Willkommen auf dem Portal für Mediengestalter

Thema: weblayout mit html und css nachbauen vom 17.03.2009

weblayout mit html und css nachbauen

Re: weblayout mit html und css nachbauen