VPF::Вот сверстала шаблон div-ми но в разных браузерах

Enya

Дата 23.11.2006, 00:29 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

Вот. Просто попробовала. Интересно же.

Код


div.leftTop{
    background: #9FE69F;
    border: 1px Solid Green;
    padding: 0.2em;
    text-align: left;
    width: 50%;
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    margin: 0px;
}
div.rightTop{
    background: #9FE69F;
    border: 1px Solid Green;
    padding: 0.2em;
    text-align: right;
    width: 50%;
    top: 0px;
    left: 50%;
    position: absolute;
    display: block;
    margin: 0px;
}
div.leftLogoField{
    background: Silver;
    border: 1px Solid Black;
    width: 20%;
    height: 10%;
    display: block;
    position: absolute;
    top: 1.6em;
    left: 0px;
    margin: 0;
}
div.freeField{
    background: #FFCCEE;
    border: 1px Solid RED;
    width: 80%;
    height: 10%;
    display: block;
    position: absolute;
    top: 1.6em;
    left: 20%;
}
div.leftLineField{
    background: #E3E3E3;
    border: 1px Solid Black;
    width: 20%;
    height: 2.5%;
    display: block;
    position: absolute;
    top: 4.6em;
    left: 0px;
    margin: 0;
}
div.NavigacijaField{
    background: #DEB887;
    border: 1px solid Maroon;
    width: 80%;
    height: 2.5%;
    display: block;
    position: absolute;
    top: 4.6em;
    left: 20%;
    margin: 0;
}
div.leftFrame{
    background: #6495ED;
    border: 1px Solid Blue;
    width: 20%;
    height: 60%;
    display: block;
    position: absolute;
    top: 6em;
    left: 0px;
    margin: 0;
}
div.content{
    background: #43CFCA;
    border: 1px solid #00696A;
    width: 80%;
    height: 60%;
    display: block;
    position: absolute;
    top: 6em;
    left: 20%;
    margin: 0;
}
div.bottom{
    background: #FFFFC6;
    border: 1px solid Maroon;
    width: 100%;
    height: 2.5%;
    display: block;
    position: absolute;
    top: 84%;
    left: 0;
    margin: 0;
}

Код


<div class="leftTop">Element div.leftTop</div><br>
<div class="rightTop">Element div.rightTop</div><br>
<div class="leftLogoField">Element div.leftLogoField</div><br>
<div class="freeField">Element div.freeField</div><br>
<div class="leftLineField">Element div.leftLineField</div><br>
<div class="NavigacijaField">Element div.NavigacijaField</div><br>
<div class="leftFrame">Element div.leftFrame</div><br>
<div class="content">Element div.content</div><br>
<div class="bottom">Element div.bottom</div><br>

Не совсем понятно, почему между блоками хоть у указываю внешний отступ ноль, ширина одного 50%, ширина другого тоже. Но всё равно между ними есть промежуток. smile

Присоединённый файл ( Кол-во скачиваний: 21 )

VerstkaDivEnya.gif 25,79 Kb

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Bangladesh

Дата 23.11.2006, 00:53 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17

Enya, это происходит в ие. Добавь в цсс:

Код


  * { padding: 0px;
      margin: 0px; }

--------------------

ок

SelenIT

Дата 23.11.2006, 00:55 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(Enya @ 23.11.2006, 00:29

)

Не совсем понятно, почему между блоками ... есть промежуток.

Потому, что размеры считаются от внутренних размеров body, а у него есть умолчательные (ненулевые) margin-ы и padding-и. Если поставить в начале

Код


body { margin: 0; padding: 0; }

то "половинки" шапки сомкнутся. Но - только в IE и только в Quirks mode, т.к. др. браузеры и сам IE в режиме поддержки стандартов отсчитывают padding-и не внутрь элемента, а наружу, поэтому без дополнительных ухищрений такая верстка там немного разлезется...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Enya

Дата 23.11.2006, 11:02 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

Вот не много не понимаю как указывать отношения между DIV вами.
Абсолютное или относительное?

И почему то я когда указываю высоту div-ва, то не все браузеры поддерживают высоту.
И высоту лучше в процентах или в других каких-либо ед. измерения?

и что лучше, указывать для display? Я понимаю что посмотри почитай, я посмотрела, почитала, но можно на пальцах?

Присоединённый файл ( Кол-во скачиваний: 18 )

DivMaket.gif 9,44 Kb

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Bangladesh

Дата 23.11.2006, 20:52 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17

Цитата(Enya @ 23.11.2006, 10:02)

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

2. все поддерживают, только по разному. высоту абсолютных блоков лучше знать заранее. если высота в процентах, то блок лучше выводить в основном потоке (position: static;). для относительного позиционирования так же лучше знать размеры заранее.

3. в зависимости от того, что тебе нужно. покажу пример:

Код


<div id="sometext">
Я хотел показать пример и подчеркнуть <span style="font-weight: bold;">это</span>.
</div>

<div id="sometext">
Я хотел показать пример и подчеркнуть <div style="display: inline; font-weight: bold;">это</div>.
</div>

у дива по умолчанию display: block (так же как у "p", к примеру), а у спана inline.
инлайн - как текст, грубо говоря, а блок - как блок.

--------------------

ок

Enya

Дата 24.11.2006, 10:33 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

Вот я делаю div

Код


div.NavBar{
    display: block;
    border: 1px solid #337935;
    background-color: White;
    width: 30%;
    height: 15%;
    padding: 10px;
    position: relative;
    left: 10%;
    top: 2%;
}

а вот, в html коде, пытаюсь засунуть в него список ссылок.

Код


<div class="NavBar">
                   <a href="" class="NavBarLink">Ñòàòüè</a><br>
                     <a href="" class="NavBarLink">Ôîðóì</a><br>
                     <a href="" class="NavBarLink">F.A.Q</a><br>
                     <a href="" class="NavBarLink">Ïîìîùü</a><br>
                     <a href="" class="NavBarLink">Î íàñ</a><br>
                 </ul>
                 </div>

а на экране вот такая вот чушь...

Присоединённый файл ( Кол-во скачиваний: 16 )

nav.gif 3,23 Kb

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Enya

Дата 24.11.2006, 11:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

Вот ещё тут кое что нашла в интернете, и сама потрудилась. но почему в FireFox и IE показывает по разному для меня загадка.

Код


* {margin:0; padding:0;}
* div{padding: 2px;}
html {background:#fff}
body {background:url(background_3.gif) repeat-y 20% 0; min-width:640px}
#header {background:#fcc; width:49%}
#menu {background:#ffc; width:50.9%}
#line{background: #98FB98; float: right; width: 80%;}
#freeblock{background: #E6E6FA; width:20%; float: left;}
#lineNext{background: #38FB98; float: right; width: 80%;}
#freeblockNext{background: #F0E68C; width:20%; float: right;}
#content {background:#9cf; float:right; width:80%; height: 52%;}
#sup-section {background:#cec; width:20%; float: left;}
#sub-section {background:#cfc; width:20%; height: 45%;}
#footer {background:#ccf; width:100%; clear:both}
#header, #menu, #content, #sub-section, #footer {overflow:hidden; display:inline-block}
#header, #menu, #sub-section {float:left}
#freeblock, #line {height: 15%;}

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Bangladesh

Дата 26.11.2006, 01:00 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17

Enya, так и не смог понять как связан скрин с кодом. наложить надо?

--------------------

ок

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »