При наложении div на div выскакивает текст. - HTML и CSS

segail · 22.02.2012, 00:18

Здравствуйте.

Такая проблема. При наложения div на div выскакивает боковой тест в низ. Такое впечатление что при наложение остался невидимый образ div который и вытеснят текст хотя дивы лежат корректно вовсе браузерах.
В чем дело, подскажите.
Блок1 это основной его место положения менять нельзя.
Блок2 он накладывается на блок1

html

Код HTML:

<div id="block1">
	<form name="order_form" action="send.php" method="post" name="f1" onSubmit="return pr(order_form)">
	</form>
</div>
	<div id="block2"></div>	
		<p style="padding: 2px 45px 0px 90px;">
			<font style="font-size:80%" >
				Текст который выскакивает
			</font>
		</p>

css

PHP код:


			
   #block1, #block2 {

    position: relative; /* Относительное позиционирование */

   }

   

   #block1 {    

    display: inline;    

    float: left; /* Обтекание по правому краю */

    width: 515px; /* Ширина блока */ 

    height: 315px; /* Высота блока */

    background: url("poshta.gif"); /* Цвет фона */

    padding-top: 75px; /* Внутренне верхнее поле */

    padding-left: 20px; /* Отступ левый-внутри блока */  

    margin-right: 15px;  /* Отступ справа */

    margin-left: 90px;  /* Отступ слева */

    top: 0px; 



   -moz-box-sizing: border-box; /* Для Firefox */

   -webkit-box-sizing: border-box; /* Для Safari и Chrome */

   box-sizing: border-box; /* Для IE и Opera */

   }

   

   #block2 {    

    display: inline;    

    float: left; /* Обтекание по правому краю */

    width: 515; /* Ширина блока */ 

    height: 315; /* Высота блока */

    background: url("es.gif"); /* Цвет фона */

    padding-top: 0; /* Внутренне верхнее поле */

    padding-left: 0; /* Отступ левый-внутри блока */  

    margin-right: 0;  /* Отступ справа */

    margin-left: 90px;  /* Отступ слева */

    top: -315px; 



   -moz-box-sizing: border-box; /* Для Firefox */

   -webkit-box-sizing: border-box; /* Для Safari и Chrome */

   box-sizing: border-box; /* Для IE и Opera */

   } 

 

 #block1 { z-index: 1; }

 #block2 { z-index: 2; }

titan2012 · 22.02.2012, 01:28

тебе вот так надо как на скрине? картинки заменил на цвет

segail · 22.02.2012, 06:33

Цитата:

Сообщение от titan2012

тебе вот так надо как на скрине? картинки заменил на цвет

Так мне картинки нужны.

segail · 22.02.2012, 10:22

Так надо рис.1

Но наложенный div вытесняет текс в низ искажая страницу сайта рис.2

titan2012 · 22.02.2012, 14:45

скинь мне те картинки которые должны быть в дивах

segail · 23.02.2012, 12:05

С праздником.
Скинул.

Цитата:

Сообщение от titan2012

скинь мне те картинки которые должны быть в дивах

titan2012 · 23.02.2012, 20:15

посмотри скрин, вот так получилось, не знаю может я не правильно что-то понял.

segail · 23.02.2012, 20:23

Да Да Правильно

titan2012 · 23.02.2012, 20:34

вот скидываю код
html

Код HTML:

<body>

<div id="block1">
	<form name="order_form" action="send.php" method="post" name="f1" onSubmit="return pr(order_form)">
	</form>
	<div id="block2" ></div>
</div>

	
		<p style="padding: 0 45px 0px 90px;">
			<font style="font-size:80%" >
				<p>текст который обтекает</p>
			</font>
		</p>
		</body>
</html>

вот css

Код HTML:

