Probleme mit der Breite von Divs

[S_O]

Hallo,
ich bin gerade dabei eine Webseite neu zu gestalten, XHTML 1.1-konform.
Vorher hatte ich sehr viel Chaos mit sehr viel Tabellen und steige selber nicht mehr durch.
Jetzt ist die Hauptseite mit dem gleichen Inhalt und identischem Design von 24KB auf 9KB geschrumpft.
Leider habe ich derzeit noch zwei Probleme die ich nicht in den Griff bekomme (und eins das nur mit dem IE auftritt):

1.) Als Seitenkopf habe ich zwei Bilder, eines Links und eines Rechts. Vorher hatte ich das mit Tabellen gemacht, jetzt mit divs. Das Problem ist nun, wenn sich der Inhalt darunter über 100% Breite ausdehnt, also ein Scrollbalken entsteht, wird das rechte Bild nicht mit ganz nach rechts verschoben, sondern nur bis 100%. Also in dem Bereich, in den man reinscrollen muss gibt es keinen Kopf mehr. Der Kopf ist ein div mit width: 100%. Wie bekomme ich die Breite so hin, das er auch über 100% hinausgeht, wenn sich der Inhalt der Seite auf über 100% ausdehnt?

2.) Unter dem Kopf befinden sich zwei Divs, eines mit float: left als Navigation. Es hat eine feste Breite von 10em. Daneben befindet sich das Haupt-div, das mit margin-left: 10em rechts von der Navigation ist. Das Problem ist nun, sollte ein Inhalt von der Breite her nicht mehr passen (so das Scrollbalken entstehen), wird er automatisch um die Höhe der Navigation nach unten versetzt. Ich habe keine Erklärung dafür.

Nur IE: 3.) Der Internet Explorer versteht Prozent-Angaben für die Breite eines Elements innerhalb des Haupt-Divs absolut und nicht als Prozentanteil von der verfügbaren Breite des Haupt-Divs an.
Eine Tabelle zum Beispiel, die sonst 100% einnimmt vom Hauptdiv (Gesamt - 10em margin-left - 2 * 1em Padding), wird im IE auf 100% der Gesamtseite gedehnt und es entstehen Scrollbalken (und es tritt Problem 2.) auf).
Was kann man da machen?

Probleme 1 und 2 treten in allen von mir getesteten Browsern auf:
IE 5.5
IE 6
Firefox 1.0.7 (Gecko 1.7)
Firefox 1.5 (Gecko 1.8)
Opera 7.5
Opera 8.5
Konqueror 3.4

Ich habe schon sehr viel rumprobiert, aber ich bekomme das nicht hin. Kann mir da irgendjemand helfen?

Vielen Dank,
S_O

[S_O]

Ich habe Problem 3 gerade durch Zufall lösen können:
Der IE schaltet in Quirks-Mode, weil zuerst eine XML-Deklaration kommt und dann der Doctype.
Nun teste ich mit PHP einfach den User-Agent und wenns der IE ist gibts keine XML-Deklaration.
Bei Problem 1 und 2 aber komme ich nicht weiter.

Viele Grüße,
S_O

[Der Martin]

Hallo,

Nun teste ich mit PHP einfach den User-Agent und wenns der IE ist gibts keine XML-Deklaration.

hmm, das ist keine besonders schlaue Lösung. Dann würde ich von dir nämlich immer den XML-Header bekommen. Auch wenn ich mit dem IE unterwegs bin, weil alle meine Browser sich nur als "Generic Browser, Win32" ausgeben.
Der HTTP User Agent ist ein sehr unsicheres Kriterium.

Bei Problem 1 und 2 aber komme ich nicht weiter.

Zu Problem 1: Wieso packst du die Bilder noch in divs? Und wie genau erreichst du, dass sie links bzw. rechts sitzen (float, absolute Positionierung)? Ein Codeausschnitt könnte hilfreich sein.

Zu Problem 2: Das ist das normale Verhalten von gefloateten Elementen. Wenn die Breite nicht mehr ausreicht, um sie nebeneinander anzuzeigen (einschließlich der gewünschten margins und paddings), dann rutschen sie eben untereinander.

Schönen Tag noch,

Martin

[Ashura]

Hallo Martin.

Nun teste ich mit PHP einfach den User-Agent und wenns der IE ist gibts keine XML-Deklaration.

hmm, das ist keine besonders schlaue Lösung.

Denke ich ebenso.
Darum empfehle ich eher diese Methode. (Originalidee von derletztekick)

Zudem frage ich mich, warum der OP unbedingt XHTML 1.1 verwenden will, was momentan keinen praktischen Nutzen gegenüber XHTML 1.0 Strict bringt.

Einen schönen Dienstag noch.

Gruß, Ashura

[S_O]

Hallo,

das mit dem Accept-Test hab ich sowiso drin, da der IE application/xhtml+xml ja nicht kann. Da kann ich die XML-Deklaration auch da mit reinsetzen. Gute Idee!

