Archief - Horizontaal menu uitlijnen naar rechts

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
D

Dubbelpunt

Legacy Member
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 :p

PHP: 
.row-top-menu clear{
float: right;
text-align: right;
}
a

adrianhates

Legacy Member
Webber zei:
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 :p

PHP: 
.row-top-menu clear{
float: right;
text-align: right;
}
Klik om te vergroten...


wat hangt die clear daar te doen? :) Dat is een css-class noch id
D

Dubbelpunt

Legacy Member
via firebug zag ik het volgende staan: div class="row-top-menu clear" => iets te vlug geweest

maar

PHP: 
.row-top-menu{
text-align: right;
float: right;
}

werkt ook niet
H

Homer`

Legacy Member
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
D

Dubbelpunt

Legacy Member
euhm, ja idd
ik snap het niet though, wat is uw (?) oplossing? :x


clear is gewoon een klasse die overgeërfd wordt

PHP: 
.clear {
overflow: hidden;
width: 100%;
}
H

Homer`

Legacy Member
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..
D

Dubbelpunt

Legacy Member
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
H

Homer`

Legacy Member
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">
D

Dubbelpunt

Legacy Member
Homer` zei:
Hoezo je verliest je horizontaal menu?
Klik om te vergroten...

als ik die width: 100%; weglaat voor de klasse .clear dan heb ik geen horizontaal menu meer, maar een vertikaal :)


Homer` zei:
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">
Klik om te vergroten...

dit werkt in IE maar niet in FF (in firefox heb ik nog steeds een vertikaal menu als ik die clear klasse verwijder)
H

Homer`

Legacy Member
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">
D

Drone

Legacy Member
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.
m

mensaap

Legacy Member
En dat voor een webdesign website :')

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

PHP: 
<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;}

Gewoon googlen tot je een goede tutorial vind ;)
w

woony

Legacy Member
[drone]-[1.05];13569379 zei:
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.
Klik om te vergroten...

I lol'd :D
D

Dubbelpunt

Legacy Member
bedankt voor de mogelijke oplossingen, ik probeer ze allemaal na mijn verlof (vliegtuig vertrekt binnen 4u :D) ivm div schuifaf: blame joomla, not me
D

Dubbelpunt

Legacy Member
Homer` zei:
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">
Klik om te vergroten...

Welkom bij Moza Design

het lukt niet hoor, ook is mijn menu momenteel omgedraaid (home moet links staan op de eerste plaats, nu staat dat rechts op de laatste plaats), ik heb die width al alle mogelijke waarden proberen te geven, lukt niet, mijn menu is nu ook verborgen (de rechterkant is weggevallen, check het in het Frans)


kan er mij iemand helpen?
H

Homer`

Legacy Member
Code: 
#mainlevel-nav {
	list-style: none;
	margin-right: 0.75em;
	margin-left: auto;
	width: 200px;
}

#mainlevel-nav li {
	display: inline-block;
	float: right;
	margin-left: 2em;
}

? (bovenste is de id van uw ul, onderste uw list items zelf.)
D

Drone

Legacy Member
Nog is iets nieuw geprobeerd omdat je het eerste blijkbaar niet hebt gezien?

http://jsbin.com/uviwu3/

Ik weet wel niet hoe cross-browser word-spacing is. Het kan zijn dat het wel geen oplossing is voor jouw probleem want ik heb alles hier niet zo aandachtig gelezen.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan