[CSS] Menu centeren met variabele breedte & display block

woensdag 11 januari 2012 01:20

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Na behoorlijk wat gegoogled te hebben kom ik, tot frustratie aan toe, niet tot een oplossing van het volgende probleem:

Ik ben een menu in elkaar aan het zetten in html & css die een variabele breedte heeft waarbij het "display:block;" element erbij hoort. Daarnaast zitten er op de knoppen een "sliding door" effect. Nu wil ik dit menu dus centreren zonder een vaste breedte te geven, voor het geval dat wanneer de layout naar een CMS word geconverteerd en de links breder moeten worden.

Heb al behoorlijk wat lopen kloten met inline-blocks, floats en watniet, maar ik kom dus niet tot de oplossing die ik zoek; het menu centreren zonder een vaste breedte eraan te geven!

Kunnen jullie me misschien verder helpen? Dit is de html:

code:

<body>
    
    <div id="page-wrap">
    
        <nav>
            <ul>
                <li><a class="menu-slidedoor" href="#"><span>Home</span></a></li>
                <li><a class="menu-slidedoor" href="#"><span>Over Mij</span></a></li>
                <li><a class="menu-slidedoor" href="#"><span>Portfolio</span></a></li>
                <li><a class="menu-slidedoor" href="#"><span>Producten</span></a></li>
                <li><a class="menu-slidedoor" href="#"><span>Contact</span></a></li>
            </ul>
        </nav>
        
    </div>
    
</body>

En hier de CSS:

code:

* {
    margin:0;
    padding:0;
}

body {
    
}

article, aside, figure, footer, header, nav, section {display: block;}

#page-wrap {
    margin:0 auto;
    width:900px;
    height:200px;
    background:#999;
}

nav ul {
    list-style-type:none;
}

a.menu-slidedoor span {
    background:url(../images/buttonbg-L.png) no-repeat 0 0;
    display:block;
    line-height:32px;   /* 22px - iets met de tekst hoogte */
    padding:14px 0 13px 7px; /* 7px 0 5px 18px - 0px 0px 0px 0px[ruimte van rand links] */
    color:#000;
}

a.menu-slidedoor {
    background:url(../images/buttonbg-R.png) no-repeat top right;
    display:block;
    float:left;
    height:59px; /* 34px - ?totale hoogte button? */
    margin-right:49px; /* 6px - ruimte tussen de buttons */
    padding-right:6px; /* 20px - breedte image rechts */
    text-decoration:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
}

a.menu-slidedoor:hover span {
    background-position:0 -59px; /* 0 -34px */
    color: #fff;
}

a.menu-slidedoor:hover {
    background-position:right -59px; /* right -34px */
}

woensdag 11 januari 2012 01:37

Acties:

0 Henk 'm!

Patriot

Fulltime #whatpulsert

Om je nav een div met het id "nav-wrap", en dan deze CSS toevoegen:

Cascading Stylesheet:

#nav-wrap {
    float: left;
    left: 50%;
    position: relative;
}

nav {
    left: -50%;
    float: left;
    position: relative;
    display: block;
}

nav ul li {
    float: left;
}

Dat ziet er bij mij uit zoals ik denk dat het er uit moet zien, maar het kan natuurlijk zijn dat het dingen verknoeit die ik niet zie (zoals het sliding door effect, of bepaalde graphics die ik niet heb).

woensdag 11 januari 2012 01:50

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Verdomd zeg! Dit geeft hetzelfde resultaat als toen ik een vaste breedte opgaf aan één van de classes, alleen nu dus zonder vaste breedte. Bedankt!

Heb alleen nu wel hetzelfde probleem als wanneer ik een vaste breedte had opgegeven, namelijk dat het menu dichterbij de linker border zit van de "#page-wrap". Scheelt 49 pixels. Enig idee wat dit veroorzaakt? Want ik heb bij de vaste breedte ook al lopen zoeken naar een oplossing, maar kwam niet tot een conclusie waarbij het menu daadwerkelijk 100% variabel blijft.

update1:
Ah. Er zit een margin-right van 49 pixels op één van de classes, dit beukt de laatste button natuurlijk ook nog 49 pixels weg van de rechter rand. Ik ga is even op zoek naar een oplossing om de buttons uit elkaar te zetten zonder margin-right te gebruiken. Tips zijn welkom natuurlijk!

update2:
Oplossing, wat werkt in mijn situatie althans:

In plaats van margin-right:49px gebruik ik nu margin-left:24px en margin-right:24px. Die ene pixel neem ik wel voor lief

.

[ Voor 32% gewijzigd door Verwijderd op 11-01-2012 02:16 ]

woensdag 11 januari 2012 02:03

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css

Gebruik de edit knop (

) als je iets toe te voegen hebt; je topic herhaaldelijk omhoogschoppen is niet nodig en die melding staat er niet voor niets:

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 11 januari 2012 02:15

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Excuses! Ik zal even uitleggen wat er gebeurde. Ik was al driftig op zoek naar de edit knop, maar ik kon deze niet vinden dus had er daarom voor gekozen om maar via reacties verder te reageren. Wat blijkt nou, ik was niet ingelogd! Ik had mijn inloggegevens geplaatst bij de nieuwe post/reactie form waardoor ik dus niet ingelogd bleef op de site zelf, waardoor er dus geen edit knop bij mijn naam stond.

En ik maar zoeken met m'n vriendin naar die knop na jou reactie *slaat zichzelf voor kop*.

woensdag 11 januari 2012 09:00

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Misschien is dit ook nog interessant: http://csswizardry.com/20...ed-horizontal-navigation/

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 11 januari 2012 16:12

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bedankt. Zal ik later vandaag ook nog is even naar kijken en toepassen zodra ik tijd heb, laat nog wel even weten wat het resultaat was.

Onderwerpen