Frage stellenHallo,
ich versuche ein Layout zu erstellen bei dem mehrere Ebenen auf einer Hintergrundgrafik liegen und das immer zentriert im Browser dargestellt wird. Das statische Vorbild (links am Browser fest gedockt) könnt ihr unter http://www.voicewan.net sehen,
ich möchte aber das das Layout zentriert dargestellt wird.
Mit dem übereinander legen und dem zentrieren klappt auch alles bis auf das
Hintergrundbild. Ich hab es nun auch in eine eigene Ebene gepackt aber
irgendwie überlagert es alles andere... Ich verstehe einfach nicht woran es liegen kann.
Für Hilfe wäre ich sehr dankbar.
Gruss Marco
Hier mein Code:
<!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" />
<meta name="generator" content="Adobe GoLive" />
<title>Test Site</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css" media="screen"><!--
#back { height: 440px; width: 700px; text-align:left; margin:auto; visibility: visible; position:absolute;}
#logo { height: 110px; width: 150px; top: 5px; text-align:left; margin:auto; visibility: visible;}
#navi { height: 15px; width: 680; top: 130px;text-align:left; margin:auto; visibility: visible;}
#navi2 { height: 15px; width: 680px; top: 153px; text-align:left; margin:auto; visibility: visible;}
#main { height: 400px; width: 450px; top: 190px; text-align:left; margin:auto; visibility: visible;}
#imp { height: 15px; width: 200px; top: 570px; text-align:left; margin:auto; visibility: visible; }
--></style>
</head>
<body>
<div id="back" style="z-index: 0">
<img src="images\main.jpg" alt="" height="440" width="700" border="0">
</div>
<div id="logo" style="z-index: 1">
LOGO SPACE
</div>
<div id="navi" style="z-index: 2">
HOME LINK1 LINK2 LINK3
</div>
<div id="navi2" style="z-index: 3">
ACTUAL PAGE : HOME
</div>
<div id="main" style="z-index: 4">
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
</div>
<div id="imp" style="z-index: 5">
Imprint
</div>
</body>
</html>
Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster
Freischwebendes Layout mit CSS
3 Beiträge • Seite 1 von 1
Freischwebendes Layout mit CSS
von marco1079 » 19.04.2006, 19:24
- marco1079
- Gelegenheitsleser
- Beiträge: 15
- Registriert: 19.04.2006, 19:17
von Laus » 19.04.2006, 22:32
Hallo
Ich hoffe das ich das richtig verstanden habe. Du willst das Layout ungefähr so wie auf der verlinkten Seite. habe dir mal den Quelltext etwas verändert.
Das div id="back" umschließt dabei die divs navi, navi2 und main.
im Style werden im body alle werte auf null gesetzt und eine Hintergrundfarbe vergeben, das ist wichtig weil es sein kann, das einige Browser ohne definierten Hintergrund werte nicht richtig darstellen.
Das Hintergrundbild ist in das div back eingebunden.
mfG Xaver
Ich hoffe das ich das richtig verstanden habe. Du willst das Layout ungefähr so wie auf der verlinkten Seite. habe dir mal den Quelltext etwas verändert.
Das div id="back" umschließt dabei die divs navi, navi2 und main.
im Style werden im body alle werte auf null gesetzt und eine Hintergrundfarbe vergeben, das ist wichtig weil es sein kann, das einige Browser ohne definierten Hintergrund werte nicht richtig darstellen.
Das Hintergrundbild ist in das div back eingebunden.
- Code: Alles auswählen
<!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" />
<meta name="generator" content="Adobe GoLive" />
<title>Test Site</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css" media="screen"><!--
body {
margin: 0;
padding: 0;
background-color:#fff;
}
#back {
text-align:center;
margin:auto;
background-color:#fff;
background-image:url(images/main.jpg);
background-repeat:no-repeat;
background-position:center;
height: 440px; width: 700px;
}
#logo {
height: 110px; width: 150px; top: 5px;
text-align:left;
margin:5px auto;
}
#navi {
height: 15px; width: 680; top: 130px;
text-align:left;
margin:5px 10px;
}
#navi2 {
height: 15px; width: 680px; top: 153px;
text-align:left;
margin:auto;
}
#main {
height: 400px; width: 450px; top: 190px;
text-align:left;
margin:auto;
}
#imp {
height: 15px; width: 200px; top: 570px;
text-align:left;
margin:auto;
}
--></style>
</head>
<body>
<div id="logo">
LOGO SPACE
</div>
<div id="back">
<div id="navi" >
HOME LINK1 LINK2 LINK3
</div>
<div id="navi2">
ACTUAL PAGE : HOME
</div>
<div id="main">
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
BLA BLA BLA BLA BLA BLA BLA<br>
</div>
</div>
<div id="imp">
Imprint
</div>
</body>
mfG Xaver
-
Laus - Moderator
- Beiträge: 1229
- Registriert: 25.02.2006, 00:30
- Wohnort: Furth im Wald
3 Beiträge • Seite 1 von 1
Moderatoren: Laus, Moderatoren
Ähnliche Beiträge zu "Freischwebendes Layout mit CSS"
Zurück zu: CSS für Anfänger
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast