liebewinter: Grid - Wie bewege die aside-Element

Hallo , versuche die aside-Element bewegt nach Unten , aber ich weiss nicht… Hier wie meine Website aussiehst .

Meine Idee ist die aside-Element auf main-Element zu legen , ... Wie das Bild zeigt wie ich möchte habe

Ich habe versuche mit verschidene Methode , aber habe es nicht geschaft....

Mein html Code

<?php
 

 
 header('Content-Type: text/html; Charset=utf-8');
 mb_internal_encoding('UTF-8');
 date_default_timezone_set('UTC');
 error_reporting(E_ALL);
 




?> 

<!doctype html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 

	<title>Computer</title>

<style> 


<?php 

include 'CSS/windows.css';
include 'CSS/tablet.css';

 


?>

</style>
</head>

<body>
<header style="background-image: url('Bilder/night.JPG'); background-repeat: no-repeat"; >
    
</header>
<nav id="navs">
  <ul>
    <li><a href="about_us.php">About Us</a></li>
    <li><a href="contact.php">Contact</a></li>
  </ul>
  <ul>
    <li><a href="index.php">Home</a></li>
    <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>
    <li><a href="#">News</a></li>
    <li><a href="#">Bucher</a></li>
  </ul>
</nav>

<aside id="furtherInformation"></aside>



<main>
<h4>Das letzte von Windows 8</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
ut aliquip ex ea commodo consequat.
</p>
<a style="text-decoration: none;" href="windows8.php">Read more...</a>
<br>
<br>
<br>
<br>
<br>
<br>


<?php include ('links_change.php'); ?>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>


</main>

<footer id="copry" >
	<p>My Website: Computer and More  © 2018. All Rights Reserved.</p>
<a id="img1" href="https://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" width="120px" height="40px" src="/Bilder/copry.png" ></a>
<p>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
	Content of this site cannot be republished either online or offline without our permissions. </p>

</footer>


</body>
</html>

Mein Grid Code:

@media (min-width:  64.0625em) and (max-width: 80em) {
  
  body {
 
       display: grid;
       display: -ms-grid; 
       background-color: #ebf5d7;
       grid-row-gap: 5px;
       grid-template-columns: 8% 74% 18%;
       grid-template-areas:

         "header   header    header"
         "nav      nav          nav"
         "main main     infoBox"
         "footer   footer   footer";
     
       -ms-grid-columns: 8% 74% 18%;
       -ms-grid-row:  120px 80px 103px 200px 110px 90px; 
       -ms-grid-gap: 5px;
    }
     .dropdown-content a {
       padding: 10px 12px;
   }
    .dropdown:hover .dropdown-content {

      top: 28px; 
    } 
    
}    
    

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/view.JPG");
  background-repeat: no-repeat;
  padding: 65px;
  
  
    
}

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 > main {
	grid-area: main;
	display: block; 
    -ms-grid-column: 2; 
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    margin: 2px;
    background-color: #eaf6e5;
    box-sizing: border-box;    /* margin wo der test anfang    */  
    padding: 10px;             /* margin wo der test anfang , padding für den margin    */ 
   
    
}

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;

}

Mein css code:


     /* Nav  */

nav {background-color: #d2f5c4; display: flex; }

nav a{
      color: black;
      text-decoration: none;
	  display: inline;
	  padding: 10px 8px 10px;
	  font-size: 16px;
	  font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
      
}

nav ul {list-style-type: none;  flex: 1 0 auto;}

nav li { display: inline-block;}

nav ul:nth-of-type(2) {
 text-align:right;          /* beweget computer, News und Bucher   */
 padding-right:120px;

}


#navs {
  padding: 8px 0px 8px;  /* Großer Nav , nur Obern und Unten   */
}




/* Geben an Link1, link2, link3 ; Farbe , Padding, .... */


.dropdown { 
   position: relative; /* brauche um die neue link in Nav zubauen */
}


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: 10px; /* 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 {
   
    color: black;
   
    text-decoration: none;       /* Bekomme die Liks keine Unten Stricht ....*/
}

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




                      /*    Main           */

input, textarea{
			background:rgba(220,220,220,0.75);
			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; }

/*  Getting your footer under control  */

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}


/*    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 */

ich versuche seit einige Stunde , aber ohne erfolgt…

Kann bitte jemand hilfe um dieser probleme zu losen , danke !

akzeptierte Antworten

  1. Hallo Joseba,

    im Moment steuerst Du die Platzierung von main und aside#furtherInformation über namen in grid-template-area. Damit kann man keine Überlappung erreichen. Dafür muss man das etwas anders machen.

    Dein Grid-Template besteht im Moment aus 4 Zeilen und 3 Spalten.

    Zeile 1: Header
    Zeile 2: Nav
    Zeile 3: Main und Infobox
    Zeile 4: Footer

    Du steuerst die Anordnung der Elemente über grid-area und einen Namen. grid-area versteht aber noch mehr, nämlich Zeilen- und Spalten-Nummern. Diese Nummern zählen die Trennlinien zwischen den Grid-Bereichen. Bei Dir ist das:

         1        2                       3          4
     1   +-------------------------------------------+
         |  header                                   |
     2   +-------------------------------------------+
         |  nav                                      |
     3   A--------+-----------------------+----------+
         |  main  |   main                | aside    |
     4   +--------+-----------------------B----------+
         |  footer                                   |
     5   +-------------------------------------------+
    

    Deine Zeilennummern gehen von 1-5 und die Spaltennummern von 1-4. Dein main-Element beginnt in Zeile 3 und Spalte 1 (Punkt A). Es endet in Zeile 4 und Spalte 3 (Punkt B). Das kann man genau so in der grid-area Eigenschaft hinschreiben:

    main {
       grid-area: 3 / 1 / 4 / 3;
    }
    

    und es ist erlaubt, dass ein Feld im Grid von zwei Elementen belegt wird:

    main {
       grid-area: 3 / 1 / 4 / 4;
    }
    

    Jetzt ist das main-Element 3 Spalten breit und das aside-Element liegt darüber. Man sieht das daran, dass ein Teil des Textes nicht mehr zu sehen ist.

    Zum Nachlesen in einem Handbuch: Die CSS Eigenschaften grid-row-start, grid-row-end, gris-row, grid-column-start, grid-column-end und grid-column.

    Aber ist das nun das, was Du haben willst?

    Rolf

    --
    sumpsi - posui - clusi
    1. Viele dank für deine antwort !

      main {grid-area: 3 / 1 / 4 / 3;}

      du meinst das ich der area nicht mit name-Element nennt soll , sondem mit Zahlen ?

      Zum Nachlesen in einem Handbuch: Die CSS Eigenschaften grid-row-start, grid-row-end, gris-row, grid-column-start, grid-column-end und grid-column. Aber ist das nun das, was Du haben willst?

      als ich eine losung suche ,wenn sie Gut ist....

      Ich habe auch versuche geben eine neue area :

       "header   header    header"
       "nav      nav          nav"
       "main main     main"
       "main main     infoBox"
       "footer   footer   footer";
      

      aber die infoBox kommt nach main , unten....

      1. Hallo Joseba,

        die wichtige Frage ist: Willst Du das, was ich da erklärt habe? Willst Du, dass zwei Elemente den gleichen Platz belegen?

        Dein neues grid Template kann nicht funktionieren. Die Bereiche müssen rechteckig sein, und main ist nicht rechtecktig. Ich nehme an, deswegen baut er infoBox nicht hinein.

        Versuche doch mal zu beschreiben, welches Problem Du mit "aside Element auf main Element legen" lösen willst. Vielleicht verstehe ich ja deine Absicht ganz falsch.

        Rolf

        --
        sumpsi - posui - clusi
        1. die wichtige Frage ist: Willst Du das, was ich da erklärt habe? Willst Du, dass zwei Elemente den gleichen Platz belegen?

          brauchst nicht , ich habe vertande was du meinst …

          Dein neues grid Template kann nicht funktionieren. Die Bereiche müssen rechteckig sein, und main ist nicht rechtecktig. Ich nehme an, deswegen baut er infoBox nicht hinein.

          deshalb habe ich gefragt , weil ich möchte Gut schreibe....

          Versuche doch mal zu beschreiben, welches Problem Du mit "aside Element auf main Element legen" lösen willst. Vielleicht verstehe ich ja deine Absicht ganz falsch.

          versuche ich es .... , ich möchte die aside-Element benutze für Werbung , ich möchte das sie Ein Bissen Unten wo jetzt steht , wie das Bild auf meine Erste frage zeigt , wie der Schwarze vierecke , und wie gezeigt wird , die Farbe vom background-color von mein ,neben…

          Was ich nicht möchte habe , wie dieser screenshot…

          was ich nicht möchte

          .... und viele Danke für deine Geduld !

        2. oder du denkst anstatt aside-Element zu benutze , mache mit einem Div...

          1. Hallo Joseba,

            möchtest Du so etwas haben? Also Text, der um die Werbung herum fließt?

            +-------------------------------------------------------------------------------+
            | (main)                                                                        |
            | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy      |
            | eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam      |
            | voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita |
            | kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem |
            | ipsum dolor sit amet, consetetur sadipscing elitr, sed diam +-----------------|
            | diam nonumy eimod tempor invidunt ut labore et dolore magna | (aside)         |
            | aliquyam erat, sed diam voluptua. At vero eos et accusam et |  WERBUNG        |
            | justo di dolores et ea rebum. Stet clita kasd gubergren, no |    WERBUNG      |
            | sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem  |      WERBUNG    |
            | ipsum dolor sit amet, consetetur sadipscing elitr, sed diam |        WERBUNG  |
            +-------------------------------------------------------------+-----------------+
            

            Wenn das aside ein Kind-Element von main ist, würde man hierfür float brauchen, aber mir ist nicht bekannt, wie man ein float an der Unterkante seines Eltern-Elements ausrichtet.

            Mit CSS Shapes (Firefox seit Version 62, Chrome seit v37) kann man so etwas vielleicht erreichen, aber ob man damit ein Shape "unten rechts" anbringen kann, weiß ich nicht. Ich muss noch Seiten für Internet Explorer bauen, und der kennt keine Shapes.

            Rolf

            --
            sumpsi - posui - clusi
            1. wie ich möchte habe...

              wie ich möchte habe

              Eine Beispiel wie ich möchte…

              aber ohne der Suche und "Popular Posts" die auf rechte Seite sind.., die Berwung (mit div ?) ,das Bild mit der Frau , das wäre der aside-Element .

              1. Hallo Joseba,

                So etwas ?

                Ich habe den Main-Bereich in vier Zeilen unterteilt. Links kommt das <main> Element hin, und rechts sind zwei Lücken (gap1, gap2), die Werbung und die Infobox. Die Lücken und <main> haben keine eigene Hintergrundfarbe, sondern verwenden die Hintergrundfarbe von <body>. Darum sehen sie gleich aus.

                Wenn Du das nicht willst, musst Du bei gap1 und gap2 ein leeres <div> anordnen und dem die gleiche Hintergrundfarbe wie <main> geben. Die Rahmen müssen natürlich noch weg, die sind nur da, damit Du siehst wo welcher Bereich endet.

                Rolf

                --
                sumpsi - posui - clusi
                1. Dannnnke !

                  Ich habe gemacht wie du geschrieben hast , der screenshot..

                  wie jetzt habe

                  Die html Code;

                  <body>
                  <header style="background-image: url('Bilder/night.JPG'); background-repeat: no-repeat"; >
                      
                  </header>
                  <nav id="navs">
                    <ul>
                      <li><a href="about_us.php">About Us</a></li>
                      <li><a href="contact.php">Contact</a></li>
                    </ul>
                    <ul>
                      <li><a href="index.php">Home</a></li>
                      <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>
                      <li><a href="#">News</a></li>
                      <li><a href="#">Bucher</a></li>
                    </ul>
                  </nav>
                  
                  
                  
                  
                  
                  <main>
                  
                  
                  
                  <article id="schreibe"> 
                  <h4> Das letzte von Windows 8</h4>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
                  magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
                  ut aliquip ex ea commodo consequat.
                  </p>
                  <a style="text-decoration: none;" href="windows8.php">Read more...</a>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  
                  </article>
                  
                  
                  
                  
                  
                  <?php include ('links_change.php'); ?>
                  
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  
                  
                  
                  
                  
                  
                  	
                  
                  
                  </main>
                  
                  <div class="werbung">
                    <h2>Buy me!</h2>
                  I am good for you!
                  </div>
                  
                  
                  <aside>
                  
                  <p>Ceterum censeo googlem delendum esse</p>
                  
                  </aside>
                  
                  
                  
                  
                  <footer id="copry" >
                  	<p>My Website: Computer and More  © 2018. All Rights Reserved.</p>
                  <a id="img1" href="https://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" width="120px" height="40px" src="/Bilder/copry.png" ></a>
                  <p>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
                  	Content of this site cannot be republished either online or offline without our permissions. </p>
                  
                  </footer>
                  
                  
                  </body>
                  </html>
                  

                  Die css Code;

                   body {
                         
                         display: grid;
                         display: -ms-grid; 
                         background-color: #eaf6e5;
                         grid-row-gap: 5px;
                         grid-template-columns: 8% 74% 18%;
                         grid-template:
                  
                          "header header header" auto
                          "nav nav nav" auto
                          "main main gap1" 1em
                          "main main werb" 10em
                          "main main gap2" 3em
                          "main main info" 1fr
                          "footer footer footer" auto;
                         
                         -ms-grid-columns: 8% 74% 18%;
                         -ms-grid-row:  120px 80px 103px 200px 110px 90px; 
                         -ms-grid-gap: 5px;
                      }
                      
                      #schreibe {
                          box-sizing: border-box;    /* margin wo der test anfang    */  
                          padding: 1px;             /* margin wo der test anfang , padding für den margin    */ 
                          padding-right: 310px;
                          
                          
                         
                      }     
                       .dropdown-content a {
                         padding: 10px 12px;
                      }
                      .dropdown:hover .dropdown-content {
                  
                        top: 28px; 
                      } 
                      
                  }    
                     
                  
                  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/night.JPG");
                    background-repeat: no-repeat;
                    padding: 65px;
                    
                    
                      
                  }
                  
                  nav {
                  	grid-area: nav;
                  	-ms-grid-column: 1/3;
                      -ms-grid-column-span: 3;
                      -ms-grid-row: 2;
                  
                     background-color: #d2f5c4;
                     margin: 1px;
                  
                  }
                  
                  main {
                  	grid-area:  main;
                  	display: block; 
                      -ms-grid-column: 2; 
                      -ms-grid-row: 3;
                      -ms-grid-row-span: 3;
                      margin: 2px;
                      background-color: #eaf6e5;
                      
                      
                  }
                  .werbung {
                    grid-area: werb;
                    background-color: #f88;
                  }
                  
                   
                  aside  {
                  	grid-area: info;
                      -ms-grid-column: 3;
                      -ms-grid-column-span: 3;
                      -ms-grid-row: 3;
                      -ms-grid-row-span: 3;
                     
                      margin: 1px;
                      background-color: #d2f3c6;    
                  }
                  
                  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;
                  
                  }
                    
                  

                  ich bedanke mich dir , ich war seit zwei Tage mit dieser Probleme...

                2. Entschuldigung , have noch eine andere frage.…

                  ich habe main-Element kleiner gemacht

                  main {
                  	grid-area:  main;
                  	display: block; 
                      -ms-grid-column: 2; 
                      -ms-grid-row: 3;
                      -ms-grid-row-span: 3;
                      margin: 2px;
                      margin-right: 53px; 
                      background-color: #e1f2d9;
                     
                      
                  }
                  

                  und mehr Platz für meine class="werbung" nach Linke Seite zu geben .

                  .werbung {
                    grid-area: werb;
                    background-color: red;
                    margin-left: -15px;
                  
                  }
                  
                  

                  Aber egal was schreibe bewegt sich nicht , nur bewegt sich mit margin-left: -15px; , weil die Zeichnung - , wie ich denke nicht so korrecht ist... , es gibt die möglichkeit etwas andere zu machen ??

                  Der screenshot wie meine Website aussiehst Platz auf linke seite

                  1. Hallo Joseba,

                    das Grid-Raster wird von den grid-Eigenschaften des body festgelegt. Da steht

                    grid-template-columns: 8% 74% 18%; -ms-grid-columns: 8% 74% 18%;

                    und das bestimmt, wie breit die Spalten sind. Wenn Du etwas ändern möchtest, dann an dieser Stelle. Wenn Du den Elementen, die Du ins Grid hängst, einen Margin gibst, verändert sich das Grid nicht. Es entsteht nur freier Platz. Das siehst Du, wenn Du den Elementen Ränder gibst.

                    Du musst das auch nicht alles mit Prozenten machen. Man kann auch sagen: Links 10em, Rechts 20em und in der Mitte den Rest:

                    grid-template-columns: 10em 1fr 20em; -ms-grid-columns: 10em 1fr 20em;

                    Mit fr kannst Du Platz in Bruchteilen verteilen. Du könntest "1fr 8fr 2fr" sagen. Das wären dann 1+8+2 = 11 Teile, die erste Spalte bekommt $$\frac{1}{11}$$ des Platzes, die zweite Spalte bekommt $$\frac{8}{11}$$ und die dritte Spalte $$\frac{2}{11}$$. Wenn bei den Grid-Spalten nur eine Spalte in fr angegeben ist, bekommt sie $$\frac{1}{1}$$ des Platzes, also alles was nach dem Verteilen der 10em und 20em noch frei ist.

                    Rolf

                    --
                    sumpsi - posui - clusi
                    1. hallo , ich habe versuche ohne margin in main-Element;

                      main {
                      	grid-area:  main;
                      	display: block; 
                          -ms-grid-column: 2; 
                          -ms-grid-row: 3;
                          -ms-grid-row-span: 3;
                           
                          background-color: #e1f2d9;
                      }
                      

                      auf meine div werbung , habe keine margin...

                      .werbung {
                        grid-area: werb;
                        background-color: red;
                      }
                      

                      verendert nach "main werb werb" 10em ..

                      Dann habe verändert auch grid-template-columns: 8% 42% 50%; , und es gabt keine veränderung...

                      1. Hallo Joseba,

                        hast Du einen Link zur Seite?

                        Rolf

                        --
                        sumpsi - posui - clusi
                        1. Hallo ,

                          nicht , weil alles was ich mache habe in meine Rechner , auf meine Website bringe nur wenn bevor in meine Rechner ausprobiert und keine fehler bekomme habe...

                          Hier die Code die jetzt habe ,habe auch andere CSS code in andere Datei , aber sie ist nicht so wichtig weil sie für Nav ist , sie ist dieser;

                          /* Nav  */
                          
                          nav {background-color: #d2f5c4; display: flex; }
                          
                          nav a{
                                color: black;
                                text-decoration: none;
                          	  display: inline;
                          	  padding: 10px 8px 10px;
                          	  font-size: 16px;
                          	  font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
                                
                          }
                          
                          nav ul {list-style-type: none;  flex: 1 0 auto;}
                          
                          nav li { display: inline-block;}
                          
                          nav ul:nth-of-type(2) {
                           text-align:right;          /* beweget computer, News und Bucher   */
                           padding-right:120px;
                          
                          }
                          
                          
                          #navs {
                            padding: 8px 0px 8px;  /* Großer Nav , nur Obern und Unten   */
                          }
                          
                          
                          
                          
                          /* Geben an Link1, link2, link3 ; Farbe , Padding, .... */
                          
                          
                          .dropdown { 
                             position: relative; /* brauche um die neue link in Nav zubauen */
                          }
                          
                          
                          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: 10px; /* 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 {
                             
                              color: black;
                             
                              text-decoration: none;       /* Bekomme die Liks keine Unten Stricht ....*/
                          }
                          
                          .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;
                          }
                          
                          
                          
                          
                                                /*    Main           */
                          
                          input, textarea{
                          			background:rgba(220,220,220,0.75);
                          			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; }
                          
                          /*  Getting your footer under control  */
                          
                          #content-wrap {
                            padding-bottom: 2.5rem;    /* Footer height */
                          }
                          
                          
                          /*    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 */
                          
                          
                          /* Old links */
                          
                          .link_change ul {
                          
                              list-style-type: none;
                          
                              margin-left: 340px;
                          
                          }
                          
                           
                          
                          .link_change li {
                          
                            display: inline;
                          
                          }
                          
                           
                          
                          .link_change a {
                          
                             display: inline;
                          
                             text-decoration: none;
                          
                             border: 1px solid gray;
                          
                             background-color: #FE2E64;
                          
                             color: black;
                          
                             padding: 8px;
                          
                             opacity: 0.5;
                          
                             font-family: Times New Roman;
                          
                          }
                          
                           
                          
                          .link_change a:hover {
                          
                             background-color: #9f9e9e;
                          
                          }
                          
                           
                          
                          
                          
                          
                          .link_change a[aria-current=page] {
                          
                             background-color:green;
                          }
                          
                          1. Hallo Joseba,

                            sorry, das hätte ich gleich sehen können.

                            grid-template ist eine Eigenschaft, die die Eigenschaftgen grid-template-rows, grid-template-columns und grid-template-areas zusammenfasst.

                            Das bedeutet: Wenn Du zuerst grid-template-columns aufschreibst und danach grid-template, wird grid-template-columns überschrieben.

                            Drei Möglichkeiten gibt es:

                            1. Ändere grid-template in grid-template-areas, dann musst Du aber auch die Definition der Zeilenhöhe in eine grid-template-rows Eigenschaft verschieben. Würde ich nicht empfehlen.
                            2. Ändere die Reihenfolge: erst grid-template, dann grid-template-columns. Würde ich auch nicht empfehlen
                            3. Verwende alle Möglichkeiten von grid-template und definiere die Spalten in dieser Eigenschaft:
                               grid-template-columns: 8% 74% 18%;
                               grid-template:
                                    "header header header" auto
                                    "nav nav nav" auto
                                    "main main gap1" 1em
                                    "main main werb" 10em
                                    "main main gap2" 3em
                                    "main main info" 1fr
                                    "footer footer footer" auto;
                            
                               grid-template:
                                    "header header header" auto
                                    "nav nav nav" auto
                                    "main main gap1" 1em
                                    "main main werb" 10em
                                    "main main gap2" 3em
                                    "main main info" 1fr
                                    "footer footer footer" auto / 8% 74% 18%;
                            

                            Rolf

                            --
                            sumpsi - posui - clusi
                            1. Dankeeeeeeeee ! , ich habe gemacht wie du sagst .

                              Aber eine Sache ich nicht verstehe....wenn das Probleme in main-Element ist , warum die losung in footer-Element legt ?

                               grid-template:
                                      "header header header" auto
                                      "nav nav nav" auto
                                      "main main gap1" 1em
                                      "main main werb" 10em
                                      "main main gap2" 3em
                                      "main main info" 1fr
                                      "footer footer footer" auto / 8% 74% 18%;
                              

                              dann, auf meine class werbung , mit margin-left: ...; kann der Größer verendert…

                              .werbung {
                                grid-area: werb;
                                background-color: red;
                                margin-left: 60px;
                               
                              
                              }
                              
                              1. Aber eine Sache ich nicht verstehe....wenn das Probleme in main-Element ist , warum die losung in footer-Element legt ?

                                ich denke dass die frage selbe antworte kann…

                                Weil keine Große Parameter auf Elementen gegeben habe ,geben dieser Parameter auf Elementen die alle Drei Spalten benutze , du hast mit nav-Element gemacht , aber ich werde gleiche Ergebnisse bekomme wenn würde ,"header header header" auto / 8% 74% 18%; oder "nav nav nav" auto / 8% 74% 18% gemacht ....

                              2. Hallo Joseba,

                                das hast Du falsch verstanden.

                                Die grid-template Eigenschaft fasst grid-template-areas, grid-template-rows und grid-template-columns zusammen.

                                Hier mal einzeln und mit kleinem Grid:

                                   grid-template-areas: "header header"
                                                        "nav    nav"
                                                        "main   werb"
                                                        "main   info"
                                                        "footer footer";
                                   grid-template-rows: auto auto 10em 1fr auto;
                                   grid-template-columns: 1fr 30em;
                                

                                In grid-template-areas stehen 5 Strings mit Namen, jeder String für eine Zeile im Grid. Und jeder String besteht aus zwei Namen, jeder für eine Spalte im Grid.

                                Ich zeige dir mal, wie sich grid-template aus Bausteinen zusammensetzt. Namen für Bausteine setze ich in [Klammern]:

                                grid-template: [zeilen] / [spalten];

                                [zeilen] = [zeile] [zeile] [zeile] ...
                                [zeile] = "[name] [name] [name]..." [höhe]
                                [spalten] = [breite] [breite] ...

                                Also: Ein grid-template besteht aus einem Zeilenteil, einem Schrägstrich und einem Spaltenteil.

                                Der Zeilenteil besteht aus Zeilen.

                                Eine Zeile ist ein String aus Namen und eine Höhe

                                Der Spaltenteil besteht aus Spaltenbreiten. Ich hätte in meinem Beispiel die Spaltenangaben besser in eine eigene Zeile geschrieben, damit es mehr wie eine Tabelle aussieht. Und ich füge mal ein paar Leerstellen ein, dann sieht man besser, wie alles zusammengehört:

                                   grid-template:
                                        "header header header" auto
                                        "nav    nav    nav"    auto
                                        "main   main   gap1"   1em
                                        "main   main   werb"   10em
                                        "main   main   gap2"   3em
                                        "main   main   info"   1fr
                                        "footer footer footer" auto
                                       / 8%     74%    18%;
                                

                                Man muss das nicht so ordentlich hinschreiben. CSS versteht es auch, wenn alles hintereinander steht:

                                   grid-template: "header header header" auto "nav nav nav" auto "main main gap1" 1em "main main werb" 10em "main main gap2" 3em "main main info" 1fr "footer footer footer" auto / 8% 74% 18%;
                                

                                Aber du und ich, wir verstehen es dann nicht mehr.

                                Rolf

                                --
                                sumpsi - posui - clusi
                                1. danke , ich denke jetzt habe verstande es...

                                  Weil wie du sagst;

                                  Die grid-template Eigenschaft fasst grid-template-areas, grid-template-rows und grid-template-columns zusammen.

                                  mit der zeichnung, / sagst das ende von grid-template-areas und grid-template-rows und nach dieser zeichnung , anfang die grid-template-columns...

                                  Ich wünsche dir eine Schöne Wochenende !

    2. @@Rolf B

      Hallo Joseba,

      im Moment steuerst Du die Platzierung von main und aside#furtherInformation über namen in grid-template-area. Damit kann man keine Überlappung erreichen. Dafür muss man das etwas anders machen. […] Zeilen- und Spalten-Nummern.

      Gridlinien können auch Namen haben. Diese kann man in grid-row und grid-column nutzen, aber auch in grid-area: named grid lines.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. Hej Joseba,

    bitte denke daran, dass der Fokus dem Quellcode folgt, wenn du mit der Tabulator-Taste durch eine Seite navigierst.

    Deshalb solltest du nicht die Reihenfolge generell umstellen (mir scheint, das hast du nicht vor, ich wollte aber noch mal darauf hinweisen, weil ich das wichtig finde).

    Die anderen haben ja schon zum eigentlichen Thema geantwortet…

    Marc

    --
    Ceterum censeo Google esse delendam
    1. danke für deine empfehlungen aber ich habe nicht gur verstande was du meinst....

      1. @@ liebewinter

        danke für deine empfehlungen aber ich habe nicht gur verstande was du meinst....

        Marc meinte das:

        “If you reorder things visually using grid layout, this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. In addition, the reordering will not change tab order. This means that someone navigating using the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line.
        The specification warns authors (the CSSWG term for web developers) not to do this reordering.”

        —MDN: CSS Grid Layout and Accessibility

        “Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.”
        —CSS Grid Layout Module Level 1, 4. Reordering and Accessibility

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann