• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

z-index "problem"

Status
Für weitere Antworten geschlossen.
Loon3y

Loon3y

Neues Mitglied
Hallo,

ich habe folgendes Problem im Moment.

Ich benutze einen Banner mit fester Größe, also ein Bild welches 850x150px groß ist. Die Seite hat einen geteilten Hintergrund. Nun, wenn ich das browserfester sagen wir mal 900px x 100px groß auf habe ist alles ok, aber wenn ich das Fenster kleiner schiebe, soll der Banner NICHT VOR den Seitenrändern sein, sondern dahinter. Ist dies mit z-index möglich? Habe das nun versucht wie ich es eigentlich kenne, aber irgendwie habe ich wohl einen fehler drin.

css:
Code: 
div#over_outer { height: 100%;  margin: 10px auto; background-color: #ffffff; background-image: url("graphics/body-over-left.png");
         background-position: left top; background-repeat: repeat-y;
        }

div#over_outer div#over         { height: 100%; background-image: url("graphics/body-over-right.png"); background-position: right top; background-repeat: repeat-y; }

div#over_outer div#over div#banner         { width:98%; }
div#over_outer div#over div#banner h1     { text-align:center; }
div#over_outer div#over div#banner img     { border: 0px; }
html

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>
...........
<link href="navigation.css" rel="stylesheet" type="text/css" />
<link href="page.css" media="screen" rel="stylesheet" type="text/css" />
<link href="print.css" media="print.css" rel="stylesheet" type="text/css" />

<title> <?php echo $title ?> </title>
</head>
<body>

<div id="over_outer">
<div id="over">

    <div id="banner">
    <h1> <a href="#"> <img src="graphics/header.png" width="850" height="150" alt="header" /> </a> </h1>
    </div>

.......
</div>
</div>
</body>
</html>
Vielen dank schoneinmal für die Antworten.

Ist es nun möglich den Header, beim verkleinern des Browserfenster HINTER den linken und rechten Seitengrafiken verschwinden zu lassen?

Gruß
Loon3y

P.S.: nicht wegen den "punkten" wundern, habe die Metas und den Contentbereich entfernt und mit "..." ersetzt.
 
Zuletzt bearbeitet:
Versuch's mal, indem du #over position: relative; und #banner position: absolute; zuweist. Dem ersten gib z-index: 1, dem zweiten z-index:2
(ohne Gewähr, da nicht getestet).
 
prm schrieb:
Versuch's mal, indem du #over position: relative; und #banner position: absolute; zuweist. Dem ersten gib z-index: 1, dem zweiten z-index:2
(ohne Gewähr, da nicht getestet).
Zum Vergrößern anklicken....


Geht leider auch nicht. Ist es überhaupt möglich dies per z-index so wie gedacht zu formatieren? Gibt es eventuelle noch eine andere Lösung, worauf ich bislang nicht gekommen bin, bei der ich das problem mit "Banner über Seitengrafiken beim verkleinern des fenster" lösen könnte?
 
neuroleptika schrieb:
Mit background-image für h1 oder h1 a.

Lade dein Beispiel einfach mal hoch.
Zum Vergrößern anklicken....

Leider ist dies nicht möglich da da vertrauensvolle Daten auf der Seite enthalten sind. Müsste dazu alles löschen und umschreiben und die Grafiken ersetzen.

Wenn ich den Header in die CSS als background einpflege mag es auch nicht. Brauch ich eine absolute / relative positionierung damit z-index funktioniert? hab schon einiges gelesen, leider konnte mir keine seite eine antwort bringen wie ich das problem löse.

Ich würde ungerne davon ausgehen, das die Benutzer dieser Seite immer mindestens 750px + x px Seitengrafik in ihrem Browserfenster aufhaben müssen.
 
Zuletzt bearbeitet:
:mrgreen:
prm schrieb:
Ja, die Elemente müssen absolut oder relativ positioniert sein, wie von neuroleptika bereits erwähnt:
SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

Kannst du den Banner nicht als Hintergrundgrafik zentrieren und dann dem Element zusätzlich eine Hintergrundfarbe (als "Rand") zuweisen?
Ist das vielleicht eine Lösung?: Dynamische Flüssigbilder
Zum Vergrößern anklicken....


das mit dem dynmaischen flüssigbild ist eine sehr gute idee, bin gerade dabei es zu testen.

habe einen fehler auf der seite entdeckt. und zwar bei

Im HTML-Teil wird das Ganze so eingebunden:
<div id="container">
<p class="fluessigbild"></p>
</p><!--Ende container-->
Zum Vergrößern anklicken....


muss das nicht </div> <!--Ende container--> heißen?`^^"


Vielen dank und liebe grüße.


Für weiter vorschläge würd ich mich bedanken.


Loon3y
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben