XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS - Margin/Justify/Img (http://xhtmlforum.de/showthread.php?t=72960)

Stoani 17.08.2016 02:49

CSS - Margin/Justify/Img
 
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 17.08.2016 08: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 17.08.2016 09:11

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

Thielo 17.08.2016 10:57

Zitat:

Zitat von protonenbeschleuniger (Beitrag 549687)
[Noch ein Tipp: Es gibt auch "Platzhalterbilder" http://lorempixel.com/ ]

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

MrMurphy 17.08.2016 14: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 17.08.2016 15: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!

https://s4.postimg.org/tybgd7e8d/info.png

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 17.08.2016 16: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 17.08.2016 16: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.

https://s3.postimg.org/71ii4n6xf/info_1.png

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:
https://s3.postimg.org/be3nrsc1v/info_2.png


EDIT 18.08.2016 02:55 ->

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

Danke an alle!

#closed


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:44 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023