+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Dopasowanie do okna przeglądarki (/thread-dopasowanie-do-okna-przegladarki)
Dopasowanie do okna przeglądarki - przemex1994 - 21-10-2014
RE: Dopasowanie do okna przeglądarki - Radian - 21-10-2014
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
RE: Dopasowanie do okna przeglądarki - Kartofelek - 22-10-2014
Przecież sie dopasowuje. Co najwyżej musisz dać jeden maly breapoint i jakiś inny rodzaj menu
RE: Dopasowanie do okna przeglądarki - przemex1994 - 22-10-2014
(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
RE: Dopasowanie do okna przeglądarki - Kartofelek - 23-10-2014
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/