вопрос о списках и слое float:left

376

Miracle

6 января 2010, 19:57

936

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<html>

<head>

	<title>Untitled</title>

</head>



<body>

<p><div style="width:210px;float:left;margin:0 15px 0 0;padding:10px;background-color:#f9f9f9;text-align:left"><p><a href="/"><img src="1.jpg" alt="" width="200" height="150" border="0"></a><br><em>текс</em></p><p><img src="/img/rss-icon-big.png" alt="RSS" border=0 width=32 height=32 align=left style="margin:0 15px 0 0"> Подпишиcь на ленты:<br> <a href="/rss/rss_news.xml">новости</a>,<br><a href="/rss/rss_dogs.php">фото</a></p></div>Текст текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст </p> 

<ul> 

<li><a title="" href="../m.html">текст  текст  текст  текст </li> 

<li><a title="" href="../to.html"> текст  текст  текст  текст </li> 

</ul>





</body>

</html>

Подскажите как сделать так что бы кружечки (квадратики) от списка были не впритык к фотке а отступали как если бы небыло бы дива с floatом. И почему возникает такая проблема?

спасибо.

отец сыночка, лапочки дочки и еще одного сыночка

769

богоносец

7 января 2010, 00:07

#1


<html><head>	<title>Untitled</title></head>

<body>

 <div style="width: 210px; float:left;margin:0 20px 0 0; padding:10px; background-color:#f9f9f9; text-align:left">

  <p><a href="/"><img src="1.jpg" alt="" width="200" height="150" border="0"></a><br><em>текс</em></p>

  <p><img src="/img/rss-icon-big.png" alt="RSS" border=0 width=32 height=32 align=left style="margin:0 15px 0 0"> Подпишиcь на ленты:<br> <a href="/rss/rss_news.xml">новости</a>,<br><a href="/rss/rss_dogs.php">фото</a></p>

 </div>

 <p>Текст текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст </p> 

 <ul style="list-style-type: circle;



     list-style-position: inside;   ">  <!--  таблицами надо верстать! Браузеры не поспевают за дивной модой  -->



   <li style="margin: 1ex;"><a title="" href="../m.html">короткий текст короткий текст короткий текст </li>   

   <li style="margin: 1ex;"><a title="" href="../m.html">короткий текст короткий текст </li>   

   <li style="margin: 1ex;"><a title="" href="../m.html">короткий текст </li>

        <!--  если текста не много, то   list-style-position: inside;  -->

   <li><a title="" href="../to.html">длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст длинный текст </li> 

 </ul>

</body></html>

Если найдёте самое правильное решение, запостите.

http://forum.htmlbook.ru/

117

Kolovrat

7 января 2010, 00:47

#2

Перед списком вставьте

<div style="clear:both;"></div>

Коплю на домик в лесу

M

376

Miracle

7 января 2010, 01:21

#3

богоносец, не идеал но какое то решение, хотя тоже не нравитьсяKolovrat, это всего лишь даст выводиться тексту после дива - что не правильно.

Miracle добавил 07.01.2010 в 21:16

богоносец:
!-- таблицами надо верстать! Браузеры не поспевают за дивной модой -->

мне нужно что бы текст обтекал блок, а таблицами это не сделаешь :)

769

богоносец

7 января 2010, 22:29

#4

Ещё хоть какое-то решение

<!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" />

  <style type="text/css">

   p.text {    margin: 1em;   min-width: 200px;   padding: 0;    }

   p.blok {    margin: 0.6ex;	 font-size: 80%;    padding: 0;   }

   ul {    list-style-type: circle;    list-style-position: outside;    margin: 1em;	padding: 0;   }

   li {    margin: 0 0 0.7ex 2ex;    padding: 0;   }  

  </style>

   <!--[if IE]> <style type="text/css">  p.text {   margin-top: 0.7em;   }  </style><![endif]-->

 </head>

 <body style="margin: 0; padding: 0;">

  <div style="float: left;     border: 0;    margin: 0;    padding: 0;	   width: 210px;       background-color: #f9f9d9;"> <!-- #f9f9d9   замение на  #f9f9f9;

     width: 210px;  разные браузеры считают  с/без  padding, margin (и border), которые поэтому ==  0; -->



   <a href="/" title="не пиши сюда ключей"><img width="200" height="150" src="1.jpg" alt="[Фраза понятная посетителю без графики + G.искателю — ключи для этой страницы. Предложение может оказаться в G.выдаче]." title="На главную [не пиши в посказки ключей, только в альты]" style="padding: 5px; margin: 0; border: 0; font-size: 12px;"></a>

     <!-- В font-size  задан размер текста альта в Опере и FF.

	         Длинный альт расползается в FF по вертикали.

   Опере и IE нужен атрибут width=[ограничение ширины текста альта], стили не помогают. -->

   <p class="blok"><em>текст текст текст</em></p>

   <p class="blok"><img src="/img/rss-icon-big.png" alt="RSS" border="0" width="32" height="32" align="left" style="margin: 0.5ex 1ex 0 0; font-size: 17px;"> подпишиcь на ленты:<br> <a href="/rss/rss_news.xml">новости</a> · <a href="/rss/rss_dogs.php">фото</a></p>

  </div>



  <i style="display: inline-block;"></i>  <!-- Без ентого в FF в очень узком окне не спрыгивает в низ следующий блок. В IE оно слегка сдвигает в низ следующий блок, кому важно учтите в стилях для IE.

   Подсмотрено в Я.выдаче   .jb{display:inline-block} -->



  <div style="   display: table;  ">  <!--   Это  призрак таблиц!

   Хотя  margin-left: в этом диве писать бес/полезно, задавайте поля и отступы у вложенных блоков, чего не получалося, если свойство этого дива не display: table...  хоть   table-cell  -->

   <p class="text">Пыщ текста тексту текстом тексты тексте текст арп текст а текст щ текст  текст ву текст ро текст а текст а текст!</p>

      <!-- Вместо свойства   min-width   можно неразрывными пробелами типа длинное слово слепить в самом начале первого абзаца.

	   В любом случае, так лучше спрыгивать будет в узком окне. -->

   <ul>

    <li><a title="" href="../m.html">текст ыва текст ч текст м текст</a> </li> 

    <li><a title="" href="../to.html">текст чстписмт текст мс  текст чст текст</a></li> 

    <li><a title="" href="../to.html">тут длинный текст тут длинный текст тут длинный текст тут длинный текст тут длинный текст тут длинный текст тут длинный текст тут длинный текст тут длинный текст тут длинный текст тут длинный текст тут длинный текст </a></li> 

   </ul>

  </div> <!-- Дивная+резиновая вёрстка глючнее табличной!  Аминь.  -->

 </body></html>

Самое смешное, вспомнил одного... там подобное, только меньше никак не излечивалось... забил. Так вот это типа решение там не лечит в ИЕ.

Надо на htmlbook спрашивать.

[Удален]

7 января 2010, 22:41

#5

а в чем проблема http://www.tandem-west.com/designing_shop.html

раздел 2. Разработка и проектирование торгового оборудования

<h2>2. Разработка и проектирование торгового оборудования</h2>

  <p class="indent">Витрина из ЛДСП, в нижней части с дверками под ключ, верхняя часть застекленная с четырьмя полками и распшными дверьми под ключ.

В верхней части два светильника.</p>



  <div class="midi_left1">

    <img class="img_midi1" src="graf1/stellaj-01-1-midi.jpg" alt="Стеллаж пристеный" title="Стеллаж пристеный" /><br />

  </div>

  <ul>

    <li>Корпус ЛДСП белый 1606</li>

    <li>Декор ЛДСП венге замбези 3390</li>

    <li>Кромка ПВХ2 мм, в цвет используемых материалов</li>



    <li>Цоколь металлизированный пластик FA 101</li>

    <li>Светильники мебельные галогеновые в - 88мм</li>

    <li>Хромированная труба для вывода эл.проводов в пол D - 10мм</li>

    <li>Регулировочные ноги</li>

	<li>Фурнитура хром</li>

  </ul>



  <br class="perenos" />

css в коде есть ссылка на файл

769

богоносец

10 января 2010, 22:21

#6

burunduk:
а в чем проблема

Сохранил пример (надо бы явно указывать в теме http://www.tandem-west.com/css/i1280.css или http://www.tandem-west.com/css/i1024.css а то... долго их разыскивать, если не вспомнить про FF).

В <head> вписал <style type="text/css"> div {background-color:#ccc;} </style>

[ATTACH]51896[/ATTACH] . . . . . . . [ATTACH]51897[/ATTACH]

Проблема в том, что не следует надеяться на возможность задать (все якобы возможные) поля и отступы у элемента, следующего за блоком с {float:...}

В tandem-west от лицезрения последствий спасло совпадение фона картинок и страницы, что бывает не всегда. В данном случае можно задать правый отступ у блока с float, но в случае, как у ТС, когда за плавающим сначала следуют <p> и далее <ul>, проблема торчит заметнее, особенно если задать li{margin-left:2em}

В дивной вёрстке для указания разных свойств приходится городить типа объемлющие (вложенные) блоки... например из-за разного понимания браузерами свойства width. Не получается корректного решения всех неожиданностей.

gif 51896.gif

gif 51897.gif

[Удален]

10 января 2010, 23:20

#7

богоносец:
(надо бы явно указывать в теме

вообще-то я думал с помощью Firebug достаточно просто все найти :(

богоносец:
спасло совпадение фона картинок и страницы,

вообще-то это не просто совпадение :)

богоносец:
но в случае, как у ТС

там просто очень много наворочено лишнего (очень много вложенных элементов)

Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы

Яндекс Вебмастер вынес товарные фиды в отдельный раздел