Помогите решить проблемму

AleksejR · October 25, 2010

Я начинающий любитель.

Помогите решить проблемму -

Без текста в div-e все в порядке. Но стоит вставить текст в header … смотрим

http://www.limon-room.narod.ru

в Опере и FF фоновая картинка шапки сползает вниз, а в IE – нормально.

Подскажите пожалуйста как мне испарвить стили. И, в чем причина?

Вот это

#header h1{margin: 10px 0 0 270px;}

странно работает.

По горизонтали (270px) все в порядке, а по вертикале фоновая картинка в Op и FF сползает на 10px, привязывается к тексту.

<body>
<div id="container">
		<div id="topshadow">
		</div>
		<div id="header">
<h1>Комнатный лимон</h1>
		</div>

css

body
{
		margin: 0;
		padding: 0;
		font: 90% verdana, georgia, serif;
		text-align: center;
		background: #E3D8BF;
}

h1, h2, h3
{
		font-weight: bold;
		line-height: normal;
		color: #7C2701;
		margin: 0 0 .3em 0;
}

#container
{
		margin: 0 auto;
		padding: 17px 0 0 0;
		width: 740px;
		text-align: left;
		background: #fff url(/fon/background.jpg) repeat-y 0 0;
}

#topshadow
{
		font-size: 1px;
		margin: 0;
		padding: 0;
		width: 740px;
		height: 11px;
		background: #E3D8BF url(/fon/top-shadow.jpg) no-repeat;
}

#header
{
		width: 700px;
		height: 165px;
		margin: 0 0 0 18px;
		padding: 0;
		background: #999999 url(/fon/head.jpg) no-repeat;
}

#header h1
{
		font-weight: bold;
		line-height: normal;
		color: #CC6633;
		margin: 10px 0 0 270px;
		padding: 0;
}

rus · October 25, 2010

а что вы хотели?

уберите в: #header h1{margin: 10px 0 0 270px;} 10px или #header h1{margin: 0 0 0 270px;} вот так.

AleksejR · October 25, 2010

Я хочу, чтобы текст опустился на 20 пикселей ниже верхней кромки картинки.

psywalker · October 25, 2010

У тебя же заголовок в хедаре, значит хедеру

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>

<body style="margin: 0;">
<div id="wrap" style="background: red; overflow: hidden; ">
	<div id="c" style="margin-top: 20px;background: green;">
		#header h1{margin: 10px 0 0 270px; overflow:hidden;} 
	</div>
</div>

</body>
</html>

AleksejR · October 25, 2010

испытал приведенный выше код - не совсем то... но overflow: hidden;

после некоторых изменений РАБОТАЕТ.

Спасибо.

Прокомментируйте пожалуйста, что это было - глюк или я напортачил?

Я самостоятельно нашел решение, но не уверен, что правильное...

Вот оно

#header h1
{
		line-height: 70px;
		font-size: 30px;

	color: #CC6633;
	margin: 0px 0px 0px 350px;
	padding: 0;
}

Что скажете ?

Edited October 25, 2010 by AleksejR

AleksejR · October 31, 2010

Спасибо за подсказку как исправить.

А, в чем причина? Как это называется? Я люблю понимать что сделал и почему.

По моим понятиям должно было работать и без свойства переполнения.

SelenIT · October 31, 2010

Предполагаю, что в схлопывании полей (второй сценарий).

Sign In

Помогите решить проблемму

Question

AleksejR

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

rus

Link to comment

Share on other sites

AleksejR

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

AleksejR

Link to comment

Share on other sites

AleksejR

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information