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 CSS/ Box Modell Erklärung - iB - InformatikBoard.ch - Benutzer helfen Benutzern

Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS/ Box Modell Erklärung

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Frage: CSS/ Box Modell Erklärung

    Hallo zusammen

    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

  • #2
    AW: CSS/ Box Modell Erklärung

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

    Kommentar


    • #3
      AW: CSS/ Box Modell Erklärung

      Hallo
      Vielen Dank für die Info.

      Ic hhabe noch ne frage zum Code:
      Code:
      /*=========================================================================================================
      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.

      Kommentar


      • #4
        AW: CSS/ Box Modell Erklärung

        hab den fehler selber gefunden danke

        Kommentar

        Lädt...
        X