Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
CSS: z-Index-Problem (falsche Div-Reihenfolge) in IE
Skip to first unread message
Daniel Breitner
Jan 26, 2012, 4:10:59 PM1/26/12
to
Hallo,
um einen Effekt zu erreichen, dass eine Überschrift halb den
Textbereich-Div überdeckt, habe ich beide ein bischen gegeneinander
mit margin verschoben, und die z-Indizes entsprechend gesetzt - s. zB.
http://val.muriel-rist.webseiten.cc/referenzen
Das Wort "Auftraggeber/ Referenzen" soll also *vor* dem "grauen
Kasten" liegen. Funktioniert auch super - in allen aktuellen Browsern
(FF, Chrome, Safari, Opera) - *außer* dem... IE, genau.
Wie kann ich das lösen?? Dass auch der IE... ihr wisst. Danke für alle
Tipps...
(...ach und äh - gibts eigentlich eine Group speziell für CSS ???)
Daniel
--
Marty - it's perfect! You're just not thinking fourth dimensionally!
[Emmett "Doc" Brown]
If you wish to email me, please use newsreply at wuwei minus webservices dot de
um einen Effekt zu erreichen, dass eine Überschrift halb den
Textbereich-Div überdeckt, habe ich beide ein bischen gegeneinander
mit margin verschoben, und die z-Indizes entsprechend gesetzt - s. zB.
http://val.muriel-rist.webseiten.cc/referenzen
Das Wort "Auftraggeber/ Referenzen" soll also *vor* dem "grauen
Kasten" liegen. Funktioniert auch super - in allen aktuellen Browsern
(FF, Chrome, Safari, Opera) - *außer* dem... IE, genau.
Wie kann ich das lösen?? Dass auch der IE... ihr wisst. Danke für alle
Tipps...
(...ach und äh - gibts eigentlich eine Group speziell für CSS ???)
Daniel
--
Marty - it's perfect! You're just not thinking fourth dimensionally!
[Emmett "Doc" Brown]
If you wish to email me, please use newsreply at wuwei minus webservices dot de
Marcel Müller
Jan 26, 2012, 5:02:20 PM1/26/12
to
Hallo,
On 26.01.2012 22:10, Daniel Breitner wrote:
> um einen Effekt zu erreichen, dass eine Überschrift halb den
> Textbereich-Div überdeckt, habe ich beide ein bischen gegeneinander
> mit margin verschoben, und die z-Indizes entsprechend gesetzt - s. zB.
> http://val.muriel-rist.webseiten.cc/referenzen
hmm, da sind ein paar handwerkliche Fehler drin. Z.B. unzulässige
Sonderzeichen ohne Charset-Angabe. Aber etwas, was im Zusammenhang
steht, sehe ich nicht.
> Das Wort "Auftraggeber/ Referenzen" soll also *vor* dem "grauen
> Kasten" liegen. Funktioniert auch super - in allen aktuellen Browsern
> (FF, Chrome, Safari, Opera) - *außer* dem... IE, genau.
Naja, das Erscheinungsbild ist aber nicht homogen. Siehe
http://home.arcor.de/maazl/temp/referenzen.png (war FF 6)
> Wie kann ich das lösen?? Dass auch der IE... ihr wisst. Danke für alle
> Tipps...
Wenn du wirklich willst, dass es überall gleich aussieht, hilft nur die
Klassische Lösung: Bitmaps. (SVG ist noch nicht so weit.) Da das Layout
der Seite sowieso nur wie ein Bitmap funktioniert, sprich in keiner
Weise mit dem Bildschirm oder der Fenstergröße skaliert, wäre das
zweifelsohne verschmerzbar.
> (...ach und äh - gibts eigentlich eine Group speziell für CSS ???)
Nicht dass ich wüsste.
Marcel
On 26.01.2012 22:10, Daniel Breitner wrote:
> um einen Effekt zu erreichen, dass eine Überschrift halb den
> Textbereich-Div überdeckt, habe ich beide ein bischen gegeneinander
> mit margin verschoben, und die z-Indizes entsprechend gesetzt - s. zB.
> http://val.muriel-rist.webseiten.cc/referenzen
Sonderzeichen ohne Charset-Angabe. Aber etwas, was im Zusammenhang
steht, sehe ich nicht.
> Das Wort "Auftraggeber/ Referenzen" soll also *vor* dem "grauen
> Kasten" liegen. Funktioniert auch super - in allen aktuellen Browsern
> (FF, Chrome, Safari, Opera) - *außer* dem... IE, genau.
http://home.arcor.de/maazl/temp/referenzen.png (war FF 6)
> Wie kann ich das lösen?? Dass auch der IE... ihr wisst. Danke für alle
> Tipps...
Klassische Lösung: Bitmaps. (SVG ist noch nicht so weit.) Da das Layout
der Seite sowieso nur wie ein Bitmap funktioniert, sprich in keiner
Weise mit dem Bildschirm oder der Fenstergröße skaliert, wäre das
zweifelsohne verschmerzbar.
> (...ach und äh - gibts eigentlich eine Group speziell für CSS ???)
Marcel
Thomas 'PointedEars' Lahn
Jan 26, 2012, 7:53:43 PM1/26/12
to
Daniel Breitner wrote:
> um einen Effekt zu erreichen, dass eine Überschrift halb den
> Textbereich-Div überdeckt, habe ich beide ein bischen gegeneinander
> mit margin verschoben, und die z-Indizes entsprechend gesetzt - s. zB.
> http://val.muriel-rist.webseiten.cc/referenzen
Standardantwort: Zuerst
> um einen Effekt zu erreichen, dass eine Überschrift halb den
> Textbereich-Div überdeckt, habe ich beide ein bischen gegeneinander
> mit margin verschoben, und die z-Indizes entsprechend gesetzt - s. zB.
> http://val.muriel-rist.webseiten.cc/referenzen
<http://validator.w3.org/check?uri=http://val.muriel-
rist.webseiten.cc/referenzen>,
dann
<http://jigsaw.w3.org/css-validator/validator?uri=http://val.muriel-
rist.webseiten.cc/referenzen&profile=css3&usermedium=all&warning=1&vextwarning=&lang=de>
> Das Wort "Auftraggeber/ Referenzen" soll also *vor* dem "grauen
> Kasten" liegen. Funktioniert auch super - in allen aktuellen Browsern
> (FF, Chrome, Safari, Opera) - *außer* dem... IE, genau.
>
> Wie kann ich das lösen?? Dass auch der IE... ihr wisst. Danke für alle
> Tipps...
benutzt eine eigene Version der Layout-Engine (neuere Versionen sogar
mehrere, je nach Einstellung). In welchen davon soll es funktionieren?
> (...ach und äh - gibts eigentlich eine Group speziell für CSS ???)
Diese Gruppe müsste innerhalb der de.comm.infosystems.www.authoring.*-
Hierarchie liegen, und dort gibt es auch keine Gruppe nur für HTML. Und
jetzt bitte die studentische Transferleistung …
Fragen nach Newsgroups stellst Du übrigens besser in de.newusers.questions,
sofern Dich die Artikel in de.newusers.infos nicht weiterbringen.
PointedEars
--
Snowboarder können gar kein JavaScript. Sie klicken in Dreamweaver
'was zusammen und glauben, das sei "Programmieren".
-- Andreas Hollmann in dciwam
Arno Welzel
Jan 27, 2012, 2:28:20 AM1/27/12
to
Daniel Breitner, 2012-01-26 22:10:
> Hallo,
>
> um einen Effekt zu erreichen, dass eine Überschrift halb den
> Textbereich-Div überdeckt, habe ich beide ein bischen gegeneinander
> mit margin verschoben, und die z-Indizes entsprechend gesetzt - s. zB.
> http://val.muriel-rist.webseiten.cc/referenzen
>
> Das Wort "Auftraggeber/ Referenzen" soll also *vor* dem "grauen
> Kasten" liegen. Funktioniert auch super - in allen aktuellen Browsern
> (FF, Chrome, Safari, Opera) - *außer* dem... IE, genau.
>
> Wie kann ich das lösen?? Dass auch der IE... ihr wisst. Danke für alle
> Tipps...
Erstmal dafür sorgen, dass es ein gültiges Dokument ist:
<http://validator.w3.org/check?uri=http%3A%2F%2Fval.muriel-rist.webseiten.cc%2Freferenzen>
Selbst wenn man den Zeichensatz vorgibt, hat es immer noch etliche Fehler:
<http://validator.w3.org/check?uri=http%3A%2F%2Fval.muriel-rist.webseiten.cc%2Freferenzen&charset=iso-8859-1>
Erstmal diese Fehler beheben - vorher ist eine Fehlersuche schwierig.
Ansonsten finde ich das Design nicht so glücklich - die Idee mit der
Überschrift, die in den Kasten hineinragt wirkt eher so, als würde hier
ein Fehler vorliegen.
--
Arno Welzel
http://arnowelzel.de
http://de-rec-fahrrad.de
> Hallo,
>
> um einen Effekt zu erreichen, dass eine Überschrift halb den
> Textbereich-Div überdeckt, habe ich beide ein bischen gegeneinander
> mit margin verschoben, und die z-Indizes entsprechend gesetzt - s. zB.
> http://val.muriel-rist.webseiten.cc/referenzen
>
> Das Wort "Auftraggeber/ Referenzen" soll also *vor* dem "grauen
> Kasten" liegen. Funktioniert auch super - in allen aktuellen Browsern
> (FF, Chrome, Safari, Opera) - *außer* dem... IE, genau.
>
> Wie kann ich das lösen?? Dass auch der IE... ihr wisst. Danke für alle
> Tipps...
<http://validator.w3.org/check?uri=http%3A%2F%2Fval.muriel-rist.webseiten.cc%2Freferenzen>
Selbst wenn man den Zeichensatz vorgibt, hat es immer noch etliche Fehler:
<http://validator.w3.org/check?uri=http%3A%2F%2Fval.muriel-rist.webseiten.cc%2Freferenzen&charset=iso-8859-1>
Erstmal diese Fehler beheben - vorher ist eine Fehlersuche schwierig.
Ansonsten finde ich das Design nicht so glücklich - die Idee mit der
Überschrift, die in den Kasten hineinragt wirkt eher so, als würde hier
ein Fehler vorliegen.
--
Arno Welzel
http://arnowelzel.de
http://de-rec-fahrrad.de
Thomas Braun
Jan 27, 2012, 2:48:36 AM1/27/12
to
Arno Welzel wrote:
> Ansonsten finde ich das Design nicht so glücklich - die Idee mit der
> Überschrift, die in den Kasten hineinragt wirkt eher so, als würde hier
> ein Fehler vorliegen.
Genau, es würde eher nach "Absicht" aussehen wenn der graue Hintergrund an
> Ansonsten finde ich das Design nicht so glücklich - die Idee mit der
> Überschrift, die in den Kasten hineinragt wirkt eher so, als würde hier
> ein Fehler vorliegen.
der Stelle eine Lücke hätte...
thomas
Gustaf Mossakowski
Jan 27, 2012, 5:28:38 AM1/27/12
to
Daniel Breitner schrieb:
> um einen Effekt zu erreichen, dass eine Überschrift halb den
> Textbereich-Div überdeckt, habe ich beide ein bischen gegeneinander
> mit margin verschoben, und die z-Indizes entsprechend gesetzt - s. zB.
> http://val.muriel-rist.webseiten.cc/referenzen
<http://www.w3.org/TR/CSS2/visuren.html#z-index>:
| 'z-index'
| Applies to: positioned elements
.headerBlock ist, soweit ich das sehe, kein positioniertes Element.
> Das Wort "Auftraggeber/ Referenzen" soll also *vor* dem "grauen
> Kasten" liegen.
Du könntest die Überschrift auch in den grauen Kasten legen, ihm einen
entsprechend großen Rand nach oben geben und dann die Überschrift mit
negativem Rand nach oben schieben.
Nur ein paar Empfehlungen am Rande:
- Die JS- und CSS-Blöcke solltest Du in separate Dateien auslagern,
jeder wird es Dir danken.
- Es gibt noch Elemente jenseits von DIV, bspw. »<div class="headerText
headerText_1">« ließe sich einfacher und sinnvoller als <h1> schreiben,
mit all den Vorteilen, die eine semantische Auszeichnung hier bringt;
»<br />Soziale Einrichtungen<br />Messen ...« sieht eher nach einer
ungeordneten Liste mit UL LI aus
- Man kann in CSS auch Elemente innerhalb von Klassen ansprechen, »<div
class="feLangLinks_LinkBlock"><a class="feLangLinks_link" ...« wird dann
überflüssig. Die Links können mit ».feLangLinks_LinkBlock a« im
Stylesheet angesprochen werden
- Ich würde CSS und (veraltete) HTML-Formatierungen wie <td
align="center"> nicht mischen, das ist übersichtlicher und reduziert
Fehlerquellen
- !important-Angaben haben im Anbieter-CSS eigentlich nichts zu suchen
Viele Grüße
Gustaf
> um einen Effekt zu erreichen, dass eine Überschrift halb den
> Textbereich-Div überdeckt, habe ich beide ein bischen gegeneinander
> mit margin verschoben, und die z-Indizes entsprechend gesetzt - s. zB.
> http://val.muriel-rist.webseiten.cc/referenzen
| 'z-index'
| Applies to: positioned elements
.headerBlock ist, soweit ich das sehe, kein positioniertes Element.
> Das Wort "Auftraggeber/ Referenzen" soll also *vor* dem "grauen
> Kasten" liegen.
entsprechend großen Rand nach oben geben und dann die Überschrift mit
negativem Rand nach oben schieben.
Nur ein paar Empfehlungen am Rande:
- Die JS- und CSS-Blöcke solltest Du in separate Dateien auslagern,
jeder wird es Dir danken.
- Es gibt noch Elemente jenseits von DIV, bspw. »<div class="headerText
headerText_1">« ließe sich einfacher und sinnvoller als <h1> schreiben,
mit all den Vorteilen, die eine semantische Auszeichnung hier bringt;
»<br />Soziale Einrichtungen<br />Messen ...« sieht eher nach einer
ungeordneten Liste mit UL LI aus
- Man kann in CSS auch Elemente innerhalb von Klassen ansprechen, »<div
class="feLangLinks_LinkBlock"><a class="feLangLinks_link" ...« wird dann
überflüssig. Die Links können mit ».feLangLinks_LinkBlock a« im
Stylesheet angesprochen werden
- Ich würde CSS und (veraltete) HTML-Formatierungen wie <td
align="center"> nicht mischen, das ist übersichtlicher und reduziert
Fehlerquellen
- !important-Angaben haben im Anbieter-CSS eigentlich nichts zu suchen
Viele Grüße
Gustaf
0 new messages