Подскажите начинающему

GLaZz · August 3, 2010

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

есть див с ширеной 90% надо его отцентрировать и растянуть на всю высоту страницы, чтото у меня не получается(

Вот код:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>TEST</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<center>
<div style="display:block; width:100%;">
	<div class="main">bla bla bla</div>
</div>
</center>
</body>
</html>

Вот CSS:

body, html{background-color: #ffffff;
margin:0;
padding:0;
font-size:12px;
font: Verdana, Geneva, Arial, Helvetica, sans-serif;}

.main{
width: 90%;
height: 100%;
background-color:#cfcfcf;
background-image: url(../img/main_bg.png);
background-position: top;
background-repeat: repeat-x;
position: absolute;}

вот страничка

заранее спасибо за ответ, просьба сильно не смеятся я верстку только начал изучать)

psywalker · August 3, 2010

Ты неправильно центрируешь, убери абсолют и пропиши margin: 0 auto;

Great Rash · August 3, 2010

А чтобы растянуть на всю высоту окна надо чтобы родители тоже имели высоту 100%, т.е. нужно указать 100% для html и для body:

html,
body {
	height: 100%;
}

.main {
	width: 90%;
	height: 100%;
	margin: 0 auto;
}

psywalker · August 3, 2010

Да, а тег <center> вообще убери с дороги, не возвращайся назад на 10 лет.

Vlad · August 3, 2010

style="display:block; width:100%;" - вот это тоже в коде убери, ненужное.

GLaZz · August 4, 2010

Спасибо большое за ответы.

GLaZz · November 9, 2010

Подскажите в чем ошибка , почему не становится по центру страницы:

CSS:

body{padding-top: 30px;
	font: Arial, Helvetica, sans-serif, #333333;
	background-color: white;
	margin: 0;}
img{border:none;}
a{font-family: Arial, Helvetica, sans-serif;
	color: #333333;}
a:hover{text-decoration:none;}
ul{	font-size: 24px;
	list-style:none;
	height: 41px;}
li{display:inline;}

.header{width:860px;
	height:67px;
	position:relative;}
.he2{background-image:url(images/head_bg.jpg);
	width:565px;
	float:right;}
.logo{float:left;}
.ins{position:absolute;
	text-align:right;
	padding-top:3px;
	left: 623px;}

html

<body>
	<div class='header'>
		<div class="logo"><a href='#'><img src="images/logo.png" alt="ООО «УкрНик» - хостинг и регистрация доменов;"/></a></div>
		<div class='he2'>
			<img src="images/head_l.jpg" style="background:#FFF;" align="left" />
			<div class="ins" align="right">
			<span style="color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:14px; top:-5px;">служба поддержки</span><br />
			<span style="color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:26px;">(048) 796 5 796</span>
			</div>
			<img src="images/head_r.jpg" style="background:#FFF;" align="right" />
		</div>
	</div>
	<ul>
		<li><a href="#">Домены</a></li>
		<li><a href="#" style="padding-left: 40px;">Хостинг</a></li>
		<li><a href="#" style="padding-left: 40px;">Поддержка</a></li>
		<li><a href="#" style="padding-left: 40px;">Личный кабинет</a></li>
		<li><a href="#" style="padding-left: 40px;">Контакты</a></li>
	</ul>
</body>

как оно щас стоит:

клик

Спасибо.

Edited November 9, 2010 by GLaZz

Int · November 9, 2010

margin:0 auto для .header

GLaZz · November 10, 2010

Спасибо большое за ответ.

Sign In

Подскажите начинающему

Question

GLaZz

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

GLaZz

Link to comment

Share on other sites

GLaZz

Link to comment

Share on other sites

Int

Link to comment

Share on other sites

GLaZz

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information