[Joomla] Krijg menu niet centered (CSS)

[Darkfreak]

Beste allemaal!

Ik ben echt geen held in webdesign en heb daarom een site die gebruik maakt van Joomla.
In de template die wij gebruiken zit echter ergens een foutje in de CSS (voor zover ik kan inschatten)

Onze site:
*snip* spam -> maak een (uitgeklede!) testcase a.u.b. Die kun je posten m.b.v. code tags en/of zelf "hosten" ergens op domein.nl/test/foo ofzo of je maakt een jsfiddle.

Afhankelijk van je schermresolutie zie je meteen al wat er mis is:
Het menu staat niet gecentreerd en beweegt niet mee als je de schermgrootte verandert.



Nou vermoed ik dat het met div class 'top-menu' of div id 'sgmenu' te maken heeft.
Ik heb bij beiden gister al met diverse combinaties van margins en positions gepuzzled maar niets goed gekregen.

In de CSS staat o.a. dit bij top-menu:
left: 460px;

Als ik dat echter weg haal gaat het helemaal mis

De plek tov de hoogte is goed.
De plek tov links en rechts moet (net als de header/rest van de site) centreert zijn en ook meebewegen.

Linkje naar de CSS:
*snip* Daar hebben we code tags voor. Post enkel relevante(!) CSS a.u.b.


Tips en ideeën met hoe ik dit goed krijg zijn welkom!

[ Voor 19% gewijzigd door RobIII op 26-03-2015 13:53 ]

[TERW_DAN]

Is er een reden dat je het menu niet in de header hebt staan, terwijl je hem daar wel (visueel) wilt laten zien?
Volgens mij als je 'm daarin zet wordt het een stuk makkelijker het net te stylen.

[Darkfreak]

Kan mijn OP niet aanpassen. Dus ik post de CSS die betrekking heeft op de header en het menu hier:

code:

header {
    background: url("../images/headerimg.jpg") no-repeat scroll center top transparent;
    height: 450px;
    margin: 0 auto;
    position: relative;
    width: 980px;
}

#headerwrapper {background: url("../images/headerimg.jpg") no-repeat scroll center top transparent;

    margin: 0 auto;}

header h1 a, header h1 a:link, header h1 a:visited, header h1 a:hover {color: #FF0000;
    color: #FFFFFF;
    font-family: "Trebuchet Ms",Tahoma,Verdana,Arial,sans-serif;
    letter-spacing: 1px;
    margin: 0;
    padding: 0 0 0 20px;
    text-align: center;
    text-decoration: none;
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    text-decoration: none;    
    }

header table {
    height: 36px;
    left: 22px;
    overflow: hidden;
    position: absolute;
    top: 60px;
    width: 500px;
}

header table, header table th, header table td {border: none !important;}
header table { width: 100%; }
header table td { height: 80px;vertical-align: middle; }

code:

.top-menu { 
    height: 33px;
    left: 460px;
    line-height: 45;
    margin: 0 auto 17px;
    padding: 12px 0;
    position: absolute;
    top: 77px;
    width: 740px;
}

#sgmenu {
    display: table;
        width: 658px ;
        margin-left: auto;
    margin-right: auto;
}

#sgmenu ul.menu:after { clear: both;content: "";display: block; }
#sgmenu ul.menu { float: right; padding: 0 10px;
}
#sgmenu ul li { float: left; position:relative;}
#sgmenu ul li a { display: block;white-space: nowrap }
#sgmenu ul li ul { position: absolute;visibility: hidden;}      

#sgmenu ul li ul li { float: none;}
#sgmenu ul li ul li a { width: auto; }

    
#sgmenu ul li ul {margin-top:30px;z-index:500; background:#fff;}
#sgmenu ul.menu li ul li a, #sgmenu ul.menu li ul li a:link, #sgmenu ul.menu li ul li a:visited {background: #fff;}
#sgmenu ul.menu li ul li a span {padding: 0 10px;}
#sgmenu ul.menu li ul li a:hover span{color: #000;}

#sgmenu ul.menu li a, #sgmenu ul.menu li a:link, #sgmenu ul.menu li a:visited {     
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    float: left;
    font-family: Tahoma,Verdana,sans-serif;
    font-size: 11px;
    font-weight: 400;
    height: 31px;
    line-height: 31px;
    margin: 0;
    padding: 0 10px;
}

#sgmenu ul.menu li a span:hover{
    text-decoration: underline;
    color: #65AFEE;
}

#sgmenu ul.menu li a span{
    float: left;
    padding: 0 15px 0 5px;
}

#sgmenu ul li ul { position: absolute; left:0; top: 30px; margin:0 !important; };

#sgmenu ul li ul li { float:none; clear:both; };

---

Zoals het nu is, is het zoals het in de template die ik gebruik standaard staat.
Ik heb er niets aan verandert.

Volgens mij zitten er gewoon wat 'slordigheden' in de opbouw van de CSS en de pagina's waardoor dit een probleem is?

Dit staat er nu:

code:

<header>
        <div class="sitename">
            <h1><a href="<?php echo $this->baseurl ?>"><?php echo $app->getCfg('sitename'); ?></a></h1>
        </div>
        
        <div id="search">
            <jdoc:include type="modules" name="position-0" />
        </div>
                
    </header>
    
    <div class="top-menu">

        <div id="sgmenu">
        <table cellspacing="0" cellpadding="0" border="0" style="margin:0 auto;">
        <tr>
        <td>
            <jdoc:include type="modules" name="menuload" />
        </td>   
        </tr>   
        </table>
        </div>

    </div>

Dus jij denkt dat dit het makkelijker maakt?

code:

<header>
        <div class="sitename">
            <h1><a href="<?php echo $this->baseurl ?>"><?php echo $app->getCfg('sitename'); ?></a></h1>
        </div>
        
        <div id="search">
            <jdoc:include type="modules" name="position-0" />
        </div>
                
    <div class="top-menu">

        <div id="sgmenu">
        <table cellspacing="0" cellpadding="0" border="0" style="margin:0 auto;">
        <tr>
        <td>
            <jdoc:include type="modules" name="menuload" />
        </td>   
        </tr>   
        </table>
        </div>

    </div>

</header>

Excuses voor mijn (mogelijk) domme vraag ..
Ik ben echt een leek op dit gebied


@ modje:
Het was niet mijn intentie om te spammen oid.
Het leek mij handiger om gewoon een link naar de CSS aan te bieden ipv hele lappen van code-tags te plaatsen. Hoop dat het nu wel goed gedaan is

[ Voor 54% gewijzigd door Darkfreak op 26-03-2015 14:14 . Reden: CSS toegevoegd ]

[TERW_DAN]

Ik zou zeggen, laat die table weg (tenzij je een HEEL goede reden hebt om die daar te gebruiken, maar dat kan ik me eerlijk gezegd maar moeilijk voorstellen).

En verder is het handig om te elementen in de DOM te zetten op de plek waar je ze wilt hebben.

[Darkfreak]

Ik heb het top menu in de header geplaatst, de table verwijderd en iets in de CSS aangepast.
Het menu staat nu centraal en beweegt mee :D!