Перейти к содержимому

Реферальная программа Мегаплана


Позиционирование, относительные координаты HELP!

#1 Гость_pika4y_*

Гость_pika4y_*
  • Гости
0

Отправлено 06 Октябрь 2008 - 06:24

Доброго времени суток, Не как не могу разобраться с относительным позиционированием.
Я накачал кучу книг по КСС, но там везде разметка в три колонки, и примеры не очень сложные. Крутят три дива и типа все показали, или мне книжки такие попались.
Помогите, пожалуйста, создать резиновый каркас, вот по такой примерно схеме. Разметка
Что то не получается у меня не с float: не с position: relative;
Заранее благодарю!

 

 

  • 0

#2 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 06 Октябрь 2008 - 10:41

Ну вот к примеру хотяб так
<html>
<head>
<style type="text/css">
*
{
	margin: 0px;
	padding: 0px;
}

html,body
{
	margin: 3px;
	padding: 0px;

}

div.div_bg
{
	width: 90%;
	height: 80%;
	background-color: #FEFF8F;
	padding: 5%;
}

.block
{
	width: 100%;
	height: 100%;
}

.block_vnutr
{
	padding-top: 50px;
	width: 60%;
	height: 80%;
}

.div_top_l
{
	width: 15%;
	height: 10%;
	background-color: #F1A770;
	float: left;
}

.div_top
{
	width: auto;
	height: 10%;
	background-color: #68DC83;
	float: center;
}

.div_top_r
{
	width: 15%;
	height: 10%;
	background-color: #F1A770;
	float: right;
}

.div_line_l
{
	width: 15%;
	height: 80%;
	background-color: #6D68DC;
	float: left;
}

.div_line
{
	width: auto;
	height: 80%;
	float: center;
}


.div_line_r
{
	width: 15%;
	height: 80%;
	background-color: #6D68DC;
	float: right;
}
</style>
</head>
<body>
<div class="div_bg">
<div class="block">
	<div class="div_top_l"></div>
	<div class="div_top_r"></div>
	<div class="div_top"></div>

	<div class="div_line_l"></div>
	<div class="div_line_r"></div>
	<div class="div_line">
		<center>
		<div class="block_vnutr">
			<div class="div_top_l"></div>
			<div class="div_top_r"></div>
			<div class="div_top"></div>
		
			<div class="div_line_l"></div>
			<div class="div_line_r"></div>
			<div class="div_line"></div>
		
			<div class="div_top_l"></div>
			<div class="div_top_r"></div>
			<div class="div_top"></div>
		</div>
		</center>
	</div>

	<div class="div_top_l"></div>
	<div class="div_top_r"></div>
	<div class="div_top"></div>
</div>
</div>
</body>
</html>

Под Мазилой смотрится нормально, а вод под IE размер получились совсем другие. Тут скорее всего нужен доктайп!

Но идею я вашу передал :)
  • 0

#3 Гость_pika4y_*

Гость_pika4y_*
    Topic Starter
  • Гости

Отправлено 06 Октябрь 2008 - 12:24

Спасибо большое! :) Можете пояснить, что это за птица? <center></center> и какую она роль играет в данном каркасе?
И вот еще вопрос. float: center; я такого, ни где, не видел. И в программулине "TopStyle 3.5" тоже такого значения, для float нету.
Хотел еще спросить, в чем разница между классом и дивом? тобишь Див с ИД. <div id="TOP"> или класс <div class="div_bg">
Еще раз спасибо за ваше терпение и время! :(
  • 0

#4 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 06 Октябрь 2008 - 22:41

Отвечу на все вопросы.
1)<center></center> определяет положение элемента или текста по центру внешнего блока. Этот тег валиден и полностью соответствует стандартам.
2)
float: center;
Да я сам такого float не видел, но поставил, и заработало в двух браузерах (мазиле и IE, оперы нету), иначе не знаю, как его сделать по центру + ещё и на автомате по максимуму растянуть :( Насчёт как будет ли он работать при доктайпе я не знаю, делал без доктайпа.
3) разница большая
id - (уникальный идентификатор) идентификатор указывающий на ОДИН и только ОДИН элемент, одного и того же id не может быть у 2 элементов!
class - (класс элементов) указывает на группу элементов, которые нам надо оформить, к примеру у нас есть 3 div'а, которым нам надо дать одно и тоже оформление, тогда используем классы.

Ещё одно дополнение, если вы хотите использовать сразу 2 класса для одного элемента, это легко осуществимо.(К примеру красный цвет текста + жирный текст)

.red
{
  color: #FF0000;
}

.bold
{
  font-weight: bold; 
}

.......

<div class="red bold">Текст жирный и красный</div>

Пишем через пробел.

Есть очень много тонкостей вёрстки которых мы не знаем, надо пытаться импровизировать и мыслить по-своему :)
Удачи!
  • 0

#5 Гость_pika4y_*

Гость_pika4y_*
    Topic Starter
  • Гости

Отправлено 07 Октябрь 2008 - 06:00

Посмотрите пожалуйста, где ошибка, нарушина иерархия Div = center. Не могу понять почему он не подчиняется потоку.
<html >
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>WTF</title>
<style type="text/css">
#left_colum{border: solid 1px;width: 165px;height: 600px;float: left; padding: 5px;float: left;} 
   
#right_colum {border: solid 1px;width: 240px;height: 600px; padding: 5px;float: right;}

#top_center_colum{ padding: 5px; width: auto;height: 100%;background-color: #ff7f50;float: center;}

#center_left{margin-left: 5px;width:330px; height: 100%; border: solid 1px;float: left;}

