zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS - Margin/Justify/Img

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.08.2016, 01:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2016
Beiträge: 3
Stoani befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.08.2016, 07:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.070
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.08.2016, 08:11
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.931
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

[Noch ein Tipp: Es gibt auch "Platzhalterbilder" http://lorempixel.com/ ]
Mit Zitat antworten
  #4 (permalink)  
Alt 17.08.2016, 09:57
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
[Noch ein Tipp: Es gibt auch "Platzhalterbilder" http://lorempixel.com/ ]
[Oder für die Katzenliebhaber http://placekitten.com/ ]
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #5 (permalink)  
Alt 17.08.2016, 13:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.070
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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

Geändert von MrMurphy (17.08.2016 um 13:49 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 17.08.2016, 14:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2016
Beiträge: 3
Stoani befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von Stoani (17.08.2016 um 14:59 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 17.08.2016, 15:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.070
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 17.08.2016, 15:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2016
Beiträge: 3
Stoani befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von Stoani (18.08.2016 um 02:56 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:12 Uhr.