Witam,
tworzę stronę internetową.Nie jakąś profesjonalną bo to moja pierwsza.Problem polega na tym że najpierw zrobiłem stronę (bez założenia że będzie skalowana)a teraz chce ją skalować i niestety ciężko mi to wychodzi.Ostatnio się dowiedziałem że strony robi się z zasadą "mobile first".Nie chce jej robić od początku tylko po prostu dodać do tego media queries.
Nie mogę zmienić w podanych elementach ani marginesów ani jakoś zwęzić tych elementów, zmniejszyć czcionki.Tylko i wyłącznie mogę manipulować opcją (width) ale też mi nie daje to efektów jakie bym chciał.
<div id="wrapper">
<div id="h1"><!-- Menu -->
<ul>
<a href="#" id="sub"></a>
<a href="https://twitter.com/" id="twitter"></a>
<a href="https://www.facebook.com/" id="facebook"></a>
</div><!-- Logo Strony -->
<div id="logo">
<ul>
<li class="LogoStrony"><a href="index.html">Logo strony</a></li>
<li class="slogan"><a href="index.html">slogan</a></li>
<div id="menu">
<ul>
<li class="Home"><a href="index.html">Home</a></li>
<li class="About"><a href="about.php">About</a></li>
<li class="Skateboarding"><a href="skate.php">Skateboarding</a></li>
<li class="Portfolio"><a href="gym.php">Gym</a></li>
<li class="Fight"><a href="fight.php">Fight</a></li>
<li class="Contact"><a href="kontakt.php">Contact</a></li>
</ul>
</div>
</div>
#wrapper {
margin:0 auto;
width:1280px; /* Change to desired width :) */
text-align: center;
}
#h1{
background: url(../images/1.png);
width: 1280px;
height: 40px;
font-family: Myriad Pro;
font-size: 13pt;
margin: 0 auto;
}
#h1 ul{
color:#fff;
list-style:none;
margin-left:125px;
}
#h1 ul li{ /*ustawienie :listy... */
text-shadow:3px 3px 3px #000;
float:left;
margin-top:12px;
margin-left:50px;
}
#h1 ul li a /*odpowiednik linku(tu wpisujemy np.zeby nie bylo podkresleń) */{
text-decoration:none;
color:#a4a4a4;
}
#h1 ul li a:hover{
text-decoration:none;
color:#ffc731;
}
#facebook
{
background:url(../images/facebook.png); /*ikonki (ustawianie ikonek) */
width:29px;
height:29px;
float:right;
margin-right:10px;
margin-top:5px;
display:block;
}
#facebook:hover
{
background:url(../images/facebook.png)0 29px; /*krycie (wymiana ikonek) */
}
#twitter {
background:url(../images/twitter.png);
width:31px;
height:31px;
float:right;
margin-right:10px;
margin-top:5px;
}
#twitter:hover
{
background:url(../images/twitter.png)0 31px;
}
#sub /*ikonki (ustawianie ikonek) */
{
background:url(../images/sub.png);
width:29px;
height:29px;
float:right;
margin-right:20px;
margin-top:5px;
}
#sub:hover /*krycie (wymiana ikonek) */
{
background:url(../images/sub.png)0 29px;
}
#pasekNaGorze {
background:url(../images/pasekNaGorze.png);
width:960px;
height:50px;
font-family: Myriad Pro;
font-size: 12pt;
margin:0 auto;
outline:none;
float:right;
}
#pasekNaGorze ul{
color:#fff;
list-style:none;
}
#pasekNaGorze ul li /*ustawienie :listy... */
{
text-shadow:3px 3px 3px #000;
float:left;
margin-top:18px;
margin-left:40px;
}
#pasekNaGorze ul li a /*odpowiednik linku(tu wpisujemy np.zeby nie bylo podkresleń) */
{
text-decoration:none;
color:#a4a4a4;
}
#pasekNaGorze ul li a:hover{
text-decoration:none;
color:ffc731;
}
#logo{
background: url(../images/2.png);
width: 1280px;
height: 100px;
font-family: Myriad Pro;
font-size: 50pt;
margin: 0 auto;
}
#logo ul{
color:#fff;
list-style:none;
margin-left:125px;
}
#logo ul li{ /*ustawienie :listy... */
text-shadow:3px 3px 3px #000;
float:left;
margin-left:40px;
}
#logo ul li.slogan{
font-size: 20pt;
font-family: Myriad Pro;
float:left;
margin-left:-200px;
margin-top:60px;
}
#logo ul li.slogan{
font-size: 20pt;
font-family: Myriad Pro;
float:left;
margin-left:-200px;
margin-top:60px;
}
#logo ul li a /*odpowiednik linku(tu wpisujemy np.zeby nie bylo podkresleń) */{
text-decoration:none;
color:#a4a4a4;
}
#menu{
font-family: Myriad Pro;
font-size: 13pt;
}
#menu ul{
color:#fff;
list-style:none;
margin-left:300px;
}
#menu ul li{ /*ustawienie :listy... */
text-shadow:3px 3px 3px #000;
margin-top:40px;
margin-left:50px;
}
#menu ul li a{
display:block; /*odpowiednik linku(tu wpisujemy np.zeby nie bylo podkresleń) */
text-decoration:none;
color:#a4a4a4;
outline:none;
}
#menu ul li a:hover{
text-decoration:none;
color:#ffc731;
}
i do tego chciałbym właśnie dodać media queries.Mam przygotowany taki już gotowy szkielet.Jeżeli chodzi o div "#h1 ul" to skalowanie działa dobrze ale innymi rzeczami nie mogę manipuować :)
*{box-sizing:border-box;}
@media (min-width: 1280px) {
#wrapper{width:1280px;}
#h1 ul{width:90%;}
/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
}
@media (max-width: 1100px) and (min-width: 1000px) {
#wrapper {width:950px;}
#h1 ul {width:76%;}
/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
}
@media (max-width: 1000px) and (min-width: 800px) {
#wrapper {width:750px;}
#h1 ul{width:67%;}
/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
}
@media (max-width: 800px) and (min-width: 500px) {
#wrapper {width:450px;}
#h1 ul{width:52%;}
/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
}
@media (max-width: 500px) {
#wrapper {width:90%;}
#h1 ul{width:30%;}
}
Chodzi mi tez o to czy ten kod nie jest czasem tak napisany przeze mnie że właśnie może uniemożliwiać skalowanie :) Jak wcześniej wspomniałem to moja pierwsza strona więc rozumiem że może być bałagan:)
Proszę o pomoc:)