Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Аналоги атрибутов table и td в css
 
 автор: Blizard   (10.08.2011 в 20:57)   письмо автору
 
 

Продвигаю один из своих сайтов и вот решил максимально переделать его на css. Сайт сделан по старинке на таблицах (говорят это очень не нравится поисковикам) пытаюсь все атрибуты (для начала таблиц) сделать стилями ивот есть такие вопросы:

Какие аналоги в css у:?

1) <table align=left> <table align=right> <table align=center>

2) <table cellpadding=0> <table cellspacing=0>

3) <td align=left> <td align=right> <td align=center>

4) <td valign=top> <td valign=middle> <td valign=bottom>

5) <td width=100> <td height=100>

Буду очень благодарен, просто в поисковике пытался найти и где-то пишут например:

table {text-align: left;} на другом сайте table{margin-left: 0;} и так по каждому атрибуту, хочется узнать как все-таки правильно.

  Ответить  
 
 автор: cheops   (10.08.2011 в 22:03)   письмо автору
 
   для: Blizard   (10.08.2011 в 20:57)
 

>table {text-align: left;} на другом сайте table{margin-left: 0;} и так по каждому атрибуту, хочется узнать
>как все-таки правильно.
Да в общем и то и то правильно, просто text-align применяется к тексту, а margin - к блоку, т.е. text-align выравняет текст внутри таблицы, а margin, примененный к table будет влиять на саму таблицу, а не на её содержимое.
1) table {text-align: left|right|center}
2) padding: 0px и margin: 0px - применять к тому объекту к которому хотите, если это таблица, лучше оставьте cellpadding и cellspacing в покое до лучших времен.
3) table tr td {text-align: left|right|center}
4) table tr td {vertical-align: top|middle|bottom }
5) td {width: 100px; height: 100px;}

PS Поисковым системам скорее всего все-равно, как у вас сверстан сайт, но от использования CSS хуже не будет. Удобно, тиражируемого, меньше объем трафика.

  Ответить  
 
 автор: antf   (10.08.2011 в 22:11)   письмо автору
 
   для: cheops   (10.08.2011 в 22:03)
 

>2) padding: 0px и margin: 0px - применять к тому объекту к которому хотите, если это таблица, лучше оставьте cellpadding и cellspacing в покое до лучших времен.

Я использую border-collapse:collapse, а атрибуты не указываю. Например:.<table class='t'>

  Ответить  
 
 автор: antf   (10.08.2011 в 22:08)   письмо автору
 
   для: Blizard   (10.08.2011 в 20:57)
 

>Какие аналоги в css у:? <table align=center>

margin:0 auto;


Если хотите выравнить саму таблицу относительно родителя, а не ее содержимое.

  Ответить  
 
 автор: Blizard   (10.08.2011 в 23:11)   письмо автору
 
   для: antf   (10.08.2011 в 22:08)
 

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

  Ответить  
 
 автор: Blizard   (10.08.2011 в 23:29)   письмо автору
 
   для: Blizard   (10.08.2011 в 23:11)
 

Еще вопрос, вот смотрите у меня три дива - это три картинки, которые должны идти в одну строку друг за другом, а получается что они соскакивают как <br>


          <div class="wrap-1">
                  
                              <div class="wrap-1-1"></div>
                              <div class="wrap-1-2"></div>
                              <div class="wrap-1-3"></div>

          </div>


Что сделать чтобы картинки были в одну строку?

вот css


body
     {
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
     text-align: center;
     background-color: #191919;
     }

.wrap-1
     {
     width: 950px;
     margin: 0 auto;
     text-align: left;
     }

.wrap-2
     {
     width: 950px;
     text-align: left;
     }

.wrap-1-1
     {
     width: 19px;
     height: 53px;
     background-image: url("./img/z1.jpg");
     text-align: left;
     }

.wrap-1-2
     {
     width: 892px;
     height: 53px;
     background-image: url("./img/z2.jpg");
     text-align: left;
     }

.wrap-1-3
     {
     width: 39px;
     height: 53px;
     background-image: url("./img/z3.jpg");
     text-align: left;
     }

  Ответить  
 
 автор: Blizard   (10.08.2011 в 23:36)   письмо автору
 
   для: Blizard   (10.08.2011 в 23:29)
 

Решил этот вопрос float: left;

А что для поисковиков и для XHTML лучше - пустой див с картинкой или <img src> ?

  Ответить  
 
 автор: cheops   (11.08.2011 в 02:12)   письмо автору
 
   для: Blizard   (10.08.2011 в 23:36)
 

Лучше обрамить картинку <div>, чем просто использовать <img>

  Ответить  
 
 автор: Blizard   (11.08.2011 в 11:36)   письмо автору
 
   для: cheops   (11.08.2011 в 02:12)
 

скажите, а почему padding расширяет div? Я конечно учел размерность div сделал его меньше так сказать на кол-во padding, но может есть какой-то универсальный метод?

  Ответить  
 
 автор: antf   (11.08.2011 в 12:28)   письмо автору
 
   для: Blizard   (11.08.2011 в 11:36)
 

Так прописано в стандарте css. Реальная ширина видимой части блока = border-left + padding-left + width + padding-right + border-right. То же самое с высотой.

>есть какой-то универсальный метод?

Внутрь div вставить еще один div, чтобы прописывать отступы в нем.

  Ответить  
 
 автор: Blizard   (11.08.2011 в 14:51)   письмо автору
 
   для: antf   (11.08.2011 в 12:28)
 

У меня дизайн у сайта с загругленными краями и каждый круглешок отдельной картинкой, в итоге четыре менюшки у меня на дивах получились такими:


                              <div class="bod-3">

                                        <div class="bod-3-1-1"></div>
                                        <div class="bod-3-1-2"></div>
                                        <div class="bod-3-1-3"></div>
                                        <div class="bod-3-1-4"></div>
                                        <div class="bod-3-1-5"></div>
                                        <div class="bod-3-1-6"></div>
                                        <div class="bod-3-1-7"></div>
                                        <div class="bod-3-1-8"></div>
                                        <div class="bod-3-1-9"></div>
                                        <div class="bod-3-1-10"></div>
                                        <div class="bod-3-1-11"></div>
                                        <div class="bod-3-1-12"></div>
                                        <div class="bod-3-1-13"></div>
                                        <div class="bod-3-1-14"></div>
                                        <div class="bod-3-1-15"></div>
                                        <div class="bod-3-1-16"></div>
                                        <div class="bod-3-1-17"></div>
                                        <div class="bod-3-1-18"></div>

                                        <div class="bod-3-1-1"></div>
                                        <div class="bod-3-1-2"></div>
                                        <div class="bod-3-1-3"></div>
                                        <div class="bod-3-1-4"></div>
                                        <div class="bod-3-1-5"></div>
                                        <div class="bod-3-1-6"></div>
                                        <div class="bod-3-1-7"></div>
                                        <div class="bod-3-1-8"></div>
                                        <div class="bod-3-1-9"></div>
                                        <div class="bod-3-1-10"></div>
                                        <div class="bod-3-1-11"></div>
                                        <div class="bod-3-1-12"></div>
                                        <div class="bod-3-1-13"></div>
                                        <div class="bod-3-1-14"></div>
                                        <div class="bod-3-1-15"></div>
                                        <div class="bod-3-1-16"></div>
                                        <div class="bod-3-1-17"></div>
                                        <div class="bod-3-1-18"></div>

                                        <div class="bod-3-1-1"></div>
                                        <div class="bod-3-1-2"></div>
                                        <div class="bod-3-1-3"></div>
                                        <div class="bod-3-1-4"></div>
                                        <div class="bod-3-1-5"></div>
                                        <div class="bod-3-1-6"></div>
                                        <div class="bod-3-1-7"></div>
                                        <div class="bod-3-1-8"></div>
                                        <div class="bod-3-1-9"></div>
                                        <div class="bod-3-1-10"></div>
                                        <div class="bod-3-1-11"></div>
                                        <div class="bod-3-1-12"></div>
                                        <div class="bod-3-1-13"></div>
                                        <div class="bod-3-1-14"></div>
                                        <div class="bod-3-1-15"></div>
                                        <div class="bod-3-1-16"></div>
                                        <div class="bod-3-1-17"></div>
                                        <div class="bod-3-1-18"></div>

                                        <div class="bod-3-1-1"></div>
                                        <div class="bod-3-1-2"></div>
                                        <div class="bod-3-1-3"></div>
                                        <div class="bod-3-1-4"></div>
                                        <div class="bod-3-1-5"></div>
                                        <div class="bod-3-1-6"></div>
                                        <div class="bod-3-1-7"></div>
                                        <div class="bod-3-1-8"></div>
                                        <div class="bod-3-1-9"></div>
                                        <div class="bod-3-1-10"></div>
                                        <div class="bod-3-1-11"></div>
                                        <div class="bod-3-1-12"></div>

                              </div>


На сколько валиден такой код?

  Ответить  
 
 автор: antf   (11.08.2011 в 14:58)   письмо автору
 
   для: Blizard   (11.08.2011 в 14:51)
 

А не лучше ли закругленные края у дива так делать?

 border-radius:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;


Или на худой конец background'ом.

  Ответить  
 
 автор: Yuriev   (11.08.2011 в 15:15)   письмо автору
 
   для: cheops   (11.08.2011 в 02:12)
 

>Лучше обрамить картинку <div>, чем просто использовать <img>
Почему?

  Ответить  
 
 автор: cheops   (11.08.2011 в 17:00)   письмо автору
 
   для: Yuriev   (11.08.2011 в 15:15)
 

В первую очередь удобнее, во вторую тэг <img> все же строковый, а не блочный элемент, следовательно, он должен быть элементом блочного тэга. Не все стандарты любят болтающиеся строковые элементы.

PS А вообще, конечно, в первую очередь смотрите как вам удобнее.

  Ответить  
 
 автор: Blizard   (13.08.2011 в 16:56)   письмо автору
 
   для: cheops   (11.08.2011 в 17:00)
 

Как сделать так. чтобы <div> расширялся по высоте если туда с помощью js добавляется текст, который не влезает в высоту <div> ?

  Ответить  
 
 автор: Blizard   (13.08.2011 в 18:42)   письмо автору
 
   для: Blizard   (13.08.2011 в 16:56)
 

Решил с помощью clear: both;

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования