zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grafik per z-index positionieren geht nicht - denkfehler?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.03.2007, 00:20
Benutzerbild von css_tester
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2006
Ort: 63110
Beiträge: 22
css_tester befindet sich auf einem aufstrebenden Ast
Frage 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

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

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;	
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.03.2007, 00:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.03.2007, 00:46
Benutzerbild von css_tester
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2006
Ort: 63110
Beiträge: 22
css_tester befindet sich auf einem aufstrebenden Ast
Standard

#fricca
DANKE für die schnelle Antwort

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");
}
Mit Zitat antworten
  #4 (permalink)  
Alt 20.03.2007, 00:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.03.2007, 01:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 20.03.2007, 01:15
Benutzerbild von css_tester
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2006
Ort: 63110
Beiträge: 22
css_tester befindet sich auf einem aufstrebenden Ast
Standard

#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
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...
Mit Zitat antworten
  #7 (permalink)  
Alt 20.03.2007, 01:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von css_tester Beitrag anzeigen
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?
Mit Zitat antworten
  #8 (permalink)  
Alt 20.03.2007, 01:32
Benutzerbild von css_tester
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2006
Ort: 63110
Beiträge: 22
css_tester befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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");
}
Mit Zitat antworten
  #9 (permalink)  
Alt 20.03.2007, 01:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ich weiß nicht, was dein Problem ist.
5px sind sicherlich zu wenig.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.03.2007, 01:41
Benutzerbild von css_tester
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2006
Ort: 63110
Beiträge: 22
css_tester befindet sich auf einem aufstrebenden Ast
Standard

OK 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...
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Grafik links unten positionieren UND Text rechts umfließen Worance CSS 3 02.06.2008 22:29
mit Link hinterlegte Grafik in Tabellenzelle absolut positionieren... jhartlep CSS 0 01.11.2007 13:46
Grafik richtig positionieren?! Pumpkin CSS 7 13.06.2007 22:43
Grafik innerhalb eines Layers positionieren rothom CSS 3 07.06.2004 11:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:45 Uhr.