Таблица 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

После думать об этом на некоторое время, я думаю, что я медленно получить то, что вы после : Вы хотите вертикально выровнять текст «Нажмите, чтобы сбросить системный сердечник» внутри div #dataBurst

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

<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

Это работает. 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

Answer 3

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

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

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