Div block в разных браузерах - HTML и CSS

Bingam Vici · 02.01.2009, 12:39

Самостоятельно (недавно, для себя) изучаю 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>

От себя взамен могу начертить чо-нить в Компас 3Д.

13th · 02.01.2009, 13:39

Первая и главная оштбка- это совмещение свойст position:relative and float. Тут уж надо че нить одно выбирать и на мой взгляд лучше флоат брать

Bingam Vici · 02.01.2009, 14:21

Попробовала убрать на фиг вообще position: relative, открываю в Opera и Firefox (благо они есть, не знаю правда какие именно) но все равно уезжает. теперь к верхнему левому углу (3 и 4 блоки), мне надо чтобы второй блок был рядом, и они не перекрывали друг друга. И все эт вместе в 1-ом блоке, который по секрету в таблицу впендюрить надоб.

Johnatan · 02.01.2009, 14:45

В исходном коде ничего не нужно менять, кроме разве что float: rigth; нужно написать правильно float: right; в двух местах.

13th · 02.01.2009, 15:43

А разве свойства float & position не являются разными способами позиционирования элементов?

Bingam Vici · 02.01.2009, 18:28

На счет float & position не знаю, вроде перечитала несколько статей по делу, не могу догнать как сделать чтоб не уезжали ине перекрывали, а это так вообще ....
И это,

Цитата:

нужно написать правильно float: right; в двух местах.

где конкретно? в первых двух блоках? (я ж женщина, пишите подробно, а то я того, туплю).

13th · 02.01.2009, 18:46

Код 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>

попробуй так

Bingam Vici · 02.01.2009, 19:53

О! Спасибо, вроде нормально, только мне с границами надо (3 и 4 блок точно, ну которые по рисунку). Вобщемто попробую пока сама, ну если что ... приду исчо

Bingam Vici · 02.01.2009, 21:06

А, блин, не получается с границами, прям что делать не знаю.
надо чтоб если из 7 поста - то третий блок был хоть на 5 px ниже второго. Ибо border сделала и ..."вскрытие показало" ... что не того

13th · 03.01.2009, 12:49

Bingam Vici, че вообще в этой модели будет ? И чем конкретнее - тем лучше

02.01.2009, 13:39	#2
13th Форумчанин Регистрация: 31.12.2008 Сообщений: 634	Первая и главная оштбка- это совмещение свойст position:relative and float. Тут уж надо че нить одно выбирать и на мой взгляд лучше флоат брать Возможно всё Пишу обо всем

02.01.2009, 14:21	#3
Bingam Vici Форумчанин Регистрация: 28.12.2008 Сообщений: 145	Попробовала убрать на фиг вообще position: relative, открываю в Opera и Firefox (благо они есть, не знаю правда какие именно) но все равно уезжает. теперь к верхнему левому углу (3 и 4 блоки), мне надо чтобы второй блок был рядом, и они не перекрывали друг друга. И все эт вместе в 1-ом блоке, который по секрету в таблицу впендюрить надоб. Bingam

02.01.2009, 14:45	#4
Johnatan Antimoderаtoris Участник клуба Регистрация: 08.02.2008 Сообщений: 1,251	В исходном коде ничего не нужно менять, кроме разве что float: rigth; нужно написать правильно float: right; в двух местах. 98% из тысячи моих постов сделаны в профильном подфоруме. Я не накручиваю свои посты болтанием в "курилке", а ты?

02.01.2009, 15:43	#5
13th Форумчанин Регистрация: 31.12.2008 Сообщений: 634	А разве свойства float & position не являются разными способами позиционирования элементов? Возможно всё Пишу обо всем

02.01.2009, 19:53	#8
Bingam Vici Форумчанин Регистрация: 28.12.2008 Сообщений: 145	О! Спасибо, вроде нормально, только мне с границами надо (3 и 4 блок точно, ну которые по рисунку). Вобщемто попробую пока сама, ну если что ... приду исчо Bingam

02.01.2009, 21:06	#9
Bingam Vici Форумчанин Регистрация: 28.12.2008 Сообщений: 145	А, блин, не получается с границами, прям что делать не знаю. надо чтоб если из 7 поста - то третий блок был хоть на 5 px ниже второго. Ибо border сделала и ..."вскрытие показало" ... что не того Bingam

03.01.2009, 12:49	#10
13th Форумчанин Регистрация: 31.12.2008 Сообщений: 634	Bingam Vici, че вообще в этой модели будет ? И чем конкретнее - тем лучше Возможно всё Пишу обо всем Последний раз редактировалось 13th; 03.01.2009 в 14:00. Причина: потерялся

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
цвет рамки в таблице в разных браузерах	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