Hey,

ik heb een klein probleem ondervonden tijdens de slicing van mijn portfolio. Ik wil graag dat mijn menu links gecenteerd worden in het menu vlak, alleen zoals je het raad lukt dit niet! Ook wil ik een pijltje als mouseover hebben (zie hier onder alle voorbeelden) zoals hieronder weergegeven, ik was hier al mee opweg alleen lukt het mij niet te positioneren.

voorbeelden;
http://i37.tinypic.com/2ykcr53.jpg (zo hoort die)
http://i35.tinypic.com/8yxdg0.png (zo is die)

Zoals jullie zien staat de menu tekst niet in het midden en werkt die niet goed.

Hier zijn de codes:
http://www.codedump.be/code/914/ (html)
http://www.codedump.be/code/915/ (css)

De persoon die mij hierbij juist kan helpen krijgt van mij sowieso een positieve feedback voor de tijd!

Allereerst voor een horizontaal menu:
In de css binnen .menu li:

Code:

float: left;
position: inherit;

Veranderen door:

Code:

display: inline;

Voor het andere punt heb ik een live voorbeeld nodig zodat ik het via firefox kan bewerken.

Dit is het online voorbeeld:
http://eilermark.woelmuis.nl/buh.php

Origineel gepost door Joshua K

Dit is het online voorbeeld:
http://eilermark.woelmuis.nl/buh.php

Voor het pijltje:
Verander in de css de class .menu a:hover naar .menu li:hover.
Vervolgens voeg je binnen .menu li:hover het volgende toe:

Code:

background-position: center 2px;

Als het goed is staat het pijltje dan precies waar je hem wilt hebben.

Het werkte heel even tot dat ik refreshte was die niet meer goed. Hijs nu wel in het midden alleen de mouseover moet weer naar boven.

Gelieve de css en index te bekijken op het online voorbeeld:
www.eilermark.woelmuis.nl/buh.php

Sowieso dien je de div na je afsluitende </html> tag te verwijderen, die is enkel toegestaan in je body.
</body>
</html><div align="center">etc..</div>

Origineel gepost door Joshua K

Het werkte heel even tot dat ik refreshte was die niet meer goed. Hijs nu wel in het midden alleen de mouseover moet weer naar boven.

Gelieve de css en index te bekijken op het online voorbeeld:
www.eilermark.woelmuis.nl/buh.php

Probeer eens aan .menu li:hover het volgende toe te voegen:

Code:

padding-top: 23px

De oplossing vereist extra span tags, ik ken geen andere methode.

Dus je HTML word:

Code:

<li><span><a href="#">link</a></span></li>

En je CSS dit:

Code:

.menu li{
    display: inline-block;
    margin: 0 20px;
    text-align: center;
}

.menu li span {
        line-height: 60px;
}

Voorbeeld hier:
http://oukjeweb.com/test/

Laere, jouwn oplossing werkt maar helaas niet in IE.

Origineel gepost door Joshua K

Laere, jouwn oplossing werkt maar helaas niet in IE.

Heb het getest in IE8, werkt daar in ieder geval goed.
Voor IE7 werkt het nu ook.

Werkt al, Lodewijk hielp me via msn verder. Bedankt allen! :)