Thread: Navigatiebar

  1. #1
    TiZon's Avatar
    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:
    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>
    En dan nog even de CSS die hiervoor zou moeten zorgen:
    PHP Code:
    #navigation li a
    {
        
    background-imageurl(../img/button.png);
        
    background-size100%;
        
    background-origincontent;
        
    margin-top:110px;
        
    height3em;
        
    line-height3em;
        
    floatleft;
        
    displayblock;
        
    text-decorationnone;
        
    text-aligncenter;
        
    font-family:Helvetica;
        
    font-size:14px;
        
    color:#FFF;
        
    padding-left10px;
        
    padding-right10px;

    Ik heb al veel liggen proberen, ik denk dus dat het stukje CSS 'properder' kan.

    Iemand een ingeving?

    Bedankt
    Bart
    PSN:TiZon Website Facebook Gallery YouTube Last.fm Twitter
    no votes  

  2. #2
    Cycloon's Avatar
    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 character
    no votes  

  3. #3
    TiZon's Avatar
    Registered
    14/12/05
    Location
    Dilbeek
    Posts
    10,473
    iTrader
    20 (100%)
    Mentioned
    0 Post(s)
    Reputation
    1/40
    En hoe doe ik dat juist het best?

    Als je ergens een voorbeeld weet, kan ik het zelf wel uitzoeken
    PSN:TiZon Website Facebook Gallery YouTube Last.fm Twitter
    no votes  

  4. #4
    Cycloon's Avatar
    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 character
    no votes  

  5. #5
    j design's Avatar
    Registered
    19/05/08
    Location
    Sjellebelle
    Posts
    731
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    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 : roundedcorners
    Last edited by j design; 04-01-2009 at 15:01.
    Evulgo Media Where magic begins
    no votes  

  6. #6
    Cycloon's Avatar
    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 character
    no votes  

  7. #7
    TiZon's Avatar
    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?
    PSN:TiZon Website Facebook Gallery YouTube Last.fm Twitter
    no votes  

  8. #8
    j design's Avatar
    Registered
    19/05/08
    Location
    Sjellebelle
    Posts
    731
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    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 begins
    no votes  

  9. #9
    Novaweb's Avatar
    Registered
    08/10/08
    Location
    Sint Antonius
    Posts
    221
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Ik weet niet of je hier iets met bent:

    Hoe maak ik afgeronde hover buttons in CSS ? | Web-portaal
    Gratis flash banners maken zonder voorkennis ? - www.banner-ads.be
    http://www.poker-promoties.be - Enkel en alleen de beste poker promoties & bonussen
    no votes  

  10. #10
    j design's Avatar
    Registered
    19/05/08
    Location
    Sjellebelle
    Posts
    731
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    @novaweb
    Bedankt voor de verduidelijking, het is net hetzelfde van mij maar met uileg
    Evulgo Media Where magic begins
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in