<table> -> <div> ... Probleme mit dem Umbau

[Zephyda]

Hallo Leute,

ich versuche derzeit von meinem Tabellen basierten Layout auf Div's umzustellen.
Aber beim Aufbau meiner "Titelzeile" komme ich irgendwie ins Rutschen. Als Tabelle bekomme ich es wunderbar hin, aber als "div" - keine Chance.
So sieht derzeit meine Tabelle aus:

<table width="100%" border="00" cellspacing="0" cellpadding="0">  
  <tr>  
    <td width="33%" background="bilder/schriftzug_links.png"></td>  
    <td width="33%" ><img src="bilder/schriftzug_mitte.png" /></td>  
    <td width="33%"  background="bilder/schriftzug_rechts.png"></td>  
  </tr>  
</table>

Das ganze Zentriert mir dann mein Logo in der Bild-Mitte und hängt recht/links zu gleichen Teilen noch was dran.
Ich habe es echt mir verschiedesten Möglichkeiten versucht, aber anscheinend bin ich zu doof.
Könnte mir vielleicht wer von euch verraten wie ich das mit Div's darstellen kann?
Wäre euch sehr dankbar.

[henman]

hallo!

Ich habe es echt mir verschiedesten Möglichkeiten versucht, aber anscheinend bin ich zu doof.

Was hast du denn schon versucht?

Obs nun richtig ist oder nicht, probier die divs mit

display:inline-block;
width:33%;

nebeneinander zu packen.
Ich habs nicht getestet, also versprech ich nix.

[Gunnar Bittersmann]

@@henman:

nuqneH

display:inline-block;
width:33%;

nebeneinander zu packen.

Dürfte knapp werden, da Whitespace im Quelltext als Leerzeichen zwischen den Inline-Blöcken dargestellt wird. [INLINE-BLOCK]

Hier könnte 'float' doch die bessere Variante sein.

Qapla'

[Zephyda]

Werde es heute abend mal so versuchen, bzw. mit der "float"-Variante.
Danke im Vorraus

[Gunnar Bittersmann]

@@Zephyda:

nuqneH

ich versuche derzeit von meinem Tabellen basierten Layout auf Div's umzustellen.

Den Teufel mit dem Beelzebub austreiben?

Verwende sinnvolle HTML-Elemente! Zur Gruppierung können es dann auch einige wenige(!) 'div' sein.

<td width="33%" background="bilder/schriftzug_links.png"></td>
    <td width="33%" ><img src="bilder/schriftzug_mitte.png" /></td>
    <td width="33%"  background="bilder/schriftzug_rechts.png"></td>

schriftzug_links.png und schriftzug_rechts.png sind also Verzierung, schriftzug_mitte.png ist Inhalt? Bei letzterem fehlt der Alternativtext.

Das ganze Zentriert mir dann mein Logo in der Bild-Mitte und hängt recht/links zu gleichen Teilen noch was dran.

Logo hört sich nach Überschrift an:

<h1 id="logo"><img src="bilder/schriftzug_mitte.png" alt="was immer im Schriftzug zu lesen ist"/></h1>

Im Stylesheet:

body  
{  
  background: url(bilder/schriftzug_links.png) no-repeat left;  
}  
  
#logo  
{  
  background: url(bilder/schriftzug_rechts.png) no-repeat right;  
  text-align: center;  
}

Qapla'

[Zephyda]

Leider wird das nichts mit der Idee

body  
{  
  background: url(bilder/schriftzug_links.png) no-repeat left;  
}  
  
#logo  
{  
  background: url(bilder/schriftzug_rechts.png) no-repeat right;  
  text-align: center;  
}

Das größte Problem hier ist schonmal das das "body"-Tag verwendet wird, schlimmer Fehler. Zum einen nutze ich das "body"-Tag schon um als Hintergrund einen Farbverlauf darzustellen, zum anderen würde in dem Fall das ganze Logo NICHT mittig erscheinen, sondern direkt nach dem "schriftzug_links", der allerdings nur 2 Pixel breit ist.
Desweiteren kann
<h1 id="logo"><img src="bilder/schriftzug_mitte.png" alt="was immer im Schriftzug zu lesen ist"/></h1>
nichtmal im Ansatz das gleiche Ergebniss wie meine Tabelle liefern. Meine Tabelle hat das "Logo" immer in der Fenstermitte gesetzte und den Platz rechts & links entsprechend mit dem Hintergrund "schriftzug_links/rechts" aufgefüllt.
In deinem Beispiel klatscht das Ganze links das eine Bild hin, dann das Logo und dann rechts das andere Bild. Von der Formatierung das das Logo mittig ist und die Rändern mit den Bildern aufgefüllt werden bleibt da nichts mehr übrig.
Also danke für die Antwort, aber ich habe das Gefühl das die Antwort ansich irgendwie komplett falsch ist was meine Fragestellung angeht. Auf jeden Fall ergibt sich nichtmal im Ansatz das gleiche Verhalten bezüglich der Darstellung.

[Gunnar Bittersmann]

@@Zephyda:

nuqneH

Das größte Problem hier ist schonmal das das "body"-Tag verwendet wird, schlimmer Fehler.

Ja, schlimmer Fehler, „Tag“ zu verwenden. ;-)

Zum einen nutze ich das "body"-Tag schon um als Hintergrund einen Farbverlauf darzustellen

Das 'html'-Element kann auch formatiert werden.

Also danke für die Antwort, aber ich habe das Gefühl das die Antwort ansich irgendwie komplett falsch ist was meine Fragestellung angeht.

Ich hab das Gefühl, dass dein Gefühl trügt.

Auf jeden Fall ergibt sich nichtmal im Ansatz das gleiche Verhalten bezüglich der Darstellung.

Dann machst du wohl etwas falsch.

Wie wär’s denn, wenn du deine Seite (die alte und die neue) mal verlinkst?

Qapla'

[Zephyda]

Wie wär’s denn, wenn du deine Seite (die alte und die neue) mal verlinkst?

Werde ich nachher mal machen, mal schauen.

[Zephyda]

So, hier jetzt mal beide Links

So sieht meine Seite mit einer Tabelle aus, und so sollte sie dann auch mit div & co aussehen:
http://www.christopher-böhm.de/index.html

So sieht die Seite aus wenn ich wie geraten mit body-Tag arbeite und es nach Ihrem Beispiel versuche.
http://www.christopher-böhm.de/index2.html

Wie man sieht fehlen links und rechts die Linie, außerdem sitzt das ganze ein paar Pixel zu tief.
Wo habe ich da meinen Fehler gemacht?

[ChrisB]

Hi,

So sieht meine Seite mit einer Tabelle aus, und so sollte sie dann auch mit div & co aussehen:
http://www.christopher-böhm.de/index.html

Da würde ich einfach das Logo, wie schon gesagt, per IMG in eine Überschrift setzen, und per text-align mittig ausrichten.
Und die Linien links und rechts würde ich in ein Bild packen, entsprechend breit gemacht, und als zentiertes Hintergrundbild für die Überschrift einsetzen.

MfG ChrisB