Suche im Forum:
Suchen


Autor Nachricht
Beitrag02.02.2017 um 15:46 (UTC)    
Titel: Mit <div> Bilder nebeneinander anordnen [erledigt]

Hallo zusammen,

ich verwende auf meiner Seite folgenden Code:http://sifletest.de.tl/Snackboxtest2.htm
Ich würde gerne immer 2 Bilder mit Text darunter nebeneinander anordnen. Und dann das Ganze auch noch zentriert. Die ersten 4 sehen ja schon mal gar nicht SO schlecht aus. Aber ohne Hilfe komme ich wohl nicht mehr weiter.

Code:

<h2>Zur L&ouml;sung dieses Problems wurde die Snackbox erfunden!</h2>

<div style="float: left" >
<div style="width: 260px">
<img class="standard" alt="Meerschweinchen Snackbox leer" src="//img.webme.com/pic/s/sifle/snackbox1.jpg" />
<br>
<p>
Als erstes nehme man eine kleine Box, in der das Meerschweinchen gen&uuml;gend Platz hat. Ganz wichtig hierbei, ist der gro&szlig;e Sesamstra&szlig;en-Aufkleber. Ohne den geht’s nicht!
</p>
</div>
</div>

<div style="margin-left: 280px">
<div style="width: 260px">
<img class="standard" alt="Meerschweinchen Snackbox mit Einstreu" src="//img.webme.com/pic/s/sifle/snackbox2.jpg" />
<br>
<p>
Damit der Boden nicht so hart ist und eventuelle Pipi gut aufgesaugt wird, wird nat&uuml;rlich noch etwas eingestreut. Nach mehrmaligem Benutzen der Snackbox sickert dann der Flecki-typische Geruch in die Einstreuflocken und Flecki f&uuml;hlt sich nicht mehr so fremd. Das kennen wir ja auch. Im eigenen Bett schl&auml;ft es sich besser als in der Fremde. Und warum? Logisch, weil mein eigenes Bett auch nach mir riecht!
</p></div>
</div>

<div style="float: left" >
<div style="width: 260px">
<img class="standard" alt="Meerschweinchen Snackbox mit Heu" src="//img.webme.com/pic/s/sifle/snackbox3.jpg" />
<br>
<p>
Heu muss immer da sein. Ohne Heu kann man sich nicht so richtig wohlf&uuml;hlen. Stellen Sie sich einmal vor, Sie h&auml;tten pl&ouml;tzlich keine Heuhalme mehr in der Wohnung rumliegen! Da kann man sich auch nicht wohlf&uuml;hlen.
Au&szlig;erdem kann die Schmecki dann zwischendurch auch mal etwas Heu mampfen. Also: Heu rein!
</p>
</div>
</div>

<div style="margin-left: 280px">
<div style="width: 260px">
<img class="standard" alt="Meerschweinchen Snackbox mit Futter" src="//img.webme.com/pic/s/sifle/snackbox4.jpg" />
<br>
<p>
Und damit die Flecki auch ein bisschen was auf die Rippen bekommt, wird noch ein kleiner Napf mit vielen "Dickmachern" reingestellt. Haferflocken, Sonnenblumenkerne, Rodicare, Maisk&ouml;rner, Maiscobs, Gourmet Energy Mix, …
</p></div>
</div>

<div style="float: left" >
<div style="width: 260px">
<img class="standard" alt="Meerschweinchen Flecki in der Snackbox" src="//img.webme.com/pic/s/sifle/snackbox5.jpg" />
<br>
<p>
Und was fehlt noch? Mmmh, irgendwas haben wir noch vergessen. Einstreu, Heu, Fressnapf, … . Ach ja! Die <a href="/Flecki.htm" title="Meerschweinchen Flecki">Flecki</a>! Ohne die klappt das ganze nat&uuml;rlich nicht!
</p>
</div>
</div>

<div style="margin-left: 280px">
<div style="width: 260px">
<img class="standard" alt="Meerschweinchen Flecki will aus der Snackbox raus" src="//img.webme.com/pic/s/sifle/snackbox6.jpg" />
<br>
<p>
Je nach dem, wieviel Zeit wir haben, setzen wir Flecki 1-2 mal am Tag f&uuml;r ein paar Minuten in die Snackbox hinein. Am besten zwischen den Mahlzeiten. Schlie&szlig;lich hat das ganze keinen Sinn, wenn Flecki satt ist oder es direkt danach Abendessen gibt und sie dann keinen Appetit mehr hat.
Ein paar Minuten reichen, dann gibt Flecki Bescheid, wenn sie wieder nach Hause will. Sie schn&uuml;ffelt dann etwas an der Snackboxkante herum und nimmt Blickkontakt zu uns auf: „Hey! Hallooo! Ich bin satt! Holt ihr mich wieder ab?“
</p></div></div>

<h2>Hier noch einmal im Schnelldurchlauf!</h2>

<div style="width: 260px">
<img class="standard" alt="Meerschweinchen Snackbox im Schnelldurchlauf" src="//img.webme.com/pic/s/sifle/snackbox7.gif" />
<br>
<p>
Alle paar Tage wird Flecki dann auf die Waage gestellt und hat dann hoffentlich etwas zugenommen.
</p>
</div>

______________
Gruß von Sven von



Zuletzt bearbeitet von sifle am 03.02.2017, 12:28, insgesamt einmal bearbeitet
Beitrag02.02.2017 um 16:35 (UTC)    
Titel:

warum so kompliziert,
würde ich mit einer Tabelle lösen
______________
mfG design-globe
Beitrag02.02.2017 um 18:13 (UTC)    
Titel:

Ich habs schon mit Tabelle gemacht: http://sifle.de/Die-Snackbox.htm
Den hat mir vor Urzeiten mal ein Bekannter zusammengeschustert.
Ich möchte den ganzen font, border Code weghaben.
Bei den divs wirds ja ganz normal mit dem bestehenden CSS formatiert.
Wenn du eine bessere (und gerne auch kürzere) Lösung hast...


Code:
<h2>Zur L&ouml;sung dieses Problems wurde die Snackbox erfunden!</h2>

<table border="0"  font width="1%" align="center" cellspacing="50px" >
<tr>
<td valign="top" width="1%">
<img alt="Meerschweinchen Snackbox leer" vspace="10" titel="Meerschweinchen Snackbox leer "
style="border: darkslategray 5px solid" src="//img.webme.com/pic/s/sifle/snackbox1.jpg"><br>
<font size="2"><font face=verdana, arial>
Als erstes nehme man eine kleine Box, in der das Meerschweinchen gen&uuml;gend Platz hat. Ganz wichtig hierbei, ist der gro&szlig;e Sesamstra&szlig;en-Aufkleber. Ohne den geht’s nicht!</font></font>
</td>
<td valign="top">
<img alt="Meerschweinchen Snackbox eingestreut" vspace="10" titel="Meerschweinchen Snackbox mit Einstreu " style="border: darkslategray 5px solid" src="//img.webme.com/pic/s/sifle/snackbox2.jpg"><br>
<font size="2"><font face=verdana, arial>
Damit der Boden nicht so hart ist und eventuelle Pipi gut aufgesaugt wird, wird nat&uuml;rlich noch etwas eingestreut. Nach mehrmaligem Benutzen der Snackbox sickert dann der Flecki-typische Geruch in die Einstreuflocken und Flecki f&uuml;hlt sich nicht mehr so fremd. Das kennen wir ja auch. Im eigenen Bett schl&auml;ft es sich besser als in der Fremde. Und warum? Logisch, weil mein eigenes Bett auch nach mir riecht!
</font></font>

</td>
</tr>
<tr>
<td valign="top">
<img alt="Meerschweinchen Snackbox mit Heu"
vspace="10"
titel="Meerschweinchen Snackbox mit Heu "
style="border: darkslategray 5px solid"
src="//img.webme.com/pic/s/sifle/snackbox3.jpg">
<font size="2"><font face=verdana, arial>
Heu muss immer da sein. Ohne Heu kann man sich nicht so richtig wohlf&uuml;hlen. Stellen Sie sich einmal vor, Sie h&auml;tten pl&ouml;tzlich keine Heuhalme mehr in der Wohnung rumliegen! Da kann man sich auch nicht wohlf&uuml;hlen.
Au&szlig;erdem kann die Schmecki dann zwischendurch auch mal etwas Heu mampfen. Also: Heu rein!</font></font>
</td>
<td valign="top">
<img alt="Meerschweinchen Snackbox mit Futter"
vspace="10"
titel="Meerschweinchen Snackbox mit Futter "
style="border: darkslategray 5px solid"
src="//img.webme.com/pic/s/sifle/snackbox4.jpg">
<font size="2"><font face=verdana, arial>Und damit die Flecki auch ein bisschen was auf die Rippen bekommt, wird noch ein kleiner Napf mit vielen "Dickmachern" reingestellt. Haferflocken, Sonnenblumenkerne, Rodicare, Maisk&ouml;rner, Maiscobs, Gourmet Energy Mix, …
</font></font>
</td>
</tr>
<tr>
<td valign="top">
<img alt="Meerschweinchen Flecki in der Snackbox "
vspace="10"
titel="Meerschweinchen Flecki in der Snackbox"
style="border: darkslategray 5px solid"
src="//img.webme.com/pic/s/sifle/snackbox5.jpg">
<font size="2"><font face=verdana, arial>
Und was fehlt noch? Mmmh, irgendwas haben wir noch vergessen. Einstreu, Heu, Fressnapf, … . Ach ja! Die <a href="/Flecki.htm"><font color="#0000ff" size="2">Flecki</font></a>! Ohne die klappt das ganze nat&uuml;rlich nicht!
</font></font>
</td>
<td valign="top">
<img alt="Meerschweinchen Flecki will aus der Snackbox raus"
vspace="10"
titel="Meerschweinchen Flecki will aus der Snackbox raus"
style="border: darkslategray 5px solid"
src="//img.webme.com/pic/s/sifle/snackbox6.jpg">
<font size="2"><font face=verdana, arial>
Je nach dem, wieviel Zeit wir haben, setzen wir Flecki 1-2 mal am Tag f&uuml;r ein paar Minuten in die Snackbox hinein. Am besten zwischen den Mahlzeiten. Schlie&szlig;lich hat das ganze keinen Sinn, wenn Flecki satt ist oder es direkt danach Abendessen gibt und sie dann keinen Appetit mehr hat.
Ein paar Minuten reichen, dann gibt Flecki Bescheid, wenn sie wieder nach Hause will. Sie schn&uuml;ffelt dann etwas an der Snackboxkante herum und nimmt Blickkontakt zu uns auf: „Hey! Hallooo! Ich bin satt! Holt ihr mich wieder ab?“
</font></font>
</td>

