Подскажите пожалуйста начинающему верстальщику.Как из резинового сайта сделать адаптивный.Где можно достать материал по этой теме?Подсказки и примеры приветствуются))))Вот код.Подскажите,что,к чему применять????
@font-face {
font-family:Futurelight;
src:url(fonts/arialbd.ttf);
}
*{
margin:0;
padding: 0;
}
body {
}
#header1{
background-color: #572700;
height: 70px;
width: 100%;
}
#wrap{
background: url("images/bg.png") no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
min-height: 1024px;
min-width: 1280px
}
#content{
margin: 0 auto;
width: 1280px;
}
.nav{
margin: 0 auto;
width: 1280px;
}
.nav ul li{
display: inline-block;
font-family: FutureLight;
font-size: 15px;
list-style: outside none none;
margin-left: 20px;
margin-top: 22px;
padding: 10px;
}
.nav ul{
margin-left: 10px;
margin-top: -15px;
}
.nav a{
color: #fff;
padding: 20px 0;
text-decoration: none;
text-transform: uppercase;
}
.nav li a:hover{
background-color: #d6bd8a;
color: #572700;
}
#loop button{
background-color: transparent;
border: medium none;
border-radius: 38px;
bottom: 26px;
margin-left: 976px;
position: relative;
}
#loop button img{
}
.search{
margin: 0 auto;
width: 1280px;
}
.search input[type="text"]{
border-radius: 20px;
margin-left: 855px;
margin-top: -28px;
position: absolute;
}
.number{
color: #d6bd8a;
margin-left: 1048px;
margin-top: -58px;
}
.number h1{
margin: 0 auto;
width: 212px;
}
.menu {
color: #fff;
}
.menu ul{
bottom: -65px;
font-size: 20px;
list-style: outside none none;
margin-left: 42px;
margin-top: 65px;;
position: relative;
text-decoration: none;
}
.menu a{
color: #fff;
text-decoration: none;
margin: 0px 0px 0px 8px;
}
.menu li a:hover {
color: #d6bd8a;
}
.menu ul li span{
background: url("images/7.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 15px;
width: 15px;
}
.menu ul li:hover{
color: #d6bd8a;
}
.menu ul li:hover span{
background-position: 0 -15px
}
.sause{
background: url("images/65.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 23px;
bottom: -65px;
height: 534px;
margin-left: 261px;
margin-top: -112px;
position: relative;
width: 268px;
}
.italia{
background: url("images/italia.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 307px;
margin-left: 645px;
margin-top: -473px;
width: 262px;
}
.bolognese{
background: url("images/bolognese.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 139px;
margin-left: 1015px;
margin-top: -336px;
width: 70px;
}
.mustard{
background: url("images/mustard.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 140px;
margin-left: 1110px;
margin-top: -139px;
width: 70px;
}
.text{
color: #fff;
font-size: 40px;
margin-left: 1013px;
margin-top: 50px;
}
.text1{
color: #fff;
font-size: 19px;
margin-left: 1013px;
margin-top: 30px;
font-family: futurelight;
}
#footer{
background: none repeat scroll 0 0 #f9f9f9;
height: 108px;
margin-top: 176px;
width: 100%;
}
Простой
