CSS таблицы

Dizeloid · 26 Окт 2009

Подскажите как сделать выравнивание таблицы по центру. В данный момент есть код:

body {
width: 800px;
background: #FFFFFF;
font-size: 11px;
font-family: Verdana, sans-serif;
}

Еще мне нужно, что бы ширина таблицы была 800px (это я уже сделал), но при этом что бы она была прилеплена к верху браузера, что бы не было промежутков. Подскажите как сделать?

whitewolff · 26 Окт 2009

HTML:

body{margin: 0; padding: 0;}

Eihwaz · 26 Окт 2009

HTML:

<html>
    <head>
        <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    </head>
    <body>
        <table id="main_table">
            <tr>
                <td>text</td>
            </tr>
        </table>
    </body>
</html>

CSS:

Код:

body {
    background: #FFFFFF;
    font-size: 11px;
    font-family: Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

#main_table {
    width: 800px;
    background-color: #333;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
}

command26 · 30 Окт 2009

Мужики, выручайте. Битый час сижу, не могу решить эту задачу. Не хочет в долбанном IExplorer становиться по середине. На всех браузерах - все в норме. Весь код сквозь зубы уже пропустил, не могу найти ошибку:

HTML:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<title>---Титул---</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
A IMG {
	border:none;
}
body {
	background:url(bg-top.gif) top  repeat-x;
	font-family:Tahoma;
	color:#000;
	margin:0;
    padding:0;
}
#main_container {
	width:766px;
	height:auto;
	margin:0 auto;
	padding:0;
}
#header {
	width:766px;
	height:351px;
	padding:0;
}
#hello {
	width:766px;
	height:199px;
}
hr {
	border:0;
	width:700px;
	background-color:#c9cbce;
	color:#c9cbce;
	height:1px;
	clear:both;
	text-align:center;
	margin:5px 0;
}
.Z1, .Z2 {
	color:#4A4A4A;
	font:bold 14px Tahoma;
}
.news_an {
	text-align: left;
	padding:0 0 0 15px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	color:#4A4A4A;
}
.portletcontent {
	background:#fff url(borders0.gif) 100% 0 repeat-y;
	padding:0 7px 0 0;
}
.bi {
	background:#fff url(borders0.gif) 0 0 repeat-y;
	padding:0 0 0 1px;
}
.bi_1 {
	background:#ffffff url(borders00.gif) 0 0 repeat-y;
	padding:0 0 0 1px;
}
.bb {
	height:30px;
	background:url(box00000.gif) 100% 100% no-repeat;
	margin:0 -7px 0 -1px;
}
.bb div {
	width:18px;
	height:30px;
	background:url(box00000.gif) 0 100% no-repeat;
}
.portlet h2 {
	height:20px;
	background-color:#666;
	background-image:url(topright.gif);
	background-position:right top;
	background-repeat:no-repeat;
	color:#fff;
	line-height:20px;
	font-size:14px;
	font-family:"Times New Roman", Times, serif;
	padding:0 0 0 10px;
}
.portletcontent p {
	background:#fff;
	text-align:center;
	padding:8px 10px;
}
</style>
</head>
<body>
<div id="main_container">
  <div id="header"><img src="images/kapital/bg-top2.jpg" width="766" height="351"></div>
    <div id="hello">
           <div class="portlet" style="width:">
           <h2 style="background-color:#c9cbce;">www.site.ru</h2>
           <div class="portletcontent">
           <div class="bi">
           <p><font class="Z1">ДОБОРО ПОЖАЛОВАТЬ НА САЙТ КОМПАНИИ “ТЫРЫ-ПЫРЫ”</font><br>
           </p>
            <div class="bb"><div></div></div>
            </div>
            </div>
          </div>
          <br>
          <hr/>
    </div>
	<div id="anons_st">
        <div class="portlet" style="width:445px; float:left; padding:0 20px 0 0">
  <h2 style="background-color:#c9cbce;"></h2>
<div class="portletcontent">
  <div class="bi_1">
  <img src="images/kapital/tit_1.gif" width="155" height="20"> <br>
  <span class="news_an">content_1</span><br>
<div class="bb"><div></div></div>
</div>
</div>
</div>
   	  <div class="portlet" style="width:281px; float:left; padding:0 20px 0 0">
        <h2 style="background-color:#c9cbce;"></h2>
        <div class="portletcontent"><div class="bi_1">
          <img src="images/kapital/tit_2.gif" width="155" height="20"> <br>
  <span class="news_an">content_2</span><br><br><br><br>
  <img src="images/kapital/tit_3.gif" width="155" height="20"> <br>
  <span class="news_an">content_3</span>
  <br><br><br><br>
  <img src="images/kapital/tit_4.gif" width="155" height="20"> <br>
  <span class="news_an">content_4</span><br>
        <div class="bb"><div></div></div>
        </div>
        </div>
        </div>
    </div>
</div>
</body>
</html>

ELiyahu · 30 Окт 2009

command26 написал(а):
Мужики, выручайте. Битый час сижу, не могу решить эту задачу. Не хочет в долбанном IExplorer становиться по середине. На всех браузерах - все в норме. Весь код сквозь зубы уже пропустил, не могу найти ошибку:

HTML:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'> <html> <head> <meta http-equiv='content-type' content='text/html; charset=UTF-8'> <title>---Титул---</title> <style type="text/css"> * { margin:0; padding:0; } A IMG { border:none; } body { background:url(bg-top.gif) top repeat-x; font-family:Tahoma; color:#000; margin:0; padding:0; } ... </div> </body> </html>

тоже сталкивался с этим)
сначала всё помогала решить установка <center></center>))
ну а средствами CSS для ИЕ это удалось решить след.образом:

HTML:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<title>---Титул---</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
A IMG {
	border:none;
}
body {
	background:url(bg-top.gif) top  repeat-x;
	font-family:Tahoma;
	color:#000;
	margin:0;
    padding:0;
	position:
}
#main_container {
	width:766px;
	height:auto;
	margin:0 auto;
	padding:0;
}
#header {
	width:766px;
	height:351px;
	padding:0;
}
#hello {
	width:766px;
	height:199px;
}
hr {
	border:0;
	width:700px;
	background-color:#c9cbce;
	color:#c9cbce;
	height:1px;
	clear:both;
	text-align:center;
	margin:5px 0;
}
.Z1, .Z2 {
	color:#4A4A4A;
	font:bold 14px Tahoma;
}
.news_an {
	text-align: left;
	padding:0 0 0 15px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	color:#4A4A4A;
}
.portletcontent {
	background:#fff url(borders0.gif) 100% 0 repeat-y;
	padding:0 7px 0 0;
}
.bi {
	background:#fff url(borders0.gif) 0 0 repeat-y;
	padding:0 0 0 1px;
}
.bi_1 {
	background:#ffffff url(borders00.gif) 0 0 repeat-y;
	padding:0 0 0 1px;
}
.bb {
	height:30px;
	background:url(box00000.gif) 100% 100% no-repeat;
	margin:0 -7px 0 -1px;
}
.bb div {
	width:18px;
	height:30px;
	background:url(box00000.gif) 0 100% no-repeat;
}
.portlet h2 {
	height:20px;
	background-color:#666;
	background-image:url(topright.gif);
	background-position:right top;
	background-repeat:no-repeat;
	color:#fff;
	line-height:20px;
	font-size:14px;
	font-family:"Times New Roman", Times, serif;
	padding:0 0 0 10px;
}
.portletcontent p {
	background:#fff;
	text-align:center;
	padding:8px 10px;
}
#v_center
{
position: relative;
width: 100%;
}
#v_centerleft
{
right: 50%;
position: relative;
float: right;
}
#v_centerright
{
right: -50%;
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<div id="v_center">
    <div id="v_centerleft">
        <div id="v_centerright">
          <div id="main_container">
  <div id="header"><img src="images/kapital/bg-top2.jpg" width="766" height="351"></div>
    <div id="hello">
           <div class="portlet" style="width:">
           <h2 style="background-color:#c9cbce;">www.site.ru</h2>
           <div class="portletcontent">
           <div class="bi">
           <p><font class="Z1">ДОБОРО ПОЖАЛОВАТЬ НА САЙТ КОМПАНИИ “ТЫРЫ-ПЫРЫ”</font><br>
           </p>
            <div class="bb"><div></div></div>
            </div>
            </div>
          </div>
          <br>
          <hr/>
    </div>
	<div id="anons_st">
        <div class="portlet" style="width:445px; float:left; padding:0 20px 0 0">
  <h2 style="background-color:#c9cbce;"></h2>
<div class="portletcontent">
  <div class="bi_1">
  <img src="images/kapital/tit_1.gif" width="155" height="20"> <br>
  <span class="news_an">content_1</span><br>
<div class="bb"><div></div></div>
</div>
</div>
</div>
   	  <div class="portlet" style="width:281px; float:left; padding:0 20px 0 0">
        <h2 style="background-color:#c9cbce;"></h2>
        <div class="portletcontent"><div class="bi_1">
          <img src="images/kapital/tit_2.gif" width="155" height="20"> <br>
  <span class="news_an">content_2</span><br><br><br><br>
  <img src="images/kapital/tit_3.gif" width="155" height="20"> <br>
  <span class="news_an">content_3</span>
  <br><br><br><br>
  <img src="images/kapital/tit_4.gif" width="155" height="20"> <br>
  <span class="news_an">content_4</span><br>
        <div class="bb"><div></div></div>
        </div>
        </div>
        </div>
    </div>
</div>
        </div>
    </div>
</div>
</body>
</html>

и правда работает!))
что там изменилось:
1) добавлены ещё 3 див-а

Код:

<div id="v_center">
    <div id="v_centerleft">
        <div id="v_centerright">
...сюда те блоки, что надо выравнять...
</div></div></div>

2) и соответственно свойства каждого прописать в CSS:

Код:

#v_center
{
position: relative;
width: 100%;
}
#v_centerleft
{
right: 50%;
position: relative;
float: right;
}
#v_centerright
{
right: -50%;
position: relative;
z-index: 1;
}

IE поддаётся)

command26 · 30 Окт 2009

Спасибо! Вроде все выровнилось. Вопрос в следующем. Беру два кода. Сравниваю. Все тоже самое. Одни выводит так как нужно. Другой - с таким косяком. Может такой трабл в 8-ой IE версии??? Первый код я писал еще до выхода 8-ки.

01ssv · 30 Окт 2009

Для выравнивания таблицы фиксированной ширины в контейнере произвольного размера существенным фактором является доктайп, без доктайпа достаточно прописать в контейнер и в саму таблицу style="text-align:center" и align="center" - сработает везде при прописанном доктупе "lose" в саму таблицу надо прописать style="margin:auto"

Toha20072008 · 1 Ноя 2009

А не проще ли написать <center></center>

?
Или это уже моветон?

rafic · 2 Ноя 2009

<center></center> - это, на сколько мне известно, уже не валидно.
Правильнее будет написать <div align="center"></div>.

Finnn · 4 Ноя 2009

Не забывайте перед началом вёрстки сбрасывать стили, иначе могут вылезать артефакты. Сбросить стили можно так:

reset.css

Код:

/* CSS Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
b, u, i, center, dl, dt, dd, ol, ul, li, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
}

CSS таблицы

Dizeloid

Постоялец

whitewolff

Лимонадный Джо :)

Eihwaz

Гуру форума

command26

Постоялец

ELiyahu

Читатель

command26

Постоялец

01ssv

Постоялец

Toha20072008

Профессор

rafic

Местный житель

Finnn

Читатель