Responsives Webdesign 1 und 3 werden nun zu Responsives Webdesign 4 verbunden. Die Seite ändert nun die Farben und den Navigationsbereich…
Die Ausgangslage:
Das Layout “Responsives Webdesign 1“ ändert beim Verkleinern den Hintergrund auf die Farbe rot und den Kopfbereich auf die Farbe grün. Die Navigation wurde dabei aber sehr unschön über den Textbereich geschoben. Die Lösung wurde im letzten Artikel gezeigt und nun müssen und sollen beide Ansätze in einem einzigen Projekt verbunden werden.
Die Idee besteht nun darin, die normale Navigation auszublenden und eine Dropdown-Navigation im header-Bereich einzubauen.
Die index.html mit zwei Navigationen:
<header>
<nav2>
<ul>
<li><a href="index.html">Navigation</a>
<ul>
<li><a href="index.html">Seite 1</a></li>
<li><a href="index.html">Seite 2</a></li>
<li><a href="index.html">Seite 3</a></li>
<li><a href="index.html">Seite 4</a></li>
</ul>
</li>
</ul>
</nav2>
</header> <!-- Ende vom header-Element -->
<nav>
<ul>
<li><a href="index.html">Startseite 1</a></li>
<li><a href="index.html">Startseite 2</a></li>
<li><a href="index.html">Startseite 3</a></li>
<li><a href="index.html">Startseite 4</a></li>
</ul>
</nav>Jetzt braucht es CSS um die erste Navigation (nav) auszublenden und die zweite Navigation (nav2) im Kopfbereich (header) einzublenden. Die Datei “600.css“ soll dafür zuständig sein und die bisher noch ungenutzte Datei “galaxy.css“ wird entfernt.
Der CSS Code für die Datei “600.css“:
body {
background-color: red;
color: black;
}
header {
background-color: green;
}
nav {
position: absolute;
left: -9999px;
top: -9999px;
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 {
display: block;
list-style-type: none;
padding: 3px;
}
nav a:link {
color: black;
background-color: white;
display: block;
text-decoration: none;
padding: 3px;
}
nav a:visited {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
nav a:hover {
background-color: red;
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;
}
nav2{
position: absolute;
top: 10px;
left: 20px;
}
nav2 li {
display: block;
list-style-type: none;
padding: 3px;
}
nav2 li ul {
position: absolute;
left: -9999px;
top: -9999px;
}
nav2 li:hover ul {
left: 10px;
top: auto;
display: block;
width: 210px;
height: auto;
}
nav2 a:link {
color: black;
background-color: white;
display: block;
text-decoration: none;
padding: 3px;
}
nav2 a:visited {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
nav2 a:hover {
background-color: red;
color: black;
display: block;
text-decoration: none;
}
nav2 a:focus {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
nav2 a:active {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
main {
background-color: steelblue;
color: white;
margin-top: 3px;
margin-right: 5px;
margin-bottom:5px;
margin-left: 5px; /*war 241*/
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: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
font-family: Arial;
font-size: smaller;
}
main a:link {
color: white;
background-color: steelblue;
text-decoration: underline;
}
main a:visited {
color: white;
background-color: steelblue;
text-decoration: underline;
}
main a:hover {
color: black;
background-color: white;
text-decoration: underline;
}
main a:focus {
color: white;
background-color: steelblue;
text-decoration: underline;
}
main a:active {
color: white;
background-color: steelblue;
text-decoration: underline;
}
Der CSS Code für die Datei “06_navibereich.css“:
@media all {
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 {
display: block;
list-style-type: none;
padding: 3px;
}
nav a:link {
color: black;
background-color: white;
display: block;
text-decoration: none;
padding: 3px;
}
nav a:visited {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
nav a:hover {
background-color: red;
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;
}
nav2 {
position: absolute;
left: -9999px;
top: -9999px;
}
} /* Ende von @media nicht löschen*/