22-10-2014, 03:46
(22-10-2014, 00:57)Kartofelek napisał(a): 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
