Панель заголовков CSS jQtouch

Question

Я использую jQtouch для небольшого мобильного приложения. Используя CSS по умолчанию , приложение выглядит так, как я хочу. Тем не менее, мне нужно иметь заголовок слева и справа от страницы. Например, альтернативный текст http://shaiperednik.com/img/AV-Clock-20091028-084713.png

Если кто-то может указать мне правильное направление для достижения этого, я был бы очень признателен. Спасибо!

Answer 1

shaiss,

Я думаю, что использование <table> селекторов - путь.

По моему мнению, ваше приложение отображает табличные данные. Поэтому я думаю, "In" и "День / Неделя" должны быть заголовками столбцов. Используйте <th></th> вместо <td></td> для определения ячеек заголовка. Вам необходимо обернуть <th> в <tr></tr>, а <thead> и <tbody> необязательны:

<table>
  <thead>
    <tr><td>col1</td><td>col2</td></tr>
  </thead>
  <tbody>
    <tr><td>data1</td><td>data2</td></tr>
  </tbody>
</table>

Затем вы можете расположить <th> с "In" следующим образом:

thead th.left
{
  text-align: left;
}​

Полный исходный код здесь: http://jsfiddle.net/g3MKj/

Конечно, что-то вроде кода Яна Агаарда может сработать для вас. Но просто ради обучения, еще один способ сделать то же самое в CSS:

span.absolute-right
{
    position:absolute;
    right:0;
    margin-right:10px;
}

HTML:

<span>In</span>
<span class="absolute-right">Day/Week</span>

У меня есть этот пример, и Ян Агаард, плюс еще один пример, использующий position:relative здесь: http://jsfiddle.net/L7fTp/

Answer 2

Как насчет стандартного CSS? Примерно так:

div.leftHeader
{
    float: left;
}
div.rightHeader
{
    float: right;
}
div.clear
{
    clear: both;
}

А затем используйте этот HTML-код:

<div class="leftHeader">In</div>
<div class="rightHeader">Day/Week</div>
<div class="clear"></div>