Od dłuższego czasu pracuję nad stroną... ale opadam już z sił, wygląda to gorzej niż myślałem
Właściwie nie zdawałem sobię sprawy ,że rozmiary mają takie znaczenie, byłem przekonany ,że przeglądarka wszystko wyświetli w podobnej formie na innych ekranach i sama to wszystko jakoś przeskaluje.
No i tutaj zonk, po ogromnych wysiłkach jakie wkładałem okazuje się ,że to nie takie proste.
Pracuję teraz na full hd, zmieniłem jednak rozdzielczość na 1024x768 i to co zobaczyłem mnie przeraziło!!
Jeden z wielu wielu elementów strony zajmuje cały ekran, a wszystko pozycjonowane przez absolute rozrzuca wszystko inne na boki...
Dla przykładu podam podstronę logowania:
Która w innej rozdzielczości wygląda tak:
Jak z tym walczyć?Co czytać? i Co robić ,żeby to się trzymało kupy wszystko?
CSSy wyglądają u mnie tak w tej podstronie:
Kod
body{
background-color:#000000;
margin-left:20%;
margin-right:20%;
padding:10px 10px 10px 10px;
font-family: sans-serif;
font-weight:bolder;}
h1,p,a{
color:white;
}
a:hover{
z-index:1;
color:red;
}
header{
z-index:2;
position:absolute;
top:10px;
}
footer{
font-size:12px;
position: absolute;
bottom:10px;
right:300px;
color:white;
}
ul,li{
z-index:1;
display:inline;
}
#angel{
position:absolute;top:30px;left:10%;z-index:0;}
#devil{
position:absolute;top:30px;right:10%;z-index:0;}
#login_input{
position:absolute;top:400px;left:875px;z-index:1;}
#valid1{
position:absolute;bottom:1px;right:1px;z-index:1;}
#valid2{
position:absolute;bottom:1px;right:88px;z-index:1;}
background-color:#000000;
margin-left:20%;
margin-right:20%;
padding:10px 10px 10px 10px;
font-family: sans-serif;
font-weight:bolder;}
h1,p,a{
color:white;
}
a:hover{
z-index:1;
color:red;
}
header{
z-index:2;
position:absolute;
top:10px;
}
footer{
font-size:12px;
position: absolute;
bottom:10px;
right:300px;
color:white;
}
ul,li{
z-index:1;
display:inline;
}
#angel{
position:absolute;top:30px;left:10%;z-index:0;}
#devil{
position:absolute;top:30px;right:10%;z-index:0;}
#login_input{
position:absolute;top:400px;left:875px;z-index:1;}
#valid1{
position:absolute;bottom:1px;right:1px;z-index:1;}
#valid2{
position:absolute;bottom:1px;right:88px;z-index:1;}
