Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css верстка / 8 сообщений из 8, страница 1 из 1
20.12.2014, 00:15
    #38838555
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css верстка
Помогите подправить макет - у меню контент отображается наверху поцентру, а боковые колонки по бокам внизу (а должны быть на одном уровне) Идея такая: три колонки, одинаковые по высоте. Надо чтобы блок с контентом шел первый.
Код: 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
| Ответить | Цитировать | Написать  
22.12.2014, 16:24
    #38839849
Павел Гужанов
Павел Гужанов
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css верстка
Добавь контенту float:left;
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.12.2014, 12:52
    #38841593
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css верстка
Спасибо, колонки встали на свои места. НО теперь из-за маргинов дива 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, 13:24
    #38841633
Павел Гужанов
Павел Гужанов
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css верстка
Если диву id="left" добавить float: left;, то все получается нормально, причем независимо от позиционирования у правой колонки
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.12.2014, 20:08
    #38843308
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css верстка
Я так пробовал. Но из-за маргина блока content текст левой колонки находится внизу
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.12.2014, 21:39
    #38843361
kunaksergey
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css верстка
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
| Ответить | Цитировать | Написать  
26.12.2014, 18:05
    #38844098
dik_k
dik_k
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css верстка
Так слева отображается блок cоntent, потом по центру блок left, и справа блок right.
А должно быть так:
блок left блок content блок right
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.12.2014, 20:12
    #38844194
kunaksergey
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css верстка
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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css верстка / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 519ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1446404]:
 0ms
get settings:
 7ms
get forum list:
 13ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 198ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 37ms
get tp. blocked users:
 1ms
others: 249ms
total:  519ms
x
x
Закрыть


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