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

@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

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

Новые блоги и статьи Все статьи Все блоги /
Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .

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

	Как добавить блоки по бокам сайта 30.07.2010, 13:57. Показов 21350. Ответов 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
	Добрый день! Ваша тема мне очень помогла! спасибо! у меня еще вопрос.. как сделать что бы правые и левые колонки быле не резиновые а фиксированные? и соответственно правая=левой?