Anordnung nebeneinander

[Charly2010]

Hallo Charly2010

Hallo Detlef,

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.

O.k.

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.

Ich hatte es versucht, doch dann waren die Bilder unter einander, dass bringt mir nix, die sollen nebeneinander. Und ja ich hätte gerne für mein Layout den Text auf selber Höhe wie der Nachbartext und die Bilder nebeneinander, längere Bilder kommen dann mittig untereinander.

Ja, ich verstehe, wie es aussehen soll, ich kann aber nicht verstehen, wie du dazu kommst solch ein unlogisches HTML-Kauderwelsch zu schreiben.

Weil ich noch Anfänger bin.

HTML ist eine Auszeichnungssprache, die die logische Struktur abbilden soll. CSS dient dann dazu, diese Struktur mit der gewünschten Darstellung zu versehen.

Das mag schon sein, da will ich ja auch hinterher noch mit meinem Quellcode hin, dass sieht jetzt halt noch etwas schlimm aus. Ich möchte jetzt halt erst mal das Layout irgendwie hinbekommen, dass es mir gefällt und anschließend werde ich versuchen das mit dem Quellcode noch etwas besse zu lösen, ich will dann später auch Stylesheets verwenden, so dass nur noch das Nötigste auf der jeweiligen Seite steht.

`<div style="position:absolute; bottom: 530px; left:320px;">`

Wozu position:absolute?

Why not?

Ist vielleicht nicht immer passend, aber manchmal braucht man es wohl. Ich habe zudem nämlich auch noch das Problem, dass sich auf meiner Hauptseite alles, was ich mit div positioniert habe, je nach Browser und Bildschirmauflösung verschiebt. Das lässt mir nämlich auch keine Ruhe.

        `<div style="position:absolute; bottom:-160px; left:350px;">`

<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.

hier verstehe ich nicht was Du meinst. Ja ich nehme CSS ja auch fürs Aussehen.

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

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

<p>

> > 
> > <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></p>
> > 
> > <p style="text-align:left;color:#455063;font-family:Century Gothic;font-size:11px;margin-left:20px;margin-right:10px">Sickerwasserbecken Deponie Nattheim
> > 
> > <br>Bettonschutzplatten nach WHG
> > 								
> > 
> > <p style="text-align:left;color:#455063;font-family:Century Gothic;font-size:11px;margin-left:20px;margin-right:10px">Sickerwasserbecken Flugplatz Böblingen
> > 
> > <br>Teichauskleidung mit KDB</p>

Dies hat keine Ähnlichkeit mit dem Code, den ich dir gepostet habe.

Ja schon, ich wollte ja auch nur sagen, dass ich bisher auch mit <p></p> gearbeiete habe bei den Bildern, mir dass allerdings nicht weiterhilft, wenn ich den unteren Text auf selbe Höhe des ersten Textes, linksbündig unter das zweite Bild haben möchte.

Übrigens, das hatte ich auch übersehen: img ist ein Leeres Element, also kein Endtag in HTML.

Oh danke, dann werde ich das rausnehmen.

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?

Ja genau so soll es sein, erster Text zu erstem Bild, zweiter Text zu zweitem Bild, aber bitte nebeneinander, siehe Link: http://www.bilder-upload.eu/show.php?file=Fj3b6qXJO3pqWRs.jpg

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.

Ist ja letztendlich egal wie sich's bewerkstelligen lässt, Hauptsache das Layout stimmt nachher. Natürlich will ich auch einen regelkonformen Quellcode, darum frage ich ja wie man das am elegantesten lösen könnte.

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.

Äh die Bilder müssen aber in den ersten Absatz, sonst sind sie untereinander, die sollen aber doch nebeneinander und der Text jeweils darunter, das kann doch nicht so schwer umzusetzen sein?

<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.

Die war ja auch ursprünglich in reinem HTML, erst durch das CSS wurde sie zudem was sie jetzt ist, dazu hat man CSS ja. In reinem HTML sieht die Seite sch****e aus. Zumal da ja dann auch die Boxen fehlen würden. Nur in HTML, wäre ja dann lediglich der Hintergrund und die paar Tabellen, die nur auf der Hauptseite sind. Also sprich in HTML wäre es praktisch eine leere Seite.

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.

ah, schau dass wusste ich nicht, dann könnte ich es ja mal damit versuchen.

Aber willst du das wirklich?

Ja will ich!

Willst du wirklich:

• jedes Bild, jeden Textabsatz einzeln dorthin positionieren, wo sie angezeigt werden sollen?

In dem Fall ja!

• bei jeder Änderung einer Textlänge oder Bildgröße wieder neu damit anfangen?

Äh nein, da ich da keine Texte ändern werde, wenn ich sie erst einmal drin habe.

• 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?

Firefox kommt damit bisher klar, jedoch habe ich ja bereits oben erwähnt, dass ich zudem auch noch mit dem Problem kämpfe, dass die positionierten Elemente trotz position:absolute offenbar nicht auf der Seite fixiert sind, und sich somit je nach Auflösung des Monitors und des gewählten Browsers verschieben. Im Internet-Explorer kann man die Seite bisher gar nicht betrachten. Diesem Problem muss ich natürlich auch noch irgendwie Herr werden.

… 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, ...

sage ich ja.

... 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?

äh ja, denn so will ich es ja haben. Ich will rechts nen Bild, links nen Bild und unter das jeweilige Bild, den dazugehörigen Text linksbündig darunter.

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.

Ich weiß wie eine Aufzählung geht, die ist anschließend sogar noch drin, hat da aber nix zu suchen, da die in die Unternehmensvorsellung gehört. Ich hatte davor die Seite kopiert, daher ist der Inhalt noch darunter, fliegt aber raus, sobald ich weiß wie ich die Bilder darin mit dem entsprechenden Text so einbinden kann, dass es meiner Vorstellung entspricht.

#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.

Ja schon, aber die ist doch groß genug und mit px kann ich die Größe genauer bestimmen.

Also verwende auch ein h1. Das gewünschte Aussehen kannst du dann beliebig gestalten. z.B.:

h1 {

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

Ja gut, wie gesagt ich bin ja noch am Anfang was HTML und CSS anbelangt. Das kann ich ja dann auch noch ändern.

Allerdings schade, dass ich hinsichtlich der Bilder nun immer noch so schlau bin wie zuvor. Dann muss ich es halt wirklich mit der Tabelle machen, oder ich versuche mal das <p> per CSS zu verschieben, vielleicht gelingt es mir ja.

Trotzdem danke für Deine Hilfe.

Auf Wiederlesen Detlef

Gruß

Charly2010