</tr>
<tr>
<td valign="top" colspan="2">
<font size="2"><font face=verdana, arial>

<center>
<h2>Hier noch einmal im Schnelldurchlauf!</h2>
<img class="standard" alt="Meerschweinchen Snackbox"
titel="Meerschweinchen Snackbox "
src="//img.webme.com/pic/s/sifle/snackbox7.gif">
</center>
<br>
Alle paar Tage wird Flecki dann auf die Waage gestellt und hat dann hoffentlich etwas zugenommen.
</font></font>
</td></tr>
</table>

______________
Gruß von Sven von

Beitrag02.02.2017 um 20:10 (UTC)    
Titel:

Hallo,

dass die unteren beiden Bilder dort "festhängen" liegt daran, dass das linke Div der darüber liegenden Reihe höher ist als das rechts daneben. (Im Unterschied zur obersten Reihe, dort ist das rechte Div höher und das Phänomen tritt nicht auf.)

Mir fallen dreieinhalb Dinge ein, die man dagegen tun kann:
0. Man sorgt durch die Textlänge dafür, dass das rechte Div höher ist als das linke ( Wink )
1.1. Man gibt allen Divs eine feste Höhe, 500px wären in etwa passend.
1.2. Man lässt das mit dem "Float" bleiben, gibt ihnen stattdessen ein position:inline-block; und eine feste Höhe von z.B. 500px.
2. Man legt um jeweils zwei Divs, die nebeneinander angezeigt werden sollen, ein weiteres Div.
3. Man fügt nach jedem zweiten Div ein <div style="clear:both;"> ein. Das bewirkt, dass die folgenden Divs sich beim "Floaten" nicht mehr an den davor liegenden Divs orientieren.

Siehe auch hier: http://transint-clean.page.tl/Floating-u-.--Alternativen.htm

Sieht alles ziemlich gleich aus, wenn man die zur Demonstration eingefügten Rahmen und Hintergrundfarben entfernt hat Wink

Gruß, TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beitrag03.02.2017 um 05:40 (UTC)    
Titel:

Moin!
Wow! Was für ein Aufwwand! Shocked
Für mich ist derzeit die Verion 0 (Textlänge) die praktikabelste.
Demnach ist der Code aus dem Eingangspost noch aktuell, bis auf die Zeichenlänge.
Wie bekomme ich den ganzen Kram jetzt noch zentriert?
______________
Gruß von Sven von

Beitrag03.02.2017 um 09:00 (UTC)    
Titel:

Naja, wenn der Code erstmal steht hast du eigentlich keine weiteren Probleme.
(Und das tut er ja im Prinzip, denn ich musste das ja irgendwie testen Wink )
Ich würde bei vielen gleichen Divs ohnehin mit Klassen arbeiten, und nicht alle CSS-Definitionen über style="" umsetzen. Das ist dann auch beim Ändern des Codes deutlich einfacher.
Wenn du mit float arbeitest, ist zentrieren in dem Sinne schwierig. Du kannst mit dem Margin-left der beiden nebeneinander liegenden Divs so lange spielen bis es passt, so wie du es mit den jeweils rechten Divs ja jetzt auch machst.

Gruß, TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beitrag03.02.2017 um 10:43 (UTC)    
Titel:

Mmmmmh, ich wollte mir CSS sparen, da diese Darstellung nur auf dieser einen Seite stattfindet...
Margin-left will irgendwie nicht funzen...
Irgendwie pack ich das nicht. Meiner Logik nach dürte eine solche Darstelleung nicht SO schwer sein... Confused Sad

Naja, dann werde ich es GANZ einfach stricken und habe halt Pech gehabt...
______________
Gruß von Sven von



Zuletzt bearbeitet von sifle am 03.02.2017, 12:20, insgesamt 2-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de