Verticaal menu blijft niet in verhouding met de rest bij zoomen

Status
Niet open voor verdere reacties.

markpc

Gebruiker
Lid geworden
28 jan 2013
Berichten
93
Hallo allemaal,

Ik ben sinds kort een beetje aan het experimenteren met CSS en HTML voor een kleine hobby website. Ik heb al een basis layout van een pagina gemaakt waar ik alle elementen zoals de header en de pagina inhoud een breedte gegeven van 75%. De header en de pagina inhoud blijven nu mooi even breed bij het zoomen. Dit wil ik ook graag met het menu doen, echter lukt hetzelfde trucje hier niet. Als ik het menu ook breedte 75% geef, is hij te smal maar wordt hij niet breder of smaller bij het zoomen. Op 77% breedte is het bijna goed qua breedte (ik wil hem graag precies zoals de header breedte) maar wordt hij breeder en smaller bij het zoomen.

Browser is Firefox 55.0.2 op Ubuntu MATE 17.04. Alles up to date.

Kan iemand mij hier bij helpen? Sorry voor de vage uitleg, maar het is ook een vaag probleem. Het beste is denk ik dat je zelf kijkt hoe het eruit ziet
(http://jsfiddle.net/tsk7a4mo/, hier kun je in real time experimenteren met mijn code)
 
ik wil hem graag precies zoals de header breedte
Dit lukt niet in css. Een <ul> met daarin li items kan je niet met % even groot maken als een ander element. Bij de html die je geeft kan je wel wat doen met @media. Zie hieronder.
Code:
/* default */
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: "Trebuchet MS",Helvetica,sans-serif;
    font-size: 14px;
    line-height: 1.3;
    background-color: #d0d3d4;
}
h1, h2, h3 {
    margin: 0;
    font-weight: normal;
    line-height: 1.1;
}
a:active, a:focus {
    outline: 0;
}
/* structure */
.header, .nav, .content {
    width: 75%;
    margin: 0 auto;
}
.header {
    padding: 12px 10px;
    background-color: #ff8c00;
    color: white;
}
.nav {
    background-color: #f7f7f7;
}
.content {
    padding: 20px 10px;
    background-color: #ecf0f1;
}
/* nav */
.nav ul, .nav ul li, .nav ul a {
    margin: 0;
    padding: 0;
}
.nav ul {
    list-style-type: none;
}
.nav ul li {
    float: left;
}
.nav ul a {
    display: block;
    padding: 12px 9px;
    font-size: 13px;
}
/* hierboven smartphone, hieronder tablet/desktop */
@media (min-width: 540px) {
    .nav ul a {
        padding: 16px 12px;
        font-size: 16px;
    }
}
.nav ul a, .nav ul a:focus {
    text-decoration: none;
    background-color: transparent;
    color: #ff8c00;
}
.nav ul a:hover, .nav ul a:active {
    text-decoration: none;
    background-color: #ff8c00;
    color: white;
}
/* clear 'float' elements (nicolasgallagher.com/micro-clearfix-hack) */
.nav:after, .nav:before {
    display: table;
    content: " ";
}
.nav:after {
    clear: both;
}
Suc6. Have fun.
 
Laatst bewerkt:
Dit lukt niet in css. Een <ul> met daarin li items kan je niet met % even groot maken als een ander element.

Zoiets dacht ik al. De code die je me gegeven hebt werkt precies zoals ik oorspronkelijk in gedachten had, hartstikke bedankt!
 
Veel suc6 met het leren van html en css :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan