Beiträge von Blackcan

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

    Zitat von resteverwerter
    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!

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

    "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.

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

    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.

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

    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.

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

    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:

  • 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