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

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

3 Jörg Kruse

/* 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.

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.

5 Jörg Kruse

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 " " entfernt wird, verschwindet auch diese Lücke

6 krieger98

Vielen Dank es hat geklappt !!!

nach oben

Link wird über den Boxenrand geschoben

Beitrag schreiben (als Gast)