ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (html) "паразитный" эффект у float'а
18 сообщений из 18, страница 1 из 1
(html) "паразитный" эффект у float'а
    #38514260
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Ниже привожу проблемный html-код.
Там 2 текстовых фрагмента:
- первый текстовый фрагмент " Текст выровнен по верхней границе " выровнен точно по верху (не смотря на фоновый рисунок, выходящий за пределы поля)
- второй текстовый фрагмент " А этот текст расположен ниже верхней границы " - выровнен по правому краю (класс "right") и расположен несколько ниже.

Задача : сделать так, чтобы 2-й текстовый фрагмент располагался на одном уровне с 1-м текстовым фрагментом и был пристыкован к верхней границе поля. При этом его выравнивание по правому краю (класс "right") должно быть сохранено.

Замечание : задача должна быть решена без добавления классу "sub-title" отрицательного margin-top или padding-top, т.к. это уже будет похоже на заплатку.

Если у 2-го текстового фрагмента убрать класс "right", то он будет располагаться на одном уровне с 1-м текстовым фрагментом, НО:
а) 1-й текстовый фрагмент чуть-чуть опустится (этого быть не должно)
б) 2-й текст не будет выровнен по правому краю

Вот html-код:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
    <style type="text/css">
        #wrapper { width: 750px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; }
        .right{ float:right; padding:0; }

        #header { height: 100px; }
        .background { background:url(data:image/png;base64,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); }

        .title { repeat-x; height:26px; color:#000; padding:5px; position:relative; font-size:14px; }
        .sub-title { height:26px; color:#000; margin-top:0px; padding:5px; position:relative; font-size:14px; }
        .sub-title form { display: inline; }

        .cont_block { position:relative; border:1px solid #919192; border-radius:10px; background:#ddd; padding:0px; margin-bottom:15px; }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="header"></div>    
        <div class="cont_block">
            <span class="title background">Текст выровнен по верхней границе</span>

            <span class="sub-title right">
                <b>А этот текст расположен ниже верхней границы</b>
                <form action="" method="post">
                    <input type="text" name="search" value="Поле">
                </form>
            </span>

            <div></div><br>
            <div></div><br>
        </div>    
    </div>
</body>

</html>
...
Рейтинг: 0 / 0
27.12.2013, 14:17
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514349
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
Cyrax_02,

Читайте про разницу отображения блочных и строковых элементов. Это очень облегчит жизнь. А ещё, не знаю почему, но стиль по классу sub-title перекрывает стиль right, а потому и отступ вверху в 5 пикселей появляется. Вообще перекрываться стили с одним приоритетом так, что применённым остаётся последний стиль (в данном случае right), но получилось почему-то иначе... потому и надо !important добавить.

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
        #wrapper { width: 750px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; }
        .right{ float:right; padding:0 !important; }

        #header { height: 100px; }
        .background { background:url(data:image/png;base64,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); }

        .title { repeat-x; height:16px; color:#000; padding:5px; position:relative; font-size:14px; display: inline-block;}
        .sub-title { height:26px; color:#000; margin-top:0px; padding:5px; position:relative; font-size:14px; display: inline-block;}
        .sub-title form { display: inline; }

        .cont_block { position:relative; border:1px solid #919192; border-radius:10px; background:#ddd; padding:0px; margin-bottom:15px; }
...
Рейтинг: 0 / 0
27.12.2013, 15:29
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514364
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Cyrax_02сделать так, чтобы 2-й текстовый фрагмент располагался на одном уровне с 1-м текстовым фрагментом и был пристыкован к верхней границе поля. При этом его выравнивание по правому краю (класс "right") должно быть сохранено.
Достаточно?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#wrapper { width: 750px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; }
.right{ float:right; padding:0; }
#header { height: 100px; }
.background { background:url(data:image/png;base64,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); }
.title { repeat-x; height:26px; color:#000; padding:5px; position:relative; font-size:14px; }
.sub-title { 
	height:26px; 
	color:#000; 
	margin-top:0px; 
	/*padding:5px; */
	position:relative; 
	font-size:14px; 
}
.sub-title form { display: inline; }
.cont_block { position:relative; border:1px solid #919192; border-radius:10px; background:#ddd; padding:0px; margin-bottom:15px; }
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
	<div id="header"></div>    
	<div class="cont_block">
		<span class="title background">Текст выровнен по верхней границе</span>
		<span class="sub-title right">
			<b>А этот текст расположен ниже верхней границы</b>
			<form action="" method="post">
				<input type="text" name="search" value="Поле">
			</form>
		</span>
		<div></div><br>
		<div></div><br>
	</div>    
</div>
</body>
</html>
...
Рейтинг: 0 / 0
27.12.2013, 15:37
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514649
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
авторЧитайте про разницу отображения блочных и строковых элементов.
Что Вы хотите этим сказать - что в первоначальном варианте title был встроенным, а sub-title - блочным ?
Попробуйте убрать класс "right" у sub-title => sub-title стал вcтроенным ?

авторА ещё, не знаю почему, но стиль по классу sub-title перекрывает стиль right, а потому и отступ вверху в 5 пикселей появляется.
Как оказалось, у меня в sub-title прямо был указан padding в 5 px. Т.е. никто никого не перекрывает (в классе right padding'а нет).
Если в sub-title убрать padding, то всё встаёт на свои места.

Ещё в Вашем варианте 1-я надпись опускается чуть ниже - этого быть не должно. Судя по всему, в Вашем варианте из-за добавления блочности классу title его фон целиком влезает в блок, а блок размещается внутри контейнера cont_block.
А в исходном варианте 1-я надпись была встроенной и поэтому, её фон вылезает за пределы контейнера cont_block, не влияя на положение этой надписи.
...
Рейтинг: 0 / 0
27.12.2013, 19:26
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514653
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
krvsa , в Вашем варианте для чего нужно указывать нулевой padding в классе "right" ?
Ведь в классе "sub-title" padding в 5px Вы убрали, а в самом начале стилей добавили:
Код: html
1.
* { margin: 0; padding: 0; }
...
Рейтинг: 0 / 0
27.12.2013, 19:29
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514676
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
Cyrax_02авторЧитайте про разницу отображения блочных и строковых элементов.
Что Вы хотите этим сказать - что в первоначальном варианте title был встроенным, а sub-title - блочным ?
Попробуйте убрать класс "right" у sub-title => sub-title стал вcтроенным ?

авторА ещё, не знаю почему, но стиль по классу sub-title перекрывает стиль right, а потому и отступ вверху в 5 пикселей появляется.
Как оказалось, у меня в sub-title прямо был указан padding в 5 px. Т.е. никто никого не перекрывает (в классе right padding'а нет).
Если в sub-title убрать padding, то всё встаёт на свои места.

Ещё в Вашем варианте 1-я надпись опускается чуть ниже - этого быть не должно. Судя по всему, в Вашем варианте из-за добавления блочности классу title его фон целиком влезает в блок, а блок размещается внутри контейнера cont_block.
А в исходном варианте 1-я надпись была встроенной и поэтому, её фон вылезает за пределы контейнера cont_block, не влияя на положение этой надписи.

Вот :) В конце письма Вы написали то, о чём я думал, когда писал своё сообщение.
Мне показалось, что такое заползание фона за пределы родителя немного неправильно, а потому Ваши слова про это я растолковал как описание проблемы.

Сорри, раз так и надо, тогда про блочные и строчные элементы можно пропустить ))
...
Рейтинг: 0 / 0
27.12.2013, 20:04
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514698
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
авторМне показалось, что такое заползание фона за пределы родителя немного неправильно
Так как всё-таки правильно ? В случае со встроенным элементом его фон должен "выползать" за пределы родительского элемента или нет ?
...
Рейтинг: 0 / 0
27.12.2013, 20:35
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514719
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
Cyrax_02,

как оказалось это нормально. Если честно, сам не знал, поиск рулит. ))
...
Рейтинг: 0 / 0
27.12.2013, 21:11
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514837
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Cyrax_02 krvsa , в Вашем варианте для чего нужно указывать нулевой padding в классе "right" ?
Это твой ЦСС, не мой...

Cyrax_02Ведь в классе "sub-title" padding в 5px Вы убрали
Ты ведь хотел уравнять элемены по верхнему краю.

Cyrax_02а в самом начале стилей добавили:
Код: html
1.
* { margin: 0; padding: 0; }


Я это (и не только) всегда добавляю в начало, дабы был некий сброс настроек, который может давать не нужные эффекты по отступам и пр...
...
Рейтинг: 0 / 0
27.12.2013, 23:49
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514952
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
krvsa , т.е. в классе "right" нулевой padding можно не добавлять ?
Если же нулевой padding в классе "right" для чего-то и требуется, то тот же эффект необходимо получить другим способом, поскольку класс "right" имеет единственное назначение - выравнивание по правому краю. И никаких дополнительных форматирований он содержать не должен, т.к. может использоваться с различными элементами, в том числе имеющими ненулевой padding.
...
Рейтинг: 0 / 0
28.12.2013, 13:30
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514957
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Cyrax_02 krvsa , т.е. в классе "right" нулевой padding можно не добавлять ?
Что делать в итоге решать тебе...

Но я убираю отступы и делаю пр. "начальные установки" сразу, дабы не гадать потом "как все это выравнивать"...
Вот статейка на эту тему
http://denweb.ru/verstka/sbros-stilej-css.html
Да и вообще много чего еще ...
...
Рейтинг: 0 / 0
28.12.2013, 13:41
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514959
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Тем не менее, то, что в классе "sub-title" оказался padding в 5px, не должно являться причиной сдвига 2-го текстового фрагмента вниз. Ведь 1-й текстовый фрагмент тоже имеет padding в 5px - и вниз не сдвигается. Т.е. проблема не решена.

Подтверждением нерешённости проблемы является, в частности, тот факт, что при добавлении 2-му текстовому фрагменту того же самого backgroung'а, происходит сдвиг этого текста вниз, а его background целиком вписывается в родительский элемент.
Тогда как background 1-го текстового элемента выходит за граница родительского элемента:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
    <style type="text/css">
        #wrapper { width: 750px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; }
        .right{ float:right; padding:0; }

        #header { height: 100px; }
        .background { background:url(data:image/png;base64,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) repeat-x;}

        .title {height:26px; color:#000; padding:5px; position:relative; font-size:14px; }
        .sub-title { height:26px; color:#000; margin-top:0px; padding:5px; position:relative; font-size:14px; }
        .sub-title form { display: inline; }

        .cont_block { position:relative; border:1px solid #919192; border-radius:10px; background:#ddd; padding:0px; margin-bottom:15px; }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="header"></div>    
        <div class="cont_block">
            <span class="title background">Текст выровнен по верхней границе</span>

            <span class="sub-title background right">
                <b>А этот текст расположен ниже верхней границы</b>
                <form action="" method="post">
                    <input type="text" name="search" value="Поле">
                </form>
            </span>

            <div></div><br>
            <div></div><br>
        </div>    
    </div>
</body>

</html>



Т.е. получается, что у 1-го текстового элемента padding НЕ влияет на положение текста, а у 2-го текстового фрагмента padding влияет на положение текста. Почему ?
...
Рейтинг: 0 / 0
28.12.2013, 13:50
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514964
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Cyrax_02 , любое "выравнивание" нужно начинать с "пустых" родительских элементов...
Если они выравниваются как нужно - можно приступать к добавлению дочерних элементов. У тебя верстка просто ужоснах. И с ней ты пытаешся что-то делать.
Любой "дисбаланс" "выравнивания" может быть вызван как родительским, так и дочерними элементами...

Каким боком у тебя в спане оказалась форма?
Почему используются отступы БР-ами?

Т.о. позиция "я вот тут наваял, а вы мне объясните че за фигня получилась" изначально обречена на провал.
...
Рейтинг: 0 / 0
28.12.2013, 13:57
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514982
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
полностью согласен с kvrsa.

1. Суть такая, при правильной вёрстке block и inline элементы нужно чётко разделять. Очень плохо, когда элементы разных типов лежат на одном уровне (как у Вас <div> и <br>).

2. inline позиционирование использовать только при выводе текста и всего, что связано с ним.

3. не использовать смену стандартного позиционирования для inline элементов.


Я вот когда верстаю, придерживаюсь этих трёх правил, и обычно проблем с отображением не возникает.
например размеры и отступы у inline элементов работают не совсем адекватно.

то есть, я бы верстал вот так (вырезал всё не относящееся к делу)
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<style>
#wrapper { width: 750px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; }
.cont_block { position:relative; border:1px solid #919192; border-radius:10px; background:#ddd; padding:0px; margin-bottom:15px; }
.right{
  float: right;
}
.new_line{
  clear: both;
}
.title, .sub-title, .other_blocks{
  padding: 5px;
}
.title span{
  background: orange;
}
.otstup{
  margin-bottom: 10px;
}
</style>
</head>

<body>
<div id="wrapper">
  <div class='cont_block'>
    <div class='sub-title right'>текст справа</div>
    <div class='title'><span>текст слева</span></div>
    <div class='new_line'></div>
    <div class='other_blocks otstup'>блок снизу на всю длину бла-бла-бла</div>
    <div class='other_blocks otstup'>блок снизу на всю длину бла-бла-бла</div>
  </div>
</div>
</body>

</html>



То есть получается, что текст левого блока обтекает правый блок, при этом всё на одном уровне (надо - по верхней границе, не надо - можно с отступом). Фон бы накладывал конечно на div, но я так понимаю, что фон требуется только под текстом, потому наложил на span.

А вообще, какова была задача то?
...
Рейтинг: 0 / 0
28.12.2013, 14:42
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514989
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
авторCyrax_02, любое "выравнивание" нужно начинать с "пустых" родительских элементов...
Если они выравниваются как нужно - можно приступать к добавлению дочерних элементов.
У меня как раз всё выравнивание начинается с пустого cont_block. Внутри него 2 span'а - один слева, другой справа.

авторУ тебя верстка просто ужоснах. И с ней ты пытаешся что-то делать.
Любой "дисбаланс" "выравнивания" может быть вызван как родительским, так и дочерними элементами...
Каким боком у тебя в спане оказалась форма?
Почему используются отступы БР-ами?
Форма в span'е и br'ы - это всё, что вызывает у вас такую реакцию ?
br'ы можно убрать - они здесь абсолютно ни на что не влияют.

Задача такая: слева расположен заголовок страницы, справа - форма, состоящая из 2-3 полей, расположенных в ряд (форма пристыковывается к правому краю).
Если форму оформить как блочный элемент, то она окажется под заголовком.
Следовательно, форму нужно оформить как inline (или inline-block, но этот вариант поймут не все браузеры).

Согласен, что заключать форму в span не совсем корректно. Но если заменить span на div и оформить класс "sub-title" как inline, то абсолютно ничего не поменяется:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
    <style type="text/css">
        #wrapper { width: 750px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; }
        .right{ float:right; padding:0; }

        #header { height: 100px; }
        .background { background:url(data:image/png;base64,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) repeat-x;}

        .title {height:26px; color:#000; padding:5px; position:relative; font-size:14px; }
        .sub-title { height:26px; color:#000; margin-top:0px; padding:5px; position:relative; font-size:14px; display: inline; }
        .sub-title form { display: inline; }

        .cont_block { position:relative; border:1px solid #919192; border-radius:10px; background:#ddd; padding:0px; margin-bottom:15px; }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="header"></div>    
        <div class="cont_block">
            <span class="title background">Текст выровнен по верхней границе</span>

            <div class="sub-title background right">
                <b>А этот текст расположен ниже верхней границы</b>
                <form action="" method="post">
                    <input type="text" name="search" value="Поле">
                </form>
            </div>

            <div></div><br>
            <div></div><br>
        </div>    
    </div>
</body>

</html>
...
Рейтинг: 0 / 0
28.12.2013, 15:10
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38514992
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
автор1. Суть такая, при правильной вёрстке block и inline элементы нужно чётко разделять. Очень плохо, когда элементы разных типов лежат на одном уровне (как у Вас <div> и <br>).
2. inline позиционирование использовать только при выводе текста и всего, что связано с ним.
3. не использовать смену стандартного позиционирования для inline элементов.
Как я уже написал, компоновка должна быть следующей: слева расположен заголовок страницы,
справа - форма, состоящая из 2-3 полей, расположенных в ряд (форма пристыковывается к правому краю).
Да, компоновка непростая, но она должна быть именно такой.

авторто есть, я бы верстал вот так (вырезал всё не относящееся к делу)
У Вас здесь справа нет ни полей, ни формы, ни background'а. Т.е. пример абсолютно простой, не отвечающий задаче.
...
Рейтинг: 0 / 0
28.12.2013, 15:15
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38515003
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
Cyrax_02автор1. Суть такая, при правильной вёрстке block и inline элементы нужно чётко разделять. Очень плохо, когда элементы разных типов лежат на одном уровне (как у Вас <div> и <br>).
2. inline позиционирование использовать только при выводе текста и всего, что связано с ним.
3. не использовать смену стандартного позиционирования для inline элементов.
Как я уже написал, компоновка должна быть следующей: слева расположен заголовок страницы,
справа - форма, состоящая из 2-3 полей, расположенных в ряд (форма пристыковывается к правому краю).
Да, компоновка непростая, но она должна быть именно такой.

авторто есть, я бы верстал вот так (вырезал всё не относящееся к делу)
У Вас здесь справа нет ни полей, ни формы, ни background'а. Т.е. пример абсолютно простой, не отвечающий задаче.

я хотел показать саму идею :) Но если ближе к задаче, то вот:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<style>
#wrapper { width: 750px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; }
.cont_block { position:relative; border:1px solid #919192; border-radius:10px; background:#ddd; padding:0px; margin-bottom:15px; }
        .background { background:url(data:image/png;base64,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); }

.right{
  float: right;
}
.left{
  float: left;
}
.new_line{
  clear: both;
}
.title, .sub-title, .other_blocks{
  padding: 0px 5px;
  line-height: 25px;
}
.sub-title form { display: inline; }
.otstup{
  margin-bottom: 10px;
}
</style>
</head>

<body>
<div id="wrapper">
  <div class='cont_block'>
    <div class='sub-title right background'>
      текст справа
      <form action="" method="post">
        <input type="text" name="search" value="Поле">
      </form>
    </div>
    <div class='title left background'><span>текст слева</span></div>
    <div class='new_line'></div>
    <div class='other_blocks otstup'>блок снизу на всю длину бла-бла-бла</div>
    <div class='other_blocks otstup'>блок снизу на всю длину бла-бла-бла</div>
  </div>
</div>
</body>

</html>
...
Рейтинг: 0 / 0
28.12.2013, 15:57
| Ответить | Цитировать | Написать  
(html) "паразитный" эффект у float'а
    #38515033
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
В общем, получается так:
1. В моём первоначальном варианте (где левый текст - это span) фон не влияет на положение текста и располагается независимо от родительского элемента, в котором находится текст (т.е. фон может вылезать за его пределы). И если тексту (span'у) добавить line-height = высоте фона, то фон за пределы родительского элемента не вылезет.
2. Добавление span'у свойства float (не важно какого - left или right) выводит этот span (даже если span больше ничего не содержит кроме текста) из вышеуказанного состояния: фон, так же как и сам текст, тоже начинает строго вписываться в родительский контейнер со всеми вытекающими. Того же эффекта можно добиться заключением текста (или span'а с текстом) в div.

3. Если требуется наряду с левым текстом отображать справа какие-либо элементы с float = right, высота которых может быть равной высоте фона левого текста (как в моём сабжевом случае), то необходимо:
а) либо вывести левый span из состояния, описанного в п.1: либо добавлением span'у свойства line-height, равного высоте фона, либо добавление span'у свойства float = left (последний вариант предпочтительнее);
б) либо заключение левого текста (или span'а с текстом) в div. В этом случае целесообразно и правые элементы тоже заключить в div.

В последнем случае (б) поведение левых и правых элементов будет идентичным.

Видимо, из-за возможных проблем с различным отображением встроенных и блочных элементов, расположенных на одном уровне, в разных браузерах целесообразно будет:
а) и левые, и правые элементы заключить в div;
б) не пользоваться эффектом, описанным в п.1 (когда фон может вылезать за пределы родительского элемента).
...
Рейтинг: 0 / 0
28.12.2013, 17:24
| Ответить | Цитировать | Написать  
18 сообщений из 18, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (html) "паразитный" эффект у float'а
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38514957&tid=1447514]:
 0ms
get settings:
 5ms
get forum list:
 11ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 147ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 61ms
get tp. blocked users:
 1ms
others: 220ms
total:  461ms
созд. / загр.: 461ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]