2Divs übereinander und ein weiterer rechts daneben

[Trubadur]

Hallo erstmal. Bin neu hier, aber nicht unbedingt ein Neuling was (X)HTML und CSS angeht.
Jedoch stehe ich derzeit irgendwie total auf einem riesigen Schlauch.

Folgendes Problem:
2 DIVs sollen übereinander liegen. Der erste DIV enthält nur ein Bild welches ich wiederrum per CSS mit em-Größe angebe, damit es auch im FF < 3.0 und IE < 7 entsprechend skaliert wird, wenn man die Schriftgröße verändert.
Der darüberliegende DIV enthält eine Liste mit Links.

Rechts daneben soll dann der Content-DIV erscheinen.

(Randbemerkung : Mit floats hab ich das alles wunderbar geschafft, aber musste nun zu position-Angaben wechseln wegen den 2 übereinanderliegenen DIVs welche ich wiederrum brauche für die Skalierung.)

Hier mein xhtml-Aufbau:

  
<div class="navwrapper">  
 <img src="grafiken/nav_bg2.gif" />  
</div><!-- navwrapper -->  
<div class="nav">  
 <ul>  
  <li><a href="">Startseite</a></li>  
  <li><a href="">weitere Links</a></li>  
 </ul>  
</div><!-- nav -->  
  
<div class="content">  
Mein ganzer Inhalt  
</div>  

Dazu folgende relevanten CSS-Definitionen:

  
.navwrapper {  
 position: absolute;  
 float: left;  
 height: 40em;  
}  
.navwrapper img { /* Zier-/Hintergrundgrafik links*/  
 width: 11.0em;  
 height: 39.85em;  
}  
.nav {  
 position: relative;  
 min-height: 40.625em;  
 width: 11.0625em;  
}  
.content {  
 position: relative;  
 left: 16.875em;  
 /*top: -40.625em;*/  
 width: 40em;  
 min-height: 40em;  
}  

Derzeit schaut es so aus:
Beide Divs übereinander und passt auch alles ... der Knackpunkt ist der content-DIV. Derzeit liegt fängt der erst am Ende vom navwrapper&nav-DIV an.
Gebe ich dem Content nun eine negative top-Angabe (derzeit auskommentiert) schaut auch alles schön aus, aber dafür habe ich am ende der Seite den Teil, den ich oben als neg. top angegeben habe als leeren bereich. Mein gesamter Seitenwrapper wird einfach um 40.625em vergrößert, was ich nicht verstehe.

Hoffe es ist alles klar geworden und ich hab das Problem nicht allzu verwirrend beschrieben.

Vielen Dank schonmal im voraus

[bleicher]

Grüße,

#content soll margin-left haben, das größer ist als die breite von #nav (gib paar pixel für den IE mit!)

MFG
bleicher

[bleicher]

P.S:die beiden sollen natürlich noch float:left haben, was bei dir nicht der fall ist.
MFG
bleicher

[Trubadur]

P.S:die beiden sollen natürlich noch float:left haben, was bei dir nicht der fall ist.
MFG
bleicher

Aber float funzt doch nicht, wenn ich position: relative habe !?

[bleicher]

Grüße,

Aber float funzt doch nicht, wenn ich position: relative habe !?

dann weg damit (mit position relative )
MFG
bleicher

[Trubadur]

Grüße,

Aber float funzt doch nicht, wenn ich position: relative habe !?
dann weg damit (mit position relative )
MFG
bleicher

ohne position relative klappt aber doch das konstrukt mit 2 sich überdeckende DIVs nicht mehr.

[bleicher]

Grüße,

ohne position relative klappt aber doch das konstrukt mit 2 sich überdeckende DIVs nicht mehr.

dann verzichte auf die überlappung - wen man genau wüsste was du vorhast, wäre vllt ein sinnvoler ersatzvorshclag möglich,.

hast du eine skizze die dein designvorhaben illustriert?
MFG
bleicher

[Trubadur]

Grüße,

ohne position relative klappt aber doch das konstrukt mit 2 sich überdeckende DIVs nicht mehr.

dann verzichte auf die überlappung - wen man genau wüsste was du vorhast, wäre vllt ein sinnvoler ersatzvorshclag möglich,.

hast du eine skizze die dein designvorhaben illustriert?
MFG
bleicher

Wenn ich auf die Überlappung verzichten würde, dann bräuchte ich auch keine Hilfe. Sinn des ganzen ist:
Die Navigationsleiste soll ein Hintergrundbild haben. Das ließe sich ja auch in css per Background realisieren. Aber bei wenn der User im Browser nun skaliert (STRG + + bzw. STRG + -) würde diese Hintergrundgrafik im IE 6 und FF2 nicht mitskaliert werden.
Also das Konstrukt, dass in einen DIV nur das Bild mache und per CSS sage, dass img in diesem DIV die maße x und y in EM hat. Darüber dann der DIV mit der Schrift (Liste)

Meine "Skizze" kannst du übrigens hier sehen :
http://www.germanangels.de/test/index.htm

Öffne das im Firefox und es schaut so aus, wie ich es haben will. Öffne es im Internet Explorer und du wirst sehen, wo das Problem jetzt liegt.
Wobei ich sehr unglücklick damit bin einem DIV sowohl ein float als auch position mitzugeben.
Per Web Developer Toolbar kannste da auch die CSS sehen/bearbeiten.

[bleicher]

Grüße,
in der debugging-phase css auszulagern ist nicht sehr praktisch.
hast du auch übelegt das bidl ganz normal im navi-div platzieren (als inline-block element) und den nachfolgenden text mit negativem margin über das bild zu ziehen? nicht DIE lösung aber könnte funktionieren.
zudem lassen sich img-s auch selbstständig (ohne divs drum herum) wunderbar gestalten.
MFG
bleicher

[Trubadur]

Grüße,
in der debugging-phase css auszulagern ist nicht sehr praktisch.
hast du auch übelegt das bidl ganz normal im navi-div platzieren (als inline-block element) und den nachfolgenden text mit negativem margin über das bild zu ziehen? nicht DIE lösung aber könnte funktionieren.
zudem lassen sich img-s auch selbstständig (ohne divs drum herum) wunderbar gestalten.
MFG
bleicher

negativer Margin wäre eine möglichkeit, wobei ich befürchte, dass auch dies dem IE nicht gefallen wird.

Das alles wäre ja auch kein Ding, wenn ich im CSS für den Background em-angaben machen könnte. Wichtig ist halt die Skalierbarkeit der Grafik.
Und unabhängig davon, wie man es in welcher form definiert tun das nur der FF3 und IE7 skalieren (die skalieren sogar Flash).

[bleicher]

Grüße,

Und unabhängig davon, wie man es in welcher form definiert tun das nur der FF3 und IE7 skalieren (die skalieren sogar Flash).

verwechsel skalieren(?) und zoom nicht -  es ist ein unterschied ob ich die schrift größer mache, oder die ganze websiete "as is" zoome, also so vergrößere als wäre es eine einzelne grafik.
du musst dich eigentlich damit abfinden, dass ältere browser kein zoom beherrschen. neuere und gute wie Opera 9.5 haben damit kein problem.

grundsätzlich machst du dir zu viele gedanken um den zoom - es ist eine sonderfunktion, die nicht unbegründet eingesetzt wird, und bei der man wohl bereit ist abstriche in kauf zu nehmen.

MFG
bleicher

[Trubadur]

Grüße,

Und unabhängig davon, wie man es in welcher form definiert tun das nur der FF3 und IE7 skalieren (die skalieren sogar Flash).

verwechsel skalieren(?) und zoom nicht -  es ist ein unterschied ob ich die schrift größer mache, oder die ganze websiete "as is" zoome, also so vergrößere als wäre es eine einzelne grafik.

Mit skalieren meine ich schon das Umstellen der Schriftgröße innerhalb des Browsers (im FF: Ansicht -> Schriftgrad -> Vergrößern).
Von daher passt das schon. Mit dem negativen Margin hab ich es ja jetzt so hinbekommen, wie ich es wollte. Hintergrund des ganzen: In hinblick auf die Barrierefreiheit sollte für User mit älteren Browsern das gesamte Layout inkl. Grafiken mitskaliert werden, wenn sehbehinderte Menschen zum besseren Lesen den Schriftgrad erhöhen. Wenn die eine Bildschirmlupe verwenden, dann ist es ja egal. Aber man muss sich da schon Gedanken machen.

du musst dich eigentlich damit abfinden, dass ältere browser kein zoom beherrschen. neuere und gute wie Opera 9.5 haben damit kein problem.

grundsätzlich machst du dir zu viele gedanken um den zoom - es ist eine sonderfunktion, die nicht unbegründet eingesetzt wird, und bei der man wohl bereit ist abstriche in kauf zu nehmen.

Wie gesagt .. .in Hinblick auf Barrierefreiheit kann man sich nicht zu viele Gedanken machen. Das dieses Thema noch immer nicht in den Köpfen angekommen ist zeigt allein schon, dass ich auf anhieb 5 staatliche Seiten nennen kann, die nicht barrierefrei sind, obwohl sie es laut Gesetz sein müßten.

Gruss,
Trubadur

MFG
bleicher

[bleicher]

Grüße,

Wie gesagt .. .in Hinblick auf Barrierefreiheit kann man sich nicht zu viele Gedanken machen. Das dieses Thema noch immer nicht in den Köpfen angekommen ist zeigt allein schon, dass ich auf anhieb 5 staatliche Seiten nennen kann, die nicht barrierefrei sind, obwohl sie es laut Gesetz sein müßten.

background ist nicht inhaltsrelevant - von daher kann seine skalierbarkeit egal sein.

MFG
bleicher

[Trubadur]

Grüße,

Wie gesagt .. .in Hinblick auf Barrierefreiheit kann man sich nicht zu viele Gedanken machen. Das dieses Thema noch immer nicht in den Köpfen angekommen ist zeigt allein schon, dass ich auf anhieb 5 staatliche Seiten nennen kann, die nicht barrierefrei sind, obwohl sie es laut Gesetz sein müßten.

background ist nicht inhaltsrelevant - von daher kann seine skalierbarkeit egal sein.

Da hast du eigentlich recht. Sieht aber dennoch ziemlich mies aus, wenn die Schrift skaliert und der Background fest bleibt. Und das würde bestimmt auch das Schönheitsempfinden einer Person stören, die Seiten vergrößern muss um sie lesen zu können.

In dem Sinne .. erstmal danke

MFG
bleicher

[Trubadur]

Ich habe zur besseren beurteilung mal eine Testseite mit dem Konstrukt online gestellt.
Im FF2 schaut das auch alles ganz toll aus (So soll es sein !)
Im IE7,IE6, IE5.5 zerreißt es das aber total.

Link: http://www.germanangels.de/test/index.htm

[Trubadur]

P.S:die beiden sollen natürlich noch float:left haben, was bei dir nicht der fall ist.
MFG
bleicher

Ok ... das mit den floats ergibt das richtige ergebnis im FF2.
Aber keiner der Internet Explorer zeigt das richtig an.
Dort sieht meine Mitte nun so aus, dass ich habe :
links: Meine Liste mit den Links
mitte: Mein Content
und jetzt zusätzlich noch rechts den Div der die Hintergrundgrafik enthält, die eigentlich im linken DIV mit drin sein sollte (2 DIVs übereinander)