Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
margin und padding
#1
Question 
Hallo,

ich bin absoluter newbie was html und css betrifft und habe da ein paar grundsätzliche fragen :-).

1. mich interessiert wieviel px width ihr für eine seite benutzt/ einplant, die erstmal nur eine ganz normale seite für den desktop werden soll, ich lese da oft 960 px, kann man sagen
    das daß sozusagen ein standardwert ist?

2. Ich glaube ich habe das prinzip margin und padding ganz grob kapiert, meine frage dazu: bezieht sich das margin immer auf das bodyelement oder bezieht es sich immer auf die nächst höhere ebene ? Falls ich im bodyelement noch ein div="container" einbaue in dem ich alle anderen "kästchen" wie header , main , footer erstelle, bezieht sich dann das margin dann auf den div="container"-Grenze oder auf die bodyelement-grenze? 

Ich hoffe ich habe mich klar genug ausgedrückt ? :-)

gruß,

Helge
Zitieren
#2
Hi Helge,

1. Gute Frage. In Zeiten des responsive Designs und von auch sehr unterschiedlichen Auflösungen von Desktop-Monitoren ist 960px nicht mehr zeitgemäß, finde ich. Du solltest schauen, dass deine Website auch bei größeren Auflösungen noch vernünftig aussieht, wie auch auf kleineren. Eine Technik dafür ist, grundsätzlich em als Maßeinheit zu benutzen, und bei großen Bildschirmen dann die font-size des body höher zu stellen, um damit die komplette Website zu vergrößern.
Das CSS-Framework Kraken verfolgt z.B. diesen Ansatz. Kraken ist ein reduziertes CSS-Framework, das dir den Einstieg enorm erleichtern kann, dabei aber nicht so groß ist wie Bootstrap oder Foundation. https://cferdinandi.github.io/kraken/

2. Sowohl padding wie auch margin beziehen sich auf das Objekt, auf das du es anwendest.
Padding macht das Objekt "dicker", also fügt innen ein "Polster" hinzu, vergrößert damit das Objekt (blaue boxen).
Margin fügt außen einen "Spielraum" hinzu, der aber wie in folgendem Beispiel nicht das Objekt selbst vergrößert (rote boxen).
Bei Margin ist zu beachten, dass sich Margins, die aufeinandertreffen, nicht summieren, sondern zusammenfallen. Das siehst du bei den beiden roten Boxen unten, zwischen denen nicht 20px abstand ist, weil die obere unten den margin hat und die untere oben einen margin hat. Hier wird jeweils nur der größere Margin beachtet, also in dem Fall nur ein mal 10px.

Siehe hier: https://jsfiddle.net/7e1sg9g5/2/

Ich hoffe das konnte dir helfen, viel Erfolg beim CSS´en Wink
Allround Webdesign Freelancer | Design, HTML5, CSS3, JS, PHP, mySQL
Zitieren
#3
Hallo


Zitat:ich lese da oft 960 px, kann man sagen das daß sozusagen ein standardwert ist?

Vergiß alle Werte die dir genannt werden.

Webseiten haben keine Größen, sie sind im Prinzip unendlich groß.

Der Besucher bestimmt wie breit die Seite bei ihm angezeigt wird. Als Webseitenersteller sorgst du deshalb dafür, dass die Seite immer die komplette Fensterbreite einnimmt, ohne dass die Besucher seitwärts scrollen müssen.

Feste Breiten (und Höhen) gibt es in anderen Medien. Zum Beispiel von Textverarbeitungen, beim Buch oder Posterdruck.

Damit haben Webseiten aber wenig mehr gemein als das Texte, Bilder und andere Objekte angezeigt werden. Wobei "angezeigt" auch schon falsch ist. Der Inhalt kann auch vorgelesen oder in Blindenschrift ausgegeben werden oder von anderen Computern (zum Beispiel Suchmaschinen) ausgewertet werden.


Viele Webseitenersteller verstehen das leider nicht und wollen deshalb trotzdem feste Breiten benutzen. Damit ihr Unverständnis nicht auffällt haben sie mehrere sogenannte Standardbreiten mit frei aus der Luft gegriffenen Werten erfunden. Die haben sie dann lautstark verbreitet und sich anschließend darum gestritten welche davon am Besten sind. Bis heute wirkendes Ergebnis: Viele Webseitenersteller glauben bis heute an irgendwelche Standardbreiten, obwohl sie in der Praxis mit Smartphone, Tablet und Co. jeden Tag praktisch mit der Vielfalt der Fenster und Browserbreiten konfrontiert werden.

Interssant dazu ist zum Beispiel das folgende Kapitel aus dem Buch von Peter Müller:

Little Boxes: Das Web ist nicht aus Papier

Die Zeiten von starren Webseiten sind bereits seit dem Jahr 2000 vorbei. Damals wurden HTML4 und CSS2 eingeführt. Viele Webseitenersteller haben das leider bis heute nicht erkannt.


Zitat:bezieht sich das margin immer auf das bodyelement oder bezieht es sich immer auf die nächst höhere ebene ?

Das lässt sich nicht eindeutig beantworten. Worauf margin sich bezieht hängt vom Quelltext ab. Das ist also immer wieder unterschiedlich und die einzelnen margin-Abhängigkeiten müssen gelernt werden.

Gruss

MrMurphy
Zitieren
#4
Hallo,

ich danke euch für eure antworten und für die weiterführenden infos über eure geposteten links :-)

Gruß,

Helge
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste