отцентрирование кода

das · July 8, 2010

как отцентрировать данный текст html?

заранее большое спасибо.

мучаюсь немало. всё дело в бордерах между блоками. из-за них не получаеться сделать из ширины всех блоков 100%. и поэтому справа остаёться часть пустоты, поэтому я попробывал засунуть требуемый вывод тем в таблицу. но с помощью выравнивания таблицы тоже получилось не совсем по центру.

можно ли всё таки выровнять по центру иль всё же нужно на table вёрстку переписать?

еще раз спасибо за помощь

так же можете посмотреть по адресу: wars.org.ua/forum/2/

вот текст html

<table align='center' cellspacing=0 cellpadding=0><tr><td><div class='forum_part_base'>
<div class='forum_part_title' style='height: 25px; text-align: center;'>Тема / Автор</div>
<div class='forum_part_date' style='height: 25px;'>Дата создания</div>
<div class='forum_part_reply' style='height: 25px;'>Ответов</div>
<div class='forum_part_last' style='min-width: 25%;height: 25px;'>Последнее сообщение</div>
</div><div class='forum_part_base'>
<div class='forum_part_title'><a class='forum_part_left_a' href='http://localhost/wars/forum/2/1/'>новая тема</a><br>
<div class='forum_part_authorr'>Автор: </div><div class='forum_part_author'><a class='forum_part_left_aa' href='http://localhost/wars/info.php?id=1'>das</a></div></div>
<div class='forum_part_date' style='font-size:13px;'>17:03:36, 05-07-2010</div>
<div class='forum_part_reply' style='font-size:13px;'>99999</div>
<div class='forum_part_last' style='font-size:13px;'>17:03:36, 05-07-2010 от <a class='forum_part_left_aa' href='http://localhost/wars/info.php?id=1'>das</a>
</div><br><div class='forum_part_base'>
<div class='forum_part_title'><a class='forum_part_left_a' href='http://localhost/wars/forum/2/2/'>новая тема 2</a><br>
<div class='forum_part_authorr'>Автор: </div><div class='forum_part_author'><a class='forum_part_left_aa' href='http://localhost/wars/info.php?id=1'>das</a></div></div>
<div class='forum_part_date' style='font-size:13px;'>17:01:04, 05-07-2010</div>
<div class='forum_part_reply' style='font-size:13px;'>1</div>
<div class='forum_part_last' style='font-size:13px;'>17:01:04, 05-07-2010 от <a class='forum_part_left_aa' href='http://localhost/wars/info.php?id=1'>das</a>
</div><br></td></tr></table>

css:

.forum_part_base {
margin-top: -20px;
margin-bottom: -8px;
}
.forum_part_title {
padding-left: 5px;
float: left;
width: 46%;
background-color: #e6e6e6;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
min-height: 50px;
}
.forum_part_date {
background-color: #e6e6e6;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
width: 13%;
min-height: 50px;
float: left;
text-align: center;
}
.forum_part_reply {
float: left;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
background-color: #e6e6e6;
width: 10%;
min-height: 50px;
text-align: center;
}
.forum_part_authorr {
float: left;
font-size: 14px;
}
.forum_part_author {
font-weight: bold;
padding-left: 20px;
}
.forum_part_last {
float: left;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
background-color: #e6e6e6;
width: 25%;
min-height: 50px;
text-align: center;
}
a.forum_part_left_a {
text-decoration: none;
color: #929292;
font-weight: bold;
font-size: 14px;
}
a.forum_part_left_a:hover {
text-decoration: none;
color: #b1b1b1;
font-size: 14px;
}
a.forum_part_left_aa {
text-decoration: underline;
color: #a6a6a6;
font-weight: bold;
font-size: 14px;
}
a.forum_part_left_aa:hover {
text-decoration: none;
color: #b1b1b1;
font-size: 14px;
}

denis.bobkov · July 9, 2010

1. Какой резон делать табличные данные в виде блоков?

2. Код смотрели в браузерах отличных от оперы? Например в Firefox все отлично центруется, правда ширина меньше получается. В IE6 вообще кошмар. Пройдитесь валидатором по коду как минимум.

YaD · July 9, 2010

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

stars · July 9, 2010

Я бы предложил как то так хотя проще таблицей без дивов...

<style>
.forum_part_base {
margin-bottom: -8px;
}
.forum_part_title {
padding-left: 5px;
float: left;
width: 46%;
background-color: #e6e6e6;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
min-height: 50px;
}
.forum_part_date {
background-color: #e6e6e6;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
width: 13%;
min-height: 50px;
float: left;
text-align: center;
}
.forum_part_reply {
float: left;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
background-color: #e6e6e6;
width: 10%;
min-height: 50px;
text-align: center;
}
.forum_part_authorr {
float: left;
font-size: 14px;
}
.forum_part_author {
font-weight: bold;
padding-left: 20px;
}
.forum_part_last {
float: left;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
background-color: #e6e6e6;
width: 25%;
min-height: 50px;
text-align: center;
}
a.forum_part_left_a {
text-decoration: none;
color: #929292;
font-weight: bold;
font-size: 14px;
}
a.forum_part_left_a:hover {
text-decoration: none;
color: #b1b1b1;
font-size: 14px;
}
a.forum_part_left_aa {
text-decoration: underline;
color: #a6a6a6;
font-weight: bold;
font-size: 14px;
}
a.forum_part_left_aa:hover {
text-decoration: none;
color: #b1b1b1;
font-size: 14px;
}
</style>
<div style="margin: 0 auto;width:90%;">
<div class='forum_part_title' style='height: 25px; text-align: center;'>Тема / Автор</div>
<div class='forum_part_date' style='height: 25px;'>Дата создания</div>
<div class='forum_part_reply' style='height: 25px;'>Ответов</div>
<div class='forum_part_last' style='min-width: 25%;height: 25px;'>Последнее сообщение</div>
<div class='forum_part_base'>
<div class='forum_part_title'><a class='forum_part_left_a' href='http://localhost/wars/forum/2/1/'>новая тема</a><br>
<div class='forum_part_authorr'>Автор: </div><div class='forum_part_author'><a class='forum_part_left_aa' href='http://localhost/wars/info.php?id=1'>das</a></div></div>
<div class='forum_part_date' style='font-size:13px;'>17:03:36, 05-07-2010</div>
<div class='forum_part_reply' style='font-size:13px;'>99999</div>
<div class='forum_part_last' style='font-size:13px;'>17:03:36, 05-07-2010 от <a class='forum_part_left_aa' href='http://localhost/wars/info.php?id=1'>das</a>
</div></div>
<div class='forum_part_base'>
<div class='forum_part_title'><a class='forum_part_left_a' href='http://localhost/wars/forum/2/2/'>новая тема 2</a><br>
<div class='forum_part_authorr'>Автор: </div><div class='forum_part_author'><a class='forum_part_left_aa' href='http://localhost/wars/info.php?id=1'>das</a></div></div>
<div class='forum_part_date' style='font-size:13px;'>17:01:04, 05-07-2010</div>
<div class='forum_part_reply' style='font-size:13px;'>1</div>
<div class='forum_part_last' style='font-size:13px;'>17:01:04, 05-07-2010 от <a class='forum_part_left_aa' href='http://localhost/wars/info.php?id=1'>das</a>
</div>
</div></div>

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

Edited July 9, 2010 by stars

das · July 9, 2010

всем спасибо всё же придёться писать на table вёрстке.

модераторы можете крыть тему.

Edited July 9, 2010 by das

Sign In

отцентрирование кода

Question

das

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

denis.bobkov

Link to comment

Share on other sites

YaD

Link to comment

Share on other sites

stars

Link to comment

Share on other sites

das

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information