-
16-07-2010, 15:33 #1
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{
float: right;
text-align: right;
}
no votes
-
-
16-07-2010, 15:37 #2no votes
-
16-07-2010, 16:15 #3
via firebug zag ik het volgende staan: div class="row-top-menu clear" => iets te vlug geweest
maar
werkt ook nietPHP Code:.row-top-menu{
text-align: right;
float: right;
}
no votes
-
16-07-2010, 16:46 #4
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;
EDIT: maar dus wel float: right op .row-to-menuCode:<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>
Yu-gi-oh kaarten te koop klik!!no votes
-
16-07-2010, 16:49 #5
euhm, ja idd
ik snap het niet though, wat is uw (?) oplossing?
clear is gewoon een klasse die overgeërfd wordt
PHP Code:.clear {
overflow: hidden;
width: 100%;
}
no votes
-
16-07-2010, 16:51 #6
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
-
16-07-2010, 16:54 #7
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 oplossingno votes
-
16-07-2010, 16:55 #8
Ja, dat gaat ook in principe.
Yu-gi-oh kaarten te koop klik!!no votes
-
16-07-2010, 16:59 #9
Hoezo je verliest je horizontaal menu?
Yu-gi-oh kaarten te koop klik!!no votes
-
16-07-2010, 17:05 #10
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
-
16-07-2010, 17:05 #11
als ik die width: 100%; weglaat voor de klasse .clear dan heb ik geen horizontaal menu meer, maar een vertikaal

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
-
16-07-2010, 17:37 #12
Ik zou het zo doen:
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.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; }
En nog altijd:
<div class="row-top-menu"> ipv <div class="row-top-menu clear">Yu-gi-oh kaarten te koop klik!!no votes
-
16-07-2010, 18:22 #13
Ik vind uwen div schuifaf wel beestig.
Je zal je menu een width moeten geven en dan zou ik position: absolute; right:0 doen. Dat gaat waarschijnlijk het gemakkelijkste zijn.Code:</div> </div> </div> </div> 'Wheeeee!!" \o/ </div> </div> </div> </div> </div> </div> </div> </div>no votes
-
16-07-2010, 18:50 #14
http://jsbin.com/atiro3/2 Zoiets als dat kan een oplossing zijn.
no votes
-
16-07-2010, 19:58 #15Member
- 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
Gewoon googlen tot je een goede tutorial vindPHP 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-style: none;
width: 700px;
margin-top:0px;
padding-top:0px;
text-align:left;
font-weight:bold;
height:30px;
}
ul#buttons li {
margin-top: none;
display: inline;
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;}
Last edited by mensaap; 16-07-2010 at 20:05.
no votes

