Wie am besten mehrere Bilder auf der Startseite einbauen ?

[marc112000]

Hallo,

ich möchte auf der Startseite 6 Bilder einbauen.
Jeweils 3 nebeneinander und jedes mit Text drunter. Darunter dann wieder 3 Bilder und Text drunter.

Wie würdet Ihr das machen, das die alle schön in einer Reihe sind und der Text darunter auch genau unter dem Bild ist.
Sollte ich das mit einer Tabelle lösen wo man in jede Zelle alles reinpackt oder ist es irgendwie anders besser ?
Es soll sich halt nichts verschieben.

Danke im Voraus

Gruß
marc

Linkback: https://www.modified-shop.org/forum/index.php?topic=32191.0

[awids]

Eventuell solltest du zuerst dein Top-Menü im Shop reparieren, das macht in seinem jetzigen Zustand keinen schönen Eindruck.

Tabelle wäre natürlich ohne weiteres möglich, ist für Anfänger wahrscheinlich das Leichteste, aber ich empfehle immer, dass über Container (div) zu lösen, um 100% valide zu bleiben. Tabellen im Code haben mit Suchmaschinen nichts zu tun, aber Container lassen sich viel besser durch CSS steuern und bieten viel mehr Möglichkeiten. Das ist nur meine persönliche Meinung, aber du hast ja gefragt, wie wir das machen würden und ich würde es so machen.

[Godzilla]

ich möchte auf der Startseite 6 Bilder einbauen.
Jeweils 3 nebeneinander und jedes mit Text drunter. Darunter dann wieder 3 Bilder und Text drunter.

Code: PHP  [Auswählen]

<ul id="xyz">
<li><img src="" alt="" height="" width="">
<p>Text</p>
</li>
<li><img src="" alt="" height="" width="">
<p>Text</p>
</li>
<li><img src="" alt="" height="" width="">
<p>Text</p>
</li>
<li><img src="" alt="" height="" width="">
<p>Text</p>
</li>
<li><img src="" alt="" height="" width="">
<p>Text</p>
</li>
<li><img src="" alt="" height="" width="">
<p>Text</p>
</li>
</ul>
<div class="clear"></div>
 

Code: PHP  [Auswählen]

#xyz li {float:left;width:33.3333%;}
#xyz li img {width:100%;display:block;height:auto;max-width:100%;border:0;}
#xyz li p {min-height:50px;}
.clear {clear:left;}
 

[marc112000]

Hallo,

vielen Dank für die Beschreibung. Hat soweit alles geklappt.
Nun habe ich aber doch noch ein paar kleinere Probleme damit. Ich führe das mal kurz auf.

1. Auf der Startseite sind jetzt vor den Texten die Punkte ( Listenzeichen? ) Wie kriege ich die weg ?
2. Ich habe einen Rahmen um die Bilder gemacht ( Border:1 im Stylsheet sowie im Content Manager)) . Sobald ich dem Bild einen Link zuweise sind die Rahmen aber nicht mehr sichtbar.
3. Das verlinkte Wort "weiter" wollte ich so um 5-6 Leerzeichen nach rechts vom Text weg haben.
4. Der Text ist nicht 100% bündig unter dem Bild , müsste alles einen Tick nach rechts.
[ Für Gäste sind keine Dateianhänge sichtbar ]

Ich habe die Tabelle mal angehängt, kann mir jemand nocheinmal einen Tip geben ?

Vielen Dank schonmal

marc

[Emma2011]

Hallo,
was auch nicht so schön ist, ist das bei dein Shoplogo immer erst kurz das Standard Lila Bild
angezeigt wird, bevor dann dein Logo kommt.
Ich weis zwar nicht wie man das beheben kann, aber da kann hier bestimmt jemand
einen Tipp geben.

LG
Emma 

[mr.mc.mauser]

Ich weis zwar nicht wie man das beheben kann, aber da kann hier bestimmt jemand
einen Tipp geben.

ähhhhh indem man nicht das original Hintergrundbild mittels top_logo.jpg lädt und dann mit dem spacer.gif das jetzige Bild drüber legt.

[mr.mc.mauser]

zu 1.

Code: CSS  [Auswählen]

#xyz li {
    list-style-type: none;
}

zu 2.

Code: CSS  [Auswählen]

a img { border:1;}

zu 3. + 4.
Margin und Padding sind hier deine Freunde

z.b.

Code: CSS  [Auswählen]

#xyz p {padding: 5px}

um den Link

Code: XML  [Auswählen]

<span style='padding-left: 5px'>...LINK...</span>

Das 'weiter' würde ich immer in eine neue Zeile schieben

ALLGEMEIN  :
http://wiki.selfhtml.org/wiki/CSS

Warum experimentierst du auf einen für Kunden sichtbaren Shop ?
Entweder lokale Kopie, Kopie auf server, oder benutze dafür Firebug oder ähnliches.
Solche 'sichtbaren' Experimente sehen für einen Kunden nicht gerade schön aus.

[marc112000]

Hallo,

vielen Dank für die Antwort. Sorry für die nochmalige Nachfrage. Mit Antwort zu Punkt 2 (2. Ich habe einen Rahmen um die Bilder gemacht ( Border:1 im Stylsheet sowie im Content Manager)) . Sobald ich dem Bild einen Link zuweise sind die Rahmen aber nicht mehr sichtbar.) komm ich noch nicht zurecht

Code: CSS

    a img { border:1;}

Das steht jetzt  bei mir im Quellcode :
<ul id="xyz">
    <li><img border="3" width="229" height="171" alt="Komplettset" src="/images/BNP_0471_01.jpg" />
    <p>BNP Komplettset

Und so in CSS:
 

Code: CSS  [Auswählen]

#xyz li {float:left;width:33.3333%;}
#xyz li img {width:100%;display:block;height:auto;max-width:100%;border:3;}
#xyz li p {min-height:50px;}
#xyz li {list-style-type: none;}

Und wenn ich dem Bild nun einen Link zuweise ist der Rahmen um das bild weg. Wie kann ich das ändern ??
Noch eine Frage : Wie kann ich die Rahmenfarbe bestimmen ?

Vielen Dank schoneimal

Marc

[mr.mc.mauser]

Um einen Rahmen um ein Bild im Link zu haben muss in dein css einfach nur das:

Code: CSS  [Auswählen]

#xyz li a img {border: solid 2px #f00;}

Standardmässig ist der Rahmen sogar da, der ist aber irgendwo in deinem CSS dekativiert worde.

http://wiki.selfhtml.org/wiki/CSS
ist wirklich zu empfehlen da steht dann auch was "solid 2px #f00" bedeutet