XHTML 1.1 verwende ich, da ich so dann auch einfach (sollte es der IE mal unterstützen) auch einfach SVG und MathML verwenden kann, ohne irgendwas umzubauen.

Problem 1:

Der HTML-Code:

<div class="titel_pic">
<img src="bild1.png" alt="" />
<div class="titel_img_right"><img src="bild2.png" alt="" /></div>
<div class="titel_line"><img src="linie.png" alt="" /></div>
</div>

CSS:

.titel_line {
 position: absolute;
 top: 78px;
 left: 0;
 right: 0;
 height: 5px;
 border: 0;
 background-color: #d1b585;
 background-image: url('linie.png');
 width: 100%;
 min-width: 779px;
 margin: 0;
 padding: 0;
}

.titel_pic {
 height: 83px;
 background-color: #d1b585;
 background-image: url('bg_kopf.png');
 width: 100%;
 margin: 0;
 padding: 0;
}

.titel_line img {
 position: absolute;
 top: 0;
 margin: 0;
 padding: 0;
}

.titel_img_right {
 text-align: right;
 min-width: 779px;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
}

Ich hab nämlich eine Sache noch nicht erwähnt: Unter den beiden Bildern ist noch ein Bild (eine bunte Linie), 5px Hoch, die einfach immer wiederholt komplett rübergeht. Ich hatte die Bilder auch schon mit float: left und float: right (was viel weniger CSS war), sowie beide mit position: absolute, eines mit left: 0 und das andere right:  0. Ohne Scrollbalken sieht alles gleich aus, aber sobald welche kommen hängen die Bilder sonstwo, entweder sie werden dann untereinander gesetzt (mit float: left/right), was auf keinen Fall passieren sollte oder der rechte Bildrand wird ganz hässlich, weil right: 0 bedeutet nicht ganz rechts, sondern nur bis zum Ende des normalen Ausschnittes. Ich bekomme es nicht, dass das rechte Bild immer ganz rechts ist.

Problem 2:
Nein, ist es nicht. Der Inhalt ist nicht zu breit. Ich habe mich auch vertan, das Problem tritt nur im IE auf. Bei den anderen Browsern lag das daran, das dort ein Absatz <br clear="all" /> war, der die divs gestört hat.
Das Hauptdiv ist auch nicht float: left, sondern normal und dann margin-right: 10em (die Breite des anderen divs). Der IE verschiebt alles was 100% oder größer ist nach unten, aber nicht nach links, den margin hält er immer noch ein.
Das Problem lässt sich umgehen, wenn ich noch ein div reinsetzte mit width: 99%. Dann geht alles. Bei width: 100% verschiebt er es nach unten.

Viele Grüße,
S_O

[Der Martin]

Hallo Ashura,

Darum empfehle ich eher diese Methode. (Originalidee von derletztekick)

guter Tipp, den kannte ich auch noch nicht. Ja, das scheint mir ein besseres Erkennungsmerkmal zu sein.

Zudem frage ich mich, warum der OP unbedingt XHTML 1.1 verwenden will, was momentan keinen praktischen Nutzen gegenüber XHTML 1.0 Strict bringt.

Ähm, stimmt... ist mir gar nicht aufgefallen. :-)

Außerdem, Stefan, nachdem ich mir oberflächlich mal deinen Code angeschaut habe, wiederhole ich nochmal meine Frage: Wieso packst du die Bilder im Kopfbereich nochmal extra in sinnentleerte divs? Formatiere die img-Elemente doch direkt, ohne noch einen Container drüberzustülpen.
Auch die absoluten Breitenangaben in px halte ich für potentielle Störenfriede.

Schönen Abend noch,

Martin

[S_O]

Außerdem, Stefan, nachdem ich mir oberflächlich mal deinen Code angeschaut habe, wiederhole ich nochmal meine Frage: Wieso packst du die Bilder im Kopfbereich nochmal extra in sinnentleerte divs? Formatiere die img-Elemente doch direkt, ohne noch einen Container drüberzustülpen.

Das Gesamt-Div gibt es aus dem Grund, da das Print-Stylesheet den ganzen Bild-Kopf auf display: none setzt und dafür einen Text-Kopf macht. Das Div mit dem Bild 2 ist dafür, das Bild mit text-align: right nach rechts zu kriegen. Das dritte div ist erforderlich, denn die Linie muss ja komplett rübergehen, das div ist nur da, weil es einen Hintergrund hat. Ich kann ja sonst kein Bild in dieses sich wiederholenden Form einfügen.

Auch die absoluten Breitenangaben in px halte ich für potentielle Störenfriede.

Absolute Breitenangaben habe ich nur als min-width und sind dafür, das immer der Platz für beide Bilder da ist und die sich nicht überschneiden.

Schönen Abend noch,

Martin

Danke gleichfalls,
Stefan