Секрет Полишинеля...

Trifler Blog

08 апреля 2010, 23:05

Секрет Полишинеля...

Собственно и секрета никакого нет. Все премудрости и тайны html и css, очень часто не стоят подробных описаний и примечаний чуть ли не каждой строчке кода.

Важна первоначальная идея и ее голое воплощение в примере.

Обладающим определенным опытом все будет понятно буквально с листа, не посвященным чуть труднее, но внимательный разбор тестовой страницы даст свои плоды и еще один пробел в знаниях легко устраняется и в будущем подобного рода приемы и методы помогут в решении более сложных проблем.

Многие задают вопрос, каким образом устранить не совсем адекватное поведение OPERA из одной предыдущей публикации.

Речь шла о размещении дополнительных блоков в колонках центральной части шаблона, которые всегда находятся внизу данных колонок.

Проблемный html-код:

<body>
<div id="middle">
  <div class="content">
    <div class="bottom_content">Content</div>
  </div>
  <div class="right">
    <div class="bottom_right">Right</div>
  </div>
</div>
<div id="footer">
  Footer
  <div class="border_content"></div>
  <div class="border_right"></div>
  <div class="footer_content">Блок content bottom</div>
  <div class="footer_right">Блок right bottom</div>
</div>
<div id="header">Header</div>
<div id="menus>Горизонтальное меню</div>
</body>

Минимальные изменения:

<body>
<div id="middle">
  <div class="content">
    <div class="bottom_content">Content</div>
  </div>
  <div class="right">
    <div class="bottom_right">Right</div>
  </div>
</div>
<div id="footer">
  Footer
  <div class="border_content">
    <div class="footer_content">Блок content bottom</div>
  </div>
  <div class="border_right">
    <div class="footer_right">Блок right bottom</div> 
  </div>  
</div>
<div id="header">Header</div>
<div id="menus>Горизонтальное меню</div>
</body>

Естественно, это влечет за собой правку стилей:

.footer_content,.footer_right {bottom:40px;}
.footer_content {left:3px;}
.footer_right {right:2px;}

Вот так простенько лечим OPERA :)

Комментарии к этой заметке больше не принимаются.
Все заметки категории «HTML and CSS»

Рейтинг популярности - на эти заметки чаще всего ссылаются:

  1. 1277268923532 position:absolute; Ликбез
  2. 0877996995200 Вертикальное раздвигающееся меню
  3. 0865950425348 Закругленные углы - градиент, html and css
  4. 0838942916744 Hack CSS for IE8
  5. 0831563727184 display:inline-block; and display:inline;
  6. 0688630796544 Фиксированные блоки на web-странице
  7. 0643210485892 max-width и min-width в IE6. Решить за 60 секунд
  8. 0415034819082 Footer всегда внизу. Личный архив
  9. 0380826026240 position:relative;overflow:hidden;border-top; Браузеры
  10. 0292057796608 Вертикальный скролл

banner counters.php

leftcounters
width:160px;
height:160px;

banner counters.php

centercounters
width:160px;
height:160px;

banner counters.php

rightcounters
width:160px;
height:160px;

Горизонтальный banner counters.php - width:494px;

апрель, 2010
пн вт ср чт пт сб вс
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
free counters