Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 13

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

  1. #1
    HTML Newbie
    Registriert seit
    18.06.2014
    Ort
    A, A
    Beiträge
    6
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

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

    Moinsen
    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:
    Code:
    position:absolute;
        #content{
        width:900px;
        left:210px;
        top:420px;
        z-index:2;
        background-color:rgba(179,179,179, 1);
        background-image:url(durchsichtig.png);
        text-align:justify;
        border:2px solid white;
        box-shadow:0 0 15px black; }
    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 .

    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!

    Mfg.
    Blackcan
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

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

    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

    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

    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

  3. Folgende User finden die Antwort von MrMurphy gut:


  4. #3
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

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

    Zitat Zitat von Blackcan Beitrag anzeigen
    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%.

    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.
    Code:
    position:absolute;
        #content{
        width:900px;
        left:210px;
        top:420px;
        z-index:2;
        background-color:rgba(179,179,179, 1);
        background-image:url(durchsichtig.png);
        text-align:justify;
        border:2px solid white;
        box-shadow:0 0 15px black; }
    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.

    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.
    Geändert von explanator (19.06.2014 um 08:14 Uhr)

  5. Folgende User finden die Antwort von explanator gut:


  6. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    18.06.2014
    Ort
    A, A
    Beiträge
    6
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

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

    Zitat Zitat von explanator Beitrag anzeigen
    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%.


    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.

    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.


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

    Zitat Zitat von MrMurphy Beitrag anzeigen
    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



    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



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


    HTML-Code:
    <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/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>
        </div>

    Code:
    .galerie div {
        border:1px solid white;
        width: 28%;
        min-width:200px;
        margin: 1.3em 0 1em 2%;
        float:left;
        text-align:center;
        padding:0;
        color:white;
    }
    
    .galerie div img {
        max-width:100%;
        max-height:100%;
    }
    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/uplo...5bp2cfz3ki.jpg

    Und hier mal der komplette HTML und CSS Code:
    HTML-Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Blackcan Designs</title>
        <meta charset="utf-8">
        <link href="./CSS/blackcan.css" rel="stylesheet">
    </head>
    <body>
        <header><div id="header"> </div></header>
        <nav><div id="nav">
            <ul>
                <li><a class="ausgewaehlt" href="index.html">Startseite</a></li>
                <li><a href="über_mich.html">Über Mich </a></li>
                <li><span>Referenzen</span>
                    <ul>
                        <li><a href="banner.html">Banner</a></li>
                        <li><a href="wallpaper.html">Wallpaper</a></li>
                        <li><a href="sonstiges.html">Sonstiges</a></li>
                    </ul>
                </li>
                <li><a href="impressum.html">Impressum </a></li>
            </ul>
        </div></nav>
        <div id="content">
            <section id="Einleitung">
                <article>
                    <h1>Willkommen auf meiner Seite :3</h1>
                    <p>Ich heiße Marcel und bin (wenn man es schon so nennen darf) Web-Entwickler und Designer.
                            Dies ist eine Testseite und bislang läuft es überraschend gut. Momentan ist erst die .index.html Seite fertig :<
                            Nun folgt ein Lorem Ipsum Text.
                    </p>
                </article>
                <article>
                    <p>Lorem ipsum... </p>
                </article>
            </section>
        </div>
        <footer><div id="footer"> 
            <a href="#header"><img   id="nachoben" src="./CSS/nachoben.png" alt="nachoben"></a>
            <div id="social">
                <a id="fb" target="_blank" href="https://www.facebook.com/blackcan1122"><img src="./CSS/fb.png" alt="" ></a>
                <a id="skype" target="_blank" href="skype://ruegenwaldermuehle"><img src="./CSS/skype.png" alt="" width="38" height="38"></a>
                <a id="dev" target="_blank" href="http://blackcan1122.deviantart.com/"><img src="./CSS/dev.png" alt="" width="38" height="38"></a>
            </div>
            <div id="kurzes_impressum">
                <p>©@Marcel Schulz 2014 </p>
                <p>Blackcan designs© Marcel Schulz </p>
            </div>
            <div id="shadow">
            </div>
        </div></footer>
    </body>
    </html>
    Und hier der CSS Code:

    Code:
    @import url(galerie.css);
    
    body {
        font-size:62.5%;
        background-color:#1a1c1d;
        background-image:url(bg.jpg);
        font-family:serif, sans-serif, monospace;
        
    }
    #header, #nav, #content {
        font-size:1.4em;
    }
    header, footer, nav {
        margin:0;
        padding:0;
        border:none;
    }
    #header {
        position:absolute;
        left:10px;
        right:10px;
        max-width:1920px;
        min-width:1300px;
        top:10px;
        height:400px;
        background-image:url(header_effect.png), url(header2.jpg);
        background-repeat:no-repeat;
        border:1px solid rgba(255,255,255,0.7);
        box-shadow:0 0 30px black;
        z-index:3;
    }
    #content {
        position:absolute;
        width:900px;
        left:210px;
        top:420px;
        z-index:2;
        background-color:rgba(179,179,179, 1);
        background-image:url(durchsichtig.png);
        text-align:justify;
        border:2px solid white;
        box-shadow:0 0 15px black;
    }
    #content p{
        padding:10px;
    }
    #nav {
        font-size:1.7em;
        position:absolute;
        left:14px;
        top:420px;
        z-index:1;
        background-image:url(nav.png);
        background-repeat:repeat-x;
        width:175px;
        border-top:2px solid white;
        box-shadow:0 0 20px black;
    }
    #nav a, #nav a:visited, #nav a:hover, #nav a:focus {
        display:block;
        text-decoration:none;
        color:black;
        text-align:left;
        font-variant: small-caps;
    }
    #nav a:hover{
        background-color:#272727;
        text-decoration:underline;
        border:2px solid white;
        box-shadow:0 0 10px black;
        color:white;
    }
    #nachoben {
        opacity:0.15;
        position:fixed;
        bottom:40px;
        right:10px;
    }
    #nachoben:hover {
        opacity:1;
        z-index:99;
    }
    #social {
        position:fixed;
        background-color:rgba(62,62,62, 0.5);
        bottom:0px;
        left:0px;
        right:0px;
        height:40px;
        box-shadow:0 0 5px black;
    }
    
    #social a:nth-child(1) {
        margin-left:2%;
    }
    #social img {
        box-shadow:0 0 4px black;
    }
    #kurzes_impressum {
        font-family:monospace;
        font-size:1.3em;
        position:fixed;
        right:40px;
        bottom:4px;
        color:white;
        text-align:center;
    }
    #kurzes_impressum p {
        margin:0px;
        padding:0px;
    }
    #shadow {
        position:fixed;
        background-image:url(unten.png);
        background-repeat:repeat-x;
        bottom:0px;
        left:210px;
        width:900px;
        height:100px;
        z-index:999;
    }
    nav li {
        list-style-type:none;
        margin-top:3px;
        margin-left:-20px;
    }
    article h1 {
        text-align:center;
        text-decoration:underline;
        font-variant:small-caps;
    }
    article {
        border-bottom:3px dotted #565656;
    }
    .ausgewaehlt {
        color:white;
        background-color:rgba(202,202,202,0.2);
    }
    li > span {
        text-decoration:underline;
    }
    Geändert von Blackcan (19.06.2014 um 14:04 Uhr)

  7. #5
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

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

    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>
      <div id="header"> 
      </div>
    </header>
    


    Das ist doppelt gemoppelt!
    Geändert von resteverwerter (19.06.2014 um 15:41 Uhr)

  8. Folgende User finden die Antwort von resteverwerter gut:


  9. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    18.06.2014
    Ort
    A, A
    Beiträge
    6
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

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

    Zitat Zitat von resteverwerter Beitrag anzeigen
    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>
      <div id="header"> 
      </div>
    </header>
    


    Das ist doppelt gemoppelt!
    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)
    Auf den ersten Blick sieht das etwas überflüssig
    aus: Warum die speziellen Sectioning-Tags und
    darin dann noch mal ein <div>? Der Grund
    dafür heißt IE8. Der kennt die neuen HTML5-Tags
    noch nicht, ist aber immer noch eine der verbreitetsten
    Browserversionen. Für den brauchst du
    <div>s, aber in anderen Browsern wäre es
    schon toll, die neuen, semantischen Tags zu haben.
    So hast du das Beste beider Welten.
    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

    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-Code:
    <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:


    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.
    Geändert von Blackcan (19.06.2014 um 17:10 Uhr)

  10. #7
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

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

    Hallo

    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:

    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

  11. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    18.06.2014
    Ort
    A, A
    Beiträge
    6
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

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

    Zitat Zitat von MrMurphy Beitrag anzeigen
    Hallo



    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.


    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%B6dinge...hr%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.

  12. #9
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

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

    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

    >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/We...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/Ei...ten/box-sizing


    zu den doppelten Tags, das macht wirklich KEINER!

  13. Folgende User finden die Antwort von resteverwerter gut:


  14. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    18.06.2014
    Ort
    A, A
    Beiträge
    6
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

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

    Zitat Zitat von resteverwerter Beitrag anzeigen
    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

    >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/We...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/Ei...ten/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!

    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 {
        width:30%;
        margin:1.2em 0 0 2%;
        float:left;
        padding:0;
        color:white;
        height:50px;
    zu den doppelten Tags, das macht wirklich KEINER!
    Alles klar, wusst ich wie gesagt nicht. Wurde halt so im Buch erklärt.

Ähnliche Themen

  1. Footer-Hintergrund verschwnden, wenn Elemente position:absolute
    Von Franzi2704 im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 07.11.2012, 16:55
  2. Problem mit position:absolute;
    Von minder im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 19.08.2009, 18:52
  3. Position : Absolute, mittig, allerdings ohne feste breite
    Von Alienx im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 07.03.2009, 16:27
  4. <div> absolute Position
    Von malawi im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 14.02.2007, 14:45
  5. Position Absolute: height = 9px -> zu wenig??
    Von Danwe im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.02.2006, 17:11

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •