[CSS/HTML] horizontaal menu met gecentreerd logo

[ikkuhqhp]

Beste Tweakers,

Ik ben een website van Flash aan het omzetten naar HTML en CSS door alles opnieuw te schrijven en alleen de image bestanden ter herbruiken. Nou is een van de mooie dingen van de flash versie het menu. Het menu is een horizontaal menu met in het midden een logo. Nou krijg ik het niet voor elkaar om het logo in het midden van de bovenstaande container te krijgen en dan links van het logo de ene helft van de links en aan de rechter kant de andere helft. Mijn eerste idee was om in de navigation container 3 aparte containers te maken:

HTML:

        <div id="lijst">
            <div id="navigation">
                <ul>
                    <div id="menu_links">
                        <li><a href="#">Start</a></li>
                        <li><a href="#">Foto's</a></li>
                    </div>
                    <div id="menu_midden">
                        <li><img src="/images/logo.gif"></img></li>
                    </div>
                    <div id="menu_rechts">
                        <li><a href="#">Links</a></li>
                        <li><a href="#">Contact</a></li>
                    </div>
                </ul>
            </div>
        </div>

Met deze CSS:

Cascading Stylesheet:

#menu_links
{
position: absolute:
float: right;
}

#menu_midden
{
position: absolute:
left: 340px; /* "lijst" is 780px breed en het logo 100px. "Navigation" mag dus in totaal ook 780px breed zijn,
(780 - 100)/2 = 340. Dus als ik het logo op 340px binnen "navigation" zet, komt hij keurig in het midden!*/
}

#navigation li
{
display:inline;
}

Als ik hierbij de positie van het logo met CSS in het midden zette, kwam "menu_links" boven het logo en "menu_rechts" eronder.

Als volgende heb ik geprobeerd:

HTML:

        <div id="lijst">
            <div id="navigation">
                <ul>
                        <li><a href="#">Start</a></li>
                        <li><a href="#">Foto's</a></li>
                        <li><img src="/images/logo.gif"></img></li>
                        <li><a href="#">Links</a></li>
                        <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>

En dit werkt wel ongeveer, maar dat is natuurlijk gewoon toeval en zodra ik ga rommelen met het font en letter grootte zal het weer scheef gaan dus is het geen goede oplossing. Daarnaast heb ik op deze manier het probleem dat de tekst van de urls zich bevinden ter hoogte van de onderkant van het logo terwijl ik die in het midden wil hebben (verticaal gezien).

Wie kan mij helpen?

Alvast bedankt!

--edit---
Ter verduidelijking; links het orginele beeld in Flash en rechts wat ik krijg als ik alles in 1 list plaats. Ik probeer dus het linker beeld na te maken maar dan in HMTL en CSS.
...]

[ Voor 6% gewijzigd door ikkuhqhp op 24-04-2024 11:11 ]

[Bosmonster]

Halverwege wat extra marge in je menu en het logo absoluut er overheen positioneren?

DIV's in een UL mag natuurlijk niet

En IMG is self-closing, dus </img> hoeft ook niet..

[ Voor 17% gewijzigd door Bosmonster op 02-11-2011 17:47 ]

[kaesve]

Er zit een lelijke copy pasta fout in je voorbeeld: abolute: moet eindigen op ; (r3 en r9 van je css). Als je hip wil doen, nu je het toch aan het omzetten bent, zou ik geen div met id="lijst" doen en div id="navigation" vervangen met een <nav> tag. Een simpele oplossing voor je probleem dat misschien werkt is twee lijstjes maken;

HTML:

<nav>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
    <img src="mijnafbeelding.gif" />
    <ul>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
</nav>

Als je de ul's nu met css een breedte van 340px geeft en ze laat floaten en je img even op de goede breedte zet moet je volgens mij klaar zijn. De text in het midden (verticaal) zetten kan door de line-height van je links dezelfde hoogte te geven als je afbeelding en dan vertical-align: middle te doen.

[ikkuhqhp]

Oke, ik heb nu voor elkaar dat het logo in het midden staat en dat de menu's keurig floaten. De huidig code is nu:

HTML:

<div id="lijst">
    <div id="navigation">
        <div id="menu_links">
            <ul>
                <li><a href="#">Start</a></li>
                <li><a href="#">Foto's</a></li>
            </ul>
        </div>
        <div id="menu_logo">
                <li><img src="/images/logo.gif"></li>
        </div>
        <div id="menu_rechts">
            <ul>
                <li><a href="#">Links</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Het lijst element slaat op de lijst om het witte blok heen. (Zie de image beneden)

Met deze CSS:

Cascading Stylesheet:

#lijst
{
background-image:url('/images/lijst.gif');
background-repeat:no-repeat;
height: 634px;
width: 780px;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 20%;
left: 20%;
right: 20%;
}

#navigation
{
}

    #navigation li
    {
    display:inline;
    }
    
#menu_links
{
width: 340px;
float: left;
padding-left: 40px; padding-right: 0px;
margin-left: 0px;
}
    #menu_links ul
    {
    padding-left: 0px; padding-right: 40px;
    }

#menu_rechts
{
width: 340px;
float: right;
padding-left: 0px; padding-right: 40px;
}
    #menu_rechts ul
    {
    padding-left: 40px; padding-right: 0px;
    }

#menu_logo
{
position: absolute;
left: 340px;
}

Opvallend is wel dat ik de padding handmatig moest specificeren omdat Firefox automagisch bij beide menu_(links/rechts) er aan de linker kant padding toevoegde waardoor het uit het lood viel.

Nu alleen nog de links omlaag schroeven en dan ga ik aan de slag met het uiterlijk van de links!

Zo ziet het er nu uit:
[...]

[ Voor 16% gewijzigd door ikkuhqhp op 24-04-2024 11:11 ]

[R4gnax]

ikkuhqhp schreef op woensdag 02 november 2011 @ 18:28:
Opvallend is wel dat ik de padding handmatig moest specificeren omdat Firefox automagisch bij beide menu_(links/rechts) er aan de linker kant padding toevoegde waardoor het uit het lood viel.

De default style van een unordered list hanteert in firefox een linker padding van 40px. Daar is niets 'automagisch' aan.

Verder zijn de div elementen die je om je twee ul elementen heen hebt gezet compleet overbodig. Plaats gewoon meteen je styling op die twee ul elementen en je bent ook klaar.

[noes]

ikkuhqhp schreef op woensdag 02 november 2011 @ 18:28:

HTML:

        <div id="menu_logo">
                <li><img src="/images/logo.gif"></li>
        </div>

En een list item in een div mag niet: een listitem is onderdeel van een lijst.

Een handige tip wbt CSS en HTML is dat Classes veel handiger zijn dan Id's: wil je dat twee elementen er hetzelfde uitzien: geef ze dezelfde class. Id's moeten uniek zijn. Wellicht handig om dat even uit te zoeken: als je CSS op basis van tagname en/of class maakt, zal je merken dat je hierna heel snel extra, vergelijkbare, elementen kan toevoegen.

[OkkE]

Ik vind dat het logo helemaal niet binnen die ul moet staan. Het logo boven het menu in de HTML, daarna bijv. met position: absolute over het menu plaatsen en de items links/recht opdelen via CSS.

Even simpel om een idee te geven: http://jsfiddle.net/okke/xxtCx/3/

[Bosmonster]

Wat ik eerder al zei, en OkkE ook. Dat logo er absoluut overheen positioneren. Dat hoort helemaal niet in de UL.

Denk meer in structuur ipv opmaak.