#center_right{margin-right: 5px;width: 330px; height: 100%;background-color: #5f9ea0;float: right;}

#center{margin-left: 182px;margin-right: 256px;background-color: maroon;width: auto;height: 500px;text-align: center;float: center;}
</style>
</head>

<body>
<div id="top_center_colum">
  <div id="left_colum">left</div>
	 <div id="right_colum">right</div>
		<div id="center_left">Программа Punto Switcher предназначена для автоматического переключения раскладки
ООО «Яндекс» 2008</div>
		   <div id="center_right">right</div>
	  <div id="center">WTF? center</div>
</div>
</body>
</html>
Мне казалось, что он должен идти после <div id="center_left"> и<div id="center_right"> а он залезает на один уровень сними.
посмотреть кривую верстку -----> тут
  • 0

#6 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 07 Октябрь 2008 - 18:49

Вы не поняли... Вам надо запихнуть 3 дива в один цельный, вот код примерный...
<html>
<head>
<style type="text/css">
*
{
	margin: 0px;
	padding: 0px;
}

html,body
{
	margin: 3px;
	padding: 0px;

}

div.div_bg
{
	width: 98%;
	height: 80%;
	background-color: #FFF;
	padding: 1%;
}

.block
{
	width: 100%;
	height: 100%;
}


.div_top_l
{
	width: 15%;
	height: 50%;
	background-color: #F1A770;
	float: left;
}

.div_top
{
	width: auto;
	height: 50%;
	background-color: #ff7f50;
	float: center;
}

.div_top_r
{
	width: 15%;
	height: 50%;
	background-color: #F1A770;
	float: right;
}

</style>
</head>
<body>
<div class="div_bg">
<div class="block">
	<div class="div_top_l">left</div>
	<div class="div_top_r">right</div>
	<div class="div_top">
	<div class="div_top_l">left</div>
	<div class="div_top_r">right</div>
	<div class="div_top">asdasd</div>
	</div>
</div>
</div>
</body>
</html>

Там уж форматируйте как хотите :)
  • 0

#7 Гость_pika4y_*

Гость_pika4y_*
    Topic Starter
  • Гости

Отправлено 12 Октябрь 2008 - 07:02

Там уж форматируйте как хотите :)

Как хотим, не получается :)
После долгих экспериментов, удалось создать такой каркас.
Ляпы смотреть -----> Тут
Хотел, чтобы #с3 –что красный, шел бы сразу за #c1 и #c2, тобишь сразу подними. А его вон куда вставляет.
Объясните, пожалуйста, почему так вышло? Как сделать чтобы #top_c1 не обтекал #с3
<body>
<div class="div_bg">
<!-- --------------------------------------Tyshka start---------------------------------------------- -->
   <div id="TOP">
	  <div id="top_l1"></div>
		  <div id="top_r1"></div>
				 <div id="top_c1">
					<div id="c1"></div>
						<div id="c2"></div>
						  <div id="c3"></div>
		   </div>
  </div>
<!-- ----------------------------------Footer Block start-------------------- -->
<div id="footer1">footer1</div>
<div id="footer2">footer2</div>
</div>  </div>
</body>
body,html {
  padding		  : 0;
  margin		   : 0;
  margin: 0px;
  }
div.div_bg
{
	width: 90%;
	height: 80%;
	background-color: #FEFF8F;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 1%;
	padding-bottom: 1%;
}
#TOP{
   background-color: aqua;
   width: 100%;
   height: 100%;
   }

 #top_l1{
   background-color: #c71585;
	width: 200px;
   height: 100%;
   padding: 5px;
   float: left;
} 
#top_c1{
 width: auto;
	height: auto;
	background-color: #68DC83;
	margin-right: 350px;
	margin-left: 210px;
	}
	
#top_r1{
   background-color: green;
	width: 340px;
   height: 100%;
   float: right;
   padding: 5px;
}

#c1{
padding: 5px;
float: left;
width:48%;
background-color: #b8860b;
}

#c2{
padding: 5px;
float: right;
width: 48%;
background-color: maroon;
}

#c3{
clear: both;
background-color: red;
width: 98%;
height: 20px;
float: right;
}

#footer1{
clear: both;
width: auto;
height: 200px;
background-color: #4682b4;
border: solid 1px;
}

#footer2{
clear: both;
width: auto;
height: 200px;
background-color: yellow;
}
Вскрыться можно с этим форматированием :(
Разобрался убрал для div c3. clear: both; все встало на свои места.
Укажите на ошибки, если кому времени не жалко или хотелось бы посмотреть альтернативный вариант такого каркаса.
М.Б. кто нибуть посоветует материал для изучения по форматированию и позиционированию блоков.
Заранее спасибо!
  • 0

#8 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 12 Октябрь 2008 - 20:23

Вот могу привести сайт который вам поможет разобраться с блочной вёрсткой http://htmlbook.ru/
Там либо в статьях, либо в другом разделе не мало инфы по блокам.
А вот ещё один интересный сайт по некоторым хакам, по блочной вёрстке там ничего не видел... http://tigir.com/
  • 0

#9 Renovatio

Renovatio
  • Пользователь
  • 187 сообщений
  • Репутация: 4

Отправлено 13 Апрель 2009 - 17:41

pika4y, книги надо не качать, а читать. Хорошая книга "Большая книга CSS" Дэвида Сойера.

Про float:center тоже никогда не слышал...
  • 0

#10 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 14 Апрель 2009 - 10:44

Renovatio, про float: center я наврал... Извиняюсь. Можно сделать так. Левый, float: left, а два правых в обратном порядке c float: right. Который будет центральный делаем width: auto
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru