float не хочет работать

botyaslonim · August 6, 2010

Создаю простенький макет на div'ах.

Нужно, чтобы текст ("content content ... ") обтекал картинку (img src = "111.jpg"). Для этого написал такой код:

</head>
<body>


<div id = "main">
<div id = "pict"><img src = "111.jpg" title = "" alt = ""/></div>
<div id = "text">
<p>Content content content Content content content Content content content Content content content Content content contentContent content content
	 Content content content Content content contentContent content content Content content content Content content content Content content content
	Content content content Content content content Content content content Content content content Content content content Content content content
</p></div>

<img src = "1.jpg" title = "" alt = "" usemap = "#coordinates"/>
<map name = "coordinates">
  <area shape = "circle" coords = "60,970,50" href = "index.html" title = "Назад" alt = "Назад"/>
  <area shape = "circle" coords = "180,970,50" href = "ola.html" title = "Вперёд" alt = "Вперёд"/>
</map>
</div>

Соответственно, прикручиваю такой CSS:

.......
#main {position: absolute; top: 0%; left: 50%; width: 1600px; margin-left: -800px;}
#back {position: absolute; top: 10%; left: 10%;}
#forward {position: absolute; top: 95%; left: 95%;}
#pict {float: right; position: absolute; top: 32%; right: -3%;}
#text {position: absolute; top: 32%; left: 40%; width: 800px; padding: 20px;}

В итоге: текст (id = "text") залазит на картинку (id = "pict")

Где ошибка?

Edited August 6, 2010 by botyaslonim

Great Rash · August 6, 2010

<p>
	<img src="путь_до_картинки" alt="" style="float: left;" />
	Content content content Content content content Content content content Content content content Content content contentContent	content content Content content content Content content contentContent content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content
</p>

botyaslonim · August 6, 2010

Не-а.

Попробовал ради прикола (хотя у меня все style всё-равно выведены в CSS) - не работает.

rus · August 6, 2010

align, не?

botyaslonim · August 6, 2010

Фсе пишут :lol: , что align - устарело. Кроме того, нужно, чтобы свойство применялось в CSS, чтобы не ковырять каждый раз HTML-код.

ps. Кстати, тоже не работает

Edited August 6, 2010 by botyaslonim

psywalker · August 6, 2010

Сделай всё по человечески, убери вот такую хрень всю

#pict {float: right; position: absolute; top: 32%; right: -3%;}

Обтекание, это float;, а не абсолют. Смастери картинка слева, а блок с текстом справа.

botyaslonim · August 6, 2010

Короче, чтобы не быть многословным, даю картинку. Нужно, чтобы при любом разрешении экрана все части никуда не разъезжались. Позиционирование идёт по центру.

http://picasaweb.google.ru/lh/photo/oSzlBq...feat=directlink

psywalker · August 6, 2010

Не вижу проблемы.

1) Делаем блок абслют, коротый координируем куда нужно.

2) Внутри него картинку выравниваем по правому краю, а блок с текстом будет обтекать её слева.

3) Блоку с текстом ставим overflow: hidden;

botyaslonim · August 6, 2010

Эврика! Спасибо большое, получилось!

HTML

<div id = "main">

<div id = "text">
<p> 
 <img id = "pict" src = "111.jpg" title = "" alt = "" align = "right"/>
	Content content content Content content content Content content content Content content content Content content content
	Content content content Content content content Content content content Content content content Content content content 
	Content content content Content content content Content content Content content Content content Content content content
	Content content content Content content content Content content content Content content content Content content content
	Content content content Content content content Content content Content content Content content Content content content
</p></div>

CSS

#main {position: absolute; top: 0%; left: 50%; width: 1600px; margin-left: -800px;}
#text {position: absolute; top: 30%; left: 52%; width: 800px; padding: 20px; float: left;}
#pict {float: right; padding: 0px 10px 5px 30px;}

Но, всё же, вопрос. Что, если вместо картинки нужно будет вставить какой-нить див со своим содержимым? Как тогда устроить обтекание?

psywalker · August 6, 2010

Но, всё же, вопрос. Что, если вместо картинки нужно будет вставить какой-нить див со своим содержимым? Как тогда устроить обтекание?

А в чём проблема? Точно так же назначаешь float: блоку

botyaslonim · August 6, 2010

overflow:hidden работает в Опере и IE, Хром и Лис не поддерживают... (при сильном ctrl -- текст вылезает за пределы бокса). Height поставил, если чё...

Great Rash · August 6, 2010

overflow:hidden работает в Опере и IE, Хром и Лис не поддерживают...

Чушь! Все везде поддерживается.

при сильном ctrl

При сильном чём?

botyaslonim · August 6, 2010

Уменьшении масштаба.

Берёшь нажимаешь ctrl, не отпуская, нажимаешь "-" :lol: До определённого момента content группируется в пределах своего блока (div), а потом вылезает за пределы. В IE и Opera такого не наблюдается.

psywalker · August 6, 2010

Уменьшении масштаба.
Берёшь нажимаешь ctrl, не отпуская, нажимаешь "-" До определённого момента content группируется в пределах своего блока (div), а потом вылезает за пределы. В IE и Opera такого не наблюдается.

Ну это никак не означает что overflow:hidden не работает в лисе. s0rr0w тебя за это бы отправил учить мат-часть. Просто тут уже ничего не попишешь, так она масштабирует.

botyaslonim · August 6, 2010

Радует то, что этот косяк вылезет на мониторах от 2400 х .. и выше. То есть, косяк не имеет смысла для 99,9% пользователей.

psywalker · August 6, 2010

Радует то, что этот косяк вылезет на мониторах от 2400 х .. и выше. То есть, косяк не имеет смысла для 99,9% пользователей.

Тогда забудь о нём и иди веселиться, пятница!

botyaslonim · August 6, 2010

Учицца надо, хотя и пятниццо... :lol:

Edited August 6, 2010 by botyaslonim

Sign In

float не хочет работать

Question

Link to comment

Share on other sites

16 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

Join the conversation

Обсуждения

Important Information