Page 1 of 2 12 Last
  1. #1
    Dubbelpunt's Avatar
    Registered
    23/03/09
    Location
    Belgie
    Posts
    5,054
    iTrader
    5 (86%)
    Mentioned
    0 Post(s)

    Horizontaal menu uitlijnen naar rechts

    Welkom bij Moza Design

    Graag had ik mijn horizontaal menu bovenaan uitgelijnd naar rechts.
    Ik heb dit al geprobeerd voor de buitenste div, maar dat werkt dus niet

    PHP Code:
    .row-top-menu clear{
    floatright;
    text-alignright;

    no votes  

  2. #2
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    Quote Originally Posted by Webber View Post
    This quote is hidden because you are ignoring this member. Show
    Welkom bij Moza Design

    Graag had ik mijn horizontaal menu bovenaan uitgelijnd naar rechts.
    Ik heb dit al geprobeerd voor de buitenste div, maar dat werkt dus niet

    PHP Code:
    .row-top-menu clear{
    floatright;
    text-alignright;


    wat hangt die clear daar te doen? Dat is een css-class noch id
    no votes  

  3. #3
    Dubbelpunt's Avatar
    Registered
    23/03/09
    Location
    Belgie
    Posts
    5,054
    iTrader
    5 (86%)
    Mentioned
    0 Post(s)
    via firebug zag ik het volgende staan: div class="row-top-menu clear" => iets te vlug geweest

    maar

    PHP Code:
    .row-top-menu{
    text-alignright;
    floatright;

    werkt ook niet
    no votes  

  4. #4
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Ik ben een super leek (ja nog altijd), maar ik kijk gewoon naar firebug:


    Wat gebeurt er als je clear uit je divnaam verwijdert?

    dus;

    Code:
    <div class="row-top-menu">
     <div class="module">
    <ul id="mainlevel-nav">
    <li><a href="/index.php/nl/home.html" class="mainlevel-nav" >HOME</a></li>
    <li><a href="/index.php/nl/over-moza-design.html" class="mainlevel-nav" >OVER MOZA DESIGN</a></li>
    <li><a href="/index.php/nl/onze-specialiteit.html" class="mainlevel-nav" >SPECIALITEIT</a></li>
    <li><a href="/index.php/nl/andere-werken.html" class="mainlevel-nav" >WERKEN</a></li><li><a href="/index.php/nl/fotos.html" class="mainlevel-nav" >FOTO'S</a></li>
    <li><a href="/index.php/nl/contacteer-ons.html" class="mainlevel-nav" >CONTACT</a></li>
    </ul>
    </div>
    </div>
    EDIT: maar dus wel float: right op .row-to-menu
    Yu-gi-oh kaarten te koop klik!!
    no votes  

  5. #5
    Dubbelpunt's Avatar
    Registered
    23/03/09
    Location
    Belgie
    Posts
    5,054
    iTrader
    5 (86%)
    Mentioned
    0 Post(s)
    euhm, ja idd
    ik snap het niet though, wat is uw (?) oplossing?


    clear is gewoon een klasse die overgeërfd wordt

    PHP Code:
    .clear {
    overflowhidden;
    width100%;

    no votes  

  6. #6
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Werkt het?

    Wel ik zag bij firebug staan dat je ook de css van .clear krijgt toegewezen, en in die css staat with: 100%

    Je menu kreeg dus dezelfde width als zijn parent, en was daarom dus eigenlijk wel rechts uitgelijnd, maar dat zie je niet omdat het toch 100% width heeft..

    kBen slecht in uitleggen though..
    Yu-gi-oh kaarten te koop klik!!
    no votes  

  7. #7
    Dubbelpunt's Avatar
    Registered
    23/03/09
    Location
    Belgie
    Posts
    5,054
    iTrader
    5 (86%)
    Mentioned
    0 Post(s)
    dus die width verwijderen in de clear klasse?
    alles is dan uitgelijnd naar rechts, idd, maar dan verlies ik wel mijn horizontaal menu
    (opeens staat mijn menu vertikaal)

    dit is dus helaas geen oplossing
    no votes  

  8. #8
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Ja, dat gaat ook in principe.
    Yu-gi-oh kaarten te koop klik!!
    no votes  

  9. #9
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Hoezo je verliest je horizontaal menu?
    Yu-gi-oh kaarten te koop klik!!
    no votes  

  10. #10
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Kan je ook gewoon replyen ipv altijd uw post te editen? Is ellendig

    maar, hou in uw floatcss dan de width: 100% maar zet in uw html dat hij die float class niet erft (dus verwijder het uit uw html, zoals ik eerst zei)

    <div class="row-top-menu"> ipv <div class="row-top-menu clear">
    Yu-gi-oh kaarten te koop klik!!
    no votes  

  11. #11
    Dubbelpunt's Avatar
    Registered
    23/03/09
    Location
    Belgie
    Posts
    5,054
    iTrader
    5 (86%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by Homer` View Post
    This quote is hidden because you are ignoring this member. Show
    Hoezo je verliest je horizontaal menu?
    als ik die width: 100%; weglaat voor de klasse .clear dan heb ik geen horizontaal menu meer, maar een vertikaal


    Quote Originally Posted by Homer` View Post
    This quote is hidden because you are ignoring this member. Show
    maar, hou in uw floatcss dan de width: 100% maar zet in uw html dat hij die float class niet erft (dus verwijder het uit uw html, zoals ik eerst zei)

    <div class="row-top-menu"> ipv <div class="row-top-menu clear">
    dit werkt in IE maar niet in FF (in firefox heb ik nog steeds een vertikaal menu als ik die clear klasse verwijder)
    no votes  

  12. #12
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Ik zou het zo doen:

    Code:
    .row-top-menu {
    	list-style: none;
    	margin-right: 0.75em;
    	margin-left: auto;
    	width: 200px;
    }
    
    .row-top-menu li {
    	display: inline-block;
    	float: right;
    	margin-left: 2em;
    }
    De width van je ul moet je natuurlijk zelf aanpassen tot het past hé, maar normaal werkt dit wel. Margin-left van je li wel aanpassen naar eigen wensen.

    En nog altijd:

    <div class="row-top-menu"> ipv <div class="row-top-menu clear">
    Yu-gi-oh kaarten te koop klik!!
    no votes  

  13. #13
    Drone's Avatar
    Registered
    28/05/03
    Location
    bmb
    Posts
    744
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    15/15
    Ik vind uwen div schuifaf wel beestig.

    Code:
                                                    </div>
                                                </div>
                                            </div>
                                         </div>
            'Wheeeee!!" \o/         </div>
                                 </div>
                             </div>
                          </div>                 
                    </div>
                </div>
            </div>
        </div>
    Je zal je menu een width moeten geven en dan zou ik position: absolute; right:0 doen. Dat gaat waarschijnlijk het gemakkelijkste zijn.
    no votes  

  14. #14
    Drone's Avatar
    Registered
    28/05/03
    Location
    bmb
    Posts
    744
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    15/15
    http://jsbin.com/atiro3/2 Zoiets als dat kan een oplossing zijn.
    no votes  

  15. #15
    mensaap's Avatar
    Registered
    12/12/03
    Location
    Zonhoven
    Posts
    146
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    En dat voor een webdesign website :')

    Maarjah er zijn veel tutorials te vinden op google, zelf werk ik met

    PHP Code:
    <div id="menu">
         <
    ul id="buttons">
             <
    li id="bt_home_a"><a href="#"><span class="imHidden">Home</span></a></li>
          </
    ul>
    </
    div>

    #top_wrap #wrap #bottom #menu {
        
    text-align:center;
        
    margin:0 auto;
        
    padding-left:18px;
        
    width:1000px;
        
    height:30px;
        
    border-bottom:#000 1px solid;
    }

    ul#buttons {
        
    list-stylenone;
        
    width700px;
        
    margin-top:0px;
        
    padding-top:0px;
        
    text-align:left;
        
    font-weight:bold;
        
    height:30px;    
    }

    ul#buttons li {
        
    margin-topnone;
        
    displayinline;
        
    float:left;
    }


    #bt_home_a {text-align:center;height:29px;width:100px;border-left:#000 1px solid;border-right:#000 1px solid;}
    #bt_home_a a {background:transparent url(../images/bt_home_a.png) no-repeat;height:29px;}
    #bt_home_a a:hover {background:transparent url(../images/bt_home_h.png) no-repeat;height:29px;}
    #bt_home_a span {text-align:center;height:29px;width:100px;} 
    Gewoon googlen tot je een goede tutorial vind
    Last edited by mensaap; 16-07-2010 at 20:05.
    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