Zur Navigation

Fahrrad-Workshop umstellen auf Responsive-Webdesign

1 krieger98

Nachdem ich mit Hilfe von Jörg unsere Webseite Ferienwohnung-Krieger auf ein Responsive-Design umgestellt habe, möchte ich meinen Fahrrad-Workshop-Sprockhövel auch entsprechend umstellen. Als Vorlage verwende ich die Dateien von der Ferienwohnung. Ich habe mal eine Startseite als Testversion hoch geladen: http://s201291267.online.de/
Bei der Umsetzung der Daten vom Fahrrad-Workshop habe ich aber Probleme und komme nicht weiter: http://www.fahrrad-workshop-sprockhoevel.de/index.htm
Im Responsive-Webdesign sollte die obige Nawigation aus 2 Boxen bestehen wie auf der Hauptseite. Was muss in der CSS und in der htm noch einfügen? Ferner sollte das Kettenblatt(Bild) mit dem Link noch eingefügt werden.

19.06.2015 13:02

2 Jörg

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.

19.06.2015 17:08

4 Jörg

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

20.06.2015 09:42

1 Forenmitglied fand diesen Beitrag gut

5 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?






20.06.2015 16:52

6 krieger98

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/

22.06.2015 00:44

7 Jörg

In der linken Navigation (die sich dann unten befindet) würde ich den Wert für margin-bottom (und vielleicht auch noch für margin-right) erhöhen:

#wrapper > aside > nav li {
margin-bottom: 20px;
}

... in der ersten Reihe der oberen Navigation die Angabe für line-height:

#nav-main .row-1 a {
line-height: 32px;
}

Ggf. müssen dann noch die Höhen der Elternelemente angepasst werden.

22.06.2015 10:21

8 krieger98

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

22.06.2015 20:43

Beitrag schreiben (als Gast)





[BBCode-Hilfe]