проблема с DIV :( @ DeForum.ru

0 Сообщения: 137 Зарегистрирован: 10.02.05

Господа помогите плиз, из-за чего может быть проблема с дивами, когда они начинают накладыватся друг на друга (
у них стоит float:left у обоих.
в IE все отображдается отлично. в FireFox один див наезжает на другой частично

.docInfo, .docViewer, .docInfoCapt
{
float:left;
}
.docViewer
{
width:450px;
}
.docInfo, .docInfoCapt
{
margin-right:4px;
width:300px;
}

Во-первых, у Вас три дива, о каких речь? Во-вторых -- только что перенёс Ваше творение в хтмл -- в Фоксе всё нормально. Вот, попробуйте вставьте нижеприведённое между тегами <html></html> Для наглядности я добавил цветные рамки. В чём вопрос?

Код:

<head>
<title>Untitled</title>
<style type="text/css">
.docInfo, .docViewer, .docInfoCapt{float:left;}
.docViewer{width:450px;border:3px solid #ff0000;}
.docInfo, .docInfoCapt{margin-right:4px;width:300px;border:3px solid #000;}
</style>
</head>
<body>
<div class="docViewer">&</div><div class="docInfo">&</div>
</body>

17 Сообщения: 7419 Зарегистрирован: 15.11.04

Reijii, а с какого бодуна у них обоих float: left? Вы вообще что хотели сделать-то?

Акела писал(а):

Reijii, а с какого бодуна у них обоих float: left? Вы вообще что хотели сделать-то?

Ну, float правильно, это нормальный поток. Clear в конце поставить и ОК. Вот вторая часть вопроса мне тоже интересна :-)

К тому же, в исходнике дива ТРИ.

17 Сообщения: 7419 Зарегистрирован: 15.11.04

tentoys, я про то и спрашиваю. Чего человек хотел-то? Три колонки? :eek:

0 Сообщения: 21 Зарегистрирован: 27.07.05

А вообще, код с дивоми он привел, а где код их вывода :confused:

DesignUser писал(а):

А вообще, код с дивоми он привел, а где код их вывода :confused:

Чего?

17 Сообщения: 7419 Зарегистрирован: 15.11.04

DesignUser, действтительно - чего? :eek:

0 Сообщения: 137 Зарегистрирован: 10.02.05

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

вот струкртура

<body>
<div class="container">

<div class="header">
<p class="p1"></p>
</div>

<div class="contentHeader">
<p class="p1">
</p>
</div>

<div class="content">

<div class="intakeScreen">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
</td>
</tr>
</table>
</div>

<div class="docInfo">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
</td>
</tr>
</table>
</div>

<div class="docViewer">
<table cellpadding="0" cellspacing="0" border="0"Ю
<tr>
<td>
</td>
</tr>
</table>
</div>

</div>

<div class="contentFooter">
<p class="p1">
</p>
</div>
</div>
</body>
</html>

0 Сообщения: 21 Зарегистрирован: 27.07.05

Ну незнаю что ты хотел, но вот что получилось у меня после соеденения всего твоего кода и разметки цветными линиями всех блоков:

Отсюда видно что 2 красных блока (float) размещаются визуально в желтом блоке, причем наижают на его границу, если ты хотел сделать так:

то у тебя есть 2 способа:
1) Убери float и возьми два красных блока в <table>; :fie:

2) В своем классе ".contentFooter" добавь строку clear:both; :glasses:

17 Сообщения: 7419 Зарегистрирован: 15.11.04

Reijii,

Цитата:

в верху один див, под ним две колонки из двух дивов.

RTFM о потоках. Сначала в общем потоке идёт шапка, потом две колонки. Случай сто раз рассмотреный, материалов в сети куча. Выкиньте весь код и напишите сначала или воспользуйиесь шаблоном Дрима, тамих вагон. Или почитайте по ссылкам, которых тут на сайты по вёрстке давались много-сного раз.

0 Сообщения: 137 Зарегистрирован: 10.02.05

Спасибо всем кто ответил!
пошел читать про потоки

17 Сообщения: 7419 Зарегистрирован: 15.11.04

Reijii, собственно, в спецификации CSS не слишком подробно, но основное сказано.

0 Сообщения: 137 Зарегистрирован: 10.02.05

2 Акелла,

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

помоему это какраз дико логично

0 Сообщения: 137 Зарегистрирован: 10.02.05

bE(o0L писал(а):

помоему это какраз дико логично

возможно ли как-то избежать такого ?
я вот смотрю на www.csszengarder.com, делаю по их принципу, но все равно что-то не хочет работать также как у них

взял css2 reference, но там написанно действительно мало, и не то что хотелось бы

0 Сообщения: 137 Зарегистрирован: 10.02.05

вот скажем такой пример:

HTML:

Код:

<!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="en">
<head>
   <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>

   <div class="container">
   
      <div class="leftBlock">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
            tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud 
            exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel 
            eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
            nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril 
            delenit augue duis dolore te feugait nulla facilisi.</p>
      </div>
      
      <div class="centerBlock">
         
         <div class="topBlock">
            Wide Top Center Block   
         </div>
         
         <div   class="smallLeft">
            Small Left Block   
         </div>
         
         <div class="smallRight">
            Small Right Block      
         </div>
            
      </div>
      
      <div class="rightBlock">
         <p class="p1"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
            tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud 
            exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel 
            eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
            nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril 
            delenit augue duis dolore te feugait nulla facilisi.</span></p>
            
            <p class="p1"><span style="color:#ff0000;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
            tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud 
            exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel 
            eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
            nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril 
            delenit augue duis dolore te feugait nulla facilisi.</span></p>
      </div>
   
   </div>

</body>
</html>

CSS:

Код:

 body
{
   font: 11px/16px tahoma; 
   color: #000; 
   background: #fff url(blossoms.jpg) no-repeat bottom right; 
   margin: 0px;   
}

 .leftBlock, .rightBlock, .smallRight, .smallLeft, .topBlock
{
   border:1px solid #000;
   padding:3px;
   text-align:justify;
}

.container
{
   padding:4% 4% 0 4%;
   vertical-align: top;
}

.leftBlock, .rightBlock
{
   width:150px;
}
.leftBlock
{
   float:left;
   color:#c0c0c0;
}
.rightBlock
{
   float:right;
   color:#ff9900;
}
.centerBlock
{
   margin:0 10px 0 10px;
   padding:3px;
   float:left;
   width: 700px;
   border:1px dotted #000;
}
.topBlock
{
   margin:0 0 20px 0;
   height:100px;
}
.smallLeft
{
   width:100px;
   height:100px;
}
.smallRight
{
   width:100px;
   height:70px;
   float:right;
}

0 Сообщения: 137 Зарегистрирован: 10.02.05

Когда я ставлю у .RightBlock clear:left

то в FireFox этот блок оторажается ниже всех блоков

17 Сообщения: 7419 Зарегистрирован: 15.11.04

Он и так отображается ниже всех блоков.

Reijii, на русском - не знаю. На штатовских сайтах до чёрта. ВНИМАТЕЛЬНО смотрите статьи на том же листапарте и смотрите сайты их авторов. Это одна тусовка с вебстандардс.орг и они не одну сотню часов провели за экспериментами и описанием их результатов.

DeДверь
Логин:
Пароль:
	Автологин