CSS - Margin/Justify/Img

Stoani · #1 (**permalink**) 17.08.2016, 01:49

Hallo Leute, kann mir jemand bei diesem Problem helfen? Ist wahrscheinlich nur eine Denkblockade weil schon zu lange am Schreiben aber ich komm da nicht weiter.

HTML-Code:

<!DOCTYPE html>
<html>
<head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="style.css" rel="stylesheet" type="text/css">

    <title>
    </title>
</head>

<body>
    <div class="row">
        <div class="col-1 menu">
            <ul>
                <li><img src="data/placeholder_34.png">
                </li>


                <li><img src="data/placeholder_34_white.png">
                </li>


                <li><img src="data/placeholder_64.png">
                </li>
            </ul>
        </div>


        <div class="col-1 menu">
            <ul>
                <li><img src="data/placeholder_34.png">
                </li>


                <li><img src="data/placeholder_34.png">
                </li>


                <li><img src="data/placeholder_34.png">
                </li>


                <li><img src="data/placeholder_34.png">
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Code:

* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
}

.col-1 {
    width: 16.66%;
}

.col-2 {
    width: 33.33%;
}

.col-3 {
    width: 50%;
}

.col-4 {
    width: 66.66%;
}

.col-5 {
    width: 83.33%;
}

.col-6 {
    width: 100%;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu li {
    padding-left: 1%;
    padding-bottom: 1%;
    font-size: 0;
}

.menu li img {
    margin: 0;
    width: 100%;
    border: 1px solid green;
}

.menu li img:hover {
    border: 1px solid #ff0;
}

Folgendes Problem:
Die Bilder werden mit einer Liste in einem Raster dargestellt. Die Bilder sind allerdings unterschiedlich groß (4:3 bzw 4:6). Wenn ich nun einen gleichmäßigen Abstand einfüge schließen die Bilder am unteren Viewportende nicht mehr bündig ab.

Vorschläge?

MrMurphy · #2 (**permalink**) 17.08.2016, 07:42

Hallo

Ich kann dein Problem nicht nachvollziehen.

Mit deinem Quellcode sehe ich nur ein paar leere gleichgroße quadratische Rahmen. Ein Link zu deiner Seite wäre sinnvoller.

Zitat:

Die Bilder sind allerdings unterschiedlich groß (4:3 bzw 4:6).

4:3 und 4:6 sind keine Größenangaben. Zum Testen solltest du uns schon konkrete Größen nennen.

Zitat:

Wenn ich nun einen gleichmäßigen Abstand einfüge

Was für einen Abstand willst du wo einfügen?

Zitat:

schließen die Bilder am unteren Viewportende nicht mehr bündig ab

Das verstehe ich schon nicht. Es wäre sinnvoller du würdest schreiben, wie sich die Bilder verhalten sollen.

Ich habe mal eine Beispielseite mit deinem Quellcode erstellt, damit du siehst, was wir mit deinem Quellcode sehen, nämlich recht wenig, was zur Lösung deiner Frage beiträgt:

Beispielseite

Deshalb kann ich zunächst nur allgemein antworten:

Wenn es um die Verteilung von Leerraum geht ist Flexbox meist am sinnvollsten.

Gruss

MrMurphy

protonenbeschleuniger · #3 (**permalink**) 17.08.2016, 08:11

[Noch ein Tipp: Es gibt auch "Platzhalterbilder" http://lorempixel.com/ ]

Thielo · #4 (**permalink**) 17.08.2016, 09:57

Zitat:

Zitat von protonenbeschleuniger

[Noch ein Tipp: Es gibt auch "Platzhalterbilder" http://lorempixel.com/ ]

[Oder für die Katzenliebhaber http://placekitten.com/ ]

MrMurphy · #5 (**permalink**) 17.08.2016, 13:42

Hallo Stoani,

ich habe mich noch mal mit deinem Problem beschäftigt.

Ich befürchte, du willst etwas erreichen, wofür Webseiten überhaupt nicht gedacht sind und für das es entsprechend auch keine Lösungen gibt.

Webseiten sind in erster Linie zur Informationsübermittlung gedacht. Das Design spielt dabei nur eine sehr untergeordnete Rolle. Viele Anfänger haben aber ein bestimmtes Design im Kopf und wollen es auf Teufel komm raus umsetzen - das funktioniert nicht.

Das nächste Problem: Webseiten sind nicht aus Papier oder anderem Material. Sie haben keine greifbare Größe, sondern können im Prinzip unendlich groß werden. Neulinge wollen sich aber gerne Größen schaffen. Dadurch wird eine Webseite aber benutzerunfreundlicher.

Webseiten sollten so gestaltet werden, dass die Besucher nicht seitlich scrollen müssen, sondern nur rauf und runter.

Weiterhin sollten die Besucher Webseiten ihren Bedürfnissen und Wünschen anpassen können. Zum Beispiel den Zoom-Faktor ändern. Oder die Fensterbreite. Wobei sich bei vielen Geräten die Webseite möglichst optimal der Bildschirmbreite anpassen sollte.

Du willst offensichtlich möglichst pixelgenau ein Kachellayout mit Bildern erzeugen. Wobei die Bildgrößen und -abstände mögichst harmonieren sollen. Dafür sind Webseiten weder gedacht noch gibt es im HTML und CSS dafür direkte Mittel.

Heißt: Du wirst in jedem Fall Abstriche machen müssen. Entweder

Du erzeugst ein starres Layout, welches aber überhaupt nicht mehr zeitgemäß ist
Du lebst mit Bildern, deren Proportionen teilweise nicht stimmen
Du lebst mit unterschiedlichen Abständen (Leerraum) zwischen den Bildern

Zudem solltest du zunächst die Grundlagen lernen. Grade mit Prozent-Angaben haben Anfänger Schwierigkeiten, da sie sich nicht informieren, worauf die sich beziehen. Einfach mal

Code:

         padding-left: 1%;
         padding-bottom: 1%;

zu setzen führt dann zu unerwarteten Ergebnissen.

Gruss

MrMurphy

Stoani · #6 (**permalink**) 17.08.2016, 14:25

Da bin ich wieder:

Also erstens tut mir leid, etwas schlampig erklärt weil schon spät und müde

Danke trotzdem für die bisherigen antworten!

Bei diesem Bild hab ich den Abstand in der ersten Spalte verdoppelt.

Die Größenangaben sind in Seitenverhältnissen und da die Bilder in ihrer Größe flexibel sind, macht es kaum Sinn eine exakte Größe zu definieren. Erstellt hab ich die Platzhalter allerdings mit 300px - 400px bzw 600px - 400px. Die Bilder sind außerdem in einem Grid - Layout und definieren ihre Größe auch über die betreffenden Rastergrößen.

Mit Flex-Box hab ich mich bisher noch nicht beschäftigt.

Die %-Angaben helfen mir dabei, die Website responsive zu halten und es funktioniert eigentlich ganz gut. Eine andere Variante wären noch vm vh Angaben...

Dass ich das Design natürlich gerne umsetzen würde ist natürlich richtig. Allerdings hab ich es mir nicht selbst ausgesucht

MrMurphy · #7 (**permalink**) 17.08.2016, 15:06

Hallo

Wie bereits geschrieben musst du dich entscheiden wo du die zwangsweisen Abstriche machen willst.

Aus dem Bauch raus würde ich die Proportionen der Bilder anpassen. Das sollte optisch am wenigsten ins Gewicht fallen. Das hängt natürlich davon ab was die Bilder anzeigen. Bei Kreisen und kreisförmigen Elementen fallen falsche Proportionen direkt unangenehm auf.

Die Abstände würde ich bei einem Kachellayout überall gleich ansetzen, weil Unterschiede in der Regel deutlich unangenehm auffallen. Wie ja auch in deinem Beispiel.

Zitat:

Die %-Angaben helfen mir dabei, die Website responsive zu halten und es funktioniert eigentlich ganz gut.

Ein häufig gemachter Irrtum. Teilweise stören Prozent-Angaben bei einem Responsive Layout eher als das sie helfen. Zumal wenn sie ohne Grundlagenwissen gestreut werden. Und funktionieren tut es offensichtlich nicht.

Gruss

MrMurphy

Stoani · #8 (**permalink**) 17.08.2016, 15:33

Update:

So sollte es in etwa aussehen... allerdings sind diese kleinen Stufen immer noch drinnen, da ab und zu nur 3 Bilder in einer Spalte sind und deshalb der Abstand nur 3mal und nicht 4mal gerechnet wird.

Danke für die ganzen tollen Antworten murphy

Die ganze Website kann ich nicht verlinken, da ich noch keine Domain hab.

Quelltext:

HTML-Code:

<!DOCTYPE html>
<html>
<head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>
    </title>
<style>
* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
}

.col-1{width: 16.66%;}
.col-2{width:33.33%;}
.col-3{width:50%;}
.col-4{width:66.66%;}
.col-5{width:83.33%;}
.col-6{width:100%;}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu li {
    padding-left: 10px;
    padding-bottom: 10px;
    font-size: 0;
}

.menu li img {
    margin: 0;
    width: 100%;
}

.menu li img:hover {
}
</style>
</head>

<body>
    <div class="row">
        <div class="col-1 menu">
            <ul>
                <li><img src="data/placeholder_34.png">
                </li>


                <li><img src="data/placeholder_34_white.png">
                </li>


                <li><img src="data/placeholder_64.png">
                </li>
            </ul>
        </div>

        <div class="col-1 menu">
            <ul>
                <li><img src="data/placeholder_34.png">
                </li>


                <li><img src="data/placeholder_34.png">
                </li>


                <li><img src="data/placeholder_34.png">
                </li>


                <li><img src="data/placeholder_34_white.png">
                </li>
            </ul>
        </div>
        
        <div class="col-1 menu">
            <ul>
                <li><img src="data/placeholder_64.png">
                </li>


                <li><img src="data/placeholder_34_white.png">
                </li>


                <li><img src="data/placeholder_34.png">
                </li>

            </ul>
        </div>
        
                <div class="col-1 menu">
            <ul>
                <li><img src="data/placeholder_34.png">
                </li>


                <li><img src="data/placeholder_34_white.png">
                </li>


                <li><img src="data/placeholder_64.png">
                </li>

            </ul>
        </div>
    </div>
</body>
</html>

So sollte das Projekt nachher aussehen:

EDIT 18.08.2016 02:55 ->

Problem gelöst.
Outline{10vw solid white} regelt.

Danke an alle!

#closed

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Einbindung von frei erhältlichen Scripten - CSS Problem	DonL	CSS	1	22.01.2011 16:09
MYspace mehr als nur CSS oder ?	Vinceone	CSS	0	12.07.2007 02:21
Eric Meyer's CSS	Petty	Ressourcen	0	21.11.2005 08:18
Mozilla ignoriert externes css	DarkWanderer	CSS	9	22.09.2005 11:39