Anordnung nebeneinander von Detlef G., 14.07.2009 20:15

Anordnung nebeneinander

Detlef G. 14.07.2009 20:15

+1 Informationen zu den Bewertungsregeln

Hallo Charly2010

Was wäre z.B. ein gruppierendes Element?

Ein Element, welches das Bild mit dem ihm zugehörigen Text zu einer Einheit verbindet. Das kann ein div-Element sein, oder jedes andere, das die zu gruppierenden enthalten darf. Da es sich in deinem Fall jeweils um ein Bild und dem diesem Bild zugeordneten Text handelt, bietet es sich an, aus Bild und Text jeweils einen Absatz zu machen.

Genau das bringt mir ja eben gar nichts, denn genau so hatte ich es auch bisher gelöst. …

Nein, das hast du nicht, wie ich an deinem Quelltext unten sehe.

Doch wenn ich nun den zweiten Text genau unter dem rechten Bild haben möchte (jeweils text-align:left), auf Höhe des ersten Textes unter dem linken Bild (Du verstehst?), …

Ja, ich verstehe, wie es aussehen soll, ich kann aber nicht verstehen, wie du dazu kommst solch ein unlogisches HTML-Kauderwelsch zu schreiben.
HTML ist eine Auszeichnungssprache, die die logische Struktur abbilden soll. CSS dient dann dazu, diese Struktur mit der gewünschten Darstellung zu versehen.

meine bisheriger Code sieht nämlich momentan so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

  
Also HTML, \_nicht\_ XHTML.  
  

> 	`<div style="position:absolute; bottom: 530px; left:320px;">`{:.language-html}  
  
Wozu position:absolute?  
  

> 	        `<div style="position:absolute; bottom:-160px; left:350px;">`{:.language-html}  
  
Wozu position:absolute?  
  

>                 ~~~html

<u><b style="text-align:left;font-family:Arial;font-  
                      size:14px">

Was ist das? Schau mal nach, in welcher HTML-Version das Element u erlaubt ist. Außerdem ist CSS fürs Aussehen zuständig.

<DIV style="OVERFLOW: auto; WIDTH: 580px; HEIGHT: 609px;">

Warum sind die CSS-Eigenschaften plötzlich groß geschrieben?

<img style="margin-left:-268px;margin-right:0px"src="Bilder/Betonschutzplatten nach WHG.jpg" width="250" height="250" alt="Betonschutzplatten nach WHG"></img><img style="margin-left:18px;margin-right:-268px"src="Bilder/Sickerwasserbecken Flugplatz Böblingen.jpg" width="250" height="250" alt="Sickerwasserbecken Flugplatz Böblingen"></img>

Sickerwasserbecken Deponie Nattheim

 Bettonschutzplatten nach WHG

Sickerwasserbecken Flugplatz Böblingen

 Teichauskleidung mit KDB

  
Dies hat keine Ähnlichkeit mit dem Code, den ich dir gepostet habe.  
  
