не задаются отступы

Zeeeya · May 25, 2011

Здравствуйте!

В блочной верстке не могу задать отступы для текста в блоке...

без педдингов вот как все выглядит:

с заданием педдингов фоновое изображение почему-то смешается влево, а текст не меняется:

вот код:

#content {
background: url('images/fon.gif') repeat-y;
width:958px;
height: 100%;
margin:0 auto;
padding:100px;

Что не так? Помогите, пожалуйста!

Edited May 25, 2011 by Zeeeya

dostel1 · May 25, 2011

у тебя шапка в блоке content?

дай весь код html!!

Edited May 25, 2011 by dostel1

zSpx · May 25, 2011

Уменьши ширину блока на размер внутренних отступов.

Zeeeya · May 25, 2011

Уменьши ширину блока на размер внутренних отступов.

вот результат:

дай весь код html!!

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>"Персик Бис Смак"</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">r
<div id="header">Шапка</div>
<div id="menu">Меню</div>
<div id="content" >Содержимое страницы</div>
<div id="content_bottom">конец</div>
<div id="footer">Подвал</div>
</div>




 </body>
</html>

style.css:

body, html {
margin:0px;
padding:0px;
}
#maket {
background:url('images/background.jpg') repeat;
width:100%;
margin:0 auto;
}

#header {
background: url('images/header.gif');
width:960px;
height: 252px;
margin:0 auto;
}

#menu {
background:url('images/menu.gif');
height:78px;
width:1001px;
margin:0 auto;
}

#content {
background: url('images/fon.gif') repeat-y;
width:958px;
height: 100%;
margin:0 auto;
padding:100px;



}

#content_bottom 
{
background: url('images/fon_bottom.gif');
width:960px;
height: 66px;
margin:0 auto;
}

#footer {
background: url('images/footer.gif') no-repeat;
width:960px;
height: 173px;
margin:20px auto;
padding-bottom: 35px;
}

Edited May 25, 2011 by Zeeeya

zSpx · May 25, 2011

body {background:url('images/background.jpg') repeat;}

#maket {
width: 1001px;
}

#content {
width:758px;
}

внеси изменения.

Edited May 25, 2011 by zSpx

Zeeeya · May 25, 2011

zSpx, спасибо! Все поняла!

Zeeeya · June 30, 2011

Доброго времени суток всем!

Опять же про отступы: как в блоке опустить текст ссыли на электронку до стороки "Web disign" вот здесь:

Добавила в CSS "text-indent: 18em;" - текст подвинулся вправо, а опустить как? В индексном файле добавила несколько <br> - перестал работать text-indent... Помогите советом, пожалуйста! :rolleyes:

Edited June 30, 2011 by Zeeeya

ctpz · June 30, 2011

Доброго времени суток всем!
Опять же про отступы: как в блоке опустить текст ссыли на электронку до стороки "Web disign" вот здесь:
Добавила в CSS "text-indent: 18em;" - текст подвинулся вправо, а опустить как? В индексном файле добавила несколько <br> - перестал работать text-indent... Помогите советом, пожалуйста!

margin-top увеличь.

amelice · June 30, 2011

опять же нужен код.

Так как по рисунку у тебя два блока:сontent и footer? и текст в content'е?

если его нужно в футере писать, то зачем писать в контенте и опускать его в футер? тогда сайт у тебя по высоте еще растянется на размер сдвига.

Zeeeya · June 30, 2011

margin-top увеличивать нельзя, потому что текст находится в footer-е, будет разрыв поля...

css:

body, html {
background-color: #c1dc77; 
margin:0px;
padding:0px;


}

#wrap{
width: 1024px;
margin:0 auto;
}

#header {
background: url(../images/header.jpg) no-repeat;
width:1024px;
height: 323px;
margin:0 auto;
}

#topmenu{
background: url(../images/menu_fon.jpg) no-repeat;
width:1024px;
height: 95px;
}
#content {
background: url(../images/fon.jpg) repeat-y;
width:944px;
height: 100%;
margin:0 auto;
padding:40px;

text-align:left;
}



#bottom {
background: url(../images/bottom.jpg) no-repeat;
width:1024px;
height: 192px;
margin:0 auto;
padding-bottom: 35px;
text-indent: 18em; /* Отступ первой строки */
}

index:

<?php 
// no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="<?php echo $this->language; ?>" 
lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<title>Welcome to the Frontpage</title>
<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<link href="index.php?option=com_content&view=frontpage&format=feed&Itemid=1&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="index.php?option=com_content&view=frontpage&format=feed&Itemid=1&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/caption.js"></script>

<link rel="icon" href="/templates/persik/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/templates/persik/favicon.ico" type="image/x-icon"> 

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />


</head>

<body>
<!--оформление страницы сайта-->
<div id="wrap">
<!--блок шапки сайта header -->
<div id="header">
             <jdoc:include type="modules" name="top" style="xhtml" />шапка
</div>

	<!--вывод модуля горизонтального меню в позиции user2-->
<div id="topmenu" align="center" >
	          <jdoc:include type="modules" name="user2" style="xhtml" /> 



				   </div> 


<!--вывод содержимого контента-->     	 
     <div id="content"> 
      <jdoc:include type="component" style="xhtml" />контент
	  </div>



<!--вывод сведений модуля с информацией об авторских правах в позиции footer -->

<div id="bottom">
<jdoc:include type="modules" name="bottom" style="xhtml" />
<a href="malito: Ramus20@yandex.ru"> Ramus20@yandex.ru </a>
</div>


</div>




 </body>
</html>

Bonzash · June 30, 2011

Добавь #bottom, padding-top.

Edited June 30, 2011 by Bonzash

Zeeeya · June 30, 2011

Bonzash , то, что нужно! Спасибо!!!

Softlink · June 30, 2011

немного оффтоп, но, думаю, будет полезно.

Судя по ширине, сайт у вас фикс. Но чтобы он был без горизонтальной полосы прокрутки, надо ставить не 1024, а немного поменьше, 1018 например. Суть в том, что надо учитывать ширину скролла справа.

Zeeeya · July 9, 2011

Softlink , большое спасибо! очень-очень полезно!

psywalker · July 9, 2011

немного оффтоп, но, думаю, будет полезно.
Судя по ширине, сайт у вас фикс. Но чтобы он был без горизонтальной полосы прокрутки, надо ставить не 1024, а немного поменьше, 1018 например. Суть в том, что надо учитывать ширину скролла справа.

Нее, по идее 1000 в самый раз, так как ширина скролла везде может быть разная, так что чтобы наверняка, то 1000.

Sign In

не задаются отступы

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information