| Autor |
Nachricht |
peter_lang
Dabei seit: 07.12.2005
Ort: Frankfurt/Main
Alter: 34
Geschlecht: 
|
Verfasst Fr 02.02.2007 00:21
Titel CSS und zentrierung von z-index |
  |
|
Hallo,
irgendwie will es nicht so ganz klappen .. ich habe einen container und um den container soll ein Schatten lauslaufen, der al grafik geladen wird. Problem ist, das alles imm linksbündig ist .. obwohl mittig deklarierert.
| Code: |
body {
background-color: #F4F4E7;
margin: auto;
min-height: 100%;
height: 100%;
width: 100%;
}
#shadow {
position:absolute;
z-index:1;
width:888px;
height:664px;
background-image: url("images/bg_schatten.png");
background-repeat: no-repeat;
margin: 0px auto;
}
#container {
position:absolute;
z-index:2;
margin-left: auto;
margin-right: auto;
width: 827px;
height: 600px;
background-color: #ff9900;
margin: 0px auto;
}
|
und der html code
| Code: |
<div id="shadow"> </div>
<div id="container">
zhj ghjghj
</div>
|
... vielleicht sieht einer was ich nicht sehen .. danke im voraus
|
|
| |
   |
 |
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 26
Geschlecht:
|
Verfasst Fr 02.02.2007 09:42
Titel Re: CSS und zentrierung von z-index |
|
|
| Code: |
* {
margin: 0;
padding: 0;
text-align: left;
}
html {
height: 100%;
}
body {
background-color: #F4F4E7;
margin: auto auto;
text-align: center; /* zentrieren für IE */
}
#shadow {
width:888px;
height:664px;
background-image: url("images/bg_schatten.png");
background-repeat: no-repeat;
}
#container {
margin: 30px 0 0 32px;
width: 827px;
height: 600px;
background-color: #ff9900;
}
|
| Code: |
<div id="shadow">
<div id="container">
</div>
</div>
|
Zuletzt bearbeitet von sahnemuh am Fr 02.02.2007 09:45, insgesamt 1-mal bearbeitet
|
|
| |
|
|
peter_lang
Dabei seit: 07.12.2005
Ort: Frankfurt/Main
Alter: 34
Geschlecht:
|
Verfasst Fr 02.02.2007 11:04
Titel
|
|
|
|
Danke erstmal für die Antwort aber er legt mir den container unter den Hintergrund. Mein Fehler, hatte mich nicht klar ausgedrückt, es sind 2 Ebenen und die eine soll unter die andere gelegt werden ... und das ganze eben zentriert. Denn wenn ich z-index einsetze und position:absolute einbaue, dann ist alles linksbündig am Rand .. kriege das nicht mittig
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 26
Geschlecht:
|
Verfasst Fr 02.02.2007 12:02
Titel
|
|
|
ich verstehe dein problem nicht..
eigentlich sollte der container mit meiner lösung über dem schatten liegen.
poste doch bitte mal eine beispielseite irgendwo, wo ich mir das ganze "live" ansehen kann.
wenn du es unbedingt mit absoluter positionierung und z-index lösen willst, machs so:
| Code: |
#shadow {
position:absolute;
z-index:1;
width:888px;
height:664px;
background-image: url("images/bg_schatten.png");
background-repeat: no-repeat;
left: 50%;
top: 50%;
margin-left: -444x;
margin-top: -332px;
}
#container {
position:absolute;
z-index:2;
width: 827px;
height: 600px;
background-color: #ff9900;
left: 50%;
top: 50%;
margin-left: -413px;
margin-top: -300px;
} |
allerdings schiebt es dir die seite dann bei zu kleinen auflösungen nach links oben aus dem viewport.
Zuletzt bearbeitet von sahnemuh am Fr 02.02.2007 12:04, insgesamt 2-mal bearbeitet
|
|
| |
|
|
peter_lang
Dabei seit: 07.12.2005
Ort: Frankfurt/Main
Alter: 34
Geschlecht:
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 26
Geschlecht:
|
Verfasst Fr 02.02.2007 17:00
Titel
|
|
|
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Familienservice</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-align: left;
}
html {
height: 100%;
}
body {
background-color: #F4F4E7;
text-align: center; /* zentrieren für IE */
}
#shadow {
margin: auto auto;
width:888px;
height:664px;
background: url(images/bg_schatten.png) no-repeat;
}
#container {
position: relative;
top: 30px;
left: 32px;
width: 827px;
height: 600px;
background-color: #ff9900;
}
</style>
</head>
<body>
<div id="shadow">
<div id="container">
zhj ghjghj
</div>
</div>
</body>
</html> |
|
|
| |
|
|
peter_lang
Dabei seit: 07.12.2005
Ort: Frankfurt/Main
Alter: 34
Geschlecht:
|
Verfasst Fr 02.02.2007 21:49
Titel
|
|
|
|
argh .. ich oberdepp .. ich seh, das ich den schatten div vor dem container schloss .. aber nun funzt es .. vielen Dank.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Problem: css, zentrierung kompletter Webseite
trotz intensiver Suche Probs bei css-Zentrierung...
zentrierung per CSS: inhalt verschwindet links
CSS - Navigationen untereinander (z-index)
z-index:-1 im IE
Webdesign Index
|
|
Willkommen auf dem Portal für Mediengestalter