#block1, #block2 {
    position: relative; /* Относительное позиционирование */
   }
   
   #block1 {    
    display: inline;    
    float: left; /* Обтекание по правому краю */
    width: 515px; /* Ширина блока */ 
    height: 315px; /* Высота блока */
    background: url(../img/poshta.gif); /* Цвет фона */
    padding-top: 75px; /* Внутренне верхнее поле */
    padding-left: 20px; /* Отступ левый-внутри блока */  
    margin-right: 15px;  /* Отступ справа */
    margin-left: 90px;  /* Отступ слева */
    top: 0px; 

   -moz-box-sizing: border-box; /* Для Firefox */
   -webkit-box-sizing: border-box; /* Для Safari и Chrome */
   box-sizing: border-box; /* Для IE и Opera */
   }
   
   #block2 {    
    display: inline;    
    float: left; /* Обтекание по правому краю */
    width: 515px; /* Ширина блока */ 
    height: 315px; /* Высота блока */
    background: url(../img/es.gif); /* Цвет фона */
    padding-top: 0; /* Внутренне верхнее поле */
    padding-left: 0; /* Отступ левый-внутри блока */  
    margin-right: 0;  /* Отступ справа */
    margin-left: 0;  /* Отступ слева */
    top: -100px; 

   -moz-box-sizing: border-box; /* Для Firefox */
   -webkit-box-sizing: border-box; /* Для Safari и Chrome */
   box-sizing: border-box; /* Для IE и Opera */
   } 
 
 #block1 { z-index: 1; }
 #block2 { z-index: 2; }  
 
 p { text-align: justify; }

вроде бы все

segail · 23.02.2012, 21:06

У меня что-то не выходит. Посмотрите тестовый пример.
У меня вместо Bloka layer

22.02.2012, 00:18	#1
segail Форумчанин Регистрация: 13.06.2009 Сообщений: 691	При наложении div на div выскакивает текст. Здравствуйте. Такая проблема. При наложения div на div выскакивает боковой тест в низ. Такое впечатление что при наложение остался невидимый образ div который и вытеснят текст хотя дивы лежат корректно вовсе браузерах. В чем дело, подскажите. Блок1 это основной его место положения менять нельзя. Блок2 он накладывается на блок1 html Код HTML: <div id="block1"> <form name="order_form" action="send.php" method="post" name="f1" onSubmit="return pr(order_form)"> </form> </div> <div id="block2"></div> <p style="padding: 2px 45px 0px 90px;"> <font style="font-size:80%" > Текст который выскакивает </font> </p> css PHP код: #block1, #block2 { position: relative; /* Относительное позиционирование / } #block1 { display: inline; float: left; / Обтекание по правому краю / width: 515px; / Ширина блока / height: 315px; / Высота блока / background: url("poshta.gif"); / Цвет фона / padding-top: 75px; / Внутренне верхнее поле / padding-left: 20px; / Отступ левый-внутри блока / margin-right: 15px; / Отступ справа / margin-left: 90px; / Отступ слева / top: 0px; -moz-box-sizing: border-box; / Для Firefox / -webkit-box-sizing: border-box; / Для Safari и Chrome / box-sizing: border-box; / Для IE и Opera / } #block2 { display: inline; float: left; / Обтекание по правому краю / width: 515; / Ширина блока / height: 315; / Высота блока / background: url("es.gif"); / Цвет фона / padding-top: 0; / Внутренне верхнее поле / padding-left: 0; / Отступ левый-внутри блока / margin-right: 0; / Отступ справа / margin-left: 90px; / Отступ слева / top: -315px; -moz-box-sizing: border-box; / Для Firefox / -webkit-box-sizing: border-box; / Для Safari и Chrome / box-sizing: border-box; / Для IE и Opera / } #block1 { z-index: 1; } #block2 { z-index: 2; } Последний раз редактировалось segail; 22.02.2012 в 00:34.*

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
макрос вставка текста между тегами <div> </div>	nur91m	Microsoft Office Word	2	19.10.2011 22:16
div тег как нижний слой для второго div тега	dadli	HTML и CSS	2	30.07.2010 01:12
Как отменить прозрачность div в прозрачном div	zeharon	HTML и CSS	0	24.07.2010 16:56
Высота div-a в котором есть другой div	Antoha	HTML и CSS	2	07.08.2009 18:16
Позиционирование двух плавающих DIV внутри одного DIV	allocator	HTML и CSS	5	22.07.2009 13:48

22.02.2012, 14:45	#5
titan2012 Пользователь Регистрация: 07.02.2012 Сообщений: 95	скинь мне те картинки которые должны быть в дивах

23.02.2012, 20:23	#8
segail Форумчанин Регистрация: 13.06.2009 Сообщений: 691	Да Да Правильно