Проблемы с обтеканием (float)

dexteron · December 13, 2011

Здравствуйте уважаемые форумчане.

На днях возникла проблема. На страничке сайта блоки выходят за пределы основного блока (их там несколько, у всех стоит высота auto).

В первого блока все нормально, он вписывается в основной блок, а во всех остальных не все так гладко.

Вот скрин:

http://s2.ipicture.ru/uploads/20111213/GU3mxdLE.jpg

Я так понимаю все из-за обтекания блоков со 2-го по остальные. Если я меняю float на none, то блоки со 2-го выстраиваются в горизонтальном порядке, один под другим и при этом основной блок растягивается на всю высоту. мне то нужно чтобы они были как сейчас на скриншоте только основной блок был бы растянут на всю высоту.

Надеюсь вы сможете прочитать и понять мою проблему :rolleyes:

Заранее спасибо.

workerbeeviii · December 13, 2011

Где можно код посмотреть?

dexteron · December 13, 2011

Где можно код посмотреть?

Давай я дам ссылку:

вот

Firebag есть, сможешь посмотреть? :rolleyes:

Edited December 13, 2011 by dexteron

Gaspode · December 13, 2011

их там несколько, у всех стоит высота auto

Зачем, боюсь спросить? overflow: hidden им поставьте, будет вам счастье.

А height: auto — вы хоть почитайте, что это, прежде чем вставлять.

Edited December 13, 2011 by Gaspode

dexteron · December 13, 2011

их там несколько, у всех стоит высота auto
Зачем, боюсь спросить? overflow: hidden им поставьте, будет вам счастье.
А height: auto — вы хоть почитайте, что это, прежде чем вставлять.

Спасибо помогло.

Zeeeya · December 13, 2011

Здравствуйте! Подскажите, плиз, отчего может быть косяк: не могу выставить блоки горизонтально, чтоб правый блок справа от основного располагался, а не под ним.

код:

body, html {
background-color: #38616b; 
margin:0px;
padding:0px;


}

#wrap{
width: 1024px;
margin:0 auto;
}

#header {
background: url(../images/header.jpg) no-repeat;
width:1001px;
height: 222px;
margin:0 auto;
}

#topmenu{
background: url(../images/menu_fon.jpg) no-repeat;
width:1001px;
height: 55px;
}

#body{
overflow:hidden;
width:100%;
}

#content {
height: 100%;
background: url(../images/fon_left.jpg)  repeat-y;
float:left;
overflow:hidden;
}

#right {
background: url(../images/fon_right.jpg)  repeat-y;
float:right;

width: 169px;
overflow:hidden;
}

#bottom {
background: url(../images/bottom.jpg) no-repeat;
width:999px;
height: 120px;
margin:0 auto;
padding-bottom: 35px;
padding-top: 116px;
text-indent: 16em; /* Отступ первой строки */
color: #3d6a55;
}

Edited December 13, 2011 by Zeeeya

Zeeeya · December 14, 2011

Люди, помогите, пожалуйста, ну не доходит...

Nagibaka · December 14, 2011

Убери оверфлоу - оно тебе не особо надо.

height 100% - это как-то неrошерно

А вообще по теме - укажи ширину content и right в процентах и у обоих float:left

Zeeeya · December 14, 2011

Nagibaka, сделала, вот результат:

:mellow:

Zeeeya · December 18, 2011

Может, всеж обтекание необходимо, но все равное не работеат(((

Edited December 18, 2011 by Zeeeya

Zeeeya · December 22, 2011

Лююди, помогите разобраться, плиз! Почему не получается вставить элемент справа?

Gaspode · December 22, 2011

Разметку покажите и нарисуйте, как должно выглядеть.

Zeeeya · December 22, 2011

вот еще не верстаный макет, как все должно быть: фрагмент 06 слева, справа фрагмент 07, оба повторяются по оси у.

а вот что получается: фрагмент 07 отображается снизу 06, даже если поставить обоим обтекание с сответственной стороны, он все равно отображается ниже 06, только справа.

Edited December 22, 2011 by Zeeeya

Olekh · December 22, 2011

вот еще не верстаный макет, как все должно быть: фрагмент 06 слева, справа фрагмент 07, оба повторяются по оси у.
а вот что получается: фрагмент 07 отображается снизу 06, даже если поставить обоим обтекание с сответственной стороны, он все равно отображается ниже 06, только справа.

Если выстраивать несколько дивов по горизонтали, в html должно быть, на примере хидера. В html левый и правый дивы должны быть объедены в один див. Только потом в стилях CSS выравниваете float. На примере сайта, после хидера, лучше сделать меню, затем навигацию, затем контент, а не наоборот.

<div id="header">
<div class="header-left">
Левая колонка
</div>
<div class="header-right"> Правая коонка
</div>
</div>

hedgehog · December 22, 2011

Здравствуйте! Подскажите, плиз, отчего может быть косяк: не могу выставить блоки горизонтально, чтоб правый блок справа от основного располагался, а не под ним.

По всей видимости, суммарна ширина блоков 06 и 07 (включая паддинги, маржины и бордеры) больше, чем ширина родителя. Поэтому они не помещаются и блок 07 переносится вниз. В фаербаге, драгонфлай или чем вы пользуетесь, посмотрите ширину блоков и величину отступов

Olekh · December 22, 2011

Пока не видно html, можно только гадать.

Попробуйте поэкспериментировать, поменяйте на left, посмотрите что получится. Проверьте в html, какому диву принадлежит этот стиль. Вообще лучше показать html. Тогда будет проще разобраться.

#right {

background: url(../images/fon_right.jpg) repeat-y;

float:right;

Zeeeya · December 22, 2011

Если выстраивать несколько дивов по горизонтали, в html должно быть, на примере хидера. В html левый и правый дивы должны быть объедены в один див. На примере сайта, после хидера, лучше сделать меню, затем навигацию, затем контент, а не наоборот.

Так и есть - два этих ДИВАа в одном. После хэдера идет меню (просто пока только графическое поле), а навигация - это что? Не меню?

По всей видимости, суммарна ширина блоков 06 и 07 (включая паддинги, маржины и бордеры) больше, чем ширина родителя.

фон левого блока 767, фон правого - 232, отступы вообще еще не указаны... Когда задаю обтекание, указав меньшую ширину - правый клок прижимается к правому краю, а между блоками промежуток... Так что дело не в ширине...

Olekh, пробовала...

вот index:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="<?php echo $this->language; ?>" 
lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<title>Welcome to the Frontpage</title>
<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<link href="index.php?option=com_content&view=frontpage&format=feed&Itemid=1&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="index.php?option=com_content&view=frontpage&format=feed&Itemid=1&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/caption.js"></script>

<link rel="icon" href="/templates/persik/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/templates/persik/favicon.ico" type="image/x-icon"> 

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

<?php

if($this->countModules('right') == 0) $contentwidth = "100";

if($this->countModules('right') == 1) $contentwidth = "80";

?>
</head>

<body>
<!--оформление страницы сайта-->
<div id="wrap">
<!--блок шапки сайта header -->
<div id="header">
             <jdoc:include type="modules" name="top" style="xhtml" />шапка
</div>

<!--вывод модуля горизонтального меню в позиции user2-->
<div id="topmenu" align="center" >
	          <jdoc:include type="modules" name="user2" style="xhtml" /> 
			         </div> 
<!--вывод всего содержимого-->				 
<div id="body">
<!--вывод содержимого контента-->     	 
<div id="content"> 
              <jdoc:include type="component" style="xhtml" />контент
	  </div>

<!--вывод правой колонки-->	  
<div id="right">
              <jdoc:include type="modules" name="right" style="xhtml" />правое
			  ололололллллллллллллллллллллллллллллллллллл
			  </div>
</div>

<!--вывод сведений модуля с информацией об авторских правах в позиции footer -->
<div id="bottom">
<jdoc:include type="modules" name="bottom" style="xhtml" />
<a href="malito: Ramus20@yandex.ru"> Ramus20@yandex.ru </a>
</div>

</div>
</body>
</html>

Css;

body, html {
background-color: #38616b; 
margin:0px;
padding:0px;
}

#wrap{
width: 1024px;
margin:0 auto;
}

#header {
background: url(../images/header.jpg) no-repeat;
width:1001px;
height: 222px;
margin:0 auto;
}

#topmenu{
background: url(../images/menu_fon.jpg) no-repeat;
width:1001px;
height: 55px;
}

#body{
width:100%;
}

#content {
background: url(../images/fon_left.jpg)  repeat-y;
width: 767px;
}

#right {
background: url(../images/fon_right.jpg)  repeat-y;
width: 232px;

}

#bottom {
background: url(../images/bottom.jpg) no-repeat;
width:999px;
height: 120px;
margin:0 auto;
padding-bottom: 35px;
padding-top: 116px;
text-indent: 16em; /* Отступ первой строки */
color: #3d6a55;
}

