Brugervenlighed & design på nettet

Svar: Menu i navigations bar går på 2 linjer

Trykkeriet.net — Thu, 12 Dec 2013 07:13:36 GMT

Hvis du kører med en fast bredde på dine menupunkter, så er der ingen grund til at have padding på menupunkterne.

Prøv at rette din CSS til:

#mainnav-menu a:link, #mainnav-menu a:visited {
    width: 6em; // menulinkets bredde
    line-height: 49px; // menuens højde - så står teksten vertikalt i midten
    text-align: center; // for at centrere din tekst
}

og husk at fjerne din padding fra menupunktet. Dog kan du godt have padding på i top og bund, hvis du ikke vil gøre brug af "line-height".

Med venlig hilsen
Thomas

Svar: Menu i navigations bar går på 2 linjer

Anonymous — Wed, 11 Dec 2013 09:21:46 GMT

Jeg prøvede at sætte en "width" på:

color: rgb(34, 34, 34);
text-decoration: none;
width: 6em;

Og nu står "About B.W." på en linje og som jeg vil have det. Men som problemet blev løst er et nyt problem opstået.

Når jeg går ind under "News" menuen, så lyser "News" op i en halvblå farve, men hele "oplysningen" af menuen er blevet alt for bred, og rager ind og næste menu: "Shop"
- Jeg kan ikke forklare det særlig godt så her kommer et nyt billede:)

Billede: http://imgur.com/cKfWyQB

Svar: Menu i navigations bar går på 2 linjer

dkchokk — Wed, 11 Dec 2013 09:07:40 GMT

Du har en fast bredde & højde på menuen, hvilket begrænser pladsen du har til menupunkterne. Så øg bredden på menuen eller reducer padding på menupunkterne. Lige nu er menupunktet "About RW" ikke bredt nok til at teksten kan stå på samme linje. :-)

Svar: Menu i navigations bar går på 2 linjer

Anonymous — Wed, 11 Dec 2013 08:54:09 GMT

Hele menuen:

float: left;
border-style: double;
border-width: 7px;
border-color: rgb(77, 77, 77);
position: relative;
top: 13px;
left: -60.2px;
width: 74em;
height: 49px;

}

Enkelte menu:

display: block;
padding: 13px 48px;
text-decoration: none;
text-transform: none;
font-size: 25px;

}

Svar: Menu i navigations bar går på 2 linjer

dkchokk — Wed, 11 Dec 2013 08:49:04 GMT

Kopier CSS koden for menuen og post den her

Svar: Menu i navigations bar går på 2 linjer

Oxkjær — Wed, 11 Dec 2013 08:46:08 GMT

Nærmere width ....

Svar: Menu i navigations bar går på 2 linjer

Anonymous — Wed, 11 Dec 2013 08:34:28 GMT

Desværre grunden til at jeg har uploadet et billede er fordi siden endnu ikke er online.

En fast bredde siger du. Noget der har noget med padding, margin at gøre?

Svar: Menu i navigations bar går på 2 linjer

Oxkjær — Wed, 11 Dec 2013 08:03:54 GMT

Det er jo nærmest umuligt at hjælpe ud fra et skærmprint, kan man ikke se hjemmesiden online?

Umiddelbart kunne det tyde på, at du har sat en fast bredde på hvert menupunkt, men det er kun et gæt.

Menu i navigations bar går på 2 linjer

Anonymous — Wed, 11 Dec 2013 07:58:08 GMT

Hej Amino.

Jeg er ved at oprette de forskellige menuer der skal være i min navigation bar på min hjemmeside. Sådan noget som Contact, F.A.Q., Shop og News osv.

Men da jeg prøvede at oprette en menu der hed "About B.W." Så vælger den at adskille "B.W." fra "About" sådan at det står på 2 linjer istedet for en linje som alle andre menuer.

Her er et billede: http://imgur.com/9L8y8p5

På billedet ser i min navigation bar, og i kan tydelig se fejlen med det samme.
Har prøvet at kigge på en CSS egenskab der hedder word-break, men uanset hvor jeg skriver word-break:normal; så kan begge ord ikke stå på 1 linje.
Her er hvad jeg fandt: http://www.w3schools.com/cssref/css3_pr_word-break.asp

Men er der nogen der har nogen idé til hvordan jeg kan fikse mit problem, og få begge ord til at stå på 1 linje?:)