Autor |
Nachricht |
|
02.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ö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ügend Platz hat. Ganz wichtig hierbei, ist der große Sesamstraß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ürlich noch etwas eingestreut. Nach mehrmaligem Benutzen der Snackbox sickert dann der Flecki-typische Geruch in die Einstreuflocken und Flecki fühlt sich nicht mehr so fremd. Das kennen wir ja auch. Im eigenen Bett schlä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ühlen. Stellen Sie sich einmal vor, Sie hätten plötzlich keine Heuhalme mehr in der Wohnung rumliegen! Da kann man sich auch nicht wohlfühlen.
Auß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ö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ü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ür ein paar Minuten in die Snackbox hinein. Am besten zwischen den Mahlzeiten. Schließ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ü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
|
|
↑
|
|
|
-
design-globe
|
02.02.2017 um 16:35 (UTC) Titel: |
|
|
warum so kompliziert,
würde ich mit einer Tabelle lösen ______________ mfG design-globe
|
|
↑
|
|
|
|
02.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ö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ügend Platz hat. Ganz wichtig hierbei, ist der große Sesamstraß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ürlich noch etwas eingestreut. Nach mehrmaligem Benutzen der Snackbox sickert dann der Flecki-typische Geruch in die Einstreuflocken und Flecki fühlt sich nicht mehr so fremd. Das kennen wir ja auch. Im eigenen Bett schlä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ühlen. Stellen Sie sich einmal vor, Sie hätten plötzlich keine Heuhalme mehr in der Wohnung rumliegen! Da kann man sich auch nicht wohlfühlen.
Auß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ö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ü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ür ein paar Minuten in die Snackbox hinein. Am besten zwischen den Mahlzeiten. Schließ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ü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
|
|
↑
|
|
|
|
02.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 ( )
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
Gruß, TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon |
|
↑
|
|
|
|
03.02.2017 um 05:40 (UTC) Titel: |
|
|
Moin!
Wow! Was für ein Aufwwand!
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
|
|
↑
|
|
|
|
03.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 )
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 |
|
↑
|
|
|
|
03.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...
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
|
|
↑
|
|
|
|