| |
|
|
| | Продвигаю один из своих сайтов и вот решил максимально переделать его на 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;} и так по каждому атрибуту, хочется узнать как все-таки правильно. | |
| |
|
|
| |
|
|
| |
для: 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 хуже не будет. Удобно, тиражируемого, меньше объем трафика. | |
| |
|
|
| |
|
|
| |
для: cheops
(10.08.2011 в 22:03)
| | | >2) padding: 0px и margin: 0px - применять к тому объекту к которому хотите, если это таблица, лучше оставьте cellpadding и cellspacing в покое до лучших времен.
Я использую border-collapse:collapse, а атрибуты не указываю. Например:.<table class='t'> | |
| |
|
|
| |
|
|
| |
для: Blizard
(10.08.2011 в 20:57)
| | | >Какие аналоги в css у:? <table align=center>
Если хотите выравнить саму таблицу относительно родителя, а не ее содержимое. | |
| |
|
|
| |
|
|
| |
для: antf
(10.08.2011 в 22:08)
| | | Спасибо всем за ответы. Всетаки решил переписать сайт на дивах, хотябы немного этому научусь. а то уже все давно так сайты делают, а я все на таблицах )) | |
| |
|
|
| |
|
|
| |
для: 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:29)
| | | Решил этот вопрос float: left;
А что для поисковиков и для XHTML лучше - пустой див с картинкой или <img src> ? | |
| |
|
|
| |
|
|
| |
для: Blizard
(10.08.2011 в 23:36)
| | | Лучше обрамить картинку <div>, чем просто использовать <img> | |
| |
|
|
| |
|
|
| |
для: cheops
(11.08.2011 в 02:12)
| | | скажите, а почему padding расширяет div? Я конечно учел размерность div сделал его меньше так сказать на кол-во padding, но может есть какой-то универсальный метод? | |
| |
|
|
| |
|
|
| |
для: Blizard
(11.08.2011 в 11:36)
| | | Так прописано в стандарте css. Реальная ширина видимой части блока = border-left + padding-left + width + padding-right + border-right. То же самое с высотой.
>есть какой-то универсальный метод?
Внутрь div вставить еще один div, чтобы прописывать отступы в нем. | |
| |
|
|
| |
|
|
| |
для: 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>
|
На сколько валиден такой код? | |
| |
|
|
| |
|
|
| |
для: Blizard
(11.08.2011 в 14:51)
| | | А не лучше ли закругленные края у дива так делать?
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
|
Или на худой конец background'ом. | |
| |
|
|
| |
|
|
| |
для: cheops
(11.08.2011 в 02:12)
| | | >Лучше обрамить картинку <div>, чем просто использовать <img>
Почему? | |
| |
|
|
| |
|
|
| |
для: Yuriev
(11.08.2011 в 15:15)
| | | В первую очередь удобнее, во вторую тэг <img> все же строковый, а не блочный элемент, следовательно, он должен быть элементом блочного тэга. Не все стандарты любят болтающиеся строковые элементы.
PS А вообще, конечно, в первую очередь смотрите как вам удобнее. | |
| |
|
|
| |
|
|
| |
для: cheops
(11.08.2011 в 17:00)
| | | Как сделать так. чтобы <div> расширялся по высоте если туда с помощью js добавляется текст, который не влезает в высоту <div> ? | |
| |
|
|
| |
|
|
| |
для: Blizard
(13.08.2011 в 16:56)
| | | Решил с помощью clear: both; | |
| |
|
|
