Design To XHTML

Излязоха 2 нови версии на Internet Explorer – 7 и 8, но все още се налага да се съобразяваме с IE6.
Колкото и да не одобрявам това съобразяване, когато клиент иска сайтът му да е направен и за IE6, ами… няма какво да се прави – отделям още време, за да го пригодя и към него.

За да може даден елемент от страницата ви да стои винаги на едно и също място, независимо че скролвате, може да ползвате javascript, css expression, или просто малък css хак.

Ето го примера

Ще покажа последния начин.

html

<div id="main_container">
<div id="header">
      информация за горната част на страницата</div>
<div class="container">
      Вашето съдържание</div>
<div id="footer">
      © DesignTo(xHtml). All Rights Reserved</div>
</div>
<div class="info_bar">
  Този блок трбява да стои
  винаги в горната част на браузъра</div>

css

html,body {
   overflow: auto;
}
 
.info_bar{
   position: fixed;
   width: 190px;
   height: 90px;
   left: 61.5%;
   top: 0;
   background-color: #FFEEEE;
   _position: absolute;
   padding: 5px;
}

Важно е да има  overflow: auto на  html,body.

Позиционирането за всички браузъри без  IE6 става с position: fixed и съответно слагането на top и left, за да укажем къде точно ще се намира елемента, а _position: absolute е за само IE6, както описах в предишната статия