Warning: Undefined array key "p" in /home/clients/119990c2465ec8673b725b4ed2ffc513/sites/informatikboard.ch/includes/vb5/template.php(404) : eval()'d code on line 794
Warning: Undefined array key "p" in /home/clients/119990c2465ec8673b725b4ed2ffc513/sites/informatikboard.ch/includes/vb5/template.php(404) : eval()'d code on line 794
Warning: Undefined array key "p" in /home/clients/119990c2465ec8673b725b4ed2ffc513/sites/informatikboard.ch/includes/vb5/template.php(404) : eval()'d code on line 794
Ich bringe mir zu Hause ein bischen HTML + CSS bei. Auf little-boxes.de steht bei kapitel 8 ein boxmodell.
Mein Problem liegt dabei, das ich den unterschied von padding border und margin nicht verstehe. Durch das Ausprobieren mit Dreamweaver kamen noch mehr probleme dazu.
Könnte mir bitte jemand den Unterschied dieser 3 Bereich erklären? WÄRE sehr dankbar
- margin ist der Aussenabstand eines Elementes zum Nachbarn (Leerraum zwischen Elementen)
- padding ist der Innenabstand eines Elementes (Leerraum vom Inhalt bis zur äusseren Begrenzung eines Elementes)
- border ist eine Umrandung eines Elements (der Rahmen eines Elementes)
alles lässt sich einzeln für right, left, top und bottom definieren.
Das Problem ist, dass nicht alle Element diese Eigenschaften in gleicher Weise unterstützen und in manchen Browsern das Resultat nicht immer aussieht, wie erwartet.
Theoretisch sieht dann ein Element so aus:
Dieses Posting wurde aus 100% rezyklierten Elektronen hergestellt
und kann für die Umwelt absolut unschädlich gelöscht werden.
/*=========================================================================================================
Stylesheet für die Beispielsite aus "Little Boxes"
Stand: End eKapitel "Ordnung halten im Stylesheet"
Datei: bildschirm.css
Datum: 20.02.2013
Autor: Mesut Demir
Aufbau: 1. Kalibrierung und Restauration
2. Allgemeine Styles
3. Styles für Layoutbereiche
4. Sonstige Styles
===========================================================================================================*/
/*==================================================================
1. Kalibrierung und Restauration
==================================================================== */
* { padding: 0; margin: 0; }
html { overflow-y: scroll; }
h2, p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1em; }
/*==================================================================
2. Allgemeine Styles
==================================================================== */
body {
background-color: #8c8c8c;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
h1 { font-size: 150%; }
h2 { font-size: 130%; }
address {
text-align: center;
font-size: 80%;
font-style: normal;
letter-spacing: 2px;
line-height: 1.5;
}
a {
text-decoration: none;
/* outline: none; */ /* nur wenn es echt stört */
}
a:link { color: #d90000; }
a:visited { color: #cc6666; }
a:hover,
a:focus {
border-bottom: 1px solid #d90000;
}
a:active {
color: white;
background-color: #d90000;
}
img#logo {
background-color: white;
color: black;
padding: 10px solid #000;
border: 10px solid #d9d9d9;
}
/*==================================================================
3. Styles für die Layoutbereiche
==================================================================== */
div#wrapper {
background-color: white;
color: black;
width: 720px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
#kopfbereich {
background: #ffe574 url(../images/farbverlauf.jpg) repeat-y top left;
color: black;
padding: 10px 20px 0 20px;
}
p#slogan span{
color: #d90000;
}
p#slogan {
padding: 0px 0 5px 0;
margin-bottom: 0;
}
#navibereich {
background: #ffe574 url(../images/farbverlauf.jpg) repeat-y left top;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #8c8c8c;
color: black;
text-align: right;
}
#navibereich ul { margin-bottom: 0; }
#navibereich li {
display: inline;
list-style-type: none;
margin: 0;
}
#navibereich a {
color: black;
background-color: #ffeda0;
padding: 4px 8px 0px 8px;
}
#navibereich li.sie-sind-hier a {
color: black;
background-color: white;
border-bottom-color: white;
}
#navibereich a:hover,
#navibereich a:focus {
color: white;
background-color: white;
}
#navibereich a:active {
color: black;
background-color: white;
border-bottom-color: white;
}
#textbereich {
padding: 20px 20px 20px 20px ;
}
#textbereich a {
border-bottom: 1px dotted #cc0000;
}
#textbereich a:hover,
#textbereich a:focus {
border-bottom: 1px solid #d90000;
}
div#fussbereich {
padding: 10px 20px 20px 20px;
border-top: 1px solid #8c8c8c;
margin-top: 0;
}
/*==================================================================
4. Sonstige Styles
==================================================================== */
/*==================================================================
Ende des Stylesheets
==================================================================== */
Ich finde nicht heraus wie ich die graue linie unterhalb des navibereichs entfernen kann damit der rollover effekt entsteht, so dass der register gegen unten geöffnet ist und der rest der linie bleibt.
Wir verarbeiten personenbezogene Daten über Nutzer unserer Website mithilfe von Cookies und anderen Technologien, um unsere Dienste bereitzustellen, Werbung zu personalisieren und Websiteaktivitäten zu analysieren. Wir können bestimmte Informationen über unsere Nutzer mit unseren Werbe- und Analysepartnern teilen. Weitere Einzelheiten finden Sie in unserer Datenschutzrichtlinie.
Wenn Sie unten auf "Einverstanden" klicken, stimmen Sie unserer Datenschutzrichtlinie und unseren Datenverarbeitungs- und Cookie-Praktiken wie dort beschrieben zu. Sie erkennen außerdem an, dass dieses Forum möglicherweise außerhalb Ihres Landes gehostet wird und Sie der Erhebung, Speicherung und Verarbeitung Ihrer Daten in dem Land, in dem dieses Forum gehostet wird, zustimmen.
Kommentar