Форматирование текста внутри дива.

usdg.lander · February 4, 2013

Добрый день!

Наверное задам глупый вопрос, но всю голову уже себе сломал, инет и форум гуглил (возможно плохо). Есть код:


<html>
<head>

<style type="text/css">

body
{
background-image: url(water1small.png), url(water2small.png),url(water3small.png),url(water4small.png);
margin: 0;
padding: 0;
}

.sky
{
background-image: url(sky1.png), url(sky2.png);
width: 100%;
height: 300px;
}

.header
{
width: 960px;
height: 300px;
margin: 0 auto;
}

.page
{
background-image: url(sky1.png), url(sky2.png);
background-position: 0 -300px;
background-repeat: repeat-x;
width: 100%;
}

.content
{
width: 960px;
margin: 0 auto;
}

.coast
{
background-image: url(sand2.png),url(sand1.png);
background-position: bottom;
background-repeat: repeat-x;
width: 100%;
height: 300px;
}

.boat
{
background-image: url(boat.png);
background-position: right;
background-repeat: no-repeat;
width: 960px;
height: 300px;
margin: 0 auto;
}

.sand
{
background-image: url(sandb2.png), url(sandb1.png);
height: 200px;
width: 100%;
}

.footer
{
width: 960px;
margin: 0 auto;
}


</style>
</head>
<body>

<div class="sky">
<div class="header">

</div>
</div>

<div class="page">
<div class="content">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo metus, convallis quis luctus nec, porta tempor magna. Donec euismod consequat leo, in volutpat turpis venenatis id. Phasellus vitae est a ligula vestibulum feugiat non sed tortor. Suspendisse in ligula lorem. Vivamus tincidunt vulputate fringilla. Donec ante neque, tempus interdum interdum et, aliquet at justo. Cras eget dolor eros. Cras tincidunt metus in tellus imperdiet tincidunt. Nulla gravida consequat malesuada. Nulla pulvinar hendrerit purus a tincidunt. Integer quis nisi non dolor consectetur consequat nec eu arcu. Morbi eleifend urna ullamcorper nulla tristique nec volutpat metus blandit. Nullam et tortor est, ac vestibulum libero. Pellentesque euismod placerat arcu, at interdum enim eleifend eu. Aliquam tristique rhoncus lectus sit amet viverra.

</div>
</div>

<div class="coast">
<div class="boat">

</div>
</div>

<div class="sand">
<div class="footer">

</div>
</div>


</body>
</html>

Пока внутри .content текст без форматирования, блоки .sky и .page плотно друг к другу находятся. Если же первой строкой идёт заголовок/параграф/список, то между .sky и .page образуется зазор, причём не в 4px, а больше. Как это исправить? Есть вариант, задавать h1,p,ul и т.д. margin: 0, но это как то не правильно. Заранее спасибо за ответ.

usdg.lander · February 4, 2013

Проблему решил. Помогло задание overflow: hidden.

Sign In

Форматирование текста внутри дива.

Question

usdg.lander

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

usdg.lander

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information