Ungewollter Umbruch

Nightline · 31.10.2007, 22:58

Hallo!

Ich stehe schon wieder auf dem Schlauch.

Im Anhang sieht man oben die (fast) richtige Darstellung, die Bilder sind alle nebeneinander angeordnet und können horizontal gescrollt werden. Hier sieht eine HTML-Zeile so aus:

PHP-Code:


			
<span class="test"><img class="bild" src="bild.jpg" width="276px" height="415px">München, Deutschland, 2007</span>

Sobald ich aber den Text unter dem Bild haben will, sieht die Seite wie das untere Bild im Anhang aus. Alles was hier verändert wurde, ist ein <br> vor dem Text:

PHP-Code:


			
<span class="test"><img class="bild" src="bild.jpg" width="276px" height="415px"><br>München, Deutschland, 2007</span>

Woran liegt dieses Problem und wie bekomme ich den Text unter das Bild?

Hier der Quelltext, wobei das Hintergrund-DIV rot und die einzelnen Bild-SPANs mit dem Text blau gefärbt sind:

PHP-Code:


			
<div id="inhalt">

<span class="test"><img src="bild.jpg" width="276px" height="415px">München, Deutschland, 2007</span>

<span class="test"><img src="anticipation.jpg" width="312px" height="415px">München, Deutschland, 2007</span>

<span class="test"><img style="position:relative; top:-69px;" src="autumn_dream.jpg" width="415px" height="277px">München, Deutschland, 2007</span></div>

PHP-Code:


			
#inhalt {

    height: 465px;

    width: 100%;

    text-align: center;

    position: absolute;

    left: 63px;

    top: 210px;

    padding-left: 50px;

    white-space: nowrap;

    overflow: auto;

    overflow-y: hidden;

    background-color: red;

}



.test {

    background-color: blue;

    padding-right: 130px;

}

Boris · 01.11.2007, 00:03

Was hälst du davon, ohne absolute Positionierung, ohne negative Margins und mit validem HTML zu arbeiten?

Zum letzten: in HTML werden Breitenangaben ohne Einheit gemacht, sprich nicht width="276px" height="415px" sondern width="276" height="415".

Nightline · 01.11.2007, 00:57

Zitat:

Zitat von Boris

Was hälst du davon, ohne absolute Positionierung, ohne negative Margins und mit validem HTML zu arbeiten?

Hört sich gut an! Erzähl mir mehr.

(Meine CSS-Kenntnisse sind ca. ein halbes Jahr nicht mehr aufgefrischt worden ...)

Boris · 01.11.2007, 00:59

Zeig mir mal einen Screenshot, wie es "fertig" und nach deinen Wünschen aussehen soll.

Nightline · 01.11.2007, 01:04

Ok, siehe Anhang.

Boris · 01.11.2007, 13:30

Ich würde da pro Bild zu einer Definitionsleiste greifen:

<dl>
<dd>Hier das Bild rein</dd>
<dt>Beschreibung des Bildes</dt>
</dl>

Das DL erhält dann ein text-align: center, eine vorgegebene Breite und ein float: left; ... fertig

Nightline · 01.11.2007, 13:58

Schön schön, das löst zumindest mal das Bild/Text-Problem, danke!

Allerdings funktionieren zwei andere Dinge nicht mehr: Durch die float-Lösung kann man nicht mehr horizontal scrollen und Bilder im Querformat sollten natürlich auch vertikal zentriert sein ...

Boris · 01.11.2007, 15:55

Och komm, so schwer ist das doch nicht. Man kann auch feste höhen vorgeben und auch angeben, wie etwas zentriert werden soll. Such ein wenig

Nightline · 01.11.2007, 17:24

Also ich komm da auf keinen grünen Zweig. Vergessen wir mal das vertikal zentrieren ... Die Bilder brechen um anstatt horizontal weiterzulaufen. Schau mal im Code, ob ich deine Hinweise korrekt beachtet habe:

PHP-Code:


			
<div id="inhalt">

<dl>
<dt><img src="bild.jpg" width="276" height="415"></dt>
<dd>München, Deutschland, 2007</dd>
</dl>

<dl>
<dt><img src="autumn_dream.jpg" width="415" height="277"></dt>
<dd>München, Deutschland, 2007</dd>
</dl>

<dl>
<dt><img src="bild.jpg" width="276" height="415"></dt>
<dd>München, Deutschland, 2007</dd>
</dl>

<span style="clear:both;"></style>

</div>

PHP-Code:


			
#inhalt {
    height: 465px;
    width: 100%;
    position: absolute;
    left: 63px;
    top: 210px;
    padding-left: 50px;
    overflow: auto;
    overflow-y: hidden;
    background-color: red;
}

#inhalt dl {
    float: left;
    width: 415px;
    height: 420px;
    margin-right: 20px;
    text-align: center;
    background-color:blue;
}

#inhalt dt {
    display: inline;
}

#inhalt dd {
    margin-top: 3px;
    display: block;
}

Nightline · 01.11.2007, 19:50

Ich habe jetzt folgende Variante genommen: http://csscreator.com/node/17692

"Witzigerweise" verschwindet jetzt plötzlich im IE mein letztes DIV. Im Screenshot sieht man die richtige Darstellung im FF, im IE verschwindet der rot eingekreiste Bereich einfach.

Und die vertikale Zentrierung eines Listenelements macht mir auch noch zu schaffen.

Nach so langer Zeit wieder mal eine Seite zu machen erweist sich als ganz schön mühsam.