Fahrrad-Workshop umstellen auf Responsive-Webdesign

Die Navigation enthält bereits zwei Zeilen:

		<header>
			<!-- ... -->
			<nav>
				<div>
					<!-- Zeile 1 -->
				</div>
				<div>
					<!-- Zeile 2 -->
				</div>
			</nav>
		</header>

In der normalen Ansicht werden diese nebeneinander dargestellt:

#main > header > nav > div {
	display: inline-block;
	/* ... */
}

... bei einer Bildschirmbreite kleiner 640px dann aber untereinander:

@media (max-width: 640px) {
/* ... */
#main > header > nav > div {
	 display: block;
}
/* ... */
}

Wenn du auch oben im allgemeinen Bereich das 'display: block;' übernimmst, sollten auch bei größeren Bildschirmbreiten beide Zeilen untereinander angezeigt werden, sodass sie auch mehr Links aufnehmen können.

Damit auch bei Bildschirmbreiten kleiner 640px genug Platz ist für die zusätzlichen Links, sollte dort wiederum die Einstellung übernommen werden, die für Bildschirmbreiten kleiner 480px gilt:

#main > header > nav > div > a {
	display: block;
}

... also dass alle Links in der Navigation untereinander angezeigt werden.

Die zweite Zeile lässt sich mit dem Selektor :last-child ansprechen:

#main > header > nav > div:last-child {
    background-image: url("grafik/hintergrund-navi2.jpg");
    border-top: 1px solid #000;
}

Zitat von krieger98

Die Änderung habe ich durchgeführt und es hat geklappt. Ich möchte die Linkfarbe der unteren Box ändern wie in der Navigation auf der Linkseite (color: #009); . Wo muss ich das einfügen?
Durch die Erweiterung der obigen Boxen (für Desktop) werden die Links auf dem S4 nicht mehr richtig dargestellt und über den Rand geschoben und ineinander verschaltet. Wo muss ich diese Änderungen durchführen?
Dann noch eine Frage, kann ich im "div id="content" mit <pre> formatieren oder besser nicht?

Die Änderung der Linkfarbe habe hinbekommen. Siehe meine Änderungen in der CSS:
/* Navigation */
#nav-main {
margin-top:5px;
height:40px;
border:1px solid #333;
border-radius:6px;
background-color:#039;
text-align:center;
}
#nav-main a:last-child {
margin-right:0;
}

#nav-main .row-1 a {
margin-right:12px;
line-height:20px;
font-size:12px;
font-weight:bold;
color:#fffff0;
}
#nav-main .row-1 a:last-child {
margin-right:0;
}
#nav-main .row-1 a:hover {
background-color:#0cf;
}
#nav-main .row-1 a:active {
background-color:#fffff0;
}

#nav-main .row-2 {
height:19px;
border-top:1px solid #000;
background-image: url('grafik/hintergrund-navi2.jpg');
}
#nav-main .row-2 a {
margin-right:2px;
line-height:20px;
}
Durch die Änderungen wird von Google bemängelt das die Links für Mobile-Seiten zu Nahe an einander liegen. Was muss in der CSS-Datei im Bereich " ANGABEN FUER KLEINERE BILDSCHIRMBREITEN" noch ändern?
http://s201291267.online.de/

Bei einer Fenstergröße von 480 Pixel werden die Links in der obigen Navigation untereinander dargestellt. Von der Breite her passen 2 Links im Fenster. Was muss in der CSS ändern:
/* Bildschirmbreite kleiner 480 px */
@media (max-width: 480px) {
/* Kopfbereich */
#main > header {
height: auto;
}
/* Logo */
#logo img {
width: 100%;
}
/* Navigation */
#wrapper > aside > nav li {
margin-bottom: 20px;
}

#main > header > nav {
margin-bottom: 10px;
height: 115px;
}
#main > header > nav > div > a {
display: block;
}