Jump to content
  • 0

Float in Float

TonKhaO

Asked by TonKhaO,

 Share

Question

TonKhaO Explorer

TonKhaO

Posted
Posted

Привет всем! Вот недавно для себя обнаружил еще 1 странное поведение ие6,7. Вот решил поделиться с вами, возможно конечно кто-то уже в теме, но думаю тем не менее некоторым тоже будет полезно узнать :ph34r:

Скажем есть внешний блок, он зафлоачен лефтом!

В нем есть 3 блока (как бэ мы делаем растягивающуюся менюху с закругленными краями по бокам, высота фиксированная).

Эти 3 блока (включая правый) нужно все флоатить по лефту! Если правый блок (уголок) зафлоатить райт, то в ие 6,7 это растянет внешний блок (в данном примере .menu_item) с флоатом лефт на всю ширину экрана.

<!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>
<title>float in float</title>


<style>

.menu_item {

			background: #d4d4d4;
			float: left;
			display: inline;
			margin-right: 10px;
			padding: 10px;

}


.menu_item_left {

				 background: #ffc4c4;
				 float: left; 
				 display: inline;
				 width: 20px;
				 height: 20px;

}


.menu_item_center {

				 background: #a3cfa2;
				 float: left;
				 display: inline;

}


.menu_item_right {

				 background: #ffc4c4;
				 float: left; 
				 /*float: right - вот так делать не нужно :-) */
				 display: inline;
				 width: 20px;
				 height: 20px;

}


</style>


</head>

<body>

<div class="menu_item">

	 <div class="menu_item_left"></div>

	 <div class="menu_item_center">menu 1</div>

	 <div class="menu_item_right"></div>

</div>

<div class="menu_item">

	 <div class="menu_item_left"></div>

	 <div class="menu_item_center">menu 2 menu 2</div>

	 <div class="menu_item_right"></div>

</div>

<div class="menu_item">

	 <div class="menu_item_left"></div>

	 <div class="menu_item_center">menu 3 menu 3 menu 3</div>

	 <div class="menu_item_right"></div>

</div>

</body>
</html>

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0
mishka Explorer

mishka

Posted
Posted (edited)

Ну я как ты выразился "уже в теме" :ph34r:

Поэтому раскрою главное правило - если родитель флотнут вправо, то дочерние элементы нужно флотать влево. Это если хочешь резиновой ширины.

Edited by mishka2
Link to comment
Share on other sites
  • 0
TonKhaO Explorer

TonKhaO

Posted
  • Author
Posted
Ну я как ты выразился "уже в теме" :)

Поэтому раскрою главное правило - если родитель флотнут вправо, то дочерние элементы нужно флотать влево. Это если хочешь резиновой ширины.

опа а вот это интересно, попробую на ждосуге отпишусь сюда же :ph34r:

в любом случае получается дочерние элементы всегда в таких случаях нужно флоатить влево

Link to comment
Share on other sites
  • 0
rash Explorer

rash

Posted
Posted
Ну я как ты выразился "уже в теме" :ph34r:

Поэтому раскрою главное правило - если родитель флотнут вправо, то дочерние элементы нужно флотать влево. Это если хочешь резиновой ширины.

А что это даст при и без того 100% ширине?

Link to comment
Share on other sites
  • 0
TonKhaO Explorer

TonKhaO

Posted
  • Author
Posted
А я вообще не въехал в суть темы, что именно нужно получить и почему это не выходит?

ну смотри например когда есть некие пункты меню, но они не по-вертикали а по-горизонтали, и у этих пунктов закругленные края, <li> и списки для пунктов уже не подходят ибо я не могу в <li> запихивать несколько дополнительных блоков с правыми и левыми краями, вот и получается внешний див зафлоаченный по лефту и уже в нем 3 дочерних с уголками и средней частью, возможно это не семантично с точки зрения того что менюхи и пукнты менюх обычно делают именно списками, но вот другого пути я пока не знаю :ph34r:

Link to comment
Share on other sites
  • 0
LunatiK Explorer

LunatiK

Posted
Posted
ну смотри например когда есть некие пункты меню, но они не по-вертикали а по-горизонтали, и у этих пунктов закругленные края, <li> и списки для пунктов уже не подходят ибо я не могу в <li> запихивать несколько дополнительных блоков с правыми и левыми краями, вот и получается внешний див зафлоаченный по лефту и уже в нем 3 дочерних с уголками и средней частью, возможно это не семантично с точки зрения того что менюхи и пукнты менюх обычно делают именно списками, но вот другого пути я пока не знаю :ph34r:

Думаю лучше один раз увидеть, чем стораз услышать, картинка есть ?

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)
А что это даст при и без того 100% ширине?

Под "резиновой шириной" я подразумевал ширину по содержимому.

При чем тут 100%?

ибо я не могу в <li> запихивать несколько дополнительных блоков с правыми и левыми краями

Почему не можешь? что этому препятствует?

Если чтото флотнул вправо, то дочерние элементы можна флотнуть только влево.

Edited by mishka2
Link to comment
Share on other sites
  • 0
TonKhaO Explorer

TonKhaO

Posted
  • Author
Posted
Почему не можешь? что этому препятствует?

Если чтото флотнул вправо, то дочерние элементы можна флотнуть только влево.

как почему, я не помню щас не приведу но где то точно читал что по семантике в <li> можно максимум пихать такие инлайновские теги как <a> или <span> а тут получится что пихаю как бы блоки (правда отфлоаченные) :ph34r:

я имею ввиду вот например если привести семантику создания ссылок, например если я напишу так

<a href="#"><div>ссылка</div></a> - меня примут за ненормального :-)

<a href="#">ссылка</a> - правильно

вот тоже самое мне кажется со спанами

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)
как почему, я не помню щас не приведу но где то точно читал что по семантике в <li> можно максимум пихать такие инлайновские теги как <a> или <span>

Чушь

Также почему ты решил что только блоки можна флотать и бг на них цеплять?

Чем спан отличается от блока, в этом случае?

Edited by mishka2
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
по семантике в <li> можно максимум пихать такие инлайновские теги как <a> или <span>
С <p> не перепутали случайно? В <li> блоки пихать можно. Собственно, возможность вложенных списков на этом строится. Плюс редко, но бывает необходимость сделать, например, список блочных цитат с подписями или ленту новостей с заголовками и анонсами...

Вот в <a> пихать блоки можно только в HTML5 (в браузерах это уже работает, но в IE может глючить курсор при наведении).

Link to comment
Share on other sites
  • 0
TonKhaO Explorer

TonKhaO

Posted
  • Author
Posted
С <p> не перепутали случайно? В <li> блоки пихать можно. Собственно, возможность вложенных списков на этом строится. Плюс редко, но бывает необходимость сделать, например, список блочных цитат с подписями или ленту новостей с заголовками и анонсами...

Вот в <a> пихать блоки можно только в HTML5 (в браузерах это уже работает, но в IE может глючить курсор при наведении).

вы хотите сказать что можно так делать? :

<li>

<div></div>

<div></div>

<div></div>

</li>

и на сколько это семантично?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept