CSS buttons lengte

[toetsenbord]

Hallo,

hier ben ik weer met een vraag:

Wanneer ik "knoppen" maak met behulp van CSS lukt dit aardig, maar de tekst is niet even lang en varieert de lengte van de knoppen dus ook.
Is er een manier om de lengte van een 'knop' vast te leggen en dat die ongeacht de tekst niet groter of kleiner wordt?

MVG

 

[ReZon]

width: 150px;

 

[toetsenbord]

Hallo,

Bedankt voor je antwoord. Ik heb het geprobeerd, maar de knoppen blijven de grootte die ze al hadden, dus verschillend. Ik doe iets fout, volgens mij.

De tekst staat in een tabel, die tabel heeft de id "navigation" gekregen en dit is de css-code:

#navigation a {
font-family: arial, helvetica, verdana;
font-size: 11pt;font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #ffffff;
text-decoration: none;
background-image: url(../Images/background1.png);
background-position: center ;
display: inline;
margin: 0px;
padding: 10px;
border-top-width: 0px;
border-right-width: 0px; 
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none; 
width: 150px;}

#navigation a:hover { 
font-family: arial, helvetica, verdana;
font-size: 11pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #000000;
text-decoration: none;
background-image: url(../Images/background2.png);
background-position: center;
display: inline;
margin: 0px;
padding: 10px;
border-top-width: 0px;		
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none; 
width:150px;}

Wat doe ik fout ?

 

[Sevo]

Je doeld dus op dat de tekst "even lang" is als die knop?

 

[toetsenbord]

Ongeveer, de tekst is iets groter dan de tekst, maar omdat niet alle teksten even lang zijn (bv. Home en Over Ons) zijn de knoppen zelf niet even groot.

Ik had graag gehad dat de knop Home even groot was als Over Ons en de rest van de knoppen.

 

[Sevo]

Dan moet je een vaste breedte moeten toevoegen aan alle knoppen. Wat betreft de tekst, die zul je moeten centreren.

 

[toetsenbord]

De tekst staat gecentreerd, maar hoe voeg ik een vaste breedte toe?

Ik heb het geprobeerd met width: 150px maar dat werkte niet (zie CSS vorig bericht) ?

 

[Sevo]

Online voorbeeldje?

 

[toetsenbord]

Helaas (nog) niet...
Heb ik mss iets verkeerd gedaan in de css code ?

 

[Sevo]

Nee ik kan geen foutje vinden. Misschien is het woord te groot voor de knop?

EDIT:
Dan kun je eventueel de breedte vergroten.

 

[toetsenbord]

Heb geprobeerd met width: 500px, maar zelfs dan veranderen de knoppen niet ...

 

[Sevo]

Vreemd, ik zou toch graag een online voorbeeldje zien.

 

[ReZon]

Hoe groot en hoog is je backgroud image?

 

[toetsenbord]

Ik ben nog maar beginner en mijn site is verre van af
Heb zelfs nog geen domein

Kan je iets aanvangen met een screenshotje ?

 

[toetsenbord]

@ ReZon

Mijn background image is veel groter, dan de knop zou dat er iets mee te maken kunnen hebben ? Ik probeer het even met een vaste kleur en laat zo meteen iets weten ...

EDIT:

Maakt niet uit, is net hetzelfde bij kleuren ...

 

[Sevo]

Hoe groot en hoog is je backgroud image?

Klopt heeft er verder niks mee te maken . Tevens kan een background-image geen hoogte hebben. Dan
praten we vaak over de div

Ik ben nog maar beginner en mijn site is verre van af
Heb zelfs nog geen domein

Kan je iets aanvangen met een screenshotje ?

Ja is goed

 

[toetsenbord]

Screenshot

In bijlage een screenshotje

 

[Sevo]

Ik zie niet het probleem.

 

[toetsenbord]

Bedoel je dat je niet weet hoe het komt of zie je het niet ?

De eerste knop is toch kleiner dan de tweede ? (Ik zou ze graag allemaal even lang hebben...)

 

[ReZon]

Mgag ik je stukje html dan test ik hier even