Проблема с выравниванием при масштабировании - HTML и CSS

wois · 05.12.2011, 10:09

Здравствуйте, проблема в следующем, при открытии сайта на очень большом экране все остается слева, и футер не на всю ширину становится.

а хотелось бы что бы оно центрировалось, автоматически. Чувствую, что где то ошибка, пробовал искал, но без вас не справлюсь. Вот сайт а тут можно посмотреть в разных разрешениях

wois · 05.12.2011, 10:10

вот страница:

Код:

<!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">
<div id="head">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Архив блога <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" type="text/css" media="print" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<div id="logo"><img src="http://moi-tai.eu5.org/wp-content/themes/vintage/img/header.png" border="0" ></div>
<div id="tex">Официальный сайт нотариуса города Москвы</div>
<div  id= texak >Акимова Г.Б.</div>
<p style=" position:fixed; left:137px; top:160px; font-size:140%; min-width:800px;"><a href="#"> On-line заявка</a></p>
<p style=" font-family:  'Times New Roman', Times, serif; font-size: 15px; position: fixed; left:60px; top: 190px; min-width:800px; ">для предварительной подготовки документов</p>
<ul id="nav">
	  <li class="page_item"><a href="<?php echo get_settings('home'); ?>/" title="Home">Главная</a></li>
	  <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
    </ul>
</head>
</div>
<!--/header -->
<div style="width:1000px;">
<body>
<div id="men"><br><a href="#">Сделки с ООО</a><br><a href="#"><br> Депозит нотариуса </a><br><a href="#"><br>Протест векселя <br></a><br><a href="#">Обеспечение <br>доказательства <br></a><a href="#"><br>Другие нотариальные действия <br></a><a href="#"><br>Выезд к клиенту<br></a></div>
 <div >
<div id="konta"><img  src="http://moi-tai.eu5.org/wp-content/themes/vintage/img/kont.jpg"></div>
<div style=" position: absolute; top:526px; left:100px;s"><img  src="http://moi-tai.eu5.org/wp-content/themes/vintage/img/lico.jpg"></div>
<div id="content">

  <?php if (have_posts()) : ?>
  
  	<?php while (have_posts()) : the_post(); ?>
 
    <div class="post" id="post><?php the_ID(); ?>">


	  <div class="entry">
        <h2 <?php the_title(); ?>"><?php the_title(); ?></a></h2>
		
        <span class="post-cat"></span>
		<div class="post-content">
			<?php the_content('Читать далее &raquo;'); ?>
		  
        </div>
	  </div>
	</div>
    </div><!--/content -->
 </div>
  </div>
   <?php endwhile; ?>
	
	
	
	<?php else : ?>
	
		<h2 class="center">Не найдено</h2>
		<p class="center">Извини, но здесь ничего нет.</p>
	<div style="width:1px; height:1px; font-size:1px; clear:both;></div> 

  	
  <?php endif; ?>
  
<div id="close"></div> 
<!--/page -->

<br/><div style="clear:both;"></div>
<!--footer bar -->

<div style="background-color:#2d2620;height: 120px; width:110%;" class="alignleft"><br>
<center>
<br>
<a href="#">Главная|</a>
<a href="#">О конторе|</a>
<a href="#">Общественная работа|</a>
<a href="#">Прейскурант|</a>
<a href="#">Контакты</a>
<br><br><hr align="center"; size="4px"; style="width:20%;">
<br>
<a href="#">Все права защищены 2011 &copy; </a></center>
</div>
</div>
</div>
</div>
 <!--footer bar end -->

</body>
</html>

wois · 05.12.2011, 10:12

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #ffffff;
background-color: #3b302c;
margin: 0px;
padding: 0px;
width:100%;
min-width:900px;
max-width:1200px;

}

