Zur Navigation

Link wird über den Boxenrand geschoben

1 krieger98

Ich habe in der Navigation " nav-main .row-2" einen Titel eingefügt " Zu Workshop". Jetzt wird der der letzte Link "Pedelc" über den Rand der Box geschoben bei einer "Bildschirmbreite kleiner 480 Pixel". Was muss in "responsive.css" verändert werden? http://www.fahrrad-workshop-sprockhoevel.de/
Der Grund der Änderung ist, ich möchte ich möchte das Wort "Workshop" aus den Links entfernen und nur einmal als Titel einfügen. http://www.fahrrad-workshop-sprockhoevel.de/Tipps.htm
/* Navigation untere Zeile */

#nav-main .row-2 {
height: 128px;
}
#nav-main .row-1 a, #nav-main .row-2 a {
line-height: 32px;
}
.workshop {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
}
.titel{
font: bold 16px verdana, sans-serif;
}
.nav-box li {
padding: 10px 0;
text-align: center;
font-size: 16px;
}
.nav-box span, .nav-box a {
display: inline;
float: none;
width: auto;
}
#content-bottom #links li {
padding: 10px 0;
}

20.12.2015 23:14 | geändert: 20.12.2015 23:17

2 Ranma (Gast)

Du versuchst, deinen Besuchern fest Schriftgrößen aufzuzwingen. So wird es immer auf mindestens der Hälfte aller gängigen Bildschirmformate anders aussehen als du dir das vorgestellt hast. Wegen der Vielzahl der gängigen Formate sind relative Angaben immer besser.
Ranma

21.12.2015 01:11

3 Jörg

/* Navigation untere Zeile */
#nav-main .row-2 {
height: 128px;
}

Der Selektor "#nav-main .row-2" bezieht sich auf das div mit dem hellblauen Hintergrund (was man z.B. mit der Firefox-Erweiterung Firebug sehen kann) - also musst du dessen height Angabe erhöhen, damit ein zusätzlicher Link reinpasst.

21.12.2015 13:20

4 krieger98

Zitat von Jörg
/* Navigation untere Zeile */
#nav-main .row-2 {
height: 128px;
}

Der Selektor "#nav-main .row-2" bezieht sich auf das div mit dem hellblauen Hintergrund (was man z.B. mit der Firefox-Erweiterung Firebug sehen kann) - also musst du dessen height Angabe erhöhen, damit ein zusätzlicher Link reinpasst.
Ich hatte das schon ausprobiert und den Wert erhöht. Daran liegt es nicht.
Die Anzahl der Zeichen in den Links sind ja weniger geworden. Es scheint ja daran zu liegen, dass der Eintrag "Zu Workshop" kein Link ist.

21.12.2015 14:59

5 Jörg

Auch die Höhe der Elternbox #nav-main muss noch um den gleichen Betrag erhöht werden:

/* Navigation */
#nav-main {
    height: 322px;
}

Der zusätzliche Abstand zwischen den Links "Rennrad" und "Trekkingrad" kommt übrigens durch das geschützte Leerzeichen (" ") zwischen diesen beiden Links zustande:

                    <a href="Rennrad_workshop.htm" title="Einstellungs-Anleitungen,Pflegetipps,Montage-Anleitungen für alle Radteile">
                    » Rennrad</a>&nbsp;<a href="Trekkingr_workshop.htm" title="Einstellungs-Anleitungen,Pflegetipps,Montage-Anleitungen für alle Radteile">» 
                    Trekkingrad</a> <a href="Elektrobike_workshop.htm">» Pedelec</a>

Wenn das "&nbsp;" entfernt wird, verschwindet auch diese Lücke

21.12.2015 16:36 | geändert: 21.12.2015 16:37

6 krieger98

Vielen Dank es hat geklappt !!!

21.12.2015 20:57

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]