[HTML] Div zentrieren mit links und rechts je einem 100% Img

[faux]

Hallo!

Ich will folgendes Boxen-Layout per DIV und CSS darstellen:

Code:

+------------+---------------------------------------------+------------+
|            |                                             |            |
|            |                                             |            |
|  <img />   |                    <img />                  |   <img />  |
|            |                                             |            |
+------------+---------------------------------------------+------------+
              <--                  870px                 -->

<--                                100%                               -->

Es soll also zentriert ein Image mit fixer Breite angezeigt werden und links und recht davon jeweils ein Image mit variabler Breite.
Das ganze soll so wie www.e-faux.com oben aussehen, jedoch mit DIVs anstatt der Tabelle.

Bekomme das leider nicht hin; probiere schon fast ne Stunde.

Grüße
Faux

[3_of_8]

Du könntest beim mittleren <img /> den left und right-Margin auf auto stellen und davor und danach die anderen <img />s (evtl. mit inline) reintun. Das müsste eigentlich jeder *normale* Browser verstehen.

[S2B]

Das ist in diesem Fall viel einfacher:

Code:

<div style="background-color: url(pfad/zum/hintergrundbild.jpg); text-align: center">
  [img]pfad/zum/bild.jpg[/img]
</div>

Sollte normal funktionieren.

[faux]

Zitat von S2B:

Das ist in diesem Fall viel einfacher:

Code:

<div style="background-color: url(pfad/zum/hintergrundbild.jpg); text-align: center">
  [img]pfad/zum/bild.jpg[/img]
</div>

Sollte normal funktionieren.

Stimmt. Danke!
Danke text-align funktioniert bei Images nicht.

Jetzt hätte ich allerdings nochmals die selbe Frage, jedoch für den Text darunter. Selbe Situation, jedoch Text, der auf die Seite zentriert sein soll, selbst aber linksbündig.

Grüße
Faux

[S2B]

Zitat von faux:

Danke text-align funktioniert bei Images nicht.

Also bei mir funktioniert es (Mit XHTML Transitional-Doctype).

Zitat von faux:

Jetzt hätte ich allerdings nochmals die selbe Frage, jedoch für den Text darunter. Selbe Situation, jedoch Text, der auf die Seite zentriert sein soll, selbst aber linksbündig.

*verwirrt*

meinst du sowas:

Code:

h1 {
  text-align: center
}

[3_of_8]

Text-align bezieht sich auf Subelemente. <img> kann keine Subelemente haben, daher funktioniert text-align auch nicht.

[S2B]

In meinem Beispiel ist <img /> auch ein Subelement vom <div>.

[3_of_8]

Dann liegt es wohl daran, dass <img /> ein Block-Element ist und Text-align nur mit Inline-Elementen funktioniert.

[S2B]

http://de.selfhtml.org/html/grafiken/einbinden.htm

Zitat:

Grafiken sind aus HTML-Sicht Seite Inline-Elemente. In der "Strict"-Variante von HTML müssen solche Elemente innerhalb von Seite Block-Elementen vorkommen, etwa in einem Textabsatz oder einem allgemeinen Bereich oder auch einer Tabellenzelle.

Es müsste also funktionieren, tut es bei mir auch...

[pacman1986]

Delphi-Quellcode:

<div style="background-color: url(hintergrundbild);">
  <cener>[img]hauptbild[/img]</center>
</div>

so hat es bei mir gefunzt

bei der 2 Frage align="center" und bei style="text-align:left"