liebewinter: Farbe auf eine Seite kurze machen

Beitrag lesen

sorry .. my code von codepen....

Mein Css Code:

body { display: grid; display: -ms-grid; background-color: #ebf5d7; grid-gap: 5px; grid-template-columns: 9% 73% 17%; grid-template-areas: "header header header" "nav nav nav" "linkBox main infoBox" "footer footer footer"; -ms-grid-columns: 8% 74% 18%; -ms-grid-row: 120px 80px 103px 200px 110px 90px; -ms-grid-gap: 5px; } body > header { grid-area: header; -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; -ms-grid-row-span: 1; background-image: url("Bilder/f409784856.png"); background-repeat: no-repeat; padding: 80px; margin-bottom: -8px; } body > nav { grid-area: nav; -ms-grid-column: 1/3; -ms-grid-column-span: 3; -ms-grid-row: 2; background-color: #d2f5c4; margin: 1px; } body > #externalLinks { grid-area: linkBox; -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-row-span: 5; grid-template-columns: 1; grid-template-rows: 3/4; margin: 1px; background-color: #d2f3c6; } body > main { grid-area: main; display: block; -ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-row-span: 3; margin: 1px; background-color: #eaf6e5; } body > #furtherInformation { grid-area: infoBox; -ms-grid-column: 3; -ms-grid-column-span: 3; -ms-grid-row: 3; -ms-grid-row-span: 3; margin: 1px; background-color: #d2f3c6; } body > footer { grid-area: footer; -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 6; -ms-grid-row-span: 6; background-color: #99ee7a; } /* Nav */ nav {background-color: #d2f5c4;} nav a{ color: black; text-decoration: none; display: inline; padding: 0px 8px; font-size: 17px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } nav ul {list-style-type: none;} nav li {display: block;display:inline-block;} /* ExternalLinks */ #externalLinks a { text-decoration: none; display: block; text-align: center; font-size: 15px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } #externalLinks ul { list-style-type: none; margin: 5px; padding: 0; margin: -12; } #externalLinks li{float: left} /* Geben an Link1, link2, link3 ; Farbe , Padding, .... */ li a, .dropbtn { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn {background-color: #f1ebeb;} .dropdown-content { display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */ font-size: 12px; position: absolute; /* die stellung folgt der Erste Link(li) */ background-color: #f1f1f1 ; min-width: 160px; /* macht größer die Inneren Links */ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe */ z-index: 1; /* Zeigen die Ordnung wie die Links gezeigt werden... */ } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; /* Bekomme die Liks keine Unten Stricht ....*/ display: block; } .dropdown-content a:hover { background-color: #9f9e9e; } /* Offnen die Innere Links */ .dropdown:hover .dropdown-content { display: block; left: 9em; /* zeigt wo dem innere link fenster gezeigt wird */ top: 20em; /* zeigt wo dem innere link fenster gezeigt wird */ } /* Main */ input, textarea{ background:#d9d9d9; border:1px solid rgba(220,220,220,0.75); font:inherit; border-radius:0.2941em;/*5px;*/ padding:0.4118em;/*7px;*/ /*farbigen Rahmen in Chrome und Safari abschalten.*/ outline:none; } input:focus, textarea:focus{ background:#fff; border:1px solid #000; outline: none; /* einige Browser add line auf input , das verhindert es... */ } input[type=submit]{ background:#be633c; border:none; color:#fff; border-radius:50% 50%; box-shadow:inset 0 0 1em #fb9d23; padding:0.5882em;/*10px*/ } input[type=submit]:focus, input[type=submit]:active{ background-color:#A33202; } /* Footer */ #copry { overflow: auto; font-size: 10px; list-style-type: none; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } #img1 {float: left; margin: 5px; } #copry a {text-decoration: none; margin-bottom: 3px;} #copry p {font-size: 10px; margin-bottom: 0px; } /* Komment Button */ #comment:hover { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);} #comment {font-size: 11px;} /* Button from comment */ #form {font-size: 14px;} /* size from comment window */ #adderiren { /* Farbe für 'Add a new comment' */ width: 50px; color:#006600; padding: 8px 0px 5px 5px; }

Meine html code;

<aside id="externalLinks"> <ul> <li class="dropdown"> <a href="#" class="dropbtn">Computer</a> <div class="dropdown-content"> <a href="windows.php">Windows</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> <li><a href="#">News</a></li> <li><a href="#">Bucher</a></li> </ul> </aside>

ich habe auch versuche Ein Bissen mit Padding zu machen , so..

#externalLinks ul { list-style-type: none; margin: 5px; padding: 0px; margin-left: -12px; }

aber ohne erfolgt...