Thread: Navigatiebar
-
03-01-2009, 20:43 #1Approved 9-lifer
- Registered
- 14/12/05
- Location
- Dilbeek
- Posts
- 10,473
- iTrader
- 20 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/40
Navigatiebar
Hey
Ik ben bezig aan een nieuwe site, maar ik stuit op wat problemen met de navigatiebar.
Ik heb hier een stukje online gezet:
Bart De Vos
Het is dus de bedoeling dat mijn navigatieknoppen er volledig op komen en indien nodig uitgerokken worden. Maar ik slaag er maar niet in.
Code tot dusver:
En dan nog even de CSS die hiervoor zou moeten zorgen:HTML Code:<div id="header"> <div id="navigation"> <ul> <li><a href=#>Home</a></li> <li><a href=#>Foto</a></li> <li><a href=#>Over</a></li> <li><a href=#>Link</a></li> <li><a href=#>Contact</a></li> </ul> </div> </div>
Ik heb al veel liggen proberen, ik denk dus dat het stukje CSS 'properder' kan.PHP Code:#navigation li a
{
background-image: url(../img/button.png);
background-size: 100%;
background-origin: content;
margin-top:110px;
height: 3em;
line-height: 3em;
float: left;
display: block;
text-decoration: none;
text-align: center;
font-family:Helvetica;
font-size:14px;
color:#FFF;
padding-left: 10px;
padding-right: 10px;
}
Iemand een ingeving?
Bedankt
Bartno votes
-
-
03-01-2009, 21:36 #2Approved 9liver
- Registered
- 18/01/04
- Location
- Melle
- Posts
- 10,535
- iTrader
- 56 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 27/102
De beste manier is om het rechte stuk van de knop te repeaten als background en de geronde hoeken in te stellen als 2 afbeeldingen langs de tekst.
“In terms of how we evaluate schooling, everything is about working by yourself. If you work with someone else, it’s called cheating. Once you get out in the real world, everything you do involves working with other people.”
PSN: Cycloon - Final Fantasy XIV: A realm reborn characterno votes
-
04-01-2009, 12:44 #3Approved 9-lifer
- Registered
- 14/12/05
- Location
- Dilbeek
- Posts
- 10,473
- iTrader
- 20 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/40
no votes
-
04-01-2009, 13:49 #4Approved 9liver
- Registered
- 18/01/04
- Location
- Melle
- Posts
- 10,535
- iTrader
- 56 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 27/102
Je snijdt gewoon die 2 randen af, je zet die rond uw tekst als image en het binnenste van uw knop maakt ge 1px lang en stelt ge in als achtergrond van uw div of li tag (of wat ge ook gebruikt).
“In terms of how we evaluate schooling, everything is about working by yourself. If you work with someone else, it’s called cheating. Once you get out in the real world, everything you do involves working with other people.”
PSN: Cycloon - Final Fantasy XIV: A realm reborn characterno votes
-
04-01-2009, 14:56 #5
je kan het ook gemakkelijker als is er met jouw methode helemaal niets mis hoor.
Je hebt een linkerdeel dat met afgeronde hoeken begint en mooi rechtdoor loopt, genoeg om een knop te vullen.
Dan heb je nog het rechtse, net genoeg om de ronding te hebben en ga je dat eraan hangen met een span.
Dan los je alles wat op met margin en padding.
Naamloos document
En als je dat niet goed vind is er nog altijd een JS manier.
Deze is volgens mij het eleganst
phatfusion : roundedcornersLast edited by j design; 04-01-2009 at 15:01.
Evulgo Media Where magic beginsno votes
-
04-01-2009, 15:39 #6Approved 9liver
- Registered
- 18/01/04
- Location
- Melle
- Posts
- 10,535
- iTrader
- 56 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 27/102
Jouw methode doet net hetzelfde maar dan op een minder elegante manier. Als jij een knop wil maken van 1500px breed (ok komt nauwelijks voor mja) dan is jouw afbeelding te kort. Terwijl als je met een 1px afbeelding werkt als achtergrond er nooit iets kan mis gaan en je bespaart ook nog eens bandbreedte.
“In terms of how we evaluate schooling, everything is about working by yourself. If you work with someone else, it’s called cheating. Once you get out in the real world, everything you do involves working with other people.”
PSN: Cycloon - Final Fantasy XIV: A realm reborn characterno votes
-
04-01-2009, 18:02 #7Approved 9-lifer
- Registered
- 14/12/05
- Location
- Dilbeek
- Posts
- 10,473
- iTrader
- 20 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/40
@Cycloon: Dan moet ik images voor de layout in mijn html zetten, en dat wil ik vermijden.
Nu heb ik dit:
Bart De Vos
Voor een of andere reden drijft het nu op en wel heel foute plaats, maar dat is zo erg niet, dat zal ik wel vinden denk ik.
De 2 afbeeldingen lopen door en dus zie ik de onderste (grotere) linker afbeelding nog onder mijn rechtse (kleiner) deel. Hoe los ik dat op?no votes
-
04-01-2009, 20:20 #8
Je hebt gelijk Cycloon, maar waar vind je een menuknop van 1500px

Het is mooier om met span te werken ipv img om de haverklap in de code een img te moeten zetten.
Das natuurlijk een kwestie van persoonlijke smaak.Evulgo Media Where magic beginsno votes
-
05-01-2009, 11:54 #9
Ik weet niet of je hier iets met bent:
Hoe maak ik afgeronde hover buttons in CSS ? | Web-portaalGratis flash banners maken zonder voorkennis ? - www.banner-ads.be
http://www.poker-promoties.be - Enkel en alleen de beste poker promoties & bonussenno votes
-
05-01-2009, 14:25 #10
@novaweb
Bedankt voor de verduidelijking, het is net hetzelfde van mij maar met uileg
Evulgo Media Where magic beginsno votes
