Witam,
stronę robię w szerokości 1280px.Zależy mi na jej responsywności.Ustawiłem pasek na górze i menu na 100% żeby podczas skalowania był na całej długości.Problem polega na tym że umieszczone elementy też idą na boki a nie zostają w tym samym miejscu na czym mi zależy.
Próbowałem margin:0 auto; ale bez skutku.
<div class="spolecznosc">
<a href="https://twitter.com/" class="twitter"></a>
<a href="https://www.facebook.com/" class="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>
.spolecznosc{
background: rgb(39,59,80);
background: -moz-linear-gradient(top, rgba(39,59,80,1) 0%, rgba(63,83,104,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(39,59,80,1)), color-stop(100%,rgba(63,83,104,1)));
background: -webkit-linear-gradient(top, rgba(39,59,80,1) 0%,rgba(63,83,104,1) 100%);
background: -o-linear-gradient(top, rgba(39,59,80,1) 0%,rgba(63,83,104,1) 100%);
background: -ms-linear-gradient(top, rgba(39,59,80,1) 0%,rgba(63,83,104,1) 100%);
background: linear-gradient(to bottom, rgba(39,59,80,1) 0%,rgba(63,83,104,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#273b50', endColorstr='#3f5368',GradientType=0 );
width: 100%;
height: 40px;
font-family: Myriad Pro;
margin:0 auto;
}
.spolecznosc ul{
color:#fff;
list-style:none;
margin-left:125px;
}
.spolecznosc ul li
{
list-style-type:none;
}
.facebook
{
background:url(../images/facebook.png);
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;
}
#logo{
background: rgb(36,118,118);
background: -moz-linear-gradient(top, rgba(36,118,118,1) 0%, rgba(52,137,137,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(36,118,118,1)), color-stop(100%,rgba(52,137,137,1)));
background: -webkit-linear-gradient(top, rgba(36,118,118,1) 0%,rgba(52,137,137,1) 100%);
background: -o-linear-gradient(top, rgba(36,118,118,1) 0%,rgba(52,137,137,1) 100%);
background: -ms-linear-gradient(top, rgba(36,118,118,1) 0%,rgba(52,137,137,1) 100%);
background: linear-gradient(to bottom, rgba(36,118,118,1) 0%,rgba(52,137,137,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#247676', endColorstr='#348989',GradientType=0 );
width: 100%;
height: 100px;
margin: 0 auto;
}
.LogoStrony a{font-family: Myriad Pro;
font-size: 50pt;
margin: 0 auto;}
#logo ul{
color:#fff;
list-style:none;
margin-left:125px;
max-width: 1280px;
}
#logo ul li{
text-shadow:3px 3px 3px #000;
float:left;
margin-left:40px;
}
#logo ul li.slogan{
font-size: 20pt;
font-family: Myriad Pro;
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
{
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;
text-decoration:none;
color:#a4a4a4;
outline:none;
}
#menu ul li a:hover{
text-decoration:none;
color:#ffc731;
}
Proszę o pomoc
Dodaję zdjęcia