Форум Сайтостроение Веб-строительство

Проблема с блоками (css)

A
На сайте с 23.10.2011
Offline
19
Amoled
1071

Приветствую! Прошу помощи.

Не могу понять, почему у меня блоки пляшут. Высота выставлена одинаковая, но они при одинаковой высоте отображаются совсем не одинаково. Более того, они ещё и пляшут. Вот если убрать из одного из блоков форму, то всё начинает отображаться корректно. Как только добавляешь в этот код форму с другими внутренними блоками, начинается подобная чехарда.

код следующий: 

<center><div class=blockblock>

  <div class=timer_one>

  dsfd

  </div>



<div class=block1>

 

 <div class=block2>

 <center><b>Оставьте заявку на визитку и получите макет в подарок по акции!

 </div><!---block2 end--->

 <div class=block3>

 <font size="3"> ИМЯ<input type=text id="name" maxlength=25 size=25 name="name">

  E-MAIL<input type=text id="email" maxlength=25 size=25  name="email">

  ТЕЛЕФОН*<input type=text id="phone" maxlength=25 size=25  name="phone"></font>

 <small>*данное поле является обязательным</small>

 </div><!---block2 end--->

 <div class=block4>

 <button class="submit" id="submit" value="Отправить"><b>ЗАКАЗАТЬ</button>

 </div><!---block4 end--->

  <div class=block5></div><!---block5 end--->

</div><!---block1 end--->





 









</div>

.blockblock {

margin:0;

padding-top: 25px;

height: 275px;

}



/***timer***/



.timer_one {

display: inline-block;

width: 220px;

height: 275px;

background: #ffffff;

}



/***дизайн блоков для ФОС***/



.block1 {

display: inline-block;

width: 220px;

height: 275px;

background: rgba(255,255,255,0);

}



.block2 {

width: 100%;

background: rgba(255,255,255,0.5);

color: #ffffff;

}



.block3 {

width: 100%;

background: rgba(255,255,255,0.4);

}



.block4 {

width: 100%;

background: rgba(255,255,255,1);

}



.block5 {

width: 100%;

height: 25px;

background: rgba(255,255,255,0.4);

}



.submit {

width: 100%;

height: 50px;

border: none;

background: #ffffff;

}



#submit2 {

width: 100%;

height: 50px;

border: none;

background: #ffffff;

}



#name, #name1, #phone, #phone1, #email, #email1 {

width: 95%;

height: 20px;

margin-left: 3px;

}

virtuozo
На сайте с 05.04.2012
Offline
34
virtuozo
#1

Вот вроде простая штука Firebug, но народ делает вид, будто впервые слышит об этом:)

Дайте УРЛ, так, на пальцах, вам помочь будет трудно

AlexandrSG
На сайте с 14.11.2010
Offline
74
AlexandrSG
#2
Amoled:
Как только добавляешь в этот код форму с другими внутренними блоками, начинается подобная чехарда.

css формы смотрите.

Консультации, Inside/Outside (/ru/forum/809679) оптимизация/продвижение
A
На сайте с 23.10.2011
Offline
19
Amoled
#3

url дать не могу, делаю в денвере.

css вообще никак не помогает, убираю все стили во втором блоке и без толку. первый блок то вниз уходит, то вверх.

единственное что помогает - размещение абсолютно одинаковой информации в блоках. тогда они одинаково отображаются. но это не выход же ( мозг уже кипит от этого.

---------- Добавлено 20.04.2014 в 00:19 ----------

Собственно вот что получается при размещении одинаковой информации в блоках:

Даже при разной ширине, ничего не пляшет, всё ровно. Но стоит заполнить один из блоков отлично от другого и начинается фигня. И я не понимаю почему такое происходит.

Элементарные шаги для правильной Как сделать посадочную страницу Клики, показы и позиция
A
На сайте с 23.10.2011
Offline
19
Amoled
#4

Ещё добавлю, что я пытался сначала расположить блоки горизонтально при помощи таблицы, они так же плясали.

---------- Добавлено 20.04.2014 в 02:16 ----------

Итак, мучения продолжаются. Выяснил одно - если содержимое блоков разное, они пляшут во всех случаях.

Вот простейший пример, который каждый может проверить сам:

html: 

<!DOCTYPE html>

<html>

<head>

<title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div class="container">



  Содержимое



</div><!--container_end-->

<div class="container">



  Содержимое Содержимое Содержимое Содержимое



</div><!--container_end-->

<div class="container">



  Содержимое



</div><!--container_end-->

<a href="#">Ссылка</a> <a href="#">Ссылка</a>

</body>

</html>

css: 

.container {

display: inline-block;

width: 100px;

height: 100px;

background: #ffffff;

border: 2px solid #2e8b57;

}

и результат:

Исходя из всего этого понятно, что проблема системная. Неужели никто не сталкивался с горизонтальным расположением блоков и не может ничего подсказать? Где гуру вёрстки? )

---------- Добавлено 20.04.2014 в 02:59 ----------

Помог overflow: hidden;

Спасибо мне за помощь )))

Максимизируем рекламный доход: разбираемся Как сделать сайт удобным Как Google принимает решение
R1
На сайте с 02.10.2010
Offline
26
rocko1194
#5

в последнем примере я использовал вместо display: inline-block, float: left; Блоки становятся нормально. Пруф http://jsfiddle.net/GA2Zs/ :) не забудь использовать clear: both для следующего элемента после этих блоков, чтобы он становился снизу.

virtuozo
На сайте с 05.04.2012
Offline
34
virtuozo
#6

В css строчку display: inline-block; попробуйте заменить на: float: left;

A
На сайте с 31.01.2014
Offline
2
Amurogorod
#7

не можете помочь?

уникализировал тему вроде все подогнал... а вот с шапкой разобраться не могу... есть в админке функция вогнать логотип. я сделал логотип вогнал его большим размером... теперь при изменении экрана он у меня не влазиет в границы... как искравить ...???

AdSense начнёт показывать объявления-заставки YouTube запустил новый дизайн Фиксированные объявления AdSense начнут

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий