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:

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:

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:

.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

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

Zitat von explanator

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.

Alles anzeigen

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 von MrMurphy

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

Alles anzeigen

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.

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

.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 {
[B]    max-width:100%;
    max-height:100%;[/B]
}

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:

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

@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;
}

Zitat von resteverwerter

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!

Alles anzeigen

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)

Zitat

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.

Alles anzeigen

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 :

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

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

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

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

Zitat von MrMurphy

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

Alles anzeigen

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.

Zitat von resteverwerter

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/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!

Alles anzeigen

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

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

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:

Code

.galerie div {
    [B]width:33.3%;
    -moz-box-sizing[COLOR=#00AA00]:[/COLOR] border-box[COLOR=#00AA00];[/COLOR] 
    box-sizing:border-box;[/B]
    margin:1.2em 0 0 2%;
    float:left;
    padding:0;
    color:white;
    [B]height:50px;


[/B]

Alles anzeigen

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

#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

body {
    margin:0 auto;
    max-width:140em;
    min-width:140em;
    width:100%;
    height:100%;
    font-size:62.5%;
    background-color:#1a1c1d;
    background-image:url(bg.jpg);
    font-family:serif, sans-serif, monospace;

}

(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!