Menu i navigations bar går på 2 linjer

Tilmeldt 20. Apr 07

Indlæg ialt: 16014

Slettet bruger Skrevet 11-12-2013 kl. 08:58

Hvor mange stjerner giver du? :

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?:)

Fra København

Tilmeldt 30. Mar 05

Indlæg ialt: 1324

Oxkjær Fra Altero Design Skrevet 11-12-2013 kl. 09:03

Hvor mange stjerner giver du? :

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.

Tilmeldt 20. Apr 07

Indlæg ialt: 16014

Slettet bruger Skrevet 11-12-2013 kl. 09:34

Hvor mange stjerner giver du? :

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?

Fra København

Tilmeldt 30. Mar 05

Indlæg ialt: 1324

Oxkjær Fra Altero Design Skrevet 11-12-2013 kl. 09:46

Hvor mange stjerner giver du? :

Nærmere width ....

Tilmeldt 13. Jul 12

Indlæg ialt: 206

dkchokk Skrevet 11-12-2013 kl. 09:49

Hvor mange stjerner giver du? :

Kopier CSS koden for menuen og post den her

Tilmeldt 20. Apr 07

Indlæg ialt: 16014

Slettet bruger Skrevet 11-12-2013 kl. 09:54

Hvor mange stjerner giver du? :

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;

}

Tilmeldt 13. Jul 12

Indlæg ialt: 206

dkchokk Skrevet 11-12-2013 kl. 10:07

Hvor mange stjerner giver du? :

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. :-)

Tilmeldt 20. Apr 07

Indlæg ialt: 16014

Slettet bruger Skrevet 11-12-2013 kl. 10:21

Hvor mange stjerner giver du? :

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

Fra Vamdrup

Tilmeldt 22. Dec 11

Indlæg ialt: 7

Trykkeriet.net Fra Trykkeriet Skrevet 12-12-2013 kl. 08:13

Hvor mange stjerner giver du? :

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