Container-Ausrichtung

[Worster]

Hallo,
ich wollte meine Tabellen ablösen durch CSS und scheitere mangels CSS-Erfahrung schon ganz am Anfang.
Ich hatte in einer Tabellenzeile zwei Zellen. In der ersten ein Bild (gif), in der zweiten einen Text.
Jetzt habe ich es folgendermaßen versucht, aber der Text steht unter dem Bild.

  
<div style="margin:0; padding:0; height: 4.5em; width:4.5em">  
         <img border="0" src="http://www........gif" alt="Kurgast" style="height:4em; width:4em">  
</div>  
<div style="margin:0; padding:0; margin-left:5em; width:5em;">  
         <h4>bla bla bla</h4>  
</div>  

[wahsaga]

hi,

Jetzt habe ich es folgendermaßen versucht, aber der Text steht unter dem Bild.

<div style="margin:0; padding:0; height: 4.5em; width:4.5em">
         <img border="0" src="http://www........gif" alt="Kurgast" style="height:4em; width:4em">
</div>
<div style="margin:0; padding:0; margin-left:5em; width:5em;">
         <h4>bla bla bla</h4>
</div>

  
Natürlich, weil div per Default mit display:block formatiert wird, also vulgo "eine eigene Zeile" erzeugt.  
  
Du könntest bspw. das Bild direkt in die Überschrift packen.  
  
Was du übrigens als allererstes kurieren lassen solltest, ist deine [Divitis](http://de.wikipedia.org/wiki/Divitis). Waurm packst du ein Div um die Überschrift, anstatt diese direkt zu formatieren?  
  
gruß,  
wahsaga  
  

-- 
/voodoo.css:  
#GeorgeWBush { position:absolute; bottom:-6ft; }

[Worster]

Hallo,

Du könntest bspw. das Bild direkt in die Überschrift packen.

Das habe ich versucht.
Bei einer Zeile klappt es auch, aber die zweite Zeile ist nach rechts versetzt.
Könntet Ihr mir da noch einmal einen Tipp geben?

  
<a href="http://www..url1..de"><img src="http://www.../bild1.gif" style="float:left; width:48px; height:40px; margin-right:0.5em;"></a>  
<a href="http://www..url1..de">... url1 ...</a>  
  
<a href="http://www..url2..de"><img src="http://www.../bild2.gif" style="float:left; width:48px; height:40px; margin-right:0.5em;"></a>  
<a href="http://www..url2..de">... url2 ...</a>  

[wahsaga]

hi,

Du könntest bspw. das Bild direkt in die Überschrift packen.

Das habe ich versucht.

Ach ja? Wo ist denn die Überschrift?

Bei einer Zeile klappt es auch, aber die zweite Zeile ist nach rechts versetzt.

Von welchen Zeilen redest du?
Ich sehe nur Links, teilweise mit Bildern drin.

gruß,
wahsaga

[Worster]

Ich sehe nur Links, teilweise mit Bildern drin.

Ja links ein Bild (mit dahinterliegendem Link), rechts davon ein Text (...url1 ...) mit dem gleichen Link.
In der zweiten Zeile analog.
Allerdings sind Bild und Text in der zweiten Zeile nach rechts verschoben.

So sieht es aus:

<Bild1>  Text1
      <Bild2>   Text2

so sollte es sein:

<Bild1>  Text1
<Bild2>   Text2

Bitte seht mir meine Unwissenheit nach!

[wahsaga]

hi,

Ja links ein Bild (mit dahinterliegendem Link), rechts davon ein Text (...url1 ...) mit dem gleichen Link.

Warum denn dann bitte zwei Links?
Wieso nicht einfach _ein_ Link, der Bild und Text enthält?

Allerdings sind Bild und Text in der zweiten Zeile nach rechts verschoben.
So sieht es aus:
<Bild1>  Text1
      <Bild2>   Text2

Da du das Bild gefloatet hast, werden nachfolgende Inhalte zunächst daneben dargestellt (wenn du das Floating nicht mittels clear wieder aufhebst).

gruß,
wahsaga

[Der Martin]

Hi,

ich wollte meine Tabellen ablösen durch CSS ...

das ist löblich.

Ich hatte in einer Tabellenzeile zwei Zellen. In der ersten ein Bild (gif), in der zweiten einen Text.

Du willst also links ein Bild darstellen, und daneben etwas Text, sehe ich das richtig?

<div style="margin:0; padding:0; height: 4.5em; width:4.5em">
         <img border="0" src="http://www........gif" alt="Kurgast" style="height:4em; width:4em">

Warum ziehst du extra noch ein unnötiges div um das Bild? Stattdessen kannst du auch dem Bild selbst ein bisschen margin oder padding geben und so denselben Effekt (nämlich etwas Abstand) erreichen wie jetzt mit dem umschließenden div-Element.
Außerdem möchtest du bestimmt die CSS-Eigenschaften, die du behelfsmäßig in style-Attributen hast, in ein zentrales Stylesheet auslagern, vielleicht sogar eine externe CSS-Ressource. Was hat übrigens das Attribut border="0" da noch verloren? Erstens ist es überflüssig (weil Default), zweitens gehört diese Angabe eigentlich auch ins Stylesheet.

<div style="margin:0; padding:0; margin-left:5em; width:5em;">
         <h4>bla bla bla</h4>
</div>

Ich schließe mich wahsaga an: Auch die Überschrift braucht kein div, das sie einschließt; und das Bild wäre wahrscheinlich *innerhalb* der Überschrift sehr gut aufgehoben. Im übrigen musst du ja eine mordsmäßig komplexe Struktur haben, wenn du schon mindestens vier Überschriftsebenen brauchst.

So long,
 Martin

[Worster]

Im übrigen musst du ja eine mordsmäßig komplexe Struktur haben, wenn du schon mindestens vier Überschriftsebenen brauchst.

Ist es zwingend (bzw. empfohlen), wenn man <h4> verwendet, auch die übrigen  Überschriften zu verwenden?
Ich habe deshalb h4 genommen, weil es mir von der Größe her passte.
Gruß

[Der Martin]

Hallo,

Im übrigen musst du ja eine mordsmäßig komplexe Struktur haben, wenn du schon mindestens vier Überschriftsebenen brauchst.
Ist es zwingend (bzw. empfohlen), wenn man <h4> verwendet, auch die übrigen  Überschriften zu verwenden?

ja, von der logischen Gliederung her auf jeden Fall.

Ich habe deshalb h4 genommen, weil es mir von der Größe her passte.

Das sollte eigentlich kein Grund sein. Wenn die Überschrift von der logischen Gliederung her eine Überschrift erster Ordnung ist, dann ist es ein <h1>. Das Aussehen regelst du dann mit CSS.

Ciao,
 Martin

[Struppi]

ich wollte meine Tabellen ablösen durch CSS und scheitere mangels CSS-Erfahrung schon ganz am Anfang.

Damit zäumst du das Pferd von hinten auf. Daran scheitern viele.

Ein CSS - und ein Tabellenlayout sind zwei verschiedene Dinge, die sich nicht 1:1 umsetzen lassen.
Schau dich mal bei selfhtml in der CSS Rubrik um, z.b. http://de.selfhtml.org/css/layouts/index.htm. Da sind einige Versuche Tabellenlayouts mit CSS nachzuempfinden und du erfährst mehr über die Schwierigkeiten und Tricks die dazu nötig sind.
Grundsätzlich wäre der besser Weg erstmal die "einfachen" CSS Eigenschaften kennenzulernen und zu verstehen bevor du sowas versuchst

Struppi.