form {
margin:0px;
padding:0px;
}
#page {
margin-top: 0%;
width: 100%;

}
#head
{
position:fixed;
background-color:#2d241d ;
width:100%;
height:212px ;
z-index:20;
padding: 0% 0px 0px 0px;
min-width:900px;

}
#logo
{

border:0px;
margin-left:140px;
float:left;
z-index:35;
padding-top: 15px;

}
#tex{
margin-left:270px;
font-size: 250%;
margin-top:20px;
text-align:center;

}
#texak
{
margin-top:1%;
font-size: 300%;
margin-left: 50%;
padding: 1% 1$ 1% 1%;

}

#nav {
list-style: none;
position: fixed;
left: 347px ;
top: 163px ;
min-width:900px;

}
#nav li {
float: left;
margin-left: 6px;

}
#nav .current_page_item a:visited{
color: #000;
text-decoration: none;
clear:both;
}
#nav .page_item a{
color: #FFF;
text-decoration: none;
background: #3b302c;
padding: 9px;
font: bold 14px/100% Arial, Helvetica, sans-serif;
border-top: 1px solid #2e2215;
border-left: 1px solid #2e2215;
border-right: 1px solid #2e2215;
display: block;
float:none;
clear:both;

}
#nav .current_page_item a,#nav .page_item a:hover {
color: #fff;
text-decoration: none;
background: #ccc;
padding: 5px 15px;
font: bold 100% Arial, Helvetica, sans-serif;
border-top: 1px solid #2e2215;
border-left: 1px solid #2e2215;
border-right: 1px solid #2e2215;
display: block;
float:none;
clear:both;
}

/* content */
#content {
padding: 10px 10px 5px 7px;
float:left;
width: 580px;
margin-top:0px;
margin-left:375px;
padding-bottom:80px;

}
.post {
padding-top: -11px;
}

.entry {
margin-left: 6px;
width: 580px;
}
.post-cat {
padding-left: 0px;
font-size: 95%;
color: #cbcbcb;
}

.post-content {
background-color:#3b302c;
margin-left: 0px;
padding: 0px;
padding-top: 10px;
}
.navigation {
padding: 10px 0px;
}
.navigation a, .navigation a:visited {
color: #cbcbcb;
}
.previous-entries a {
float: left;
padding-left: 0px;
background: url(img/arrowleft.gif) no-repeat left center;
}
.next-entries a {
float: right;
padding-right: 18px;
background: url(img/arrowright.gif) no-repeat right center;
}
/* comments */
#comments, #respond {
border-bottom: 1px dotted #cbcbcb;
padding: 10px 0 5px 0;
clear: both;
}
.commentlist {
margin: 10px 0px;
padding-left: 20px;
line-height: 150%;
}
.commentlist li{
padding: 5px 10px;
}
.commentlist .alt {
background: #393939;
}
.commentlist cite, .commentlist cite a, .commentlist cite a:visited {
font-weight: bold;
font-style: normal;
font-size: 120%;
color: #ffffff;
}
.commentlist small {
margin-bottom: 5px;
display: block;
font-size: 87%;
}
#commentform {
margin-top: 10px;
font: 110% Arial, Helvetica, sans-serif;
}
#commentform p {
padding: 6px 0px;
margin: 0px;
}
#commentform label{
color: #e5e3e6;
font-size: 87%;
}
#commentform input{
width: 200px;
background:#3b302c;
border: 1px dotted #cbcbcb;
padding: 3px;
margin-top: 3px;
color: #cbcbcb;
}
#commentform textarea{
width: 515px;
height: 115px;
background:#000000;
border: 1px dotted #cbcbcb;
padding: 2px;
margin-top: 3px;
color: #cbcbcb;
}
#commentform textarea:focus, #commentform input[type="text"]:focus {
background: #000000;
}
#commentform #submit{
background: #000000 ;
font: bold 12px Arial, Helvetica, sans-serif;
color: #cbcbcb;
border:1px dotted #cbcbcb;
float:left;
width: 144px;
height: 28px;
cursor: pointer;
}

