Трабл со столами

0

HTML/CSS noobie здесь.

Извините, если это очень простая проблема, но я не знаю, как это записать в Google.

Изображение 174551

Это (очень, очень) рудиментарный веб-сайт, который я делаю для своей старшей школы робототехники.

Как заставить боковую панель начинать сверху и не центрировать? Это таблица внутри другой таблицы.

Вот CSS для "боковой панели":

#sidebar {
height: 100%;
width: 200px;
}

EDIT: Вот HTML:

<body>
<table>
    <tr class="banner">
        <h1>Banner goes here</h1>
        <p>Nothing here is final. No, the final site will not be this ugly.</p>
    </tr>
    <tr>
        <td>
            <table class="center" id="sidebar">
                <tr><td>Home</td></tr>
                <tr><td>About</td></tr>
                <tr><td>Sponsors</td></tr>
                <tr><td>Contact Us</td></tr>
                <tr><td>FTC 5969</td></tr>
                <tr><td>FRC 4538</td></tr>
                <tr><td>FTC 7084</td></tr>
                <tr><td>Media</td></tr>
                <tr><td>Events</td></tr>
            </table>
        </td>
        <td>
            (main content)
        </td>
    </tr>
</table>

  • 0
    Можете ли вы также показать свой HTML?
  • 1
    Я уверен, что появятся еще какие-то комментарии, но позвольте мне высказать некоторые идеи. Если вы не уверены в положении элемента, добавьте рамку или задайте ему цвет фона. Также играйте на jsfiddle.net, и вы можете экспериментировать со множеством разных вещей. Также постарайтесь не использовать таблицы для разметки, переключитесь на divs. Сначала это немного расстраивает, но как только вы освоитесь, это сработает.
Показать ещё 2 комментария
Теги:

2 ответа

3
Лучший ответ

Думаю, я понял это для вас.

Я пробовал это с помощью той же самой вещи на моем сайте

<td style="vertical-align:top;">

Добавьте этот атрибут стиля в тег td, окружающий ваш контент слева, и он должен ударить его вверх по верхней части ячейки, в которой он находится.

Альтернатива CSS - это

#sidebar {
height: 100%;
width: 200px;
vertical-align:top;
}

или если вы специально хотите его только для ваших тд-тегов, просто выполните

#sidebar td {
vertical-align:top;
}

под основной вашей подписью #sidebar

  • 0
    Этот ответ действителен. Но я бы всегда рекомендовал использовать класс вместо id: table.center td или .center td . Таким образом, у вас есть общее правило css для каждой ячейки таблицы, которое является хорошей отправной точкой для обеспечения согласованного стиля на всех страницах.
  • 0
    Да, это правда, но идентификатор, как правило, предназначен для одноразового использования, например, панель навигации, которая является единственной и не должна повторяться в одном и том же документе несколько раз.
Показать ещё 1 комментарий
2

Если вы используете таблицу внутри другой таблицы, просто используйте vertical-align: сверху на TD #sidebar.

ДЕМО: http://jsfiddle.net/nukec/7XjTv/

HTML:

<table class="one" >
    <tr>
        <td>
<table>
    <tr>
        <td>            sdsdsdsdsd
                   </td>
    </tr>
</table> 
        </td>
    </tr>
</table>

CSS:

table{
    border: 1px solid red;
}

.one{
    height:500px;
}
td{
    vertical-align:top;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню