CSS - Bilder/Boxen auf Startseite exakt nebeneinander (und untereinander) platzieren.

    Hallo,


    die Tage habe ich das CSS Tutorial von Herrn Pratzner durchgearbeitet.
    Ist gut und verständlich geschrieben. Bin aber noch Anfänger in CSS.
    Auf der Startseite unseres Onlineshops www.teevino.de (wo jetzt noch viel Text steht) möchte ich per
    CSS - Bilder/Boxen auf der Startseite exakt nebeneinander (und untereinander) platzieren.
    Es sollen vermutlich insgesamt 6 Boxen werden, 3 in einer Reihe und 3 darunter.
    Um die Seite etwas aufzuhübschen. Ist eigentlch kein großer Akt.
    In der Anlage hane ich einen Screenshot vom Firefox und die html/css Datei test.txt mitgeschickt.
    Ich möchte die Boxen elegant gestalten und mit einem Link zur Überschrift/Produkt versehen.


    Im CSS Teil habe ich die 4 Boxen absolut und versetzt angeordnet.
    Leider ist die erste Box etwas höher als die 3 anderen.
    Außerdem soll bei jeder Box unten ein oranger Rand sein.
    Wiederum bei der ersten Box klappt es nicht. Das ist ein rechter oranger Rand zusehen und der untere Rand ist zu hoch.
    Das verstehe ich nicht so recht, sind doch im CSS-Code immer die gleichen Pixel-Maße für die Boxen angegeben.
    Und diese Maße habe ich auch für die Bilder in Photoshop Elemets angepasst.
    In Google habe ich leider das passende nich gefunden.
    Vielen Dank für Eure Hilfe.


    Grüße
    Marc - teevino

    Hallo,


    dein Quelltext enthält Fehler.


    Zunächst zum HTML-Quelltext im body-Bereich:


    1. Bei der ersten Box "id="box1" fehlt das schließende div, das eingefügt werden sollte.


    2. Vor der dritten "id="box3" und vierten "id="box4" Box befindet sich jeweils ein nutzloses p-Element, die gelöscht werden sollten.


    3. Hinter der letzten Box und vor dem schließenden body-Tag befinden sich ein schließendes head- und ein öffnendes body-Tag, die dort nichts verloren haben


    Dann zum CSS-Quelltext im head-Bereich:


    1. #box1


    Bei position: absolute ist das float zwecklos, also löschen.


    Durch das padding und das margin verschiebt sich das Bild, also auch löschen.


    2. #box2


    Mit "left: 50px" und "width: 250px" der ersten Box sowie einem Abstand von weiteren 50px zur zweiten Box darf die erst bei 350px beginnen, das "left: 300px" muss also entsprechend angepasst werden


    3. #box3 und #box4


    Entsprechend müssen auch diese beiden Boxen um 50px nach rechts verschoben werden.


    Dann sollte dein Beispiel passen.


    Insgesamt solltest du aber auf "position: absolute" verzichten und besser float oder flexbox verwenden um die Bilder anzuordnen.


    Und einen Rand oder Rahmen solltest du auch als solchen definieren.


    Gruss


    MrMurphy

    Hallo Mr Murphy.


    vielen Dank vorab für deine Antwort.
    Ist gut erklärt, werde mich vermutlich heute nachmittag dran setzen.


    Grüße
    Marc

    Hallo Mr.Murphy,


    habe die Fehler soweit korrigiert.
    Und auch Flexbox eingebaut. Dann sind die Bildboxen vielleicht sicherer und besser platziert.
    Auch Links zu unseren Produkten eingebaut. Dort habe ich target auf self gestellt, damit sich kein neues Fenster öffnet.
    In der Firefox Vorschau im Phase Editor hat das noch nicht funktioniert.
    Die Boxen kann man optisch sicher noch verbessern, Schrift- und Link-Positionierung etc.


    Nun habe ich noch zusätzlich 2 Boxen reinkopiert (für eine zweite Reihe unterhalb) und die Boxen schieben über das Browserfenster hinaus.
    Wie kann ich das hinbekommen?


    "Und einen Rand oder Rahmen solltest du auch als solchen definieren."
    Was meinst du damit?


    Im css Teil habe ich noch folgendes stehen:
    a { text-align: right;}
    Macht das überhaupt Sinn dort oder löschen?


    Grüße und vielen Dank.
    Marc


    Anlage: neue Datei Test-Html und Screenshot

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden