navigatiebalk met 3 knoppen

[Merijnbosma]

Hallo,

Ik wil graag een navigatie balk in mijn site hebben met (maar) 3 knoppen, nu krijg ik op zich dat wel voor elkaar maar ik had dus 3 knoppen gemaakt mooi breed zodat ze ook brede schermen vullen. Ik heb ze op 33%, 34% en 33% gezet. allemaal prima. Alleen bij een kleiner scherm krimpt ie dus de hel knop inclusief de hoogte, hoe zorg ik ervoor dat die de zijkanten van de knoppen zeg maar "afknipt" en de hoogte dus blijft behouden.

Ik hoop dat ik het goed heb uitgelegd.

Groeten Merijn

 

[csshunter]

Hoi Merijn,
Zo te horen zijn je knoppen images, die als voorgrond-figuur in de html staan.
Als je bij een voorgrond-img de breedte-maat in % aangeeft en de hoogte-maat niet opgeeft, wordt bij een kleinere breedte het hele image geschaald. En dan krimpt dus ook de hoogte.
Als je bij een voorgrond-img de breedte-maat in % aangeeft en de hoogte-maat opgeeft in "harde pixels", blijft de hoogte behouden. Maar de hele knop wordt dan wel versmald, zodat alle letters dichter op elkaar komen te staan.

Met een voorgrond-image is het dus lastig om de zijkanten er af te knippen bij een smaller scherm. *)

Maar met een achtergrond-image kan het erg makkelijk!
Dan maak je in de html drie lege, eigenlijk transparante links aan met de breedte in % en de hoogte in px. Met css regel je dan dat het betreffende img er als background-img in komt, en dat dit altijd in het midden moet staan:

#item1 {
    background: url(images/knop1.png) no-repeat 50% 0;
    }

Wat er niet op past, wordt dan vanzelf niet getoond.
De images moeten wel lekker breed zijn, voor brede schermen; of je geeft een background-color op, die dan links en rechts van het img de rest opvult, dat is wel zo veilig.

Het mooiste is om van het menu een <ul> lijstje te maken, waarin je eerste twee items je naar links laat drijven {float:left}. Als je die voor die twee een breedte-% opgeeft van 33.33%, vult het laatste item altijd de rest op. Dan kan een browser zich ook niet verslikken in de afronding van de procenten.
Nodig is verder, dat je de <a>'s een {display:inline-block} meegeeft, dan vullen ze altijd de beschikbare ruimte op.

Met vriendelijke groet,
CSShunter
_________
*) Met de "clip" eigenschap zou het moeten kunnen, als je daarin met % gaat werken. Zie bv. de handleidinghtml.nl hierover.

 

[Merijnbosma]

Hey, bedankt voor de reactie en de goede uitleg ik kreeg inderdaad net na het posten zon zelfde idee haha en heb een bg image gemaakt van 1500 px breed, moet genoeg zijn toch? En daar overheen doorzichtige vakken met gekleurde tekst. Wil eigenlijk wel graag een ander lettertype wat een beetje bij de site pas dus ik ga denk ik nog afbeeldingen maken met tekst en transparante achtergrond.

De clip eigenschap zegt mij helemaal niks, zal het eens googlen. Ik ben net alles onder de knie aan het krijgen, ik heb 10 jaar geleden een beetje met html geknoeid maar er is zoveel bijgekomen aan talen en weet ik wat dat ik nog heel veel in te halen heb hehe

Bedankt!!!