Dopasowanie do okna przeglądarki

[przemex1994]

[Radian]

Wszystkie divy zawarte w header musiał byś dać na %, background w nich na size:100%; header dałeś dobrze: na width:100%


Edit; jeśli chcesz aby menu nie stykało się z górną krawędzią strony, nie dawaj "<br /><br />" tylko w stylach dla tego elementu (menu) daj margin-top

[Kartofelek]

Przecież sie dopasowuje. Co najwyżej musisz dać jeden maly breapoint i jakiś inny rodzaj menu

[przemex1994]

Przecież sie dopasowuje. Co najwyżej musisz dać jeden maly breapoint i jakiś inny rodzaj menu

teraz już tak pracuje nad tym cały czas zmiana wygląda następująco


css

Kod:

    body { margin:0px;
          
           }
    
    
          
  

          #logo{
            
        
        
        float:left;
        text-align:center;
        
}




         .menuomnie{
    
    
    background-repeat: no-repeat;
    float:left;
    

        
         }
    
    
          .menuoferta{
    
    
    
    background-repeat: no-repeat;
    float:left;

     }
    
    
    
    
     .menuportfolio{
    
    
    background-repeat: no-repeat;
    float:left;
     }
    
    
    
     .menukontakt {
    
    
    background-repeat: no-repeat;
    float:left;
    
     }
    
    
     @media (min-width: 1121px) {
    
    #header{height:236px; background-color: #06C; margin-top:25px;}
    #logo { height:236px; width:396px; background-image:url(../images/logo.jpg);  }
    .menuomnie { height:236px; width:236px; background-image:url(../images/omnie.jpg);  }
    .menuoferta { height:236px; width:236px; background-image:url(../images/oferta.jpg);    }
    .menuportfolio { height:236px; width:236px; background-image:url(../images/portfolio.jpg);  }
    .menukontakt { height:236px; width:236px; background-image:url(../images/kontakt.jpg);    }

}
    @media (max-width: 1463px) {
    
    #header{height:180px; background-color: #06C; margin-top:25px;}
    #logo { height:180px; width:302px; background-image:url(../images/skalowane/logo.jpg);  }
    .menuomnie { height:180px; width:180px; background-image:url(../images/skalowane/omnie.jpg);  }
    .menuoferta { height:180px; width:180px; background-image:url(../images/skalowane/oferta.jpg);  }
    .menuportfolio { height:180px; width:180px; background-image:url(../images/skalowane/portfolio.jpg);  }
    .menukontakt { height:180px; width:180px; background-image:url(../images/skalowane/kontakt.jpg); }

}


    @media (max-width: 1119px) {
    
    #header{height:140px; background-color: #06C; margin-top:25px;}
    #logo { height:140px; width:235px; background-image:url(../images/skalowane140/logo.jpg);  }
    .menuomnie { height:140px; width:140px; background-image:url(../images/skalowane140/omnie.jpg);  }
    .menuoferta { height:140px; width:140px; background-image:url(../images/skalowane140/oferta.jpg);  }
    .menuportfolio { height:140px; width:140px; background-image:url(../images/skalowane140/portfolio.jpg);  }
    .menukontakt { height:140px; width:140px; background-image:url(../images/skalowane140/kontakt.jpg); }

}


    @media (max-width: 895px) {
    
    #header{height:100px; background-color: #06C; margin-top:25px;}
    #logo { height:100px; width:168px; background-image:url(../images/skalowane100/logo.jpg);  }
    .menuomnie { height:100px; width:100px; background-image:url(../images/skalowane100/omnie.jpg);  }
    .menuoferta { height:100px; width:100px; background-image:url(../images/skalowane100/oferta.jpg);  }
    .menuportfolio { height:100px; width:100px; background-image:url(../images/skalowane100/portfolio.jpg);  }
    .menukontakt { height:100px; width:100px; background-image:url(../images/skalowane100/kontakt.jpg); }

}





    @media (max-width: 580px) {
    
    
    #logo { height:100%; width:100%; background-image:url(../images/skalowanemini/logo.jpg); }
    .menuomnie { height:100%; width:100%; background-image:url(../images/skalowanemini/omnie.jpg);  }
    .menuoferta { height:100%; width:100%; background-image:url(../images/skalowanemini/oferta.jpg);  }
    .menuportfolio { height:100%; width:100%; background-image:url(../images/skalowanemini/portfolio.jpg);  }
    .menukontakt { height:100%; width:100%; background-image:url(../images/skalowanemini/kontakt.jpg); }

}

html bez zmian

[Kartofelek]

Teraz dopiero zauwazylem, ze caly laj na obrazkach. W sumie czemu nie.
Chociaż na tyle elemtentów to to powinno być zbudowane z listy LI które by zawieraly linki
z .icon (koleczko) ktore by mialo w sobie svg
Dzięki temu bys mial 0 problemow ze skalowalnoscia (i obsluzyl retine), a dodatkowo mogl bys uzyc np animacji.
wiec pewnie gdybym ja to robil to u mnie element o mnie wygladal by tak:

Kod:

<li>
<a href="">
    <span class="icon">   ... tutaj svg .... </span>
    <strong>O mnie</strong>
</a>
</li>

Kod:

.menuomnie {
    background : #AD0D0D;
    width:236px;
    height:246px;
    float:left;
    position: relative;
}
.menuomnie .icon {
    position:absolute;
    left:50%;
    top:85px;
    margin-left:-52px;
    margin-top:-52px;
    width:104px;
    height:104px;
    background-color: #CF1717;
    border-radius:50%;
    display:block;
    line-height:105px;
    text-align:center;
    transition:0.5s;
}
.menuomnie strong {
    display:block;
    text-align:center;
    color:#fff;
    text-transform:uppercase;
    font-size:24px;
    position:absolute;
    bottom:40px;
    left:0;
    width:100%;
    font-family:sans-serif;
}

.menuomnie:hover .icon {
    transform:scale(1.3);
    background-color: #ED4B4B;
    box-shadow:0 0 10px #ED4B4B;
}

Takie: http://jsfiddle.net/42enubqj/