Проблема с версткой

georgesi · 27.03.2012

Здравствуйте, друзья.
Я только начинаю верстать, пожэтому у меня возникают некоторые проблемы, помогите пожалуйста.
Вот смотрите, так выглядит обычно блок:

Но стоит мне добавить в последний блок div текст в абзацы (), этот блок разрывается с верхним, вот как на скриншоте:

Очень прошу, помогите решить проблему. Заранее благодарен.

Volly · 27.03.2012

Попробуйте задать блоку нижний отступ равным нулю.
А лучше покажите код или часть кода

georgesi · 27.03.2012

Да, вот код:

html:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	   <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Главная страница</title>
  <link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
  <div id="wrapper">
   <div id="header">
    <div id="logo"><a href="#"></a></div>
    <ul id="nav">
	 <li><a href="#" class="">Home</a></li>
	 <li><a href="#">About</a></li>
	 <li><a href="#">Contact</a></li>
	 <li><a href="#">Full Width</a></li>
	 <li><a href="#">Shortcodes</a></li>
    </ul>
   </div>
   <div id="headeLine"></div>
   <div class="clear"></div>
   <div id="date">
    <p>We have an awesome product for you but its not yet ready, take a look below for the countdown!</p>
   </div>
  </div>
</body>
</html>

И сам css файл:

Код:

#wrapper{
height:1198px;
width:1030px;
margin:0 auto;
outline:1px solid #808080;
}
/* Начало блока Header */
#header{
height:80px;
outline:0px solid #808080;
position:relative;
background-image:url(../images/headerBg.png);
background-repeat:no-repeat;
}
#logo{
width:158px;
height:25px;
background-image:url(../images/logo.png);
background-repeat:no-repeat;
position:absolute;
top:21px;
left:29px;
}
#logo a{
display:block;
height:25px;
cursor:pointer;
}
#nav{
width:520px;
height:17px;
position:absolute;
top:10px;
left:460px;
outline:0px solid #ff0000;
}
#nav li{
float:left;
margin-right:50px;

}
#nav li a{
text-decoration:none;
font:13px Arial, sans-serif;
color:#999999;
}
#nav li a.activ, #nav li a:hover{
color:#414141;
}
#headeLine{
height:3px;
background-image:url(../images/headerLine.png);
background-repeat:repeat-x;
background-color:#808080;
outline:0px solid #ff0000;
}
.clear{
clear:both;
}
/* Конец блока Head */
/* Начало блока date  */
#date{
height:321px;
position:relative;
outline:0px solid #ff0000;
background-color:#f1f1f1;
margin-bottom:0;
}

aspirin · 27.03.2012

Cкорее всего у стоят стандартные отступы сверху и снизу.
Добавьте в css

Код:

p{
margin: 0;
}

но правильней будет конечно указать какой-нибудь класс, к примеру

Код:

<p class="nomargin">sometext</p>

ну а классу задать те же нулевые значения для отступа

Код:

.nomargin{
margin: 0;
}

Если проблема не в этом - пришлите все исходники в личку, постараюсь Вам помочь.

georgesi · 27.03.2012

aspirin сказал(а):
p{margin: 0;}

спасибо вам, помогло прописать правила для ))

Den_Mak · 27.03.2012

ещё padding нулевой поставь.

Проблема с версткой

georgesi

Новичок

Volly

Well-Known Member

georgesi

Новичок

aspirin

Well-Known Member

georgesi

Новичок

Den_Mak

Царь и Бог!

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей