Relativegrößen mit Nachfahren und Margin oder Position:absolute

  • Moinsen :D
    Da dies auch mein 1. Beitrag hier ist stell ich mich hiermit auch gleich kurz vor:
    Bin Blackcan bin profesioneller Designer und möchte nun aber aus eigenem Interesse lieber richtung Webdesign (und danach auch gern Objektorientierte Programmierung) und beschäftigte mich nun rund 2 Wochen mit HTML, CSS und PHP.

    So zum eigentlichen Thema:

    Ich bin gerade dabei eine eigene Website zu erstellen (wird nix wirkliches, ich find nur das Praxis besser zum lernen und verinnerlichen ist als reine Theorie).
    Und bislang klappt es auch ziemlich gut zu meinen erstaunen allerdings hab ich noch so ein Problem auf das ich immer wieder stoße bzw. ein Thema bei dem ich mir unsicher bin:
    Relativegrößen.
    (zur Info ich hab Schrödingers HTML, CSS und Javascript benutzt um HTML etc. zu lernen)
    Es wurde mir gesagt mit Relativegrößen zu arbeiten ist besser (da dynamischer etc.) allerdings bin ich mir immer öfter unsicher welche Einheiten ich für was benutzen sollte z.B.:

    Ich wollte den Content bereich eher mittig haben und nicht über den gesamten Viewport (richtiger Begriff?) verteilt. Ich hätte natürlich Prozente nehmen können aber dann müsste ich dem Elternbereich (in dem Fall Body) ja eine feste größe zuweisen müssen (das wollte ich nicht vor allem, da ich noch nicht weiß wie es sich verhält wenn nun jemand mit einer größeren Auflösung auf die Website kommt die größer als das Body ist) also fällt Prozente schon weg bleibt mir noch "em" das ist so eine Einheit mit der ich mich schwertue, ich weiß zwar, dass dies eine Einheit ist die sich auf die Schriftgröße bezieht aber so richtig kann ich mir nix drunter vorstellen

    (z.B.:
    Geb ich am Anfang vom CSS folgendes an:

    Code
    body{ font-size:62.5%; }


    Damit 1em nun anstatt 16,5 (oder so) eben 10px ist.
    Aber dann könnte ich ja statt 2em (20px) ja auch einfach gleich die feste größe 20px nehmen oder? )

    Also hab ich mich dafür entscheiden es mit "position:absolute;" zu machen und die Fläche praktisch aufzuspannen:

    Sie verhält sich zwar nun im groben und ganzen so wie ich das möchte (natürlich ist nun bei extrem großen Auflösungen das extrem Links zentriert, da ich eine feste breite angegeben habe aber für die gängisten auflösungen am PC sollte das normal passen)

    Bin mir nun aber unsicher ob das die Richtige Wahl war es so zu lösen.


    2. Problem:

    Wie verhält es sich mit Nachfahren und Relativegrößen?
    Ich mein die Prozenteinheit bezieht sich ja immer auf die größe des Elternelements wenn ich nun aber angebe:

    Code
    .galerie div > img { width:50% }

    Worauf beziehen sich die 50% dann? auf das Div oder das Klassenelement?

    3. Problem:

    Momentan löse ich ziemlich viele meiner Positionsprobleme mit position:absolute; aber ich hab das gefühl, es wäre schlauer es mit Margin zu lösen.

    z.B. habe ich eine kleine Leiste an der Unterseite meiner Website die mitscrolled an denen Social Links sind und um die Grafiken der Social Links zu positionieren hab ich die 1. Grafik mit

    Code
    margin-left:2%;

    positioniert und die anderen haben sich dann mit dem Standard Margin daneben eingereiht.
    Allerdings habe ich nun mal rausgescrollt (bzw. mit den Firefox Entwickler tool die "auflösung" auf extrem hoch geändert und mir ist aufgefallen, dass die Grafiken immer mehr nach rechts rutschen (und iwann sogar Zentriert im Content liegen) desto größer die Auflösung. Liegt das nun am Margin oder der Falschen relativengröße? Oder sollte ich in dem Fall gar keine Relativegröße nehmen?


    Tut mir übrigens schrecklich leid falls das nun so viel Text war :oops:.

    Aber ich versuch halt besser zu verstehen wann ich welche Auflösung am besten nehme.
    Ich danke jeden tausendmal für seine Hilfe im Voraus! :danke2:

    Mfg.
    Blackcan

  • Hallo,

    deine Fragen lassen sich nicht beantworten, da konkrete Beispiele fehlen und sie falsch gestellt sind.

    Insgesamt bist du aber offensichtlich auf dem falschen Dampfer.

    Internetseiten mit HTML und CSS sind ein vollkommen anderes Medium als Word, pdf, Plakate, Poster, Flyer u.s.w. Du kommst aus deinen bisherigen Arbeiten mit festen Grenzen leider nicht raus. Das ist zum Beispiel an dieser Aussage

    Zitat

    aber für die gängisten auflösungen am PC sollte das normal passen

    gut zu erkennen. Die Realität ist, das im Internet über 50% der User mit Smartphones und Tablets unterwegs sind. Deine Wunschvorstellung nach einer mehr oder weniger festen Größe, von der du ausgehen kannst, ist somit unrealistisch.

    Wenn du HTML und CSS lernen willst musst du als erstes verinnerlichen, das es keine festen Fenstergrößen / Viewports gibt. Entsprechend müssen die Seiten von Anfang an flexibel gestaltet werden.

    Deshalb solltest du auch gleich ein entsprechendes Grundwissen mit aktuellem HTML5 und CSS3 lernen. Zwei Wochen sind da noch gar nichts.

    Deine "Vorbelastung" als Designer ist eher hinderlich, da du viel Wissen, was dir in Fleisch und Blut übergegangen ist, beim Erstellen von Internetseiten vergessen musst.

    Webdesign hat sehr wenig mit klassischem Design zu tun, das immer von festen Größen ausgeht, die gefüllt werden sollen. Zum Beispiel eine Buchseite, eine Visitenkarte, eine Zeitschriftenseite, ein Poster, eine Reklame an einer Litfaßsäule / Hauswand u.s.w.

    Deinen Fragen ist die Suche nach so einer Größe anzumerken, die es im Internet schlicht nicht gibt. Deshalb sind auch deine Fragen, so wie du sie gestellt hast, nicht zu beantworten. Die Antwort wäre immer falsch. Als Beispiel

    Zitat

    Ich mein die Prozenteinheit bezieht sich ja immer auf die größe des Elternelements...

    ist diese Vorgabe in deiner Frage schon mal falsch. Auch hängt der Bezug nicht von dieser

    Code
    .galerie div > img { width:50% }

    CSS-Angabe ab, sondern von anderen Faktoren. Also dem HTML-Quelltext und weiteren CSS-Angaben.

    Gruss

    MrMurphy


  • Aber dann könnte ich ja statt 2em (20px) ja auch einfach gleich die feste größe 20px nehmen oder? )


    Nein. Die Auflösung bestimmt der Bildschirm und das Betriebssystem. 20px auf einem Smartphone sind eben nicht gleich 20px auf einem 20Zoll Monitor. Und Apple hatte in der Vergangenheit andere Grössen als MS.
    Die Schriftgrösse kann zudem fest eingestellt sein. Schau mal im Browser unter Einstellungen, da kannst du dir dein Wunschgrösse festlegen. Fehlsichtige habe oft andere Schriftgrössen eingestellt. Daher ist 1em immer richtig als Ausgangslage unabhängig davon ob jemand das als 12px oder jemand anderes das als 20px festgelegt hat.
    1em sind übrigens gleich zu 100%.

    Zitat


    Also hab ich mich dafür entscheiden es mit "position:absolute;" zu machen und die Fläche praktisch aufzuspannen:


    Ganz schlecht. Feste und absolute Positionierungen sollte man nur verwenden, wenn man sich sehr gut damit auskennt. Am Anfang sollte man möglichst darauf verzichten.

    Zitat


    Mit diesem Code hast du Probleme.
    Besser wäre es auf die absolute Positionierung zu verzichten und mit margin: 0 auto, den Kasten zu zentrieren. Ein z-index ist überflüssig.
    Ein durchsichtiges Bild ist überflüssig, das kann mit background-color: transparent oder mit den Farbwerten von RGBA regeln.

    Zitat


    2. Problem:

    Wie verhält es sich mit Nachfahren und Relativegrößen?
    Ich mein die Prozenteinheit bezieht sich ja immer auf die größe des Elternelements wenn ich nun aber angebe:

    Code
    .galerie div > img { width:50% }

    Worauf beziehen sich die 50% dann? auf das Div oder das Klassenelement?


    Auf das Element img. Das wiederum bezieht sich auf das Elternelement. Wenn also das Elternelement 50% hat dann wird das Bild am Ende 50% von 50% sein, somit 25% gross.

    Am besten noch mehr lesen und ausprobieren.

    Gute Seiten zum Nachschlagen:
    http://www.css4you.de/
    http://webkompetenz.wikidot.com/docs:html-handbuch

    Edit: Teilweise Überschneidung mit Mr. Murphys Beitrag der schneller war.

    2 Mal editiert, zuletzt von explanator (19. Juni 2014 um 07:14)

  • Vielen Dank dir erstmal^^
    Also sollte ich für eine "flexible" Seite lieber versuchen sachen mit Margin zu positionieren anstatt mit "postion:absolute;"?
    Bei dem ".galerie div > img" ist mir ja bewusst, dass sich die 50% auf das Elternemelet bezieht ^^ das war ja meine Frage.
    z.B. .galerie hat eine breite von 100px, und das div eine von 50px wird nun das img tag, 50% von 50px oder 50% von 100px oder 50% von 150px?
    Das bild ist nicht durchsichtig. Ich hatte mein Content Background auf rgba (179,179,179 0.5); allerdings hab ich ja am unteren Ende diese Schwarze Leiste die dann immer durchgeschimmert hat was ich nicht wollte.
    Also hab ich mein Hintergrundbild für die Website (Seamless) in Photoshop durchsichtiger gemacht und so eingefügt. Und mit rgba konnt ich dies ja nicht durchsichtiger machen, da ja dann auch wieder die hintergrund farbe durchsichtig wird.

    Warum war der z-Index überflüssig? Erst als ich jeden Element ein Z-index gegeben hat waren die Elemente über oder unter denen so wie ich das auch wollte. Davor war das etwas durcheinander

    Auch dir Danke ich erstmal!

    Da ich mich schwer damit tue, dass ich hier keine Festen maße habe ist durchaus richtig. Allerdings bin ich ja genau deswegen da da ich eben versuchen möchte genau jenes zu verstehen.
    Das Buch mit dem ich arbeite ist btw auch für HTML5 und CSS3 .

    Aber ich kann ja mal mein HTML Code zu den jweiligen Passagen posten.



    Und eig. galt meine Frage nun diesen hier.
    Da die bilder nun Maximal so groß werden wie das Div-Element ich aber nicht wusste ob .galerie da noch ein Einfluss drauf hat, da es keine feste Größe in meinem Beispiel hat (und somit ja auch keine Auswirkung haben kann, aber wenn es nun eine Feste größe besitzen würde).


    Und mir ist auch bewusst, dass es keine Einheit gibt bei der ich sagen kann "Damit kann die Website nun jeder perfekt sehen" aber ich rede im moment ja erstmal über PC Besitzer und da wird dann doch eine Einheit besser als die andere sein (wie z.B. explanator) Schon sagte ist die Aufspannung nicht unbedingt die beste Methode als Anfänger.
    Für Smartphones etc. kann man ja eigentlich noch immer ein 2. Stylesheet nehmen.

    Damit man sich vielleicht mal ein besseres Bild von machen kann:

    http://img5.fotos-hochladen.net/uploads/website5bp2cfz3ki.jpg

    Und hier mal der komplette HTML und CSS Code:

    Und hier der CSS Code:

    6 Mal editiert, zuletzt von Blackcan (19. Juni 2014 um 13:04)

  • Solange Du eine Beispielseite ausprobierst, darfst du alles machen , was Du willst. trotzdem sind einige Sachen praktischer (auch wenn man es erst später merkt.

    1. Textgröße

    Code
    body {
        font-size:62.5%;
        background-color:#1a1c1d;
        background-image:url(bg.jpg);
        font-family:serif, sans-serif, monospace;
    
    }

    Tipp: Lass Font-size hier bei 100%!
    Du musst ja mehrere Sachen einstellen, z.B:
    h1{ font-size:200%}
    p {font-size:100%}

    2.Breitenangaben

    Ich lasse den body immer mit

    Code
    body {
    max-width:70em;
    margin: 0 auto;
    }

    Bei großen Bildschirmen ist er 70em (Breite eines 'M') breit in der Mitte zentriert, bei mobilen Geräten aber genau so breit wie der Viewport, ohne dass du nach rechts scrollen musst.

    Hier sind ein paar Design-Beispiele:
    http://wiki.selfhtml.org/wiki/CSS/Templates/Template15
    http://www.jsr-hersbruck.de/site/subdomains/index.html



    3. HTML5 statt DIV-Suppe

    Du verwendest wahnsinnig viele Divs, Eigentlich können alle Browser außer dem IE 8 (noch 5% Nutzer) HTML5. Für den IE8 kannst du eine html5-shiv einbinden (Ist in den Design-Beispielen im Head eingebunden).

    Schau mal in diese Artikelserie:
    http://blog.selfhtml.org/c/html/html5-serie/

    Diese Elemente sind viel übersichtlicher

    Code
    nav statt div id="nav"

    Ich sehe grade:

    Code
    <header>[COLOR=#000080]  <div id=[COLOR=#0000FF]"header"[/COLOR]>[/COLOR]   [COLOR=#000080]</div>[/COLOR][COLOR=#000080]</header>[/COLOR]

    [/COLOR]

    Das ist doppelt gemoppelt!

    Einmal editiert, zuletzt von resteverwerter (19. Juni 2014 um 14:41)

  • Ja genau ich hab für die Struktur sowohl html5 als auch noch divs benutzt damit wirklich jeder Browser damit klar kommt (wurde mir im Buch so geraten)

    Auch dir Vielen Dank! :)

    Natürlich muss ich sagen, dass Buch ist von 2013 aber da ich noch sehr am Anfang stehe verlass ich mich zum jetzigen Zeitpunkt erstmal aufs buch.

    Das mit den "70em" versteh ich nicht ganz. Tut mir leid :oops:

    Das mit den font-size:62,5%; mach ich ja damit 1em 10px sind um einfacher mit ems zu arbeiten. <h1> sind bei mir trotzdem noch größer als ein <p>

    Edit: also ich mein in den Standardeinstellung vom Browser 1em = 16px sind


    Edit 2:

    Ich weiß nicht ob es erlaubt ist aber ich hätte noch eine Frage die sich aber auch auf die Website bzw. den Code bezieht.

    und zwar wollte ich eine Galerie machen

    folgender HMTL code :

    HTML
    <div id="content">        <div class="galerie">            <div>                <img src="./CSS/referenzen/banner1.png" alt="Just Causer Banner"/>            </div>            <div>                <img src="./CSS/referenzen/banner2.png" alt="Star Wars Banner"/>            </div>            <div>                <img  src="./CSS/referenzen/banner3.png" alt="Uncharted-Banner"/>            </div>            <div>                <img src="./CSS/referenzen/banner4.png" alt="Uncharted-Banner"/>            </div>            <div>                <img src="./CSS/referenzen/banner5.png" alt="RDR banner"/>            </div>            <div>                <img src="./CSS/referenzen/banner6.png" alt="Twilight"/>            </div>        </div>    </div>

    mit dem CSS:

    Code
    .galerie div {    width:30%;    margin:1.2em 0 0 2%;    float:left;    padding:0;    color:white;}.galerie div img {    max-width:100%;    max-height:100%;}

    Hatte nun aber, das Problem:
    [Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/bannerpbxt9qnk3j.png]

    Wie kann ich es den lösen, dass das 4. Bild auch wirklich unter dem 1. ist? Ich weiß nicht mal warum es nicht da ist. Im Entwickler-Tool sieht es so aus als würde der div (mit margin) vom 4. an dem div vom 1. anstoßen
    Das 4. Bild ist übrigens nicht das in der 3. Reihe sondern das in der Mitte 2. Reihe
    Ich konnte es zwar mit :

    Code
    .galerie div:nth-child(4) { clear:both}

    Lösen aber auch nur durch ausprobieren, woran nun das Problem wirklich liegt weiß ich nicht.

    4 Mal editiert, zuletzt von Blackcan (19. Juni 2014 um 16:10)

  • Hallo

    Zitat

    verlass ich mich zum jetzigen Zeitpunkt erstmal aufs buch.

    Wenn die Informationen zu deinem HTML / CSS aus dem Buch kommen solltest du es in die Tonne treten. Das ist einfach nur Schrott. So wirst du nie aktuelles HTML5 und CSS3 lernen weil deine Grundlagen schlicht grottenschlecht sind. Und das später umzulernen funktioniert in der Regel nicht.

    Zudem hast du ja noch das zusätzliche Problem, das du klassischer Designer bist. Deshalb musst du zusätzlich damit klarkommen, das du für Internetseiten 70% bis 80% deines Designerwissen nicht nutzen kannst, weil es mit HTML und CSS nichts zu tun hat.

    Ich hatte dir ja bereits in meinem ersten Beitrag geschrieben:

    Zitat

    Internetseiten mit HTML und CSS sind ein vollkommen anderes Medium als Word, pdf, Plakate, Poster, Flyer u.s.w.

    Du gehst jedoch bei Internetseiten genau so vor wie bei den klassischen Medien. Das funktioniert nicht.

    Gruss

    MrMurphy

  • zu 1. Ich bin ja noch nicht fertig :? bin nun bei Seite 200 von 900... also weiß nicht :?:
    Aber falls du es wissen möchtest und mir vielleicht sogar ein besseren Tipp geben kannst ich arbeite mit folgenden Buch: http://www.amazon.de/Schr%C3%B6ding…chr%C3%B6dinger

    zu 2.

    Hast du mir vielleicht grad mal ein Konkretes Beispiel wie ich in meinem Code das besser umsetzen kann? Denn sonst hilft mir deine Aussage leider nur sehr wenig.

  • zur Galerie:

    deine Bilder, (bzw. die divs drumrum) sind unterschiedlich hoch, so dass Bild 4 nicht unter 3 liegt, sondern nach rechts weiterläuft. Gib den Divs mal eine feste Höhe

    zu Breitenangaben:
    >Das mit den "70em" versteh ich nicht ganz. Tut mir leid :oops:

    >Das mit den font-size:62,5%; mach ich ja damit 1em 10px sind um einfacher mit ems zu arbeiten. <h1> sind bei mir trotzdem noch größer als ein <p>

    Probier die Angabe max-width:70em; einfach mal aus und veränder' dann das Browserfenster, so dass du siehst, was bei 500px, 700px, 900px, 1200px Breite passiert.
    http://wiki.selfhtml.org/wiki/CSS/Werte….C3.9Feinheiten

    Vergiss das mit den 10px; meist ist Text im Internet größer. Ich habe auf meiner Seite body {font-size:100%} und p {font-size:80%;}
    Mach Breitenangaben immer in Prozent oder lass sie weg, dann ist das Element so groß wie das Elternelement.
    Mach Höhenangaben (nur wenn du sie wirklich brauchst) in px - Vorsicht, sonst hast du dann Text, der überläuft.

    Falls du mit dem Boxmodell Probleme kriegst, kannst du auch Box-sizing verwenden.
    http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing


    zu den doppelten Tags, das macht wirklich KEINER!

  • "deine Bilder, (bzw. die divs drumrum) sind unterschiedlich hoch, so dass Bild 4 nicht unter 3 liegt, sondern nach rechts weiterläuft. Gib den Divs mal eine feste Höhe" Perfekt Vielen Dank!

    Das mit den 70em werd ich mal testen.
    Dankeschön!

    Zitat

    Mach Breitenangaben immer in Prozent oder lass sie weg, dann ist das Element so groß wie das Elternelement.
    Mach Höhenangaben (nur wenn du sie wirklich brauchst) in px - Vorsicht, sonst hast du dann Text, der überläuft.

    Sprich so wie ich es nun für die Galerie gemacht habe?

    Code
    .galerie div {
        [B]width:30%;[/B]
        margin:1.2em 0 0 2%;
        float:left;
        padding:0;
        color:white;
        [B]height:50px;[/B]
    Zitat

    zu den doppelten Tags, das macht wirklich KEINER!


    Alles klar, wusst ich wie gesagt nicht. Wurde halt so im Buch erklärt.

  • Code
    .galerie div {
        [B]width:30%;[/B]
        margin:1.2em 0 0 2%;
        float:left;
        padding:0;
        color:white;
        [B]height:50px;[/B]

    genau! Und wenn du box-sizing verwendest, musst du nicht 2% + 30% +2% +30% +2% +30% rechnen, damit du wirklich unter 100% kommst, sondern kannst einfach 1/3 nehmen:

    Am besten ganz am Anfang:

    Code
    *,.*{
      -moz-box-sizing[COLOR=#00AA00]:[/COLOR] border-box[COLOR=#00AA00];[/COLOR] 
      box-sizing[COLOR=#00AA00]:[/COLOR] border-box[COLOR=#00AA00];[/COLOR] 
    }


    Das gilt dann für alle Elemente und Klassen.

    LG Matthias

  • Code
    .galerie div {
        [B]width:30%;[/B]
        margin:1.2em 0 0 2%;
        float:left;
        padding:0;
        color:white;
        [B]height:50px;[/B]

    genau! Und wenn du box-sizing verwendest, musst du nicht 2% + 30% +2% +30% +2% +30% rechnen, damit du wirklich unter 100% kommst, sondern kannst einfach 1/3 nehmen:

    Am besten ganz am Anfang:

    Code
    *,.*{
      -moz-box-sizing[COLOR=#00AA00]:[/COLOR] border-box[COLOR=#00AA00];[/COLOR] 
      box-sizing[COLOR=#00AA00]:[/COLOR] border-box[COLOR=#00AA00];[/COLOR] 
    }


    Das gilt dann für alle Elemente und Klassen.

    LG Matthias


    Das mit box-sizing bzw. border-box musste ich gerade erstmal nachgoogeln^^ Aber das ist ja Praktisch das würd ja heißen... wenn ich der höhe 100px gebe und dazu 10px Padding ist die eigentliche größe nicht mehr 120 (da padding 10px oben und unten) sondern ist das Element 80px hoch und dann wird das padding berechnet bis man bei 100px height ist?

    Und mit

    Zitat

    *,.*{
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    }

    Hab ich auch gar nicht das Problem dann umständlich rechnen zu müssen wenn ich dann auf Prozente zurückgreife?

    Edit: hab nun mal die 70em (bei mir musst ich es zwar auf 140em stellen aber das prinzip bleibt ja gleich) stellen udn gemerkt was sich ändert.
    Wenn ich nun rauszoome verteilen sich die ganzen sachen nicht mehr alle auf dem Viewport propotional sondern bleiben danach mehr oder weniger in ihrem "layout"
    Seh ich das richtig?

    Nun hab ich mal mein ganzen CSS Code btw überarbeitet nach den Tipps hier im Forum z.B.:

    Code
    #content {
        width:70%;
        margin:10px auto 0 auto;
        background-color:rgb(179,179,179);
        background-image:url(durchsichtig.png);
        text-align:justify;
        border:2px solid white;
        box-shadow:0 0 15px black;
        z-index:999;
    }

    oder


    (hab hier font-size:62,5%; erstmal gelassen, da ich sonst jedes einzelne em ändern müsste)


    Danke dir! Muss nun zwar noch mit em klar kommen (hab irgendwie meine Probleme mit der Einheit (verstehe nicht so ganz den Vorteil von em gegenüber Pixel außer, dass es sich je nach Schriftgröße im Browser ändert) ) aber es ist schon alles viel besser wenn man rauszoomed!

    Dankeschön!

    2 Mal editiert, zuletzt von Blackcan (20. Juni 2014 um 00:15)