[CSS] UL centreren zonder hardcoded breedte

vrijdag 20 november 2009 20:52

Acties:

0 Henk 'm!

Forumzwerver

Topicstarter

Hallo,

Ik ben nu al een poosje weer bezig met wat websites en CSS. Ik doe het al jaren wel wat, alleen nu dus wat actiever. Veel basisdingen van CSS heb ik wel door, maar bepaalde dingen blijven maar niet lukken. Ik heb er al de halve dag op gezocht en heb nu iets wat in de buurt komt maar het blijft behelpen.

Concreet probleem:
Ik heb een Un ordered list in een absoluut gepositioneerde div, deze list moet eigenlijk zijn li's horizontaal gecentreerd weergeven, óf de ul zelf moet gecentreerd zijn, ik weet niet wat beter is, en kon het uit zoekopdrachten ook niet echt op maken. Het resultaat moet echter zijn dat de menu-items gecentreerd zijn.

Ik had eerder al problemen dat ik LI hoogte genegeerd werd, terwijl ik deze nodig had op een bepaalde hoogte voor een hover-effect. Dit heb ik nu opgelost met display: block, waarna de li's wel collapsen. Dit doe ik weer teniet met een float: left;. Echter wil het menu hierdoor niet meer naar het midden, en ik heb geen idee hoe ik dit op moet lossen. Op Google zie ik dat veel meer mensen dit probleem hebben en ik zag ook geen duidelijke oplossing die hier werkte, behalve wat lelijke workarounds, terwijl ik liever wil leren wat nou echt de bedoelde manier is.

De enige oplossing die ik nu tijdelijk even gebruik is dat ik binnen de absoluut gepositioneerde div een div gooi waarin het menu weer staat. De inhoud van deze div laat ik centreren met margin: 0 auto; maar dit werkt alleen als ik de UL een breedte meegeef. Echter is deze breedte helemaal niet vaststaand, dus eigenlijk gaat dit ook niet werken (ik heb nu tijdelijk maar even de UL een random breedte meegegeven).

Hier even de gestripte code:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <title>Budgetklik</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/budgetklik/style.css?v" />
    </head>
    <body>
        <div id="container">
            <div id="header">
                <div id="logo">
                    <a href="http://www.klikeffect.nl/" target="_self"><img src="/sites/default/files/budgetklik_logo.png" alt="Budgetklik logo" title="Logo van Budgetklik" /></a>
                </div>
                
                <div id="slogan">
                    <h3>Lowbudget, super goed gevonden!</h3>

                </div>

En hier even de gestripte CSS:

Cascading Stylesheet:

body
{
    background-color: #E5E5E5;
    margin: 0px;
    padding: 0px;
}

*



/* Hoofddiv waar alles weer inzit */
#container
{
    width: 1020px;
    height: auto;
    
    
    /* Centreertruuk */
    margin-left: auto;
    margin-right: auto;
    
    margin-bottom: 50px;
    
    position: relative;
}


#header
{
    background-image: url(images/header.png);
    background-repeat: no-repeat;
    
    width: 100%;
    height: 145px;
    
    position: relative;
}

#logo
{
    padding-top: 25px;
    padding-left: 39px;
    
    width: 190px;
    height: 49px;
    
    position: relative;
}


#slogan
{
    right: 103px;
    bottom: 62px;
    
    position: absolute;
    
    
}
#slogan h3
{
    font-family: Arial, Helvetica, sans-serif;
    color: #999999;
    font-size: 18px;
}

#centerdiv
{
    margin: 0 auto;
    
    height: 41px;
}

#mainmenu
{
    width: 100%;
    height: 41px;
    margin: 0 auto;
    bottom: 0px;
    
    position: absolute;
}

#mainmenu ul
{
    width: 400px;
}

    
#mainmenu li
{       
    display: block;
    float: left;
    
    height: 41px;
}


#mainmenu li a
{
    color: #FFFFFF; 
    
    font-family: Arial, Helvetica, sans-serif;
    
    font-weight: bold;
    
    text-decoration: none;
    
    height: 100%;
    line-height: 41px;
    
    display: block;
    float: left;
    


}


.clearfix
{
    clear: both;    
}

#mainmenu li a:hover
{
    background-image: url(images/hoverback.png);
    background-repeat: no-repeat;
    background-position: top center;
}



#mainmenu .active
{
    background-image: url(images/hoverback.png);
    background-repeat: no-repeat;
    background-position: top center;
    
    color: #666666;
}

Ik hoop dat ik genoeg informatie heb gegeven. Hopelijk weet iemand een duwtje in de juiste richting, want ik loop hier de hele dag al tegen aan en zit een beetje vast.

Er kan zijn dat er nog wat ongebruikte css in zit, aangezien ik uit wanhoop maar even meerdere oplossingen probeerde, maar niets leidde echt tot een gecentreerd menu.

Hier live in actie, was de link vergeten

: http://www.budgetklik.squidmedia.nl

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

vrijdag 20 november 2009 23:05

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

display:inline-block is tegenwoordig goed bruikbaar (en voor oudere IE's gewoon inline)

Intentionally left blank

vrijdag 20 november 2009 23:08

Acties:

0 Henk 'm!

MsG

Forumzwerver

Topicstarter

Ik had dat even geprobeerd maar toen was echt alles kaput

, maar ik zal het nog eens proberen, dan kan die float: left; dus weg begrijp ik.

Thx voor het meedenken

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

vrijdag 20 november 2009 23:39

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Voorbeeldje op http://therealcrisp.xs4all.nl/meuk/inline-block.html

Intentionally left blank

vrijdag 20 november 2009 23:41

Acties:

0 Henk 'm!

WeeJeWel

En voor internet explorer.. http://code.google.com/p/ie7-js/

Homey — Critics are those without skills to create.

vrijdag 20 november 2009 23:42

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

WeeJeWel schreef op vrijdag 20 november 2009 @ 23:41:
En voor internet explorer.. http://code.google.com/p/ie7-js/

sure, als je IE nog trager wilt maken dan 'ie al is...

De lijst met issues is ook niet bepaald klein, en ik zie nergens expliciet dat dit ook inline-block ondersteuning toevoegd voor IE < 8

[ Voor 23% gewijzigd door crisp op 20-11-2009 23:44 ]

Intentionally left blank

vrijdag 20 november 2009 23:43

Acties:

0 Henk 'm!

WeeJeWel

Ach, dat is de verantwoordelijkheid van de gebruiker toch

Homey — Critics are those without skills to create.

vrijdag 20 november 2009 23:50

Acties:

0 Henk 'm!

MsG

Forumzwerver

Topicstarter

crisp schreef op vrijdag 20 november 2009 @ 23:39:
Voorbeeldje op http://therealcrisp.xs4all.nl/meuk/inline-block.html

Nice

ik ga ermee aan de slag.

Het werkt hier in IE8 en FF3.5 iig prima.

Maar dit punt waar ik en vele anderen tegen aanloop is dus wel een soort gebrek in CSS blijkbaar? Want ik lees dat inline-block nog wel redelijk houtjetouwtje is en niet officieel is

.

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

zaterdag 21 november 2009 00:06

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

MsG schreef op vrijdag 20 november 2009 @ 23:50:
[...]

Maar dit punt waar ik en vele anderen tegen aanloop is dus wel een soort gebrek in CSS blijkbaar? Want ik lees dat inline-block nog wel redelijk houtjetouwtje is en niet officieel is .

inline-block is gewoon CSS2.1, maar IE support het pas vanaf versie 8 en Firefox pas vanaf 3.0. Voor IE < 8 kan je iig gewoon dimensies opgeven voor inline elementen.

Intentionally left blank

maandag 23 november 2009 10:08

Acties:

0 Henk 'm!

MsG

Forumzwerver

Topicstarter

Ik kreeg nog een probleem extra omdat ik nog anchors had die ik alsnog niet kon defineren qua grootte, omdat alleen de list items een inline-block mee kregen. Zodra ik ze beide op display: inline-block zette kreeg ik in IE7 dat alles over elkaar heen ging liggen. Niet echt wenselijk. Nu heb ik de list-items enkel een display:inline meegegeven, zodat je ze niet kunt defineren, maar de anchors daarin een display: inline-block. In firebug zie je nu heel duidelijk dat de list items eigenlijk heel klein zijn, maar de anchors wel hun goede grootte krijgen. Ik weet niet of het helemaal 100% de bedoeling is zo, maar dit is de enige manier waar ik op kwam zodat het werkte in IE 8, FF3.5 en IE8 rendermode IE7.

EDIT: Het werkte wéér niet als ik mijn .active class ook defineerde als display: inline-block. Echter excpliciet defineren dat het om a.active gaat in de stylesheet deed het weer werken.

Wat een gekut soms zeg!

[ Voor 13% gewijzigd door MsG op 23-11-2009 10:15 ]

Denk om uw spatiegebruik. Dit scheelt Tweakers.net kostbare databaseruimte! | Groninger en geïnteresseerd in Domotica? Kom naar DomoticaGrunn

Onderwerpen