#men{
background-color:#2d241d;
float: left;
width:204px;
text-align: center ;
font-size:13px;
margin-top:245px ;
margin-left:100px;
padding-bottom:14px ;
padding-top:4px ;
height:234px;

}

#hea
{

margin-top: 400px;
margin-left: 86px;

}
#konta
{
background-image:url(img/kont.jpg);
background-repeat:no-repeat;
width:542px; height:246px;
float:left;
margin-top: 246px;
margin-left:88px;
padding-right:15px;
padding-bottom:40px;
}

#close {
clear: both;
background: #ffffff;
color: #ffffff;
font-size: 95%;
line-height: 130%;
width:100%;}

Naive · 05.12.2011, 12:18

Код:

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Архив блога <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" type="text/css" media="print" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Вот эта вот хрень идет до тега <body>
----------------------
Элементы со статичной шириной выравниваются по центру при помощи свойства margin:0 auto;
Для футера поставь width:100%; для внутрености его - смотри выше.

wois · 06.12.2011, 07:53

Цитата:

Сообщение от Naive

Код:

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Архив блога <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" type="text/css" media="print" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Вот эта вот хрень идет до тега <body>
----------------------
Элементы со статичной шириной выравниваются по центру при помощи свойства margin:0 auto;
Для футера поставь width:100%; для внутрености его - смотри выше.

У меня вроде эта хрень до <body> ?

margin:0 auto; Даёт странный эффект, прижимает к левому краю.

у футера вообще width: 110%, если 100 ставить то он еще меньше становиться

(разобрался, дело было в том что стоял max width)

Можно ли все тело положить в один контейнер и выровнять его по центру, что бы он при масштабировании по центру тусовался?

Naive · 06.12.2011, 08:45

Цитата:

Сообщение от wois

1 У меня вроде эта хрень до <body> ?

2 margin:0 auto; Даёт странный эффект, прижимает к левому краю.

3 у футера вообще width: 110%, если 100 ставить то он еще меньше становиться

(разобрался, дело было в том что стоял max width)

4 Можно ли все тело положить в один контейнер и выровнять его по центру, что бы он при масштабировании по центру тусовался?

1. Правда, не доглядел. Меня смутили теги разметки (div) внутри тега <head>, их там быть не должно, <head> нужен для метаданных и ссылок (заголовков страницы) и элементов разметки в нем быть не должно.

2. Не будет работать с абсолютным позиционированием

3. ...

4. можно: http://csstemplater.com/

05.12.2011, 10:09	#1
wois Новичок Джуниор Регистрация: 05.12.2011 Сообщений: 4	Проблема с выравниванием при масштабировании Здравствуйте, проблема в следующем, при открытии сайта на очень большом экране все остается слева, и футер не на всю ширину становится. а хотелось бы что бы оно центрировалось, автоматически. Чувствую, что где то ошибка, пробовал искал, но без вас не справлюсь. Вот сайт а тут можно посмотреть в разных разрешениях

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
вывод 2ух чисел в мемо с выравниванием меньшего к правому краю большего	nuevegramodelamor	Помощь студентам	2	27.05.2010 16:28
Вставка таблиц в шаблон с выравниванием по ширине окна	Polotenchik	Microsoft Office Word	22	26.03.2010 22:07
Компонент label c выравниванием по ширине	Polotenchik	Компоненты Delphi	1	18.02.2010 16:31
Проблема при установке ОС	DRAGGER	Компьютерное железо	6	30.09.2009 09:22
Проблема при открытии базы при помощи ADO	SlavaSH	БД в Delphi	21	30.06.2009 16:51

05.12.2011, 10:12	#3
wois Новичок Джуниор Регистрация: 05.12.2011 Сообщений: 4	вот стайл body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color: #ffffff; background-color: #3b302c; margin: 0px; padding: 0px; width:100%; min-width:900px; max-width:1200px; } form { margin:0px; padding:0px; } #page { margin-top: 0%; width: 100%; } #head { position:fixed; background-color:#2d241d ; width:100%; height:212px ; z-index:20; padding: 0% 0px 0px 0px; min-width:900px; } #logo { border:0px; margin-left:140px; float:left; z-index:35; padding-top: 15px; } #tex{ margin-left:270px; font-size: 250%; margin-top:20px; text-align:center; } #texak { margin-top:1%; font-size: 300%; margin-left: 50%; padding: 1% 1$ 1% 1%; } #nav { list-style: none; position: fixed; left: 347px ; top: 163px ; min-width:900px; } #nav li { float: left; margin-left: 6px; } #nav .current_page_item a:visited{ color: #000; text-decoration: none; clear:both; } #nav .page_item a{ color: #FFF; text-decoration: none; background: #3b302c; padding: 9px; font: bold 14px/100% Arial, Helvetica, sans-serif; border-top: 1px solid #2e2215; border-left: 1px solid #2e2215; border-right: 1px solid #2e2215; display: block; float:none; clear:both; } #nav .current_page_item a,#nav .page_item a:hover { color: #fff; text-decoration: none; background: #ccc; padding: 5px 15px; font: bold 100% Arial, Helvetica, sans-serif; border-top: 1px solid #2e2215; border-left: 1px solid #2e2215; border-right: 1px solid #2e2215; display: block; float:none; clear:both; } /* content / #content { padding: 10px 10px 5px 7px; float:left; width: 580px; margin-top:0px; margin-left:375px; padding-bottom:80px; } .post { padding-top: -11px; } .entry { margin-left: 6px; width: 580px; } .post-cat { padding-left: 0px; font-size: 95%; color: #cbcbcb; } .post-content { background-color:#3b302c; margin-left: 0px; padding: 0px; padding-top: 10px; } .navigation { padding: 10px 0px; } .navigation a, .navigation a:visited { color: #cbcbcb; } .previous-entries a { float: left; padding-left: 0px; background: url(img/arrowleft.gif) no-repeat left center; } .next-entries a { float: right; padding-right: 18px; background: url(img/arrowright.gif) no-repeat right center; } / comments */ #comments, #respond { border-bottom: 1px dotted #cbcbcb; padding: 10px 0 5px 0; clear: both; } .commentlist { margin: 10px 0px; padding-left: 20px; line-height: 150%; } .commentlist li{ padding: 5px 10px; } .commentlist .alt { background: #393939; } .commentlist cite, .commentlist cite a, .commentlist cite a:visited { font-weight: bold; font-style: normal; font-size: 120%; color: #ffffff; } .commentlist small { margin-bottom: 5px; display: block; font-size: 87%; } #commentform { margin-top: 10px; font: 110% Arial, Helvetica, sans-serif; } #commentform p { padding: 6px 0px; margin: 0px; } #commentform label{ color: #e5e3e6; font-size: 87%; } #commentform input{ width: 200px; background:#3b302c; border: 1px dotted #cbcbcb; padding: 3px; margin-top: 3px; color: #cbcbcb; } #commentform textarea{ width: 515px; height: 115px; background:#000000; border: 1px dotted #cbcbcb; padding: 2px; margin-top: 3px; color: #cbcbcb; } #commentform textarea:focus, #commentform input[type="text"]:focus { background: #000000; } #commentform #submit{ background: #000000 ; font: bold 12px Arial, Helvetica, sans-serif; color: #cbcbcb; border:1px dotted #cbcbcb; float:left; width: 144px; height: 28px; cursor: pointer; } #men{ background-color:#2d241d; float: left; width:204px; text-align: center ; font-size:13px; margin-top:245px ; margin-left:100px; padding-bottom:14px ; padding-top:4px ; height:234px; } #hea { margin-top: 400px; margin-left: 86px; } #konta { background-image:url(img/kont.jpg); background-repeat:no-repeat; width:542px; height:246px; float:left; margin-top: 246px; margin-left:88px; padding-right:15px; padding-bottom:40px; } #close { clear: both; background: #ffffff; color: #ffffff; font-size: 95%; line-height: 130%; width:100%;}