Img, div и float

M.org · March 10, 2009

Косяк:

Код страницы:

<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>yomoto:.beta</title>
  <link rel="stylesheet" type="text/css" href="mainstyle.css" />
 <link rel="shortcut icon" href="images/favicon.ico" />
 </head>
 <body>
<div id="header"><img src="images/logo.png" class="logo" alt="yomoto.ru:. ты и твой телефон"/></div>
<div id="main"><div class="content"><h1>Motorola ROKR E8</h1><p><img src="test.jpg" alt="" /><p>Свои цифровые компакты компания Samsung вполне логично делит на группы по позиционированию. И если вспоминать наиболее продвинутые в плане технических возможностей модели, то на ум, конечно же, приходит линейка «NV». Широкий угол, система стабилизации, интересная оптика — все это можно найти в моделях, принадлежащих этой линейке. В этом обзоре речь пойдет о новом цифровом компакте — NV100 HD.</p>
</p></div><div class="content"><h1>Motorola ROKR E8</h1><p><img src="test.jpg" alt="" /><p>Свои цифровые компакты компания Samsung вполне логично делит на группы по позиционированию. И если вспоминать наиболее продвинутые в плане технических возможностей модели, то на ум, конечно же, приходит линейка «NV». Широкий угол, система стабилизации, интересная оптика — все это можно найти в моделях, принадлежащих этой линейке. В этом обзоре речь пойдет о новом цифровом компакте — NV100 HD.</p>
</p></div>
</div>
<div id="navi"><div class="model">
<ul>
<li><h2>ROKR E8</h2><ul>
<li>прошивка</li>
<li>игры</li>
<li>приложения</li>
<li>видео</li>
<li>картинки</li>
<li>скины</li></ul></li></ul>
</div>
</div>
 </body>
</html>

CSS:

body {
background:#191919;
background-image:url('images/bg.png'); 
margin:30px 30px 0;height: 100%;}
html {height: 100%;}

#header {
height:100px; 
width:943px; 
background:#342033; 
background-image:url('images/header_bg.png'); 
background-repeat:repeat-x;}

#main {width:944px;
background:#fff;padding-top:20px;}
.content {padding-top:16px;margin-left:33px;font:10.5pt Tahoma; color: #5a5a5a;float:none;width:600px;border:1px solid;}

.content Img {margin-left:10px;margin:0 10px 10px 0;padding:0px;float:right;}

.content H1 {
font: 26pt Tahoma;
padding-top:0;
margin-bottom:10px;
margin-top:0; 
color:#000}

.content P {margin-top:0; margin-bottom:15px;text-indent: 30px;text-align:left;}

.logo {
margin-left:15px; 
margin-top:18px;}

#navi {min-height: 100%;height : 100%;
width:291px; 
background:#f6f7fb;
position: absolute;
left: 681px; 
top: 130px;}

.model {
padding-top:10px; 
width:130px;
float:left;
text-align:right; 
font:10.5pt Tahoma; 
color:#5a5a5a;
padding-right:15px; list-style-type: none;}

.model UL,LI {list-style-type: none; margin-left: 0; padding-left: 0; margin-top:0px; padding-top:0px;}

.model h2 {
font: 18pt Tahoma;
padding-top:0;
margin-bottom:-5px;
margin-top:0; 
color:#000}

Проблема в том, что если картинка в блоке контента выше него самого, то она накладывается на следующий блок. Если блок контента сделать таблицей, то проблем 0, но не хотелось бы. Если убрать параметр float:right; у картинки, все приходит в норму, но обтекание то нужно! А если задать обтекание через align косяк остается.

Что делать?

s0rr0w · March 10, 2009

1. Учить матчасть. Внимательно, вдумчиво читать про float

2. overflow: hidden спасет отца русской демократии.

M.org · March 10, 2009

Мне вот это помогло:

.content:after
{
	content:'';
	display:block;
	clear:both;
}

Но и ваш вариант подошел. По поводу матчасти: мне тупо непонятно, почему картинка вылезла ЗА пределы блока.

s0rr0w · March 10, 2009

Мне вот это помогло:
.content:after
{
	content:'';
	display:block;
	clear:both;
}
Но и ваш вариант подошел. По поводу матчасти: мне тупо непонятно, почему картинка вылезла ЗА пределы блока.

Потому что она ПЛАВАЮЩАЯ картинка и не принадлежит данному блоку.

http://www.w3.org/TR/CSS21/visuren.html#floats

Edited March 10, 2009 by s0rr0w

M.org · March 10, 2009

Спасибо, почитаю.

Неприятно, как обезьянка использовать чужие методы, шаблоны, решения. Хочется понять саму суть, чтобы просто не наталкиваться на такие проблемы.

Wind · March 11, 2009

Так же можете попробовать задать блоку, в котором лежит картинка задать display:table;

s0rr0w · March 11, 2009

Так же можете попробовать задать блоку, в котором лежит картинка задать display:table;

Убийственное решение. Имеет ряд своих проблем. Первая из них - IE

M.org · March 11, 2009

Новая проблемка. Есть заголовок через h1, сразу за ним следует div с датой. Заголовок подлезает под div. Есть выход заключить заголовок в отдельный див с фиксированной шириной, но некрасиво.

CSS дива с датой

.date {
BACKGROUND-IMAGE:url(images/date.png);
WIDTH:64px;
HEIGHT:65px;
TEXT-ALIGN:center;
PADDING-TOP:7px;
FLOAT:right;
MARGIN-TOP:-75px;
OVERFLOW:hidden;
LEFT:100px
}.date span {
COLOR:#6b3668;
FONT:22pt Tahoma;
LEFT:10px
}

.date div {
COLOR:#6b3668;
FONT:14px Tahoma;
MARGIN-TOP:-2px;
LETTER-SPACING:-1px
}

Кусок html с заголовком и датой.

<div class="content"><h1><a href="#">Handy Weather — погодный информер</a></h1>
<div class="date"><span>10</span><div>февраля</div></div>

Кстати, невалидное решение, подскажите как сделать это валидно?

Victor Ananiev · March 11, 2009

<p> открыт но не закрыт, и в <p> вроде нельзя вкладывать дивы)

M.org · March 11, 2009

<p> убрал, это лишний выскочил :lol:

Victor Ananiev · March 11, 2009

ну и все еще ругается на невалидность?

Nekromancer · March 11, 2009

в "параграф" можно сувать див, он ведь блочный :lol: ))

а можно посмотреть не правильную картинку как падает дата?

на мой взгляд есть 2 варианта выхода или почти 2:) ну по первых действительно следует вытащить див из "параграфа" хоть и можно это делать но не желательно...

второй вариант поставить флоат на оба объекта, а заголовок и див с датой) (float: left;)

M.org · March 16, 2009

Если кому интересно - тут готовый сайт.

Sign In

Img, div и float

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information