hedgehog · December 23, 2011

Так это еще и джумла. Показывали бы "скомпилированную" страницу. А еще лучше, ссылку на нее. Я не знаю, какие стили и элементы добавляет джумла на вашей странице.

http://jsfiddle.net/

Olekh · December 23, 2011

1.Так и есть - два этих ДИВАа в одном. После хэдера идет меню (просто пока только графическое поле), а навигация - это что? Не меню?
2. Olekh, пробовала...
вот index:

1. Нет не меню. Строчка навигация, navigation. Отображает путь к страничке на которой находится посетитель. На макете psd, №5, но не обязательно.

2. Я пока тоже только учусь, поэтому могу ошибаться. Попробуйте поэкспериментировать, но будьте внимательны, важна каждая точка, запятая ... !!!:

HTML

<jdoc:include type="component" style="xhtml" /УБЕРИТЕ. Я НЕ ЗНАЮ ЧТО ЭТО ТАКОЕ>контент

</div>

<jdoc:include type="modules" name="right" style="xhtml" -УБЕРИТЕ. Я НЕ ЗНАЮ ЧТО ЭТО ТАКОЕ />правое

ололололллллллллллллллллллллллллллллллллллл

</div>

CSS

#body{

width:100%; (поставьте 1001 px)

}

#content {

background: url(../images/fon_left.jpg) repeat-y;УБЕРИТЕ. ПОТОМ ПРИСВОИТЕ.

width: 767px;

float: left;

}

#right {

background: url(../images/fon_right.jpg) repeat-y;УБЕРИТЕ. ПОТОМ ПРИСВОИТЕ.

width: 232px;

float: left; или float: right;

}

Edited December 23, 2011 by Olekh

Zeeeya · December 23, 2011

hedgehog, я лошара... Не совсем понимаю, как там работать, в ндексе подключены два js-файла (mootools.js и caption.js), я нашла caption.js, вставила код, (второй файл не нашла, зато есть :mootools-core.js, mootools-core-uncompressed.js, mootools-more-uncompressed.js)

Вот ссыль: http://jsfiddle.net/Zeya/WU2G9/

hedgehog · December 23, 2011

hedgehog, я лошара... Не совсем понимаю, как там работать, в ндексе подключены два js-файла (mootools.js и caption.js), я нашла caption.js, вставила код, (второй файл не нашла, зато есть :mootools-core.js, mootools-core-uncompressed.js, mootools-more-uncompressed.js)
Вот ссыль: http://jsfiddle.net/Zeya/WU2G9/

js к этой теме не относится.

<jdoc:include type="modules" name="user2" style="xhtml" />

это все - шаблон, а не сама страница. перед отправкой страницы браузеру джумла заменяет все эти jdoc на некие элементы (вывод модулей, например). поэтому хотелось бы видеть код, который получает браузер. доступен ли ваш сайт извне? если да - давайте ссылку. если нет...то открываете свою страницу в браузере, просматриваете исходный код и копируете его.

Zeeeya · December 24, 2011

Сайт на локалке еще, тока начинается...

вот исходный код страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">





<html xmlns="http://www.w3.org/1999/xhtml" 

xml:lang="ru-ru" 

lang="ru-ru" dir="ltr" >

<head>

  <base href="http://localhost/baykara/index.php/sample-sites" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="author" content="Super User" />
  <meta name="generator" content="Joomla! 1.7 - Open Source Content Management" />
  <title>Сайты-примеры</title>
  <link href="/baykara/templates/baykara/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <script src="/baykara/media/system/js/core.js" type="text/javascript"></script>
  <script src="/baykara/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/baykara/media/system/js/caption.js" type="text/javascript"></script>


<title>Welcome to the Frontpage</title>

<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />

<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />

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

<meta name="robots" content="index, follow" />

<meta name="keywords" content="joomla, Joomla" />

<link href="/baykara/index.php/component/content/?view=frontpage&format=feed&Itemid=1&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />

<link href="/baykara/index.php/component/content/?view=frontpage&format=feed&Itemid=1&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />

<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/mootools.js"></script>

<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/caption.js"></script>



<link rel="icon" href="/templates/persik/favicon.ico" type="image/x-icon">

<link rel="shortcut icon" href="/templates/persik/favicon.ico" type="image/x-icon"> 



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

<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />

<link rel="stylesheet" href="/baykara/templates/baykara/css/template.css" type="text/css" />



</head>



<body>

