Forum Sefrengo.org > CSS | Text neben Bild auf einer Flucht

Vollansicht: CSS | Text neben Bild auf einer Flucht

Forum Sefrengo.org > Allgemeine Foren > Offtopic

tsunami

Thu. 23. October 2008, 14:05

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...
Klicken um den Anhang anzusehen
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

Thu. 23. October 2008, 14:12

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

Thu. 23. October 2008, 14:25

Hmmm...andi mein Retter

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

pawel

Thu. 23. October 2008, 17:40

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

andi

Thu. 23. October 2008, 19:04

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

Thu. 23. October 2008, 19:07

argh, bitte löschen lieber neuer moderator saschapi

tsunami

Fri. 24. October 2008, 08:07

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

Fri. 24. October 2008, 08:28

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

Fri. 24. October 2008, 09:53

ZITAT

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

Fri. 24. October 2008, 10:04

ZITAT(tsunami @ Fri. 24. October 2008, 10:53)

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>

ZITAT(tsunami @ Fri. 24. October 2008, 10:53)

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

Fri. 24. October 2008, 11:37

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

Fri. 24. October 2008, 12:11

Hat sich erledigt...nun gehts...

Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.