Jump to content
  • 0

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

botyaslonim

Asked by botyaslonim,

 Share

Question

botyaslonim Explorer

botyaslonim

Posted
Posted (edited)

Создаю простенький макет на 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 by botyaslonim
Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
Great Rash Explorer

Great Rash

Posted
Posted 
<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>

Link to comment
Share on other sites
  • 0
botyaslonim Explorer

botyaslonim

Posted
  • Author
Posted (edited)

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

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

Edited by botyaslonim
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
botyaslonim Explorer

botyaslonim

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
botyaslonim Explorer

botyaslonim

Posted
  • Author
Posted

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

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;}

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

Link to comment
Share on other sites
  • 0
botyaslonim Explorer

botyaslonim

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
  botyaslonim said:
Уменьшении масштаба.

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

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