• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Postionierung Bilder / Text

Status
Für weitere Antworten geschlossen.
Loon3y

Loon3y

Neues Mitglied
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: 
        <h2>Überschrift</h2>

    <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%;">        
<p>                    <h3>text</h3>
                    PERSON A
            <br />        Mail: <a href="mailto: "> </a>
</p>
 <p>                   <h3>text</h3> 
                    PERSON B
            <br />        Mail: <a href="mailto: "> </a>
</p>
 <p>                   <h3>text</h3>
                    PERSON C
            <br />        Mail: <a href="mailto: "> </a>
</p>
<p>                    <h3>text</h3>
                   PERSON D
            <br />        Mail: <a href="mailto: "> </a>
</p>    
    </div>
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 <div> / <p> mit den text basteln und dann ausrichten? oder wie stell ich das an?

Grüße
Loon3y
 
wenn ichs so mache wills auch nicht:

Code: 
        <h2>Überschrift</h2>

    <div>        
<p>                    <h3>text</h3>
                    PERSON A
            <br />        Mail: <a href="mailto: "> </a>
                            <img src="a.jpg" alt=" " style="float:right; margin-bottom: 15px;" />
</p>

 <p>                   <h3>text</h3> 
                    PERSON B
            <br />        Mail: <a href="mailto: "> </a>
                            <img src="b.jpg" alt=" " style="float:right; margin-bottom: 15px;" />    
</p>

 <p>                   <h3>text</h3>
                    PERSON C
            <br />        Mail: <a href="mailto: "> </a>
                            <img src="c.jpg" alt=" " style="float:right; margin-bottom: 15px;" />
</p>

<p>                    <h3>text</h3>
                   PERSON D
            <br />        Mail: <a href="mailto: "> </a>
                            <img src="d.jpg" alt=" " style="float:right; margin-bottom: 15px;" />
</p>    
    </div>
oder wie meinst du es?
 
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.
 
Ich versteh grad das Problem nicht.
Code: 
<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.
 
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.
 
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..... ;) dennoch danke für das aufmerksame auge.
 
prm schrieb:
Es spricht m.E. nichts dagegen, wenn du für diese Konstruktion eine Tabelle verwendest.
Zum Vergrößern anklicken....
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 <div>s Screenreader total austrickst.

Hier als dl :
html
Code: 
<dl>
<dt>pers a</dt>
  <dd class="bild"><img src="http://www.html.de/images/stern-1.png" alt="Person A" width="106" height="126" /></dd>
  <dd>PERSON A</dd>
  <dd>Mail: <a href="mailto: ">PERSON A</a></dd>
</dl>

<dl>
<dt>pers c</dt>
  <dd class="bild"><img src="http://www.html.de/images/stern-1.png" alt="Person B" width="106" height="126" /></dd>
  <dd>PERSON B</dd>
  <dd>Mail: <a href="mailto: ">PERSON B</a></dd>
</dl>

<dl>
  <dd class="bild"><img src="http://www.html.de/images/stern-1.png" alt="Person C" width="106" height="126" /></dd>
<dt>pers c</dt>
  <dd>PERSON C</dd>
  <dd>Mail: <a href="mailto: ">PERSON C</a></dd>
</dl>
css
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;
}
...Und hier online:
Definitionsliste

Ob <table>, <ul>, <ol>, oder <dl> richtiger ist muss jeder für sich beantworten.
Für <p> fehlt irgendwie zusammenhängender Text.
 
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


?
 
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...
 
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...
 
Efchen schrieb:
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...
Zum Vergrößern anklicken....
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 <li> oder <dd> 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.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben