Das CSS Grundgerüst 3

In diesem Teil des Webdesign-Workshops geht es an die Gestaltung des Navigationsbereiches…

Der Navigationsbereich:

@media all { 

/* 
CSS Gestaltung für die Navigation.
*/ 

nav { 
position: absolute; 
top: 97px; 
left: 5px; 
width: 210px; 
background-color: steelblue; 
color: white; 

margin-top: 5px; 
margin-right: 5px; 
margin-bottom: 5px; 
margin-left: 5px; 

border-top-width: 1px; 
border-right-width: 1px; 
border-bottom-width: 1px; 
border-left-width: 1px; 

border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 

border-top-color: black; 
border-right-color: black; 
border-bottom-color: black; 
border-left-color: black; 

padding-top: 10px; 
padding-right: 10px; 
padding-bottom: 10px; 
padding-left: 10px; 

font-family: Arial; 
font-size: smaller; 
} 

nav li { 
list-style-type: none; 
} 

nav a:link { 
color: white; 
background-color: steelblue; 
display: block; 
text-decoration: none; 
} 

nav a:visited { 
color: white; 
background-color: steelblue; 
display: block; 
text-decoration: none; 
} 

nav a:hover { 
background-color: white; 
color: black; 
display: block; 
text-decoration: none; 
} 

nav a:focus { 
color: black; 
background-color: white; 
display: block; 
text-decoration: none; 
} 

nav a:active { 
color: black; 
background-color: white; 
display: block; 
text-decoration: none; 
} 


} /* Ende von @media nicht löschen*/