Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Блок с отступами, от окна браузера 
:(
    Опции темы
VingradFan
Дата 2.7.2009, 19:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 477
Регистрация: 30.1.2006
Где: Москва

Репутация: нет
Всего: 3
Всем доброго дня. Прошу помочь в создании странички с версткой, как на картинке из вложения
Отступы по бокам делаются просто, интересуют отступы сверху и снизу
Испробовал ооооооочень много вариантов. Самое простое и очевидное

Код

body {
width: 98%;
height:98%;
margin:1%;
}


Вот еще вариант с пустыми блоками... Везде работает нормально, а в ИЕ6 - нет, и не могу понять, почему.
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>padding</title>
        <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        html {
            width: 100%;
            height: 100%;
            background: pink;
        }
        body {
            width: 40%;
            margin-left:30%;
            margin-right:30%;
            height: 100%;
            background: transparent;
        }
          div.top_bottom_spacer {
            height: 1%;
            background: transparent;
        }
        div#content{
            height: 98%;
            background: lime;
        }
        </style>
    </head>
    <body>
        <div class="top_bottom_spacer"></div>
        <div id="content">
            content
        </div>
        <div class="top_bottom_spacer"></div>
    </body>
</html>



работает некорректно.
Спасибо за помощь smile

Это сообщение отредактировал(а) VingradFan - 2.7.2009, 20:32

Присоединённый файл ( Кол-во скачиваний: 8 )
Присоединённый файл  0ac70.jpg 19,64 Kb


--------------------
Когда-нибудь я стану богатым и куплю себе столько Ролтонов, сколько захочу...
PM MAIL WWW ICQ   Вверх
bars80080
Дата 2.7.2009, 19:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
Цитата(VingradFan @  2.7.2009,  19:34 Найти цитируемый пост)
body {
            width: 40%;

я бы не стал так неосторожно. всё же body - суть документ, может ему и не положено ужиматься. нельзя ли ещё один див вставить, который уже ужимать?

ну и попробовать:

Код

html { text-align: center; }
может поможет
PM MAIL WWW   Вверх
VingradFan
Дата 2.7.2009, 19:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 477
Регистрация: 30.1.2006
Где: Москва

Репутация: нет
Всего: 3
bars80080, думаешь я не пробовал? smile

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>padding</title>
        <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
            background: lime;
        }
        div#container {
    background: red;
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
    height: 98%;
    margin-top: 1%;
    margin-bottom: 1%;
        }
        </style>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>



А причем тут html { text-align: center; }???

Это сообщение отредактировал(а) VingradFan - 2.7.2009, 19:52


--------------------
Когда-нибудь я стану богатым и куплю себе столько Ролтонов, сколько захочу...
PM MAIL WWW ICQ   Вверх
bars80080
Дата 2.7.2009, 19:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
Цитата(VingradFan @  2.7.2009,  19:51 Найти цитируемый пост)
А причем тут html { text-align: center; }???

а ты не пробовал?

подчас надо не размышлять, а только верить
PM MAIL WWW   Вверх
VingradFan
Дата 2.7.2009, 20:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 477
Регистрация: 30.1.2006
Где: Москва

Репутация: нет
Всего: 3
bars80080, попробовал, по горизонтали блок встал по центру, а по вертикали - нет...
Интересует именно вертикальное выравнивание...


--------------------
Когда-нибудь я стану богатым и куплю себе столько Ролтонов, сколько захочу...
PM MAIL WWW ICQ   Вверх
bars80080
Дата 2.7.2009, 23:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
значит отцентрировать удалось. прикольно, возьмём на заметку.

вертикальное выравнивание, насколько я знаю, в ИЕ6 одним только css выполнить не удастся

сам бы был рад увидеть реализацию
PM MAIL WWW   Вверх
VingradFan
Дата 2.7.2009, 23:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 477
Регистрация: 30.1.2006
Где: Москва

Репутация: нет
Всего: 3
bars80080, отцентровалось только в ИЕ6 smile
так что на заметку не бери smile


Вертикальное выравнивание можно ведь сэмулировать ;)
С помощью пустых блоков, например...


--------------------
Когда-нибудь я стану богатым и куплю себе столько Ролтонов, сколько захочу...
PM MAIL WWW ICQ   Вверх
ksnk
Дата 2.7.2009, 23:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
Вертикальное выравнивание для всех, включая IE6 разумнее делать таблицей. Правда сначала стоит выяснить, а чего там такое нарисовано на картинке? Может просто марджины правильные задать, да и хорошо будет?

Вот так, марждинами auto выравнивается блок по горизонтали, это если кто, случайно, не знал...
Правда и doctype нужно обязательно указывать, для порядку и определенности...
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>test</title> </head>
<body>
<div style="width:40%;height:300px;margin:10% auto; border:1px solid red;"></div>
</body>
</html>

По вертикали марждин auto никто не желает видеть, сами можете убедится... 
И высоту для дива неплохо явно указать, либо набить див чем-нибудь полезным, мало ли что...


Это сообщение отредактировал(а) ksnk - 2.7.2009, 23:51


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
VingradFan
Дата 2.7.2009, 23:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 477
Регистрация: 30.1.2006
Где: Москва

Репутация: нет
Всего: 3
написал кроссбраузеное решение, но только для одноцветного фона страницы =\
какбэ не есть универсальное решение...
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>padding</title>
        <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
            background: lime;
        }
        body {
            width: 40%;
            margin-left: 30%;
            margin-right: 30%;
        }
        #text {
            height: auto !important;
            height: 100%;
            min-height: 100%;
            background: green;
        }
        #footer {
            height: 30px;
            margin-top: -30px;
            background: lime;
        }
        #spacer_top {
            height: 30px;
            background: lime;
        }
        #spacer_bottom {
            height: 30px;
            background: transparent;
        }
        #container {

        }
        #content {

        }
        </style>
    </head>
    <body>
        <div id="text">
            <div id="spacer_top"></div>
                content
            <div id="spacer_bottom"></div>
        </div>
        <div id="footer"></div>
    </body>
</html>


Это сообщение отредактировал(а) VingradFan - 2.7.2009, 23:51


--------------------
Когда-нибудь я стану богатым и куплю себе столько Ролтонов, сколько захочу...
PM MAIL WWW ICQ   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0838 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.