<!--оформление страницы сайта-->

<div id="wrap">

<!--блок шапки сайта header -->

<div id="header">

             шапка

</div>



<!--вывод модуля горизонтального меню в позиции user2-->

<div id="topmenu" align="center" >



			         </div> 

<!--вывод всего содержимого-->				 

<div id="body">

<!--вывод содержимого контента-->     	 

<div id="content"> 

              <div class="item-page">
	<h2>
			<a href="/baykara/index.php/sample-sites">
		Сайты-примеры</a>
		</h2>

	<ul class="actions">
						<li class="print-icon">
			<a href="/baykara/index.php/sample-sites?tmpl=component&print=1&layout=default&page=" title="Печать" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/baykara/media/system/images/printButton.png" alt="Печать"  /></a>			</li>

					<li class="email-icon">
			<a href="/baykara/index.php/component/mailto/?tmpl=component&template=baykara&link=888a678677b99c7257fd360aa0e4a9a171b531eb" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><img src="/baykara/media/system/images/emailButton.png" alt="E-mail"  /></a>			</li>



	</ul>





	<p>В установленной у вас системе имеются примеры контента различного  рода для демонстрации основных возможностей системы. Помимо этого, для  более наглядной демонстрации возможностей, в систему включено два "сайта  в сайте".</p>

<p>Первый сайт - "<a href="http://poligon.ru/index.php?Itemid=243">Парки Австралии</a>".  Он демонстрирует насколько легко создать на Joomla! персональный сайт.  Для реализации такого проекта вполне достаточно даже штатного  функционала Joomla!. Этот сайт содержит персональный блог, веб-ссылки и  простую галерею изображений.</p>

<p>Второй сайт - сложнее, он представляет собой сайт для малого бизнеса, в данном случае <a href="http://poligon.ru/index.php?Itemid=429">Магазина фруктов</a>.</p>

<p>Для создания индивидуального стиля и дизайна сайта вам, возможно, понадобится установить <a href="http://extensions.joomla.org/">сторонние расширения</a> и создать или приобрести собственный "шаблон" оформления. Многие пользователи Joomla! для начала изменяют стандартный <a href="http://docs.joomla.org/How_do_you_modify_a_template%3F">шаблон</a>, который имеется в системе изначально. Они добавляют необходимые изображения и прочие элементы дизайна в соответствии с назначением сайта.</p> 
	</div>
контент

	  </div>



<!--вывод правой колонки-->	  

<div id="right">

              правое

			  ололололллллллллллллллллллллллллллллллллллл

			  </div>

</div>



<!--вывод сведений модуля с информацией об авторских правах в позиции footer -->

<div id="bottom">



<a href="malito: Ramus20@yandex.ru"> Ramus20@yandex.ru </a>

</div>



</div>

</body>

</html>

hedgehog · December 24, 2011

работает же. http://jsfiddle.net/sxYk2/

с вашим css кодом левая колонка (content) занимает 100% ширины родителя потому что ее растягивает контент. вам уже писали, что нужно ограничить ширину левой колонки.

Zeeeya · December 26, 2011

работает же.

А на локалке не работает... Дело в хосте чтоль?

с вашим css кодом левая колонка (content) занимает 100% ширины родителя потому что ее растягивает контент. вам уже писали, что нужно ограничить ширину левой колонки.

почему 100%? стоит width 767px из 1000 px общей ширины. Попробовала в процентах прописать - ничего не изменилось... :dash:

hedgehog · December 26, 2011

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

aski · February 1, 2012

Решил не создавать новую тему, написать здесь. Есть небольшая трабла с блоками float.

Ситуация такая, допустим у нас есть такой код:


<div id="outer">
 <div id="inner1"></div>
 <div id="inner2"></div>
 <div id="inner3"></div>
</div>

У всех блоков inner стоит float:left и получается что у outer высота 0, если её не задавать явно.

Каким образом можно сделать чтобы у блока outer высота задавалась в зависимости от контента в блоках inner?

Моё решение такое: делаем, ещё один блок inner, у него задаём clear:both (желательно задать ему какую-нибудь высоту), в итоге он встанет вниз, а

контент в в других inner-ах будет двигать этот блок вниз.


<div id="outer">
 <div id="inner1"></div>
 <div id="inner2"></div>
 <div id="inner3"></div>
 <div id="inner4_special" style="clear:both"></div>
</div>

У кого какие ещё идие есть?

Sign In

Проблемы с обтеканием (float)

Question

Link to comment

Share on other sites

30 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information