Mehrere Bilder und Texte nebeneinander

Anonymous · 29. Oktober 2017

Hallo Liebe Gambio Profis,

habe mal wieder ein Problem... Wie bekomme ich das hin, dass ich ein Bild rechts daneben der Text wieder ein Bild und wieder rechts daneben Text screiben kann in einem Content?

Zum Verständnis habe ich die Ist und soll Situation als Bilder eingefügt ( Soll ist natürlich nur eine grafische Vorlage und nicht umgesetzt )

Ich bekomme das nämlich nur mit einem Bild und Text und Bild hin, der letzte Text geht nicht rechts rüber

Ist:

Soll:

Der Content befindet sich direkt auf der Statseite.

LG, Sven

Anonymous · 29. Oktober 2017

Versuche es mal mit dem Quellcode:

HTML:

<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3"><img alt="Foto-Name" class="img-responsive" src="Pfad zum Bild" title="z.B. Bild-Name" /></div>

<div class="col-xs-6 col-sm-3 col-md-3">
<div><strong><span style="font-family:verdana,geneva,sans-serif; color: rgb(0, 0, 0); font-size: 18px;">Überschrift</span></strong></div>
&nbsp;

<p><span style="font-size:14px; font-family: verdana,geneva,sans-serif;">Hier kommt Dein Text rein</span></p>

</div>
<div class="col-xs-6 col-sm-3 col-md-3"><img alt="Foto-Name" class="img-responsive" src="Pfad zum Bild" title="z.B. Bild-Name" /></div>

<div class="col-xs-6 col-sm-3 col-md-3">
<div><strong><span style="font-family:verdana,geneva,sans-serif; color: rgb(0, 0, 0); font-size: 18px;">Überschrift</span></strong></div>
&nbsp;

<p><span style="font-size:14px; font-family: verdana,geneva,sans-serif;">Hier kommt Dein Text rein</span></p>

</div>
</div>

Die col-Werte musst Du noch entsprechend anpassen.

Wenn Du die Überschriften nicht brauchst, kannst Du die natürlich rausnehmen.

Anonymous · 2. November 2017

Hi Barbara,

danke für deine Hilfe, soweit geht das in die richtige Richtung, aber bei mir kommen dann Bilder und Text untereinander.

Habe ich hier etwas falsch gemacht?

MfG, Sven

Anonymous · 2. November 2017

Barbara hatte den richtigen Ansatz. (habe Bild-größe 240x170 px genommen)
Variante 1 - 2 Boxen, das Bild wird mit align="left" links gehalten:

HTML:

<div class="row" style=" max-width: 750px; margin-left: auto; margin-right: auto;" >
<div class="bildbox col-xs-12 col-sm-6 col-md-6"><img style="max-width: 180px;" class="img-responsive" src="img/image11.jpg" align="left">
<div class="textbox" style="font-size:12px; font-family: verdana,geneva,sans-serif; margin-top: 55px">
 Hier kommt Dein Text rein<br>
 Hier kommt Dein Text rein<br>
 Hier kommt Dein Text rein<br>
</div>
</div>
<div class="visible-xs">
&nbsp;
</div>
<div class="bildbox col-xs-12 col-sm-6 col-md-6"><img style="max-width: 180px;" class="img-responsive" src="img/image12.jpg" align="left">
<div class="textbox" style="font-size:12px; font-family: verdana,geneva,sans-serif; margin-top: 55px">
 Hier kommt Dein Text rein<br>
 Hier kommt Dein Text rein<br>
 Hier kommt Dein Text rein<br>
</div>
</div>
</div>

Variante 2 - 4 Boxen:

HTML:

<div class="row" style=" max-width: 800px; margin-left: auto; margin-right: auto;" >
<div class="bildbox col-xs-6 col-sm-3 col-md-3"><img class="img-responsive" src="img/image11.jpg" ></div>
<div class="bildbox col-xs-6 col-sm-3 col-md-3" style="font-size:12px;font-family: verdana,geneva,sans-serif;min-height: 170px; padding-top: 25px;">
 Hier kommt Dein Text rein<br>
 Hier kommt Dein Text rein<br>
 Hier kommt Dein Text rein<br>
</div>
<div class="visible-xs">
&nbsp;
</div>

<div class="bildbox col-xs-6 col-sm-3 col-md-3"><img class="img-responsive" src="img/image12.jpg" ></div>
<div class="bildbox col-xs-6 col-sm-3 col-md-3" style="font-size:12px;font-family: verdana,geneva,sans-serif;min-height: 170px; padding-top: 25px;">
 Hier kommt Dein Text rein<br>
 Hier kommt Dein Text rein<br>
 Hier kommt Dein Text rein<br>
</div>
</div>

Anonymous · 2. November 2017

Danke auch dir Gerd,

das ist definitv besser, aber jetzt sind die beiden Bilder und Texte aber immer noch nicht in einer Zeile.
Geht das auch?

so ungefähr:

LG, Sven

Anonymous · 2. November 2017

Zitat von Anonymous: ↑

Geht das auch?
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

müsste eigentlich funktionieren.
mach mal einen Container drum:
HTML:
<div class="container">
....
...
....
</div>
habs mal getestet, beide oben angegebenen Vaianten:

Anonymous · 3. November 2017

HTML:

<div class="container">
<div class="row" style=" max-width: 750px; margin-left: auto; margin-right: auto;" >
<div class="bildbox col-xs-12 col-sm-6 col-md-6"><img style="max-width: 180px;" class="img-responsive" src="img/image11.jpg" align="left">
<div class="textbox" style="font-size:12px; font-family: verdana,geneva,sans-serif; margin-top: 55px">
Hier kommt Dein Text rein<br>
Hier kommt Dein Text rein<br>
Hier kommt Dein Text rein<br>
</div>
</div>
<div class="visible-xs">
&nbsp;
</div>
<div class="bildbox col-xs-12 col-sm-6 col-md-6"><img style="max-width: 180px;" class="img-responsive" src="img/image12.jpg" align="left">
<div class="textbox" style="font-size:12px; font-family: verdana,geneva,sans-serif; margin-top: 55px">
Hier kommt Dein Text rein<br>
Hier kommt Dein Text rein<br>
Hier kommt Dein Text rein<br>
</div>
</div>
</div>
</div>

wenn ich es so mache, ist es bei mir immer noch untereinander. Muss der Container irgendwie anders rein?

LG, Sven

Anonymous · 3. November 2017

lasse den container wieder weg, habe das mal im testshop bei index unten eingeworfen, funktioniert. (siehe Bild)
und das ist das html, beide Varianten. Das css (die style-angaben) würde ich auslagern.

HTML:

<div class="row action01" style="background-color:white;margin-left: auto; margin-right: auto;" >
<div class="bildbox col-xs-12 col-sm-6 col-md-6"><img style="max-width: 180px;" class="img-responsive" src="img/image11.jpg" align="left">
<div class="textbox" style="font-size:9px; font-family: verdana,geneva,sans-serif;">
<strong>MADROBOT PRESENTS:<br>
Darksiders 2 Statue Death zur Feier
des Remake von Darkssiders II</strong><br>
<br>
Um das Remake gebürtig zu feiern, hat Goya
Entertainment die authentischste Darstellung
Protagonisten produziert, die jedes Detail berücksichtigt
und sie dadurch zur akkuratesten Statue
macht, die jemals von Death veröffentlicht wurde.<br>
<a href="#">Sichert euch diese beeindruckende Statue</a>
</div>
</div>
<div class="visible-xs">
&nbsp;
</div>
<div class="bildbox col-xs-12 col-sm-6 col-md-6"><img style="max-width: 180px;" class="img-responsive" src="img/image12.jpg" align="left">
<div class="textbox" style="font-size:9px; font-family: verdana;">
<strong>MADROBOT PRESENTS:<br>
Darksiders 2 Statue Death zur Feier
des Remake von Darkssiders II</strong><br>
<br>
Um das Remake gebürtig zu feiern, hat Goya
Entertainment die authentischste Darstellung
Protagonisten produziert, die jedes Detail berücksichtigt
und sie dadurch zur akkuratesten Statue
macht, die jemals von Death veröffentlicht wurde.<br>
<a href="#">Sichert euch diese beeindruckende Statue</a>
</div>
</div>
</div>
&nbsp;
<div style="clear: both;">&nbsp;</div>