Übrigens, das hatte ich auch übersehen: [img ist ein Leeres Element](http://de.selfhtml.org/html/referenz/elemente.htm#img), also kein Endtag in HTML.  
Und was soll die seltsame Anordnung im Quelltext?  
Gehört der erste Text zum ersten Bild, der zweite Text zum zweiten Bild, oder hast du eine Reihe Bilder und eine Reihe Texte, die überhaupt nichts miteinander zu tun haben?  
HTML + CSS ist nicht dafür gedacht, irgendwelche Bilder und irgendwelche Texte einfach irgendwo ins HTML zu klatschen und dann mittels position:absolute wild über die Seite zu schieben, bis das \_optische\_ Ergebnis dann endlich etwas Sinnvolles ergibt.  
  
Du hast \_ein\_ Bild und dazu \_einen\_ Text, die gehören zusammen, nicht nur optisch sondern auch in der HTML-Struktur. Dann hast du ein zweites Bild und dazu wieder einen Text, auch die gehören zusammen. usw.  
Also nimmst du einen Absatz, packst dort das erste Bild und den ersten Text rein. Dann nimmst du einen neuen Absatz mit dem zweiten Bild und dem zweiten Text. usw.  
  
~~~html
<div style="overflow: auto; width: 580px; height: 609px;">  
  
    <p style="float:left; padding:15px; margin:0; width:250px;">  
       <img style="display:block;" src="Erstes_Bild.jpg" width="250" height="250" alt="Erstes Bild">  
       Erster Text  
    </p>  
  
    <p style="float:left; padding:15px; margin:0; width:250px;">  
       <img style="display:block;" src="Zweites_Bild.jpg" width="250" height="250" alt="Zweites Bild">  
       Zweiter Text  
    </p>  
  
    <p style="float:left; padding:15px; margin:0; width:250px;">  
       <img style="display:block;" src="Drittes_Bild.jpg" width="250" height="250" alt="Drittes Bild">  
       Dritter Text  
    </p>  
  
    …  
  
</div>

Dazu sollten dann alle CSS-Angaben ins zentrale CSS.

Kleiner Tipp: Wenn du das HTML einer Seite baust, dann vergesse dabei das gewünschte Aussehen. Schau dir alles ohne CSS an, so wie der Browser es anzeigt, wenn du ihm keinerlei Anweisungen zum Aussehen gegeben hast. Wenn die Seite dann übersichtlich und logisch aufgebaut erscheint und benutzbar ist, dann, erst dann ist es sinnvoll, mittels CSS das gewünscht Aussehen zu definieren.

Es wäre daher eben cool, wenn es sich doch per div lösen ließe, …

Was willst du immer mit deinem div?
Ein div-Element ist ein bedeutungsloses Element zum gruppieren anderer Elemente. Alles, was CSS mit einem div-Element kann, kann es auch mit (fast) jedem anderen Element.

… da man dann sowohl den Text, als auch die Bilder ohne größeren Aufwand frei positionieren könnte und genau dass wäre es, was ich benötige. …

p-Elemente könnten genauso per position wild auf der Seite herumgeschoben werden.
Aber willst du das wirklich?
Willst du wirklich:

jedes Bild, jeden Textabsatz einzeln dorthin positionieren, wo sie angezeigt werden sollen?
bei jeder Änderung einer Textlänge oder Bildgröße wieder neu damit anfangen?
das Risiko eingehen, dass sich Texte oder und Bilder bei einem Seitenbesucher plötzlich überlagern, weil sein Browser die von dir gewählte Schriftart nicht kennt und eine etwas größere nimmt, oder wenn er sich die Schrift etwas vergrößert?

… Was ich höchstens noch machen könnte, wäre eine Tabelle erstellen (wäre aber nicht gerade die eleganteste Lösung), in die ich Bild und Text integriere und anschließend in den hellen Bereich einfüge.

Eine Tabelle wäre dafür wirklich nicht sinnvoll, dazu aber meine Frage:
Würdest du bei der Tabelle auch erst alle Bilder in die ersten Zellen klatschen und dann in die letzten die Texte?

Statt einer Tabelle oder eines scrollbaren div und darin Absätzen würde ich dafür eine Liste verwenden, es ist doch eine Liste der Referenzen.

#referenzliste {  
 overflow: auto;  
 width: 580px;  
 height: 509px;  
 list-style: none;  
 margin: 0;  
 padding: 0;  
}  
#referenzliste li {  
 float:left;  
 margin: 0;  
 padding:15px 0 15px 20px;  
 width: 250px;  
 text-align: left;  
}  
#referenzliste img {  
 display: block;  
 margin-bottom: 10px;  
 width: 250px;  
 height: 250px;  
}

<ul id="referenzliste">  
  
    <li>  
       <img src="Erstes_Bild.jpg" alt="Erstes Bild">  
       Erster Text  
    </li>  
  
    <li>  
       <img src="Zweites_Bild.jpg" alt="Zweites Bild">  
       Zweiter Text  
    </li>  
    <li>  
       <img src="Drittes_Bild.jpg" alt="Drittes Bild">  
       Dritter Text  
    </li>  
  
</ul>

Generell nochmal zu deinem Quelltext:
Es gibt noch andere Elemente außer div, p und img (u vergessen wir mal ganz schnell).
Es gibt z.B. h1 bis h6 für Überschriften und ich könnte mir vorstellen, das „Referenzen” wohl so etwas wie die Seitenüberschrift sein soll. Also verwende auch ein h1. Das gewünschte Aussehen kannst du dann beliebig gestalten. z.B.:

h1 {  
 font-family: Century Gothic; /* [link:http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=möglichst noch eine generische Schriftfamilie angeben] */  
 color: #455063;  
 font-size: 30px;  
 font-weight: normal;  
}

Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!

Beitrag melden

+1 Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Detlef G.: Anordnung nebeneinander

Beitrag lesen

Anordnung nebeneinander

Objekte innerhalb einer Scrollbar mit <div frei positionieren

Anordnung nebeneinander