Menu probleem

Hey,
Iemand heeft voor me een layout based, maar op grotere/kleinere schermen is het menu niet goed, demo: www.quadhost.nl

Het menu word niet gecentreert en op grotere schermen is het menu niet 100% breed, heeft iemand een oplossing? Heb al meerdere dingen geprobeerd

Menu is met vaste breedte gemaakt, zolang de hele wereld exact hetzelfde scherm heeft is dat geen probleem, alleen is dat niet zo.
Gebruik width:100%; voor de achtergrond van het menu.
Vervolgens kan je aan diezelfde class/id ook text-align:center; meegeven om direct het menu netjes in het midden te zetten.
Anders moet je de menu dingen zelf in een div zetten met margin-left:auto; margin-right:auto;

Eleky schreef:

Menu is met vaste breedte gemaakt, zolang de hele wereld exact hetzelfde scherm heeft is dat geen probleem, alleen is dat niet zo.
Gebruik width:100%; voor de achtergrond van het menu.
Vervolgens kan je aan diezelfde class/id ook text-align:center; meegeven om direct het menu netjes in het midden te zetten.
Anders moet je de menu dingen zelf in een div zetten met margin-left:auto; margin-right:auto;

Beter margin: 0 auto;

Bedankt, ik zal het proberen!

Antonn schreef:

Eerdere citaten tonen

Eleky schreef:

Menu is met vaste breedte gemaakt, zolang de hele wereld exact hetzelfde scherm heeft is dat geen probleem, alleen is dat niet zo.

Gebruik width:100%; voor de achtergrond van het menu.
Vervolgens kan je aan diezelfde class/id ook text-align:center; meegeven om direct het menu netjes in het midden te zetten.
Anders moet je de menu dingen zelf in een div zetten met margin-left:auto; margin-right:auto;

Beter margin: 0 auto;

Waarom is dat beter?
Komt op exact hetzelfde neer, alleen is dan kort opgeschreven.

Hmm, margin-left: auto werkt niet..

toevoeging op 5 september 2012, 15:23:14:
Iemand een idee hoe ik het menu centreer?

Vaste width meegeven en margin: 0 auto;

Werkt niet, en layout is dan kapot..

Zet het menu in een div met de naam "menu" oid, doe daar mee wat ik in me vorige post zei

Die "top" en "left" weghalen, je krijgt hem alvast niet in het midden als die op 0 staan want zo blijft die linksboven plakkeuh.

die top maakt niet uit

Dus dit moet goed zijn?

body {
background:#0080C0 url(../img/bg.png);    
}
.box {
    background: #002D59;
    font-family:Verdana, Geneva, sans-serif
    border:0px;
    border-radius:9px;
    box-shadow:0 0 50px rgba(0,0,0,0.5);
}
#sddm
{    
    margin-left: auto ;
    margin-right: auto ;
    margin:0;
    padding: 0;
    top:0px;
    left:0px;
    position:absolute;
    z-index: 30;}

#submit:hover {
    font-weight:bold;
}
#submit {
background:url(../img/menubg.jpg); border:none;width:100%;height:35px; border-radius:5px    
}
#sddm li
{    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 25px arial}

#sddm li a
{    display: block;
    margin: 0 0px 0 0;
    padding: 4px 10px;
    width: 125px;
    background: #002D59;
    color: #FFF;
    padding-top:15px;
    padding-bottom:20px;
    text-align: center;
    text-decoration: none}

#sddm li a:hover
{    background: #003F7D}

#sddm div
{    position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #002D59;
    }


    #sddm div a
    {    position: relative;
        display: block;
        margin: 0;
        padding: 5px 10px;
        width: 125px;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background: #002D59;
        color: #FFF;
        font: 14px arial}

    #sddm div a:hover
    {    background: #048;
        color: #FFF;
        text-decoration:underline}

Videotube schreef:

Dus dit moet goed zijn?

body {
background:#0080C0 url(../img/bg.png);    
}
.box {
    background: #002D59;
    font-family:Verdana, Geneva, sans-serif
    border:0px;
    border-radius:9px;
    box-shadow:0 0 50px rgba(0,0,0,0.5);
}
#sddm
{    
    margin-left: auto ;
    margin-right: auto ;
    margin:0;
    padding: 0;
    top:0px;
    left:0px;
    position:absolute;
    z-index: 30;}

#submit:hover {
    font-weight:bold;
}
#submit {
background:url(../img/menubg.jpg); border:none;width:100%;height:35px; border-radius:5px    
}
#sddm li
{    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 25px arial}

#sddm li a
{    display: block;
    margin: 0 0px 0 0;
    padding: 4px 10px;
    width: 125px;
    background: #002D59;
    color: #FFF;
    padding-top:15px;
    padding-bottom:20px;
    text-align: center;
    text-decoration: none}

#sddm li a:hover
{    background: #003F7D}

#sddm div
{    position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #002D59;
    }


    #sddm div a
    {    position: relative;
        display: block;
        margin: 0;
        padding: 5px 10px;
        width: 125px;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background: #002D59;
        color: #FFF;
        font: 14px arial}

    #sddm div a:hover
    {    background: #048;
        color: #FFF;
        text-decoration:underline}

Probeer t

Ewan schreef:

die top maakt niet uit

Mijn foutje
En dan body { margin: 0; border: 0; padding: 0; } nog

Even testen..

toevoeging op 5 september 2012, 18:24:17:
Nope..
toevoeging op 5 september 2012, 18:27:54:
Degene met de goede code krijg 0,05!

BTW, als je deze layout door iemand hebt laten slicen, waarom spreek je hem er dan niet op aan?