Ergebnis 1 bis 4 von 4

Thema: CSS/ Box Modell Erklärung

  1. #1
    Registriert seit
    12.10.2012
    Alter
    25
    Beiträge
    12

    Standard 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. #2
    Registriert seit
    15.01.2005
    Ort
    Oberbuchsiten
    Beiträge
    911

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

  3. #3
    Registriert seit
    12.10.2012
    Alter
    25
    Beiträge
    12

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

  4. #4
    Registriert seit
    12.10.2012
    Alter
    25
    Beiträge
    12

    Standard AW: CSS/ Box Modell Erklärung

    hab den fehler selber gefunden danke

Ähnliche Themen

  1. Problem: css formatierung mit vbscript
    Von delfin im Forum Webdesign & andere Programmiersprachen
    Antworten: 1
    Letzter Beitrag: 24.10.2011, 16:23
  2. Frage: Textschattierung mit CSS
    Von Dummy_2 im Forum Webdesign & andere Programmiersprachen
    Antworten: 3
    Letzter Beitrag: 10.04.2011, 10:00
  3. Frage: Text mit CSS nach unten
    Von Maximilian im Forum Webdesign & andere Programmiersprachen
    Antworten: 1
    Letzter Beitrag: 22.12.2010, 08:51
  4. Frage: Seitenlayout mit CSS
    Von Maximilian im Forum Webdesign & andere Programmiersprachen
    Antworten: 11
    Letzter Beitrag: 18.11.2010, 08:33
  5. Problem: CSS Background Image
    Von stardom im Forum Webdesign & andere Programmiersprachen
    Antworten: 2
    Letzter Beitrag: 03.09.2009, 11:00

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •