Отступы

areare · July 12, 2009

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

В мозиле отображается нормально, а в опере идет отступ сверху пикселей в 50.

стили:


div.header {
	margin:0 auto; 
	float:left; 
	width:33%;
}
body {
	margin: 0;
	padding: 0;
	background: #a68787 url(images/img01.gif) repeat-x left top;
	font-size: 13px;
	text-align: justify;
	color: #634e4e;
}

body, th, td, input, textarea, select, option {
	font-family: Arial, Times, serif;
}

h1, h2, h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #a68787;
}

h1 {
	font-size: 36px;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1em;
}

p, ul, ol {
	line-height: 200%;
}

blockquote {
	padding-left: 1em;
}

blockquote p, blockquote ul, blockquote ol {
	line-height: normal;
	font-style: italic;
}

a {
	color: #887171;
}

A { 
 text-decoration: none;
}
hr {
	display: none;
}
/* Navigation */
div#nav { margin-right: 10%;
	float:right;
	width:65%;
}
div#nav ul {
	list-style:none;
	margin:0;
	position:relative;
	float:right;
	top:40px;
}
div#nav ul li {
	float:left;
	padding:11px 12px;
	background:#5b4646 url('images/nav.jpg') repeat-x scroll top left;
	border-bottom:0px solid #5b4646;
}
div#nav ul li a, div.nav ul li a:visited {
	float:left;
	text-decoration:none;
	color:#ffffff;
	font-weight:normal;
	font-size:0.9em;
	font-family:Arial, Helvetica, sans-serif;
}
div#nav ul li.selected a, div#nav ul li.selected a:visited, div#nav ul li a:hover {
	border-top:0px solid #5b4646;
	border-left:0px solid #5b4646;
	background:#a9a8a8 url('images/nav-over.jpg') repeat-x scroll top left;
}

/* Header */

#header {
	width: 900px;
	height: 300px;
	margin: 0 auto;
	background: url(images/img04.jpg) no-repeat left top;
}
img04.jpg
{
display: block;
}
#header h1, #header p {
	float: right;
	margin: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
}

#header h1 {
	color: #634e4e;
	font-size: 74px;

}

#header p {
	font-size: 16px;
	color: #FFFFFF;
}

#header a {
	text-decoration: none;
	color: #FFB71C;
}

/* Page */

#page {
	width: 900px;
	margin: 0 auto;
}

/* Content */

#content {
	float: right;
	width: 560px;
	margin-top: -100px;
	margin-bottom: 30px;
	padding: 30px 20px;
	background: #EBEBEB;
	border: 10px solid #FFFFFF;
}

.post {
	padding: 0px 0px 0 0px;
}

.title {
	margin: 0;
	padding-bottom: 5px;
	padding-left: 30px;
	background: url(images/img05.gif) no-repeat 0px 2px;
	font-size: 24px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #836666;
}

.title a {
	text-decoration: none;
	color: #3B3513;
}

.pagetitle {
	border-bottom: 2px solid #0F0F0F;
}

.byline {
	margin: -10px 0px 0px 0px;
	padding-left: 33px;
	border-bottom: 1px solid #CCCCCC;
	color: #646464;
}

.meta {
	text-align: left;
	color: #646464;
	padding: 10px 10px;
	margin: 30px 0;
	background: url(images/img02.jpg) repeat-x left top;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.meta .more {
	background: url(images/img03.gif) no-repeat 0px 45%;
	padding-left: 10px;
}

.meta .comments {
	background: url(images/img03.gif) no-repeat 0px 45%;
	padding-left: 10px;
}
.meta a {
}

.entry {
	padding-bottom: 20px;
}

.navigation {
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.posts {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

.posts li {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #0F0F0F;
}

.posts h3 {
	margin: 0;
	font-weight: bold;
}

.posts p {
	margin: 0;
	line-height: normal;
}

.posts a {
}

/* Sidebar */

#sidebar {
	float: left;
	width: 250px;
	padding-top: 35px;
	color: #cfd2cf ;
}

#sidebar ul {
	margin: 0;
	padding: 0 0 20px 0;
	list-style: none;
}

#sidebar li {
}

#sidebar li ul {
	padding: 0px 21px 20px 10px;
}

#sidebar li li {
	border-bottom: 1px dotted #ebebeb;
	padding: 5px 0px;
}

#sidebar h2 {
	margin: 0;
	height: 35px;
	padding: 8px 0px 10px 13px;
	background: url(images/img03.gif) no-repeat left top;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	color: #ebebeb ;
}

#sidebar h2 a {
	background: url(images/img03.gif) no-repeat left 50%;
}

#sidebar a {
	text-decoration: none;
	color: #ebebeb;
}

#sidebar a:hover {
	text-decoration: none;
}

/* Footer */

#footer {
	clear: both;
	width: 100%;
	margin: 0;
	padding: 0;
	background: url(images/img02.gif) repeat-x left top;
	text-align: center;
	font-size: smaller;
	font-family: Arial, Helvetica, sans-serif;
	color: #ebebeb;
}

#footer p {
	margin: 0;
	padding: 20px 0px;
	text-transform: uppercase;
}

#footer p a {
	color: #ebebe;
}

и хтмл:


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start header -->
	<div id="nav">
		<ul>	
			<!-- MENU -->
			<li class="selected"><a href="index.html">000000</a></li>
			<li><a href="examples.html">000000000</a></li>
			<li><a href="#">0000000</a></li>
			<li><a href="#">000000000000</a></li>
			<li><a href="#">00000000</a></li>
			<li><a href="#">0000000</a></li>
			<li><a href="#">000000000</a></li>
			<!-- END MENU -->
		</ul>
	</div>
<div id="header">
	<h1>000000000000000  0000000</h1>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
	<!-- start content -->

	<div id="content">
		<div class="post">
			<h1 class="title">Заголовок</h1>
			<p class="byline"><small>Добавил кто-то, когда-то, зачем-то. Нас не спросил.</small></p>
			<div class="entry">
				<p>текст <strong><a href="http:/">ссылко</a> </strong>.</p>
			</div>
		</div>
					<div class="post">
			<h1 class="title">Заголовок</h1>
			<p class="byline"><small>Добавил кто-то, когда-то, зачем-то. Нас не спросил.</small></p>
			<div class="entry">
				<p>текст <strong><a href="http:/">ссылко</a> </strong>.</p>
			</div>
		</div>
		<div class="post">
			<h1 class="title">Заголовок</h1>
			<p class="byline"><small>Добавил кто-то, когда-то, зачем-то. Нас не спросил.</small></p>
			<div class="entry">
				<p>текст <strong><a href="http:/">ссылко</a> </strong>.</p>
			</div>
		</div>
		<div class="post">
			<h1 class="title">Заголовок</h1>
			<p class="byline"><small>Добавил кто-то, когда-то, зачем-то. Нас не спросил.</small></p>
			<div class="entry">
				<p>текст <strong><a href="http:/">ссылко</a> </strong>.</p>
			</div>
		</div>
	</div>
	<!-- end content -->
	<!-- start sidebar -->
	<div id="sidebar">
		<ul>
			<li>
				<h2>0000000000</h2>
				<ul>
					<li><a href="#">00000000000000</a></li>
					<li><a href="#">000000000</a></li>
					<li><a href="#">00000000</a></li>
				</ul>
			</li>

		</ul>
	</div>
	<!-- end sidebar -->
</div>
<!-- end page -->
<div id="footer">
	<p>©2009 </p>
</div>
</body>
</html>

и что-то не могу сообразить, как подвинуть надпись из h1. Помогите кто чем может

psywalker · July 13, 2009

Вообще я подвинул Заголовок таким образом <h1 style="position: relative; left: -200px;">000000000000000 0000000</h1>, но в принципе такой ужасный код я бы вообще не стал поправлять, а просто взял бы и переверстал с нуля.

areare · July 13, 2009

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

psywalker, я совсем-совсем только начинаю, поэтому мне пока не легче переписать. )

Justnewone · July 13, 2009

я совсем-совсем только начинаю, поэтому мне пока не легче переписать. )

Думаю, все равно легче, щас вы перед собой камешек маленький в гору толкаете, когда можно в кармане перенести.

areare · July 13, 2009

Думаю, все равно легче, щас вы перед собой камешек маленький в гору толкаете, когда можно в кармане перенести.

Просто заранее не представляю, как обойти эту проблему с изображением, а без этого толку мало.

Justnewone · July 13, 2009

Просто заранее не представляю, как обойти эту проблему с изображением, а без этого толку мало.

Положите на хостинг какой-неть, например, бесплатный. Так как Вы предлагаете скучно разбираться.

areare · July 13, 2009

Положите на хостинг какой-неть, например, бесплатный. Так как Вы предлагаете скучно разбираться.

http://qwertyare.narod.ru

Кажется, после двух дней мучений проблему все же устранила сама. Всем спасибо за понимание и помощь

Sign In

Отступы

Question

areare

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

areare

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

areare

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

areare

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information