XHTMLforum - Grafik per z-index positionieren geht nicht

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Grafik per z-index positionieren geht nicht - denkfehler? (http://xhtmlforum.de/showthread.php?t=45008)

Grafik per z-index positionieren geht nicht - denkfehler?

Hallo Zusammen,
und mal wieder ein neues Problem... :?

Jetzt wollte ich doch noch das Layout um eine weiter Grafik (Monitor Pic am Rande) erweitern und dachte ich könnte das ganze in ein <span> packen und dann irgendwie mit diesem "z-index" unter das <div> mit den Text schieben...
Oder setzt ich das ganze als <img> in die <div id="textboxbreit"> und dann kann der Text noch rum fließen... aber bekomm die Grafik dann auch an den Rand geschoben? Ich dreh noch durch :evil: :?:

Leider sind meine Erfahrungen mit dem z-index gleich null, vielleicht muss ich das auch ganz anders Aufbauen/Realisieren!?!! :shock:

Hier mal der Aufbau der Seite (die man sich hier anschauen kann ):
- besser hab' ich's nicht gewusst, lerne ja immer noch dazu!
- Verbesserungsvorschläge werden gerne angenommen

| body (zentrierung und backgroundimage)
|| div#box (zentrierung und backgroundimage)
||| div#boxcontent (breite festlegen)
|||| div#header (inkl. 2x Navi)
||||| <ul id="navi_oben">
||||| <ul id="navi_header">
|||| div#abstand (inkl. h1)
|||| div#mastertextbox
|||| span#mastertextboxmonitor (Monitorpic z-index)
||||| div#textboxbreit (Textinhalte der Seite)
|||| div#footer (Fusszeile im Layout)
|||| div#footer2 (Fusszeile außerhalb Layout)

xhtml

Code:

(...)

</div>

<div id="mastertextbox">

<span id="mastertextboxmonitor"></span>

  <div id="textboxbreit">

    <p>

    Testtext Texttext TestText Testtext Texttext TestText Testtext

    Testtext Texttext TestText Testtext Texttext TestText Testtext 

    </p>

  </div>                

</div>                

<div id="footer">

(...)

css

Code:

div#mastertextbox {

z-index: 1;

width: 976px;

float: left;

/* display: block; */                        

overflow: hidden; /* damit sich der Hintergrund der Textbox anpasst */

margin: auto;

background-repeat: repeat-y;

background-position: center;

background-image: url("../images/layout_body_bg_y_hell.jpg");

}



span#mastertextboxmonitor {

z-index: 10;

clear: left; /* bringt nix - brauch ich das überhaupt??? */ :? 

width: 189px;

height: 199px;

float: right;

padding-right: 33px;        

background-repeat: no-repeat;

background-image: url("../images/layout_monitor.jpg");

}



div#textboxbreit {

float: left;

z-index: 100;

width:835px;

padding-left: 40px;

margin:auto;

font-size: 80%;        

text-align: justify;        

}

Wenn der Inhalt von #textboxbreit das Bild umfließen soll, dann entferne float und width.
Oder setz das Bild in die Textbox hinein.

z-index hat damit nichts zu tun. Damit wird die Stapelreihenfolge von positionierten Elementen geregelt.

#fricca
DANKE für die schnelle Antwort :mrgreen:

ABER:
Ich glaube mir fehlt hier noch der Durchblick:

Zitat: "...Bild in die Textbox hinein" = aber das muss ja dann eigentlich Teileweise ausserhalb der Textbox 'liegten' damit es zum Layout passt... geht das den?
Zitat: "...positionierten Elementen geregelt" = dacht das ist alles >positioniert<?

Zitat: "...entferne float und width" = wo?
Wenn ich das hier mache, ist nix mehr zu sehen vom Monitor? :?

Code:

span#mastertextboxmonitor {

        z-index: 10;

        clear: left;

/*        width: 189px; */

        height: 199px;

/*        float: right; */

        padding-right: 33px;        

        background-repeat: no-repeat;

        background-image: url("../images/layout_monitor.jpg");

}

Zitat:

"...Bild in die Textbox hinein" = aber das muss ja dann eigentlich Teileweise ausserhalb der Textbox 'liegten' damit es zum Layout passt... geht das den?

Es gibt negative margins...

Zitat:

"...positionierten Elementen geregelt" = dacht das ist alles >positioniert<?

CSS 2.1 | positioned element

Zitat:

Zitat von W3C

An element is said to be positioned if its 'position' property has a value other than 'static'.

CSS 2.1 | z-index

Zitat:

Zitat von W3C

'z-index' [...] Applies to: positioned elements

Zitat:

"...entferne float und width" = wo?

#textboxbreit

Arbeite bitte die Artikel unter FAQ Punkt 2 durch. Dort bekommst du die Grundlagen zum Umgang mit float und clear.

Nutze bitte die Zitat-Funktion des Forums. Danke.

Und noch was: dein overflow:hidden ist eine ganz schlechte Idee. Dein Layout wird unbenutzbar bei schmalem Viewport.
Nochmal: FAQ Punkt 2 durcharbeiten, dort findest du diverse bessere Methoden zum Einschließen von floats.

#fricca

DANKE...

Wieder was gelernt:

Zitat:

Nutze bitte die Zitat-Funktion des Forums. Danke.

Naja... ich arbeite eigentlich schon seit Tagen Bücher und Dokumentationen durch - doch leider erschließt sich mir das nicht alles sofort :oops:

Zitat:

Arbeite bitte die Artikel unter FAQ Punkt 2 durch. Dort bekommst du die Grundlagen zum Umgang mit float und clear.

Also ich habe das mal mit dem:

Zitat:

Oder setz das Bild in die Textbox hinein.

Hier das Ergebnis = ist ja schon viel besser als vorher, doch leider kann ich es auch mit einem "negative margins" nicht aus der <div id="textboxbreit"> bewegen... es schiebt sich dann quasi nur unter den "Rand"... aus dem sichbaren Bereich der Textbox... und liegt nicht 'über' dem Rand... und schließt mit dem Layout ab...

Zitat:

Zitat von css_tester (Beitrag 327853)

leider kann ich es auch mit einem "negative margins" nicht aus der <div id="textboxbreit"> bewegen...

Ich sehe keinen negativen margin in deinem Code.

Zitat:

es schiebt sich dann quasi nur unter den "Rand"... aus dem sichbaren Bereich der Textbox... und liegt nicht 'über' dem Rand... und schließt mit dem Layout ab...

Testest du etwa mit dem IE?

Zitat:

Zitat von fricca (Beitrag 327854)

Ich sehe keinen negativen margin in deinem Code.
Testest du etwa mit dem IE?

Also ich teste mit dem IE 6 und dem FF und Opera = da sieht es bei allen weitestgehend gleich aus...

hier steckt mein negatives margin :?

Code:

#textboxbreitmonitor {

width: 189px; 

height: 199px;

float: right;

padding-right: 0px;

margin-right: -5px; /* !!! HIER !!!! */

background-repeat: no-repeat;

background-image: url("../images/layout_monitor.jpg");

}

Ich weiß nicht, was dein Problem ist.
5px sind sicherlich zu wenig.

OK :lol: OK ... nun geht es.... war ein langer Tag... mit viel Frust...

Code:

...

margin-right: -68px; /* !!! HIER !!!! */

...

Beispiel nun hier

ABER eben leider nur im FF und nicht im IE... :(