Divs rechts uitlijnen

Door Liefhebber Laravel op 14-03-2017 08:26

2.447 views

Hallo,

Ik zou graag een menu, dat gebouwd is met verschillende divs, rechts willen uitlijnen. Dit is de HTML:


<div class="menucontainer">
  <div class="rollovermenu"><a href="#">Menu 1</a></div>
  <div class="rollovermenu"><a href="#">Menu 2</a></div>
  <div class="rollovermenu"><a href="#">Menu 3</a></div>
</div>

Als ik in de css

.rollovermenu{ float: right; }

zet, dan wijzigt de volgorde (dan staat Menu 1 uiterst rechts, en Menu 2 links daarvan, enz...
De bedoeling is echter dat de 3 binnenste divs (en dit kunnen er meer of minder worden) in z'n geheel rechts uitgelijnd worden.

Bijkomend probleem is, dat ik de HTML zelf NIET kan wijzigen. Ik kan enkel de CSS aanpassen. (is een online tool waar niet aan de backend mag gekomen worden).
Anders had ik direct de menu veranderd naar een

<ul><li></li></ul>

, maar dat is dus geen mogelijkheid...

Wie kan me helpen?

Bedankt!

Joakim Broden

14-03-2017 11:53 gewijzigd op 14-03-2017 11:53

Is goed, stuur maar via prive bericht (antwoord hier wel posten zodat anderen er ook wat aan hebben ;-)).

[size=xsmall]Toevoeging op 14/03/2017 12:07:33:[/size]

Ik zie dat je mijn tip hebt gebruikt (ps de HTML is op de demo omgeving anders dan je hier op het forum zegt), je hebt de ".container-3" de "text-align: right;" gegeven en de ".container-3 .rollovermenu" een "display: inline-block;". Dat is goed, alleen via "div.rollovermenu" heeft het menu item nog een float left waardoor de items als nog naar links gaan. Als je de "float: left;" weghaalt van "div.rollovermenu" dan worden de menu items rechts uitgelijnd.

Trouwens, de HTML dat kan echt niet. Van programmeurs uit India krijg je zelfs nog betere HTML aangeleverd. Als ik jou was zou ik deze HTML niet aan nemen van die externe firma, wat een pruts werk is dit. Is die HTML gebouwd door een 5 jarige kleuter. Je moet hier echt niet akkoord mee gaan.

Liefhebber Laravel

14-03-2017 12:57 gewijzigd op 14-03-2017 12:58

Bedankt Joakim, die extra float left was inderdaad de reden waarom alles links bleef staan!

Wat de HTML betreft ben ik het volledig met je eens. Het is inderdaad totaal niet volgens de regels. Maar ik zal het ermee moeten doen! Ik heb al zeker de webshop afgescheurd van de algemene website. Zo is de algemene website toch tenminste in duidelijke HTML5 en CSS3 gebouwd wat toch al beter is voor de zoekmachines!

Nogmaals bedankt voor je hulp!

Thomas van den Heuvel

14-03-2017 16:12

Wellicht een minder mooie oplossing, maar je zou ook met een inline style de container rechts kunnen laten floaten? Dit lijkt mij een minimale hoeveelheid werk die het gewenste resultaat heeft? Ook een wat explicietere manier dat iets afwijkt van de norm (de css-klasse menucontainer).

Maar ik maak uit het bovenstaande op dat er meer niet pluis is :p.

Reageren

Inloggen om te reageren