CSS стилизация и позиционирование таблицы - PullRequest
Новая
       16

CSS стилизация и позиционирование таблицы

1 голос
/ 08 сентября 2011

У меня есть вопрос, касающийся стиля и расположения стола.Я создал таблицу с двумя столбцами и несколькими строками, и я хочу, чтобы она «вписывалась» в мое фоновое изображение.Поскольку это довольно расплывчатое объяснение ситуации, я включил эту скрипку .

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

Я пытался стилизовать элемент td с помощью таких атрибутов, как 

  td {
  height: 20% ; 
  }

или 

 td {
 cellpadding: ... ;
 cellspacing: ... ;
 }

(Не знаю, если это даже атрибуты CSS, которые я могу использовать здесь)

, но я просто не могу получить элементы таблицы в нужном месте.Кто-нибудь, кто мог бы помочь мне или кто-то, кто мог бы предложить мне хорошую информацию, чтобы сделать это самостоятельно?

Ответы [ 3 ]

2 голосов
/ 08 сентября 2011

Не используйте таблицы для макетов.В этом случае имеет смысл использовать список: 

<div class="news"> <!--News-->
    <ul>
        <li><label>Friday 9-September-2011</label><a href="/news/items/090911_item1.html">item 1</a></li>
        <li><label>Friday 9-September-2011</label><a href="/news/items/090911_item2.html">item 2</a></li>
        <li><label>Friday 9-September-2011</label><a href="/news/items/090911_item3.html">item 3</a></li>                        
    </ul>

</div> <!-- / News -->

CSS: 

.news ul {
    float:right;
    background-image: url('http://img64.imageshack.us/img64/3368/newsbg.png');
    width: 417px ;
    height: 186px ;
    background-repeat: no-repeat;
    padding-top:55px;
}

.news li {    
    height:38px; 
}

.news label {
    display:inline-block;
    width:230px;
}

.news a {
    display:inline-block;
    width:160px;
    text-align:right;
}
1 голос
/ 08 сентября 2011

Не думаю, что вам следует так поступать. Почему бы вам просто не вынуть «>>>» из изображения, сохранить его как свое собственное изображение, а затем включить его либо встроенным в html (то есть), либо как фоновое изображение одной из строк (по центру, конечно ). Затем создайте текст заголовка таблицы и стилизуйте его соответствующим образом.

0 голосов
/ 08 сентября 2011

Вы должны найти правильные отступы сверху и снизу для ячеек или просто установить фиксированную высоту для всех них.

...