Wie style ich einen Link? - Ein Menu mit media queries für Geräte verschiedener Größe

Was haben wir hier gemacht?

Wir beginnen, indem wir eine besondere Anweisung zum Style-Tag oben im Kopfteil hinzufügen: Media query. Der Plural ist media queries. Wenn eine bestimmte Bedingung hinsichtlich der Größe erfüllt ist, werden die Anweisungen innerhalb der geschweiften Klammern ausgeführt, sonst nicht. Das hilft uns, Stile unseren Elementen (z.B. den Links) zuzuweisen und diese zu manipulieren. Man kann dann andere Stile zuweisen, je nachdem, wie groß der Bildschirm ist. Jetzt fehlen nur noch die Stile. Als minimale Breite geben wir 768 Pixel an. Das bedeutet, dass die Stile angewendet werden, wenn das Fenster größer als 768 Pixel ist:

@media (min-width: 768px) {
#menu a {
  display:inline;
}
}

Die Anweisung steht ganz unten im CSS. Wichtig ist, dass die Anweisungen für die kleinere Seite oben stehen, damit sie auch direkt angewendet werden (mobile first). Für die kleineren Fenster (im CSS oben), behandeln wir die Links als Blockelemente, so dass sie wie Bauklötze aufgetürmt werden. Und im unteren Teil (größere Fenster) verwandeln wir unsere Elemente in Inlinelementge, damit sie nebeneinander stehen. Sobald die CSS-Anweisungen dann für die größere Seite angewendet werden, werden die Stile für die kleinere Seite überschrieben. Deshalb stehen die Stile für die Mobile-Version oben. Einem Link kann man kein padding-bottom oder padding-top zuweisen, da es ein Inline-Element ist (Default-Zustand). Daher musst du es erst in ein Block-Element verwandeln. Du könntest jetzt padding-bottom anwenden, aber besser ist, die Zeilengröße zu vergrößern (mit line-height), damit der Link groß genug ist zum Anklicken. Hier das gesamte CSS:


<style>
/*css reset to default all NULL*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}


body { 
background:#FFFF95;
font-size:1em;
}


   #menu { 
   background:#444444;
   padding:40px;
   }
   
   #menu a { 
   text-decoration:none;
   font-size:1.6em;
   padding-left: 10px;
   display:block;
   line-height:1.8em;
   }
   
       
   #menu a:link {color:lime}
   #menu a:visited {color:DeepPink}
   #menu a:focus {color:yellow}
   #menu a:hover {color:Gold}   
   #menu a:active {color:white}
    
.text { 
	  color:white;
	  background:#555555;
	  padding:5px;
	  padding-bottom:15px;
}
h1{
   padding:20px;
   background:#30143C;
   color:white;
}
h2 { 
   padding:10px;
   background:#75143C;
   color:white;
}

pre{ 
    overflow:scroll;
    background-color:#0E4361;
    border: solid 1px #2C4E5A;
    padding-left:10px;
    color:#67F1BF;
    font-size:1.6em;
}

@media (min-width: 820px) {

#menu a {
	  display:inline;
	  border-right: 1px solid #C85000;
	  padding-right: 10px;
}


}


</style>