|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
02.01.2009, 12:39 | #1 |
Форумчанин
Регистрация: 28.12.2008
Сообщений: 145
|
Div block в разных браузерах
Самостоятельно (недавно, для себя) изучаю Html. Приспичило мне изучить div block.
Сделала нужное мне в IE. А с Opera и Firefox не догоняю как сделать чтоб не съезжало, подскажите на моем примере. Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Тег DIV</title> <style type="text/css"> .block1 { width: 400px; /* Ширина слоя */ height: 250px; /* Высота слоя */ background: #fff; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ padding-right: 20px; border: solid 1px black; /* Параметры границы */ float: left; /* этот блок обтекает с левой стороны следующий блок*/ } .block2 { width: 120px; /* Ширина слоя */ height: 220px; /* Высота слоя */ background: #fff; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ border: solid 1px black; /* Параметры границы */ float: left; /* этот блок обтекает с левой стороны следующий блок*/ position: relative; /* относительное позиционирование*/ top: 10px; /*сдвигает положение верхнего края блока относительно предыдущего элемента*/ left: 10px; /*сдвигает положение левого края блока относительно предыдущего элемента*/ } .block3 { width: 240px; /* Ширина слоя */ height: 100px; /* Высота слоя */ background: #fff; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ border: solid 1px black; /* Параметры границы */ float: rigth; /* этот блок обтекает с правой стороны следующий блок*/ position: relative; /* относительное позиционирование*/ top: 10px; /*сдвигает положение верхнего края блока относительно предыдущего элемента*/ left: 20px; /*сдвигает положение левого края блока относительно предыдущего элемента*/ } .block4 { width: 240px; /* Ширина слоя */ height: 100px; /* Высота слоя */ background: #fff; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ border: solid 1px black; /* Параметры границы */ float: rigth; /* этот блок обтекает с Правой стороны следующий блок*/ position: relative; /* относительное позиционирование*/ top: 20px; /*сдвигает положение верхнего края блока относительно предыдущего элемента*/ left: 20px; /*сдвигает положение левого края блока относительно предыдущего элемента*/ } </style> </head> <body> <div class="block1"> <div class="block2">Image</div> <div class="block3">Text 1</div> <div class="block4">Text 2</div> </div> </body> </html>
Bingam
Последний раз редактировалось SkyM@n; 02.01.2009 в 13:22. |
02.01.2009, 14:21 | #3 |
Форумчанин
Регистрация: 28.12.2008
Сообщений: 145
|
Попробовала убрать на фиг вообще position: relative, открываю в Opera и Firefox (благо они есть, не знаю правда какие именно) но все равно уезжает. теперь к верхнему левому углу (3 и 4 блоки), мне надо чтобы второй блок был рядом, и они не перекрывали друг друга. И все эт вместе в 1-ом блоке, который по секрету в таблицу впендюрить надоб.
Bingam
|
02.01.2009, 14:45 | #4 |
Antimoderаtoris
Участник клуба
Регистрация: 08.02.2008
Сообщений: 1,251
|
В исходном коде ничего не нужно менять, кроме разве что float: rigth; нужно написать правильно float: right; в двух местах.
98% из тысячи моих постов сделаны в профильном подфоруме. Я не накручиваю свои посты болтанием в "курилке", а ты?
|
02.01.2009, 18:28 | #6 | |
Форумчанин
Регистрация: 28.12.2008
Сообщений: 145
|
На счет float & position не знаю, вроде перечитала несколько статей по делу, не могу догнать как сделать чтоб не уезжали ине перекрывали, а это так вообще ....
И это, Цитата:
Bingam
|
|
02.01.2009, 18:46 | #7 |
Форумчанин
Регистрация: 31.12.2008
Сообщений: 634
|
Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Тег DIV</title> <style type="text/css"> div.block1 {heigth480px; /*Задаем ширину блока*/ overflow:hiden; /*Пока просто магическая штука, а в будущем советую глянуть что за свойство*/ padding-top:10px;/*задаем верхний отступ в родителе*/ } div.block2 {float:left; /*позиционируем элемент слева*/ width:30%; /*Задаем ширину блока*/} div.block3 {margin-left:33%; /*Задаем отступ слева, чтоб содержимое не пересекалось с левым блоком*/} </style> </head> <body> <div class="block1"> <div class="block2">Image</div> <div class="block3">Text 1</div> <div class="block3">Text 2</div> </div> </body> </html> |
02.01.2009, 19:53 | #8 |
Форумчанин
Регистрация: 28.12.2008
Сообщений: 145
|
О! Спасибо, вроде нормально, только мне с границами надо (3 и 4 блок точно, ну которые по рисунку). Вобщемто попробую пока сама, ну если что ... приду исчо
Bingam
|
02.01.2009, 21:06 | #9 |
Форумчанин
Регистрация: 28.12.2008
Сообщений: 145
|
А, блин, не получается с границами, прям что делать не знаю.
надо чтоб если из 7 поста - то третий блок был хоть на 5 px ниже второго. Ибо border сделала и ..."вскрытие показало" ... что не того
Bingam
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
цвет рамки в таблице в разных браузерах | Rozalinda | HTML и CSS | 6 | 03.01.2009 22:55 |
Перестал работать яваскрипт, причем во всех браузерах сразу. | Adamant | Свободное общение | 6 | 12.09.2008 23:55 |
Растягивающийся DIV и толкающий в низ следующий DIV | Суриков | HTML и CSS | 6 | 29.08.2008 12:01 |