Postionierung Bilder / Text

html.de-Forum HTML, XHTML & CSS
1

Hallo,

leider muss ich euch heute mit etwas dümmlichen fragen nerven…es geht um folgende sache:

Ich versuche wiedermal was zweispaltiges in einen main-div. Hierbei ist das eine art Steckbrief bei dem ich Links eine kurze Beschreibung habe und rechts davon ein Bild von demjenigen.

schön und gut…jetzt bin ich folgendermaßen vorgegangen:

[code]

Überschrift

<div style="float:right; width: 25%;">
<img src="a.jpg" alt=" " style="float:right; margin-bottom: 15px;" />
<img src="b.jpg" alt=" " style="float:right; margin-bottom: 15px;" />    
<img src="c.jpg" alt=" " style="float:right; margin-bottom: 15px;" />
<img src="d.jpg" alt=" " style="float:right; margin-bottom: 15px;" />
</div>

<div style="Width:75%;">

text

PERSON A
Mail:

text

PERSON B
Mail:

text

PERSON C
Mail:

text

PERSON D
Mail:

[/code]hm ja...soweit so gut....nur wie schaffe ich das der text immer auf höhe des bildest ist? Müsste ich dazu das bild mit in ein
/

mit den text basteln und dann ausrichten? oder wie stell ich das an?

Grüße
Loon3y

2

Pack doch die Bilder direkt in die jeweiligen

s des 75% breiten

s und richte sie aus.

3

wenn ichs so mache wills auch nicht:

[code]

Überschrift

<div>

text

PERSON A
Mail:

text

PERSON B
Mail:

text

PERSON C
Mail:

text

PERSON D
Mail:

[/code]oder wie meinst du es?
4

Es spricht m.E. nichts dagegen, wenn du für diese Konstruktion eine Tabelle verwendest.

Alternativ:

Wenn deine Grafiken z.B. eine Höhe von 90px haben und daneben sollen drei Textzeilen.
Dann kannst du entweder mit einer line-height von 30px arbeiten (die drei Zeilen werden dann auf die Bildhöhe verteilt) oder z.B. von nur 15px (3x15=45) und gibst dann p ein padding: 22px 0; (der Text ist dann vertikal zentriert zum Bild)

Beachte: Das Element h darf sich nicht innerhalb p befinden.

5

Ich versteh grad das Problem nicht.

<div style="clear:right;">
<img ... style="float:right;">
<h3>Überschrift</h3>
<p>Text</p>
</div>

Und das beliebig oft hintereinander.
Von der Semantik her könnte ich mir eher eine Definitionsliste als eine Tabelle vorstellen.

6

SKC 2007 - Die Kugel rollt

—> Vorstand

diese liste will ich in die neue homepage übernehmen. jetzt ist die frage tabelle beibeihalten und die fehler raus oder das ganze via

und

zu positionieren?

7

Ich hab für sowas keine Tabelle benutzt. Die Daten zu den Bildern könnte man auch schon fast in eine Liste setzen.

Aber das alt-Attribut solltest Du auf jeden Fall füllen.

8

hm eine liste…das wäre auch eine idee. wenn man damit diese elemente nicht zweckentfremdet dann wäre dies sogar die einfachere möglichkeit…

das alt attribut fehlt ebenso wie das „valign=top“ geändert werden muss…aber alles schon erledigt… :wink: dennoch danke für das aufmerksame auge.

9

Sehe ich auch so.
table, ul oder dl.
Passt irgendwie alles zum Inhalt.
Der Code aus dem ersten Post ist ein Beispiel dafür, wie mann mit

s Screenreader total austrickst.

Hier als dl :
html

[code]

pers a
Person A
PERSON A
Mail: PERSON A
pers c
Person B
PERSON B
Mail: PERSON B
Person C
pers c
PERSON C
Mail: PERSON C
[/code][B]css[/B] [code] dl { width: 20em; margin: 0 auto; background-color: #760000; color: #E9E9E9; min-height: 130px; position: relative; }

/IE6/

  • html dl {
    height: 130px;
    }

dt {
font-weight: bold;
font-size: 1.1em;
border-top: 1px solid #fff;
padding-left: 5px;
}

dd {
padding-left: 5px;
}

.bild {
position: absolute;
top: 1px;
right: 0;
}
[/code]…Und hier online:
Definitionsliste

Ob

,
    ,
      , oder
      richtiger ist muss jeder für sich beantworten.
      Für

      fehlt irgendwie zusammenhängender Text.

10

auch eine sehr schöne idee…

aber wie muss ich das anstellen, wenn ich oben 2 und unten 2 haben möchte?

sprich so aufgebaut:

Bild Bild
text text

Bild Bild
text text

?

11

Je nach Aufbau der Tabelle wird die aber u.U. eher ungünstig vorgelesen, würde ich meinen, wenn ich mir da in der ersten Zeile zuerst die Überschrift, dann der alt-Text des Bildes, dann die sonstigen Angaben vorstelle…hmmm…

12

Mein Problem bei der ganzen geschichte ist:

  1. die bilder die ich beokmmen habe sind in der höhe unterschiedlich

  2. es soll nicht so sehr das bild ins auge stechen oder nur der text…es muss beides angenehm anzuschauen sein.

schwer soetwas zu lösen, denn wenn ich sie untereinander positionieren dann wirkt das so naja unsauber…mal großes bild, mal keines bild, mal großes bild…

13

Kommt auf den alt-Text an.
Wenn der alt-Text „Das ist Paul“ lautet und dann Pauls Beschreibung vorgelesen wird, klingt das vielleicht gar nicht so blöd.

Mit

  • oder
    ist man in der Reinfolge natürlich nicht so gebunden.
    Aus gestalterischer Sicht sind mir Listen eigentlich auch lieber.

    Noch eine Anmerkung:
    Wenn einem kein sinniger alt-Text einfällt, sollte man überlegen ob das Bild überhaupt eine beschreibbare Aussage hat. Ansonsten tut es auch ein background-image.

    @Loon3y
    Das müsstest du ausprobieren. Wenn du mit einem Grafikprogramm schneller wie mit dem Editor arbeiten kannst, schiebe die Texte und Bilder erstmal damit zusammen.
    Manchmal fällt einem dabei auch ganz was anderes ein.
    Oder mache Zeichnungen mit Block und Bleistift.
    Ich habe die Erfahrung gemacht, daß mir die Ideen ganz ausgehen wenn ich zu lange am Bildschirm sitze.