CSS отмена материнских параметров

Тема в разделе "Веб-дизайн", создана пользователем trooll, 13 апр 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. trooll

    trooll PHP кодер

    Регистр.:
    22 дек 2008
    Сообщения:
    503
    Симпатии:
    116
    Народ собственно решил создать данную тему так как счел что должно быть актуально и интересно. В инете по этому поводу не чего толкового не нашел.
    Ну вот собственно, появился сегодня такой вопрос по поводу работы CSS, а точнее правила дочерних классов.
    Вопрос: Как можно отменить параметры материнского класса?

    Задача: Задать размер ячейки 100% с id=7. Желательно не используя javascript и неменять изначальных параметров CSS.
    Собственно сам пример:
    HTML код:
    HTML:
    <html>
    <head>
    </head>
    <body>
    <table class="tbl">
    <tr>
    <td id="1">1 ячейка</td>
    <td id="2">2 ячейка</td>
    <td id="3">3 ячейка</td>
    <td id="4">4 ячейка</td>
    </tr>
    <tr>
    <td id="5">5 ячейка</td>
    <td id="6">6 ячейка</td>
    <td id="7">7 ячейка</td>
    <td id="8">8 ячейка</td>
    </tr>
    </table>
    </body>
    </html>
    CSS код:
    .tbl {width: 100%;}
    .tbl td {width: 20%;}

    P.S.: Очень интересно узнать ваше мнение по поводу данной проблемы, и конечно поглядеть решение данной задачи.
    P.S.S.: В свою очередь нашел решение (без использования javaskript) но только для своего случая , то есть для таблицы в которой содержаться больше 1 колонки. Решение: Создание Блока из четырех ячеек и объединения их.
     
  2. Dewars

    Dewars Создатель

    Регистр.:
    14 мар 2009
    Сообщения:
    25
    Симпатии:
    1
    .tbl td {width: 100%;}
    .tbl td#1, .tbl td#2, .tbl td#3, .tbl td#4, .tbl td#5, .tbl td#6 { width: 20%; }
     
  3. trooll

    trooll PHP кодер

    Регистр.:
    22 дек 2008
    Сообщения:
    503
    Симпатии:
    116
    Чуток не то, я id проставил для того чтобы указать определенную ячейку (короче не подумав сделал это). В реале будет такой код и ячейку со значением "7 ячейка" нужно сделать размером 100%

    HTML:
    <html>
    <head>
    </head>
    <body>
    <table class="tbl">
    <tr>
    <td>1 ячейка</td>
    <td>2 ячейка</td>
    <td>3 ячейка</td>
    <td>4 ячейка</td>
    </tr>
    <tr>
    <td>5 ячейка</td>
    <td>6 ячейка</td>
    <td>7 ячейка</td>
    <td>8 ячейка</td>
    </tr>
    </table>
    </body>
    </html>
    CSS код:
    .tbl {width: 100%;}
    .tbl td {width: 20%;}

    P.S.: Извеняюсь неверно указал HTML код в первом посту, грубо говоря затупил:)
     
  4. Dewars

    Dewars Создатель

    Регистр.:
    14 мар 2009
    Сообщения:
    25
    Симпатии:
    1
    без js нереально
     
  5. kotarosan

    kotarosan

    Регистр.:
    29 дек 2007
    Сообщения:
    169
    Симпатии:
    60
    А что мешает поставить уникальный id 7 ячейке?

    <td id="td7">7 ячейка</td>

    а в css прописать
    .tbl #td7 {width: 100%;}

    ЗЫ А если проверить на практике, то что хочет ТС это полный бред .

    Как можно растянуть 7 ячейку без 3?
     
    NULLED555 нравится это.
  6. wbread

    wbread Создатель

    Регистр.:
    24 ноя 2007
    Сообщения:
    20
    Симпатии:
    3
    вообще как можно 7 сделать 100%, куда 100 если рядом еще... - это 5,6,8 = 0px
    проще colspan поставить сразу и все

    Код:
    <html>
    <head>
    </head>
    <body>
    <table class="tbl">
    <tr>
    <td>1 ячейка</td>
    <td>2 ячейка</td>
    <td>3 ячейка</td>
    <td>4 ячейка</td>
    </tr>
    <tr>
    <td colspan="4">7 ячейка</td>
    </tr>
    </table>
    </body>
    </html>
    это как:D
    я сделал одну, да и то на 80% получится, отдельно отрибуты прописать если для 7... проще сделать 5 ячеек в строку и пусть 5 будет пустая или с болванкой
     
  7. trooll

    trooll PHP кодер

    Регистр.:
    22 дек 2008
    Сообщения:
    503
    Симпатии:
    116
    Да это вариант, так проблему решил я в своем случае.

    Но я же тему веду не к этому, таблицу я привел для примера. Существует множество других примеров где встречеаться данная проблема, в некоторых вариантах можно прописать id, накрыть javaskript-om, где то объятдениь ячейки, в ставить новый элемент либо запечатать его в другой и т.д..

    Вот в принципе хочется узнать есть ли какой ни будь единый статический способ отмены материнских параметров в дочернем классе, без применения javaskript-a и колдовством над html кодом, что бы достичь результат в верстке.
     
  8. hamann11

    hamann11 Создатель

    Регистр.:
    19 ноя 2008
    Сообщения:
    48
    Симпатии:
    13
    В большинстве случаев (по моему опыту процентах в 95) есть смысл обойтись вообще без таблиц.
    слоями удобнее, быстрее и код весит в 20 раз меньше.
    див1 див2 див 3 див 4 с флоатом лефт
    а вторым рядом див5 шириной 1+2+3+4 или 100% еслли в % ширине от экрана с флоат нон. Или я не так проблеу понял?

    P.S. а если табличкой так уж необходимо пользоваться, то тут естественно колспан решает, и не только в этом случае. А материнские параметры отменяются, если их заново прописать дочерним элементам, разве этого недостаточно в данном случае?
     
  9. rutle

    rutle Писатель

    Регистр.:
    9 дек 2008
    Сообщения:
    4
    Симпатии:
    0
    :ay:я тож так думаю :D
     
  10. wbread

    wbread Создатель

    Регистр.:
    24 ноя 2007
    Сообщения:
    20
    Симпатии:
    3
    все браузеры будто хорошо с css работают, на дивах не всегда хорошо тоже выходит
     
Статус темы:
Закрыта.