1 Тема от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Тема: Резиновая шапка для сайта из тегов div

Почему-то не работает вот такая резиновая шапка:

<div style="display:inline-block;">
        <div  style="background:url(/style/logo-left.jpg) 0% 0% no-repeat; height:60px;"></div>
        <div>Заголовок шапки</div>
        <div style="background:url(/style/logo-right.jpg) 100% 0% no-repeat; height:60px;">
</div>

В чем ошибка?

Вот нашел решение:

<div>
        <div  style="display:inline-block; width:300px; background:url(style/logo-left.jpg) no-repeat; height:60px;"></div>
        <div style="display:inline-block;">Заголовок шапки</div>
        <div style="display:inline-block; width:300px; background:url(style/logo-right.jpg) no-repeat; height:60px; float:right;"></div>
</div>

А вот если хочу блок  с logo-right.jpg разместить справа, то "float:right;" в браузере Opera не всегда помогает почему-то.

Поделиться

2 Ответ от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Re: Резиновая шапка для сайта из тегов div

Вот еще вариант, рабочий:

<div id="header">    position: relative; display: block;

<div class="logo">   float: left;   display: block;
<img alt="#" src="images/logo.gif" title="#"/>
</div>

<div class="средняя часть">  position: absolute;   left: 220px;   display: block;
<img alt="#" src="affiliateHeader.gif" title="#"/></a>
</div>

<div class="memberBox">  float: right;  display: block;
тут М/Б рекламный блок
</div>

</div>

Поделиться

3 Ответ от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Re: Резиновая шапка для сайта из тегов div

И последний интересный вариант:

<div class="head">
<img style="border:none" src="images/logo.png" alt="">

Сразу код рекламы или правой части  шапки.
        </div>

Стиль:
.head {background: #171717 url(images/head_bg.jpg);}

Поделиться

4 Ответ от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Re: Резиновая шапка для сайта из тегов div

Шапка в виде заголовка официального документа на 3 языках:
Вариант 1. Как на официальных бланках:
<style>
*{margin:0; padding:0;outline:none; }
html{text-align:center; background:#ddd;}
...
.doc-headContain{ display:table; width:100%;}
.doc-h-block1,.doc-h-block2,.doc-h-block3{display:table-cell;text-transform:uppercase;vertical-align:middle; }
.doc-h-block1,.doc-h-block3{width:45%; padding:20px 50px; font-weight:bold; }
.doc-h-block2{ vertical-align:top;padding:10px 0;}
.doc-header{ padding:20px 150px;font-weight:bold;}
....
</style>
<body>

<div class="doc-headContain">
<div class="doc-h-block1">название орг. на молдавском</div>
<div class="doc-h-block2">
<img src="картинка" alt="Герб ПМР" />
</div><div class="doc-h-block3">название орг. на украинском</div>
</div><div class="doc-header">НАЗВАНИЕ ОРГ. НА РУССКОМ</div>

Вариант 2.
<style>
.doc-h-block1,.doc-h-block2,.doc-h-block3{text-transform:uppercase;}

.doc-h-block1{position: absolute; left: 5px; top: 5px; }
.doc-h-block2 {position: absolute; left: 125px; top: 0px; font-weight:bold; padding:10px 5px 5px 20px; font-size: 10pt;}
.doc-h-block3 {position: absolute; left: 125px; top: 50px; font-weight:bold; padding:5px 5px 5px 20px; font-size: 10pt;}
.doc-header {position: absolute; left: 125px; top: 100px; font-weight:bold; padding:5px 5px 5px 20px; font-size: 10pt;}

.doc-inf {}
.blok2   {position: absolute; top: 170px; margin:10px auto; width:1000px; min-height:500px; background:#fff;}
</style>
<body>

<div class="doc-headContain">
<div class="doc-h-block1"><img src="Герб" alt="Герб ПМР" /></div>
<div class="doc-h-block2">На руск.</div>
<div class="doc-h-block3">На молд.</div>
<div class="doc-header">На укр.</div>
</div>

<div class="blok2">
...
</div>
</body>

Поделиться

5 Ответ от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Re: Резиновая шапка для сайта из тегов div

Вариант таблицы слева 1 ячейка "0", справа 3 ячейки"1, 2, 3": 
rowspan - число ячеек, которые должны быть объединены по вертикали.

<html>
     <head><title></title></head>
     <body>

<table border="1" cellspacing="1" cellpadding="1" width="100%">
<tr >
  <td rowspan=3>0 </td>
  <td> 1</td>
</tr>
<tr>
  <td>2 </td>
</tr>
<tr>
  <td> 3</td>
</tr>
</table>
     </body>
</html>

Post's attachments

Table.jpg, 6.86 kb, 706 x 68
Table.jpg 6.86 kb, 394 downloads since 2013-12-26 

Поделиться

6 Ответ от admin

  • admin
  • admin
  • Administrator
  • Неактивен
  • Зарегистрирован: 2010-04-07
  • Сообщений: 1,226
  • Репутация : 0

Re: Резиновая шапка для сайта из тегов div

Поделиться