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:
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; }
Alles anzeigen
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:
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
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