CSS | Text neben Bild auf einer Flucht Einstellungen

[tsunami]

Hallo zusammen

Stehe bei der Ausführung eines kleinen Modules für SF auf dem Schlauch. Hätte gerne folgendes per CSS gelöst. Siehe Screenshot...
 screenshot.jpg ( 27.4KB ) Anzahl der Downloads: 36

Ich habe bis jetzt folgendes gemacht:

CSS

QUELLTEXT

div.galerie {
        overflow:hidden;/*zum Umschliessen der Floats*/
        padding: 0;
        margin:0 0 3px 0;
        }
div.galerie img {
            float:left;
            margin-right: 15px;
            }
*html div.galerie {
            height:1%;/*Patch für IE 6*/
            }

Quellcode

QUELLTEXT

<div class="galerie"><a title="Demo" href="#"><img height="113" width="150" alt="" src="#" /></a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

Dies funktioniert auch, ausser dass ich den Text eben gerne nicht wieder unter dem Bild hätte.
Jemand eine Ahnung, ob dies per CSS zu lösen ist ? Muss ich mit mehr Boxen arbeiten?

Gruss Tsunami

[andi]

saletti

das ist das normale verhalten von float. der absatz braucht margin-left.
sollen mehrere elemente das bild umfliessen, würde ich diese elemente ebenfalls mit einem div umschliessen und neben das bild floaten lassen.

QUELLTEXT

div.galerie {
        overflow:hidden;/*zum Umschliessen der Floats*/
        padding: 0;
        margin:0 0 3px 0;
        }
div.galerie p {
        margin-left: 165px;
        }
div.galerie img {
            float:left;
            }
*html div.galerie {
            height:1%;/*Patch für IE 6*/
            }

gruss andi

[tsunami]

Hmmm...andi mein Retter Blitzschnell ! Jetzt läuft die ganze Sache wie gewünscht...Gracias ! Gruss Tsunami

[pawel]

Beim Markup muss ich ein bisschen maulen. Ich denke, dass da die Definitionsliste semantischer ist, als divs
Das passt auch gut auf Bildunterschriften.

[andi]

hallo pawel

und woran erkennst du, dass der text direkten bezug auf das bild nimmt? vielleicht handelt es sich um ein stimmungsbild.
eine pauschale aussage text und bild gleich definitionsliste ist äusserst unsemantisch. hinzu kommt, dass auch der einsatz von definitionslisten bei bildunterschriften äusserst umstritten ist - auch wenn ich das ganze beführworte.

gruss andi

[andi]

argh, bitte löschen lieber neuer moderator saschapi

[tsunami]

Muss kurz nachhaken. Habe folgendes versucht...

Quelltext

QUELLTEXT

<dl class="bildbox">
<dt>{image:1}</dt>
<dd>{imagedesc:1}</dd>
</dl><p>{textarea:1}</p>

CSS

QUELLTEXT

dl.bildbox {
float: left; /* ohne width => so breit wie das Bild */
text-align: center;
background-color: white;
margin: 0 15px 0 0; /* Abstand zum Text */
padding: 4px;
border: 1px solid #ddd;
border-right-color: #aaa;
border-bottom-color: #aaa;
}
dl.bildbox dd {
font-size: 0.8em;
margin: 0;
}

Dies klappt auch hier wieder...ausser eben der Flucht. Finde einfach keine Lösung hierfür....Ist dies mit Definitionsliste, Bildunterschrift und meiner gewünschten Flucht zu realisieren?

Gruss Tsunami

[andi]

da muss ich auch nachhacken:

hat denn {textarea:1} auch einen bezug auf das bild? nach deinem beispiel nicht.
ist relevant für das markup.


grundsätzlich: float ohne breitenangabe kann zu problemen führen, da diese möglichkeit erst mit css 2.1 eingeführt wurde. es ist empfehlenswert, float nur mit breitenangabe zu verwenden.

gerade bei deinem vorhaben muss eine breitenangabe erfolgen. css kann nicht rechnen. inhalte umfliessen ein float und richten sich nicht in an einer flucht aus.

• das bild erhält eine breitenangabe, der absatz einen dem entsprechenden linken margin
• du lässt den absatz ebenfalls floaten. allerdings sind auch hier breitenangaben unverzichtlich, da der absatz mit float ohne breitenangabe den kompletten platz in anspruch nimmt und somit nicht neben das bild floated.

gruss andi

[tsunami]

hat denn {textarea:1} auch einen bezug auf das bild? nach deinem beispiel nicht.
ist relevant für das markup.

Verstehe ich nicht ganz...Eigentlich schon,oder? Sollte eine Box geben, in welcher eine Referenzbild (mit Untertitel/unter Bild) und Text (Referenzbeschreib/rechts neben Bild) steht.
Müsste dann die {textarea:1} in der Definitionsliste stehen und nicht ausserhalb?
Schau da nicht ganz durch...bzw. ist es dann nicht korrekt dies mit einer Definitionsliste zu erstellen ???

Gruss Tsunami

[andi]

Sollte eine Box geben, in welcher eine Referenzbild (mit Untertitel/unter Bild) und Text (Referenzbeschreib/rechts neben Bild) steht.

wenn, dann wäre es sinnvoller, den absatz ebenso in eine dd zu packen. schliesslich bezieht sich der absatz ebenso auf das bild:

QUELLTEXT

<dl class="bildbox">
<dt>{image:1}</dt>
<dd>{imagedesc:1}</dd>
<dd>{textarea:1}</dd>
</dl>

Schau da nicht ganz durch...bzw. ist es dann nicht korrekt dies mit einer Definitionsliste zu erstellen ???

grundsätzlich kannst du es nur falsch machen: lektüre

gruss andi

[tsunami]

Danke für den Tip ! Werde mich mal schlau machen... ;-)

PS: Hast du vielleicht ein Ahnung wieso dies in allen Browsern korrekt dargestellt wird. Im Backend von SF jedoch der Text unter dem Bild hängt ?

Quellcode

QUELLTEXT

<dl class="hinweisbox">
  <dt><img src="#"></dt>
  <dd>{textarea:1}</dd>
</dl>

CSS

QUELLTEXT

dl.hinweisbox{
overflow:hidden;/*zum Umschliessen der Floats*/
padding: 0;
margin:0 0 10px 0;
}
dl.hinweisbox dt{
float:left;
width:70px;
}
dl.hinweisbox dd {
margin-left:70px;
width:300px;
}
*html dl.hinweisbox{
            height:1%;/*Patch für IE 6*/
            }

Danke...Gruss Tsunami

[tsunami]

Hat sich erledigt...nun gehts...