Помощник
|
Позиционирование, относительные координаты HELP! |
Гость_0_*
Гость_0_* |
Сообщение
#1
|
||
|
|
||
|
|||
ZiTosS |
6.10.2008, 11:41;
Ответить: ZiTosS
Сообщение
#2
|
|
Ну вот к примеру хотяб так
<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_*
Гость_0_* |
Сообщение
#3
|
|
Спасибо большое! Можете пояснить, что это за птица? <center></center> и какую она роль играет в данном каркасе?
И вот еще вопрос. float: center; я такого, ни где, не видел. И в программулине "TopStyle 3.5" тоже такого значения, для float нету. Хотел еще спросить, в чем разница между классом и дивом? тобишь Див с ИД. <div id="TOP"> или класс <div class="div_bg"> Еще раз спасибо за ваше терпение и время! |
|
|
ZiTosS |
6.10.2008, 23:41;
Ответить: ZiTosS
Сообщение
#4
|
|
Отвечу на все вопросы.
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_*
Гость_0_* |
Сообщение
#5
|
|
Посмотрите пожалуйста, где ошибка, нарушина иерархия 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"> а он залезает на один уровень сними. посмотреть кривую верстку -----> тут |
|
|
ZiTosS |
7.10.2008, 19:49;
Ответить: ZiTosS
Сообщение
#6
|
|
Вы не поняли... Вам надо запихнуть 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_*
Гость_0_* |
Сообщение
#7
|
|
Там уж форматируйте как хотите Как хотим, не получается После долгих экспериментов, удалось создать такой каркас. Ляпы смотреть -----> Тут Хотел, чтобы #с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; все встало на свои места. Укажите на ошибки, если кому времени не жалко или хотелось бы посмотреть альтернативный вариант такого каркаса. М.Б. кто нибуть посоветует материал для изучения по форматированию и позиционированию блоков. Заранее спасибо! |
|
|
ZiTosS |
12.10.2008, 21:23;
Ответить: ZiTosS
Сообщение
#8
|
|
Вот могу привести сайт который вам поможет разобраться с блочной вёрсткой http://htmlbook.ru/
Там либо в статьях, либо в другом разделе не мало инфы по блокам. А вот ещё один интересный сайт по некоторым хакам, по блочной вёрстке там ничего не видел... http://tigir.com/ |
|
|
dreemix |
13.4.2009, 18:41;
Ответить: dreemix
Сообщение
#9
|
|
pika4y, книги надо не качать, а читать. Хорошая книга "Большая книга CSS" Дэвида Сойера.
Про float:center тоже никогда не слышал... |
|
|
ZiTosS |
14.4.2009, 11:44;
Ответить: ZiTosS
Сообщение
#10
|
|
|
Renovatio, про float: center я наврал... Извиняюсь. Можно сделать так. Левый, float: left, а два правых в обратном порядке c float: right. Который будет центральный делаем width: auto
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Wap снова торт - minion.help | 1 | MinionTeam | 3814 | 5.2.2020, 14:30 автор: MinionTeam |
|
HELP ME!!!! | 0 | blacklool | 5196 | 19.5.2012, 0:56 автор: -blacklool- |
|
Позиционирование блока в "резиновом" сайте | 4 | arthur1974 | 7725 | 16.5.2012, 18:26 автор: -arthur1974- |
|
Позиционирование логотипа по центру | 0 | nuon | 3374 | 30.4.2012, 10:30 автор: -nuon- |
|
Форма обратной связи в модальном окне HELP!!!! | 0 | Dani_hb | 10252 | 2.8.2011, 1:06 автор: -Dani- |
Текстовая версия | Сейчас: 25.4.2024, 2:52 |