Strict Standards: Resource ID#36 used as offset, casting to integer (36) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401

Strict Standards: Resource ID#38 used as offset, casting to integer (38) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401

Strict Standards: Resource ID#39 used as offset, casting to integer (39) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401
ТвойWeb :: Версия для печати :: Замена TABLE на DIV
ТвойWeb » WebMaster класс » CSS » Замена TABLE на DIV

Страниц (3): [1] 2 3 »
 

1. chiv - 23 Июня, 2005 - 03:16:40 - перейти к сообщению
Решил попробовать избавиться от таблиц, где это возможно. Для начала поменял
CODE:
<HTML>
<HEAD>
<style>
BODY {
Font-Family: Times New Roman, Georgia, serif;
font-size: 14px;
Margin: 0;
padding: 0;
border: 0;
color: BLACK;
BackGround-color: WHITE;
}
</style>
</HEAD>
<BODY>
<TABLE border="0" width="90%" align="center" cellspacing="0" cellpadding="0">
<TR> <TD>
...
</TD></TR>
</TABLE>
</BODY>
</HTML>

на
CODE:
<HTML>
<HEAD>
<style>
BODY {
Font-Family: Times New Roman, Georgia, serif;
font-size: 14px;
Margin: 0;
padding: 0;
border: 0;
color: BLACK;
BackGround-color: WHITE;
}
.proc90 {
Font-Family: Times New Roman, Georgia, serif;
font-size: 14px;
Margin-top: 0;
Margin-right: +5%;
Margin-bottom: 0;
Margin-left: +5%;
border : 4px solid red;
color: BLACK;
BackGround-color: WHITE;
}
</style>
</HEAD>
<BODY>
<div class="proc90">
...
</div>
</BODY>
</HTML>

В результате в ИЕ появилась горизонтальная полоса прокрутки.
Почему?
2. ETC - 23 Июня, 2005 - 05:19:07 - перейти к сообщению
потому что +5%. Не проще сделать так:
CODE:

<style>
<!--
BODY {
Font-Family: Times New Roman, Georgia, serif;
font-size: 14px;
Margin: 0;
padding: 0;
color: BLACK;
BackGround-color: WHITE;
}
.proc90 {
Font-Family: Times New Roman, Georgia, serif;
font-size: 14px;
margin: 0px;
border : 4px solid red;
color: black;
background-color: white;
width: 90%;
}
-->
</style>
3. chiv - 23 Июня, 2005 - 05:55:05 - перейти к сообщению
ЕТС
Я пробовал так сделать - Firefox упорно не желает центрироватьОгорчение
А если не ставить "+", то Опера отказывается делать отступы...

ПС Может глюки из-за того, что я переделываю уже готовую страницу?\n\n(Добавление)
ППС Этот же DIV корректно отобразился во всех браузерах, когда был вложен в таблицу.
4. chiv - 27 Июня, 2005 - 08:09:52 - перейти к сообщению
Проблему с центрированием решил заменив margin на padding.Подмигивание
Теперь не получается избавиться от следующей таблицы:
CODE:
<TABLE width="100%" border="1" cellpadding="0" cellspacing="9" class="text">
<TR>
<TD>
<h4>ХХХХХ</h4>
<p>Бла бла бла бла бла бла ... бла бла бла бла<BR>
бла бла бла бла бла ... бла бла бла бла</p>
<center>
<INPUT TYPE="SUBMIT" SIZE="40" NAME="go1" VALUE="Загрузить">
</center>
</TD>
<TD valign="top"><Img src="image.jpg"></TD>
<TD>
<h4>YYYYYY</h4>
<p STYLE="text-indent:0; text-align:right">Бла бла бла бла бла бла ... бла бла бла бла<BR>
бла бла бла бла бла ... бла бла бла бла</p>
<center>
<INPUT TYPE="SUBMIT" SIZE="40" NAME="go2" VALUE="Загрузить">
</center>
</TD>
</TR>
</TABLE>

Кто что посоветует?
5. chiv - 29 Июня, 2005 - 14:37:58 - перейти к сообщению
Вот ещё одна проблема:
CODE:
<table width="100%">
<tr><td>
<img align="left" src="">бла бла бла
</td></tr>
<tr><td>
хм хм хм хм хм
</td></tr>
</table>

поменял на
CODE:
<div style="width:100%; padding: 0 2px 0 2px;">
<img align="left" src="">бла бла бла
</div>
хм хм хм хм хм

В результате в Firefox происходит смещение строки следующей за DIVом (обтекает картинку справа). Как это обойти?
6. SviMik - 29 Июня, 2005 - 14:51:53 - перейти к сообщению
А я что-то не понял, как на div можно заменить
CODE:

<table border="1">
<tr><td>
бла бла бла
</td></tr>
</table>
(обратите внимание на border="1"Подмигивание.
7. TvoyWeb - 29 Июня, 2005 - 15:23:20 - перейти к сообщению
chiv
а clear="all" не поможет?
8. chiv - 30 Июня, 2005 - 03:34:15 - перейти к сообщению
SviMik
Используй что-то типа:
CODE:
<div style="border: 1px solid #FF0000;">бла бла бла</div>


TvoyWeb
Что-то я не нашёл в спецификации такого значения для clear. Может я плохо смотрел?Однако


Пока придумал два варианта:
CODE:
<div style="width:100%; padding: 0 2px 0 2px;">
<img align="left" src="">бла бла бла
</div>
<div style="height:0; clear:both;"></div>
хм хм хм хм хм

и
CODE:
<div style="width:100%; padding: 0 2px 0 2px;">
<img align="left" src="">бла бла бла
</div>
<div>хм хм хм хм хм</div>

При первом варианте кроме увеличения размера кода в ИЕ появляется пустая строка, т.к. он не понимает height:0. Второй вариант так же увеличивает размер и в моём случае несколько неудобен в реализации. Поэтому хочется обойтись без дополнительных DIVов.
9. ETC - 30 Июня, 2005 - 09:58:52 - перейти к сообщению
а шо такое stIle? =)
10. FROZEN - 30 Июня, 2005 - 15:08:56 - перейти к сообщению
chiv

Да, и правда, исправь, а то зайдут, посмотрят и подумают, что так надо!

Форум на AlfaSpace.NET


Powered by ExBB
ExBB FM 1.0 RC1 by TvoyWeb.ru
InvisionExBB Style converted by Markus®

[Script Execution time: 0.0308]     [ Gzipped ]