Versionen dieses Beitrags

Farbe auf eine Seite kurze machen

Missing liebewinter
  • Farbe auf eine Seite kurze machen
  • sorry .. my [code ](https://codepen.io/mezb/pen/rPaeaR)von codepen....
  • Mein Css Code:
  • ~~~CSS
  • 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;
  • ~~~HTML
  • <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..
  • ~~~CSS
  • #externalLinks ul {
  • list-style-type: none;
  • margin: 5px;
  • padding: 0px;
  • margin-left: -12px;
  • }
  • ~~~
  • aber ohne erfolgt...