<!-- Variante 2  - 4 Boxen -->
<div class="row action02" style="background-color: white; margin-left: auto; margin-right: auto;" >
<div style="padding-left: 10px;padding-right: 5px; padding-top: 25px;" class="bildbox col-xs-6 col-sm-3"><img style="max-width: 160px;" class="img-responsive" src="img/image11.jpg" ></div>
<div  class="bildtext col-xs-6 col-sm-3" style="padding-left: 0px;padding-right: 0px;font-size:9px;font-family: verdana;min-height: 170px;;">
<strong>MADROBOT PRESENTS:<br>
Darksiders 2 Statue Death zur Feier
des Remake von Darkssiders II</strong><br>
<br>
Um das Remake gebürtig zu feiern, hat Goya
Entertainment die authentischste Darstellung
Protagonisten produziert, die jedes Detail berücksichtigt
und sie dadurch zur akkuratesten Statue
macht, die jemals von Death veröffentlicht wurde.<br>
<a href="#">Sichert euch diese beeindruckende Statue</a>
</div>
<div class="visible-xs">
&nbsp;
</div>

<div style="padding-left: 0px;padding-right: 5px; padding-top: 25px;" class="bildbox col-xs-6 col-sm-3"><img style="max-width: 160px;" class="img-responsive" src="img/image12.jpg" ></div>
<div  class="bildtext col-xs-6 col-sm-3" style="padding-left: 0px;padding-right: 0px;font-size:9px;font-family: verdana ;min-height: 170px;">
<strong>MADROBOT PRESENTS:<br>
Darksiders 2 Statue Death zur Feier
des Remake von Darkssiders II</strong><br>
<br>
Um das Remake gebürtig zu feiern, hat Goya
Entertainment die authentischste Darstellung
Protagonisten produziert, die jedes Detail berücksichtigt und sie dadurch zur akkuratesten Statue
macht, die jemals von Death veröffentlicht wurde.<br>
<a href="#">Sichert euch diese beeindruckende Statue</a>
</div>
</div>

das Problem ist immer der Text !

Anonymous · 26. November 2017

Hallo Postel, sry dass ich erst jetzt reagiere, bin aber noch nicht dazu gekommen alle diese Änderungen umzusetzen. Ich werde es erstmal bei den Bildern belassen und deine Lösung bei der nächsten Änderung ausprobieren.

Anonymous · 27. Dezember 2017

Sorry, dass ich mal kurz was loswerden möchte.

Was genau muss man essen, trinken oder einnehmen damit man das versteht? Ich werde wohl noch 50 Jahre brauchen um das zu verstehen bin wohl eher der Gambio-Standardshop-User

Und macht bitte keinen Container um meine Aussage

Anonymous · 27. Dezember 2017

An einigen Stellen braucht man für Profitricks etwas HTML und CSS. Und bei responsive Webseiten muss man verstehen, dass man Grössen in Prozent oder Spalten angibt. Früher hatte man irgendwas, das war immer 600 Pixel breit. 2 Bilder nebeinander packen? Super, da machte man jedes Bild 300 Pixel breit.
Heute muss man für denselben Zweck sagen: Bild 1 ist 50% breit, Bild 2 ist 50% breit. Gibt zusammen 100%, eine gesamte Breite, egal wieviel Pixel das auch immer gerade sind. Du gehst immer davon aus, dass du keine Ahnung hast wie gross das Display deines Kunden ist. Wenn du dann noch verstehst, dass man Breite auch in Spalten ausdrücken kann (Es gibt immer genau 12 gesamt, nie 11, nie 13), und dass eine halbe Breite vom ganzen dann immer 6 Spalten sind: Glückwunsch, dann hast du das wichtigste Konzept von Bootstrap und responsiven Webseiten verstanden.

Anonymous · 27. Dezember 2017

Zitat von Wilken (Gambio): ↑

An
einigen Stellen braucht man für Profitricks etwas HTML und CSS. Und bei responsive Webseiten muss man verstehen, dass man Grössen in Prozent oder Spalten angibt. Früher hatte man irgendwas, das war immer 600 Pixel breit. 2 Bilder nebeinander packen? Super, da machte man jedes Bild 300 Pixel breit.
Heute muss man für denselben Zweck sagen: Bild 1 ist 50% breit, Bild 2 ist 50% breit. Gibt zusammen 100%, eine gesamte Breite, egal wieviel Pixel das auch immer gerade sind. Du gehst immer davon aus, dass du keine Ahnung hast wie gross das Display deines Kunden ist. Wenn du dann noch verstehst, dass man Breite auch in Spalten ausdrücken kann (Es gibt immer genau 12 gesamt, nie 11, nie 13), und dass eine halbe Breite vom ganzen dann immer 6 Spalten sind: Glückwunsch, dann hast du das wichtigste Konzept von Bootstrap und responsiven Webseiten verstanden.
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Boh, so klingt das logisch. In der Umsetzung allerdings wieder verwirrend. Ich möchte zwei Tabellen nebeneinander haben.
Zwei Überschriften (also zwei Zellen) darunter dann wieder zwei Spalten mit 5 oder 6 Zeilen, das ganze zwei mal, eben nebeneinander.Chaos perfekt?

So wie in Barbaras Testshop nur eben mit zwei Überschriften:

Das hier ist mein Projekt:

Die sollen nebeneinander. Habe mir schon die Haare gerauft, bekomme das einfach nicht hin.

Anonymous · 27. Dezember 2017

HTML:

<div class="row">
    <div class="col-xs-12 col-md-6">
        <table class="table table-striped table-features">
            <thead>
                <tr>
                    <th colspan="2"><span style="color:#472225; font-size:14px;font-family:verdana,geneva,sans-serif;">Eigenschaften</span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="width: 50%;"><span style="font-size:14px; font-family:verdana,geneva,sans-serif;">Gr&ouml;&szlig;e Anh&auml;nger:</span></td>
                    <td style="width: 50%;"><span style="font-size:14px; color:#000000; font-family:verdana,geneva,sans-serif;">B: 1,9&nbsp;cm, H: 1,7 cm</span></td>
                </tr>
                <tr>
                    <td><span style="font-size:14px; font-family:verdana,geneva,sans-serif;">Gr&ouml;&szlig;e Ring:</span></td>
                    <td><span style="font-size:14px; font-family:verdana,geneva,sans-serif;">0,8 cm</span></td>
                </tr>
                <tr>
                    <td><span style="font-size:14px;"><span style="font-family:verdana,geneva,sans-serif;">Gewicht:</span></span></td>
                    <td><span style="font-size:14px;"><span style="font-family:verdana,geneva,sans-serif;">1,6 g</span></span></td>
                </tr>
                <tr>
                    <td><span style="font-size:14px;"><span style="font-family:verdana,geneva,sans-serif;">Farben:</span></span></td>
                    <td><span style="font-size:14px;"><span style="font-family:verdana,geneva,sans-serif;">Silberfarbig</span></span></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><span style="font-size:14px;"><span style="font-family:verdana,geneva,sans-serif;">Neuware</span></span></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="col-xs-12 col-md-6">
        <tbody"> </tbody">

        <table class="table table-striped table-features">
            <thead>
                <tr>
                    <th colspan="2"><span style="color:#472225; font-size:14px;font-family:verdana,geneva,sans-serif;">Eigenschaften</span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="width: 50%;"><span style="font-size:14px; font-family:verdana,geneva,sans-serif;">Gr&ouml;&szlig;e Anh&auml;nger:</span></td>
                    <td style="width: 50%;"><span style="font-size:14px; color:#000000; font-family:verdana,geneva,sans-serif;">B: 1,9&nbsp;cm, H: 1,7 cm</span></td>
                </tr>
                <tr>
                    <td><span style="font-size:14px; font-family:verdana,geneva,sans-serif;">Gr&ouml;&szlig;e Ring:</span></td>
                    <td><span style="font-size:14px; font-family:verdana,geneva,sans-serif;">0,8 cm</span></td>
                </tr>
                <tr>
                    <td><span style="font-size:14px;"><span style="font-family:verdana,geneva,sans-serif;">Gewicht:</span></span></td>
                    <td><span style="font-size:14px;"><span style="font-family:verdana,geneva,sans-serif;">1,6 g</span></span></td>
                </tr>
                <tr>
                    <td><span style="font-size:14px;"><span style="font-family:verdana,geneva,sans-serif;">Farben:</span></span></td>
                    <td><span style="font-size:14px;"><span style="font-family:verdana,geneva,sans-serif;">Silberfarbig</span></span></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><span style="font-size:14px;"><span style="font-family:verdana,geneva,sans-serif;">Neuware</span></span></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Versuche es mal damit

Foren

Mehrere Bilder und Texte nebeneinander

Mehrere Bilder und Texte nebeneinander

Anhänge:

Bildschirmfoto.jpg

Anhänge:

bild+text.jpg