Дипломник - Репутация: 3
- Webmoney BL: ?
| Добрый день, уважаемые. Вопрос следующий - делаю адаптивную верстку с @media запросами. 100% ширины body, процентные размеры картинок. Все складывалось замечательно, пока не дошло до блоков контента. У них я поставил background-ом картинку загнутого листа блокнота. Структура:
- верхний блок
- блок контента 100% ширины
- подвал
Внутри блока контента 3 квадратных блока с этим самым background-ом. При сужении нужно, чтобы размеры тоже сужались и в ширину, и в высоту. При сужении экрана они сужаются только в ширину, в высоту остаются как есть. А так же часть картинки в ширину убирается, а шрифт лезет вниз, за пределы блока контента. А нужно, чтобы блоки с background равномерно уменьшались в ширину и высоту, а вместе с ними и шрифт. Что посоветуете?
Код HTML: <!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="content"> <div class="main"> <a href="/"><img src="http://webmasters.ru/forum/images/SEGA_logo.png" class="logo"></a> <div class="skype"><a href="#"><img src="http://webmasters.ru/forum/images/skype1.png" class="skype1"></a> <p>Изучайте английский язык дистанционно!</p> </div> <div class="nav"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О компании</a></li> <li><a href="#">Предложения</a></li> <li><a href="#">Прайс</a></li> <li><a href="#">Вакансии</a></li> </ul> </div> </div> </div> <div class="news"> <div class="bar"> <div class="block1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel mi sem. Nam in leo vitae neque vulputate luctus nec non turpis.</p> </div> <div class="block2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel mi sem. Nam in leo vitae neque vulputate luctus nec non turpis.</p> </div> <div class="block3"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel mi sem. Nam in leo vitae neque vulputate luctus nec non turpis.</p> </div> </div> <div class="blog"> <div class="post"> <img src="http://webmasters.ru/forum/images/masters.jpg" width="300" height="300"> <h2>Online Education Advantages</h2> <p>Sed nulla eros, tempor at ultricies a, lacinia vel estsed notellus sed enim volutpat euismod at laoreet nibh.
Integer euismod suscipit consequat. Maecenas gravida, quam aliquam pretium vitae a nunc. Donec dolor arcu, lacinia iaculis; porttitor ac sapien? Proin imperdiet blandit metus, ut ultrices augue suscipit vel. Morbi vitae nisl tortor. Suspendisse facilisis velit quis ligula consequat interdum! Nulla tincidunt accumsan nunc, varius elementum lacus interdum in.Proin imperdiet blandit metus, ut ultrices augue suscipit vel. Morbi vitae nisl tortor. Suspendisse facilisis velit quis ligula</p> </div> </div> </div> <div class="footer"> <div class="info"><a href="/"><img src="http://webmasters.ru/forum/images/SEGA_logo.png" class="logo"></a></div> </div> </body> </html> CSS
Код: * {
padding: 0;
margin: 0;
}
h1, p {
margin-bottom: 30px;
}
body {
background: #41466b;
}
.content {
max-width: 1600px;
margin: 0 auto;
background: url(images/background.jpg);
padding-top: 100px;
overflow: hidden;
}
.main {
width: 75%;
margin: 0 auto;
}
.logo {
width: 25%;
margin-bottom: 7%;
margin-top: 3%;
}
.skype {
float: right;
font-size: 14px;
font-weight: bold;
color: #fff;
margin-top: 5%;
margin-right: 6%;
width: 30%;
}
.skype1 {
float: left;
margin-right: 3%;
width: 20%;
}
.skype p {
margin-top: 3%;
}
.nav {
margin-bottom: 120px;
height: 60px;
opacity: 0.9;
width: 100%;
}
.nav li {
float: left;
list-style: none;
padding: 28px 20px;
font-family: Arial, sans-serif;
height: 28px;
background: url(images/bg-nav.png) repeat;
}
.nav li:hover {
background: #303354;
opacity: 0.9;
}
.nav a {
display: block;
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.news {
background: url(images/content-inner.jpg);
overflow: hidden;
width: 100%;
opacity: 0.8;
}
.bar {
width: 75%;
margin: 0 auto;
}
.block1 {
background: url(images/block.png) no-repeat;
width: 25%;
float: left;
margin: 40px 10px;
}
.block2 {
background: url(images/block2.png) no-repeat;
width: 25%;
float: left;
margin: 40px 10px;
}
.block3 {
background: url(images/block.png) no-repeat;
width: 25%;
float: left;
margin: 40px 10px;
}
.block1 p {
margin: 50px 50px;
font-size: 14px;
font-weight: bold;
}
.block2 p {
margin: 50px 50px;
font-size: 14px;
font-weight: bold;
}
.block3 p {
margin: 50px 50px;
font-size: 14px;
font-weight: bold;
}
.blog {
color: #fff;
width: 1280px;
margin: 0 auto;
font-size: 16px;
}
.post {
width: 700px;
}
.post img {
float: left;
margin-right: 25px;
}
.footer {
max-width: 1600px;
margin: 0 auto;
background: url(images/background.jpg);
overflow: hidden;
}
.info {
width: 75%;
margin: 0 auto;
} Последний раз редактировалось Sperc; 21.11.2014 в 16:49. |