Таблица CSS Проблема

Question

У меня есть это в HTML:

<div class="dataBurst" title="What is the Matrix?">
    <table align="center" height="100%">
        <tr>
            <td id="matrixTD">
                <span onclick="alert('Not Yet Online');" class="coredump" 
                    title="How Would You Know the Difference Between the Dream World And the Real World?">
                    Click for System Core Dump
                </span>
            </td>
        </tr>
    </table>
</div>

Используемый CSS:

div.dataBurst
{
    vertical-align:middle;
    width:500px;
    height:321px;
    background-color:#FFF;
    margin-left:auto;
    margin-right:auto;
    border-width:1px;
    border-style:solid;
    margin-bottom:20px;
    padding:5px;
    float:left;
    cursor:pointer;
    cursor:default;
    font-weight:normal;
    font-size:9px;

    overflow:auto;
    overflow-y: scroll;
    overflow-x: hide;
    text-align:justify;

    scrollbar-base-color:#575757;
    scrollbar-3dlight-color:#a6a6a6;
    scrollbar-track-color: #a6a6a6;
}


td#matrixTD
{
    text-align:justify;
    cursor:default; 
}

Проблема заключается в том, когда я пытаюсь создать класс / идентификатор с помощью: <table align="center" height="100%">, это не работает;как я могу это реализовать?

мой сайт: http://guygar.com

Answer 1

Подумав некоторое время, я думаю, что постепенно получаю то, что вам нужно: вы хотите выровнять текст "Click for System Core Dump" по вертикали внутри div # dataBurst

Я думаю, вы думаетеСлишком сложно здесь.На самом деле нет никакой необходимости в вертикальном выравнивании чего-либо здесь, просто дайте div большим верхним и нижним отступам:

<div class="dataBurst" title="What is the Matrix?" onclick="alert('Not Yet Online');">
     Click for System Core Dump
</div>

div.dataBurst {
    /* vertical-align:middle; -- not needed  */
    width:500px;
    padding: 150px 5px; /* First value is top/bottom, second is left/right. Adjust as neeeded. Replaces height:321px; */
    background-color:#FFF;
    text-align: center; /* replaces margin-left:auto; margin-right:auto; because you are centering inline text here. */
    border-width:1px;
    border-style:solid;
    margin-bottom:20px;
    float:left;
    cursor:pointer;
    cursor:default;
    font-weight:normal;
    font-size:9px;

    /* 
       Remove following, since there is not overflow happening here anyway,
       so the scrollbar properties also become unnecessary - and wont work 
       like this in newer IE's anyway, as they require the -ms- prefix.

    overflow:auto;
    overflow-y: scroll;
    overflow-x: hide;
    text-align:justify;

    scrollbar-base-color:#575757;
    scrollbar-3dlight-color:#a6a6a6;
    scrollbar-track-color: #a6a6a6;
    */
}

Также вам нужно решить, какой title вы действительно хотите.Я удалил внутренний, потому что он все равно, вероятно, перекрыт внешним.

Answer 2

Я не уверен, но вы хотите переместить атрибуты таблицы align="center" height="100%" в css?Если да, то вы должны удалить эти атрибуты из таблицы и добавить класс, подобный этому <table class="mytable">, когда вы делаете это, тогда в вашем CSS-файле вы добавляете следующее правило

.mytable  {
    height: 100%;
    width: auto;
    margin: 0 auto;
}

, вы можете изменить классимя в любом имени, которое вам нравится (также в html и css).

Answer 3

Это работает. HTML:

<div class="dataBurst" title="What is the Matrix?">
    <table id="table">
        <tr>
            <td id="matrixTD">
                <span onclick="alert('Not Yet Online');" class="coredump" 
                    title="How Would You Know the Difference Between the Dream World And the Real World?">
                    Click for System Core Dump
                </span>
            </td>
        </tr>
    </table>
</div>

И CSS:

div.dataBurst {
    vertical-align:middle;
    width:500px;
    height:321px;
    background-color:#FFF;
    margin-left:auto;
    margin-right:auto;
    border-width:1px;
    border-style:solid;
    margin-bottom:20px;
    padding:5px;
    float:left;
    cursor:pointer;
    cursor:default;
    font-weight:normal;
    font-size:9px;

    overflow:auto;
    overflow-y: scroll;
    overflow-x: hide;
    text-align:justify;

    scrollbar-base-color:#575757;
    scrollbar-3dlight-color:#a6a6a6;
    scrollbar-track-color: #a6a6a6;
}

table#table
{ 
    margin: 0 auto; height: 100%; 

}

td#matrixTD
{
    text-align:justify!important;
    cursor:default; 
}

И вы должны удалить курсор: по умолчанию; посмотрите здесь (только IE 5.5 не поддерживает курсор: указатель; , но никто больше не использует его .): http://www.quirksmode.org/css/cursor.html#t09