ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css верстка
8 сообщений из 8, страница 1 из 1
css верстка
    #38838555
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
Помогите подправить макет - у меню контент отображается наверху поцентру, а боковые колонки по бокам внизу (а должны быть на одном уровне) Идея такая: три колонки, одинаковые по высоте. Надо чтобы блок с контентом шел первый.
Код: html
1.
2.
3.
4.
5.
<div id="wrap">
   <div id="content">текст контента</div>
   <div id="left">текст левой</div>
   <div id="right">текст правой колонки</div>
</div>


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
#wrap {
	background: #eee url(img/sidebar_fon.jpg) left top repeat-x;
	overflow: hidden;
}
	#content {
		background: #fff; 
		margin: 0 202px; 
		border: 1px solid #000;
	}
	#left {
		float: left; 
		width: 200px;
		border: 1px solid #000;
		position: relative;  /*этой строчкой и следующей пытался подтянуть левую колонку наверх*/
		top: 0;
	}
	#right {
		float: right;
		width: 200px;
		border: 1px solid #000;
	}
...
Рейтинг: 0 / 0
20.12.2014, 00:15
| Ответить | Цитировать | Написать  
css верстка
    #38839849
Павел Гужанов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Павел Гужанов
Участник
Добавь контенту float:left;
...
Рейтинг: 0 / 0
22.12.2014, 16:24
| Ответить | Цитировать | Написать  
css верстка
    #38841593
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
Спасибо, колонки встали на свои места. НО теперь из-за маргинов дива content тексты сайдбаров сдвинуты вниз. Это можно поправить если сайдбары подтянуть наверх при помощи абсолютного позиционирования, но тогда не будет возможности иметь в сайдбарах больше текста чем в диве класса content.
Код: html
1.
2.
3.
4.
5.
<div id="wrap">
   <div id="content">текст контента</div>
   <div id="left">текст левой</div>
   <div id="right">текст правой колонки</div>
</div>


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
#wrap {
	position: relative;
	overflow: hidden;
}
	#content {
		margin: 0 202px; 
		float: left;
	}
	#left {
		width: 200px;
	}
	#right {
		float: right;
		width: 200px;
		position: absolute;  
		top: 0; right: 0;
	}


Это я показал на примере. Здесь правая колонка имеет абсолютное позиционирование и она не может быть длиннее чем content, а в левой колонке текст опущен на величину содержимого контента....
Как все таки правильно сделать?
...
Рейтинг: 0 / 0
24.12.2014, 12:52
| Ответить | Цитировать | Написать  
css верстка
    #38841633
Павел Гужанов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Павел Гужанов
Участник
Если диву id="left" добавить float: left;, то все получается нормально, причем независимо от позиционирования у правой колонки
...
Рейтинг: 0 / 0
24.12.2014, 13:24
| Ответить | Цитировать | Написать  
css верстка
    #38843308
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
Я так пробовал. Но из-за маргина блока content текст левой колонки находится внизу
...
Рейтинг: 0 / 0
25.12.2014, 20:08
| Ответить | Цитировать | Написать  
css верстка
    #38843361
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kunaksergey
Гость
dik_k,
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<head>
<style>
#wrap {
	position: relative;
	overflow: hidden;
}

#content, #left, #right { border:1px solid red; width:150px; height:50px;float:left }

#content{
	width:350px;
	margin: 0 202px; 
	}
	
	
	</style>
	</head>
	<div id="wrap">
   <div id="content">текст контента</div>
   <div id="left">текст левой</div>
   <div id="right">текст правой колонки</div>
</div>
...
Рейтинг: 0 / 0
25.12.2014, 21:39
| Ответить | Цитировать | Написать  
css верстка
    #38844098
dik_k
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dik_k
Участник
Так слева отображается блок cоntent, потом по центру блок left, и справа блок right.
А должно быть так:
блок left блок content блок right
...
Рейтинг: 0 / 0
26.12.2014, 18:05
| Ответить | Цитировать | Написать  
css верстка
    #38844194
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kunaksergey
Гость
dik_k,

можно конечно так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
<head>
<style>
#wrap {
	position: relative;
	overflow: hidden;

}

#content, #left, #right { border:1px solid red; width:150px; height:50px;}

#content{
	width:350px;
	margin: 0 200px; 

	}

	
#left{
float:left;
position:relative;
top:-50px
	}	
	
	#right{
float:right;
position:relative;
top:-50px;
	}	
	
	</style>
	</head>
	<div id="wrap">
   <div id="content">текст контента</div>
   <div id="left">текст левой</div>
  <div id="right">текст правой колонки</div>
</div>



но вообще- есть правило №3:Блок с float:left не может быть правее, чем блок с float:right. Может Вас натолкнет на что-то
...
Рейтинг: 0 / 0
26.12.2014, 20:12
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css верстка
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38839849&tid=1446404]:
 0ms
get settings:
 6ms
get forum list:
 11ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 201ms
get topic data:
 6ms
get forum data:
 1ms
get page messages:
 26ms
get tp. blocked users:
 1ms
others: 209ms
total:  465ms
созд. / загр.: 465ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]