Как добавить блоки по бокам сайта

@googles · Регистрация: 08.07.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте, собстно необходимо добавить 2 блока по бокам сайта.
Подскажите как?

вот скрин

@Alorian · 30.07.2010, 14:02

HTML5
1
2
3
4
5
6
7
<table id="wrapper">
    <tr>
        <td id="left">Левая колонка</td>
        <td id="middle">Все что раньше было в центре</td>
        <td id='right'>Правая колонка</td>
    </tr>
</table>

@Dzhej-Dzhej · 30.07.2010, 14:05

Сделай в body таблицу с трех столбцов. в средней расположи то что было в сайте раньше
а если ты по-поводу link, то я не помню

@googles · 30.07.2010, 15:48 **[ТС]**

Alorian,
спасибо хоть что то да вышло

@Alorian · 30.07.2010, 15:50

googles, что значит "хоть что-то"? Что-то неправильно отображается?

@googles · 30.07.2010, 18:30 **[ТС]**

Alorian,
ну оно не совсем так отображается так как когда я ставлю картинку в качестве колонок она отображается с лева по середине сайта а не на уровне с шапкой и верхним меню

Добавлено через 1 час 35 минут
как сделать чтобы блок находился на уровне с логотипом и верхнем меню?

@googles · 30.07.2010, 22:09 **[ТС]**

Вобщем такая проблема сделал блоки по бокам сайта но они должны были быть на уровне с логотипом в самом верху сайта, а они получились по бокам но не на уровне с логотипом а гдето по середине сайта.
В первом посте скрин где должны находится блоки,
а они вот тут:

@Alorian · 31.07.2010, 06:23

Если я правильно понял, то тебе нужно вертикальное выравнивание по верхнему краю колонки.
В css для колонки пропиши:

CSS
1
#left{vertical-align:top;}

@googles · 31.07.2010, 11:45 **[ТС]**

Alorian,
а куда именно этот код вставить подскажи

@Alorian · 31.07.2010, 11:49

googles, Туда где у тебя находятся все стили css. Если стили у тебя вынесены в отдельный файл styles.css, то вставить нужно в этот отдельный файл. Если стили у тебя прописаны прямо на самой странице, то вставить нужно прямо на саму страницу. И т.д. Повторюсь, там где у тебя прописаны все остальные стили, туда и нужно вставлять.

@googles · 31.07.2010, 11:51 **[ТС]**

Alorian, да у меня в отдельном файле.css но я затрудняюсь с местом куда нужно этот код вставить

@Alorian · 31.07.2010, 11:59

1. Открой файл css редактирования.
2. Сделай поиск по ключевому слову "#left" без ковычек.
3. Если поиск ничего не найдет, то вставлять можно в любое место.

Чтобы код #left{vertical-align:top;} работал, нужно чтобы у колонки был id="left". То есть код таблицы должен быть в точности таким как в моем первом посте из этого топика.

@googles · 31.07.2010, 12:10 **[ТС]**

Alorian,
вот
открыл файл.css

и почти сразу втавил код
вот сюда

CSS
1
2
3
4
5
6
7
8
9
10
body
{
background:url(images/bg.gif) repeat-x top #fff;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin:0px auto auto auto;
color:#514c48;
#left{vertical-align:top;}
}

в файле wrapper все сделал как ты писал в первом посте но все равно колонки по середине сайта

@Alorian · 31.07.2010, 12:11

googles, так в css писать нельзя.
Нужно сделать так:

CSS
1
2
3
4
5
6
7
8
9
10
11
body
{
background:url(images/bg.gif) repeat-x top #fff;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin:0px auto auto auto;
color:#514c48;
}
 
#left{vertical-align:top;}

После того как внесешь изменения нужно два раза обновить страницу по F5. Файлы css кешируются браузером.

@googles · 31.07.2010, 12:58 **[ТС]**

Alorian,
cейчас попробую

@Alorian · 31.07.2010, 13:03

Воспользуйся padding'ом для колонки, либо margin'ом для содержимого колонки.
То есть так:

CSS
1
#left{vertical-align:top;padding-top:40px;}

Либо так:

HTML5
1
2
3
4
5
6
7
    <table id="wrapper">
        <tr>
            <td id="left"><div id="left-content"></div></td>
            <td id="middle"></td>
            <td id="right"></td>
        </tr>
    </table>

CSS
1
#left-content{margin-top:40px;}

Вместо 40px выстави нужное значение.

@googles · 31.07.2010, 16:51 **[ТС]**

Alorian,

Сообщение от Alorian

#left{vertical-align:top;padding-top:40px;}

вот за это благодарю все выщло почти как я хотел! спасибо, сейчас с

Сообщение от Alorian

margin

посмотрю как да что

@Alorian · 31.07.2010, 16:52

googles, я привел пример с margin'ом в прошлом посте. Что конкретно там непонятно?

@googles · 31.07.2010, 19:28 **[ТС]**

Alorian,
у меня в качестве колонок 2 картинки по бокам, а хотелось бы чтоб было чтото вроде картинка как сама колонка а на картинке допустим ссылки "связь" рекламные баннеры и др

Добавлено через 2 часа 22 минуты
как бы это сделать?

03.12.2010, 15:05

Добрый день! Ваша тема мне очень помогла! спасибо! у меня еще вопрос.. как сделать что бы правые и левые колонки быле не резиновые а фиксированные? и соответственно правая=левой?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@googles 1 / 1 / 1 Регистрация: 08.07.2010 Сообщений: 39

	Как добавить блоки по бокам сайта 30.07.2010, 13:57. Показов 21284. Ответов 22 Метки нет (Все метки) Здравствуйте, собстно необходимо добавить 2 блока по бокам сайта. Подскажите как? вот скрин 0

@Dzhej-Dzhej Заблокирован
	30.07.2010, 14:05
	Сделай в body таблицу с трех столбцов. в средней расположи то что было в сайте раньше а если ты по-поводу link, то я не помню 0

@googles 1 / 1 / 1 Регистрация: 08.07.2010 Сообщений: 39
	30.07.2010, 15:48 [ТС]
	Alorian, спасибо хоть что то да вышло 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	30.07.2010, 15:50
	googles, что значит "хоть что-то"? Что-то неправильно отображается? 0

@googles 1 / 1 / 1 Регистрация: 08.07.2010 Сообщений: 39
	30.07.2010, 18:30 [ТС]
	Alorian, ну оно не совсем так отображается так как когда я ставлю картинку в качестве колонок она отображается с лева по середине сайта а не на уровне с шапкой и верхним меню Добавлено через 1 час 35 минут как сделать чтобы блок находился на уровне с логотипом и верхнем меню? 0

@googles 1 / 1 / 1 Регистрация: 08.07.2010 Сообщений: 39
	30.07.2010, 22:09 [ТС]
	Вобщем такая проблема сделал блоки по бокам сайта но они должны были быть на уровне с логотипом в самом верху сайта, а они получились по бокам но не на уровне с логотипом а гдето по середине сайта. В первом посте скрин где должны находится блоки, а они вот тут: Миниатюры 0

@googles 1 / 1 / 1 Регистрация: 08.07.2010 Сообщений: 39
	31.07.2010, 11:45 [ТС]
	Alorian, а куда именно этот код вставить подскажи 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	31.07.2010, 11:49
	googles, Туда где у тебя находятся все стили css. Если стили у тебя вынесены в отдельный файл styles.css, то вставить нужно в этот отдельный файл. Если стили у тебя прописаны прямо на самой странице, то вставить нужно прямо на саму страницу. И т.д. Повторюсь, там где у тебя прописаны все остальные стили, туда и нужно вставлять. 1

@googles 1 / 1 / 1 Регистрация: 08.07.2010 Сообщений: 39
	31.07.2010, 11:51 [ТС]
	Alorian, да у меня в отдельном файле.css но я затрудняюсь с местом куда нужно этот код вставить 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	31.07.2010, 11:59
	1. Открой файл css редактирования. 2. Сделай поиск по ключевому слову "#left" без ковычек. 3. Если поиск ничего не найдет, то вставлять можно в любое место. Чтобы код #left{vertical-align:top;} работал, нужно чтобы у колонки был id="left". То есть код таблицы должен быть в точности таким как в моем первом посте из этого топика. 1

@googles 1 / 1 / 1 Регистрация: 08.07.2010 Сообщений: 39
	31.07.2010, 12:58 [ТС]
	Alorian, cейчас попробую 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	31.07.2010, 16:52
	googles, я привел пример с margin'ом в прошлом посте. Что конкретно там непонятно? 0

@googles 1 / 1 / 1 Регистрация: 08.07.2010 Сообщений: 39
	31.07.2010, 19:28 [ТС]
	Alorian, у меня в качестве колонок 2 картинки по бокам, а хотелось бы чтоб было чтото вроде картинка как сама колонка а на картинке допустим ссылки "связь" рекламные баннеры и др Добавлено через 2 часа 22 минуты как бы это сделать? 0

Alexx1
	03.12.2010, 15:05
	Добрый день! Ваша тема мне очень помогла! спасибо! у меня еще вопрос.. как сделать что бы правые и левые колонки быле не резиновые а фиксированные? и соответственно правая=левой?