VPF::Фиксированный дизайн с выравниванием по центру

compaq

Дата 12.4.2008, 20:36 (ссылка)

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

Загрузка ...

Шустрый

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

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

Как можно сделать такое http://htmlbook.ru/images/096_1.gif
Просто с верхним и нижним div я разобрался но при попытке добавить два параллельных div которые бы отвечали за меню и само содержимое(на картинке 2,3) у меня сразу рушится выравнивание по центру. Пробовал float но это не помогло Вот код

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
<style type="text/css"> 
body
{
     background:url(/images/1.jpg);
     margin:0;
     padding:0;
}
#top 
{
    text-align: left; /* Выравнивание по левому краю */
    width: 750px; /* Ширина слоя */
    background: #800000; /* Цвет фона */
    height: 50px; /* Высота слоя */
} 
#leftcol 
{
    text-align: left; /* Выравнивание по левому краю */
    background: #333; /* Цвет фона */
    height: 50px; /* Высота слоя */
    width: 745px; /* Ширина слоя */
}
#rightcol 
{
    text-align: left; /* Выравнивание по левому краю */
    background: #333; /* Цвет фона */
    height: 50px; /* Высота слоя */
    width: 432px; /* Ширина слоя */
}
#foot 
{ 
    text-align: left; /* Выравнивание по левому краю */
    background: #333; /* Цвет фона */
    height: 50px; /* Высота слоя */
    width: 750px; /* Ширина слоя */
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    </form>
    <div style=" width:100%; height: 199px;" align="center">
        <div id="top">1<br /></div>
        <div id="leftcol">2<br /></div>
        <div id="rightcol">3<br/></div>
        <div id="foot">4</div>
   </div>
</body>
</html>

Itsys

Дата 13.4.2008, 07:08 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

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

Обшибся

Это сообщение отредактировал(а) Itsys - 13.4.2008, 07:09

KonstRuctor

Дата 13.4.2008, 11:55 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

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

Мне не нравится вот это:
<div style=" width:100%; height: 199px;" align="center">

Скорее всего, лучше сделать общий контейнер, скажем,

<div id="site">

тут все наши блоки

</div>

И в свойствах этому контейнеру site прописать фиксированную ширину:

Код


#site{
        position: relative;
        width: 750px;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
}

compaq

Дата 13.4.2008, 14:35 (ссылка)

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

Загрузка ...

Шустрый

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

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

Спасибо за помошь у меня почти получилось smile

Только я немного изменил ваш код
Получилось вот что smile

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
<style type="text/css"> 
body
{
     background:url(/images/1.jpg);
     margin:0;
     padding:0;
}
#site{
        
        width: 750px;
        margin-left: 20%;
        margin-right: 20%;
        height: 100%;
        text-align: center;
        margin-top: 5%;
    }
#top 
{
    text-align: left; /* Выравнивание по левому краю */
    width: 750px; /* Ширина слоя */
    background: #800000; /* Цвет фона */
    height: 50px; /* Высота слоя */
} 
#leftcol 
{
 width: 200px; /* Ширина слоя */ 
 float: left; /* Состыковка с соседним слоем */ 
 color: white; /* Цвет текста*/ 
 background: #008000 /* Цвет фона левой колонки */ 
    
}
#rightcol 
{
 background: #e0e0e0; /* Цвет фона правой колонки */ 
 margin-left: 200px; /* Отступ слева */ 
    
}
#foot 
{ 
    text-align: left; /* Выравнивание по левому краю */
    background: #333; /* Цвет фона */
    height: 50px; /* Высота слоя */
    width: 750px; /* Ширина слоя */
}
</style>
</head>
<body>
    
    <form id="form1" runat="server">

    <div id="site">
        <div id="top">1<br />
            <br />
            <br />
        </div>
        <div id="leftcol">2<br />
            <br />
        </div>
        <div id="rightcol">3<br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>
        <div id="foot">4<br />
            <br />
            <br />
        </div>
   </div>

</form>
</body>
</html>

Я в site

Код


#site{
        width: 750px;
        margin-left: 20%;
        margin-right: 20%;
        height: 100%;
        text-align: center;
        margin-top: 5%;
    }

Добавил отступы от краёв по 20 процентов у меня получилось посередине. Но проблема в том что при разных разрешениях как бы это выразиться не работает апскейп под разрешение то есть появляется вертикальная полоска прокрутки а мне надо что контент всегда находился по центру. Подскажите что я не так сделал?

eee

Дата 14.4.2008, 01:31 (ссылка)

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

Загрузка ...

Шустрый

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

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

браузеры как люди - у каждого свои замуты) к примеру, у Navigator по стандарту height:100% - на самом деле 102 и тд
можно опредилить разрешение экрана и уже отталкиваться от него.

PS:

height: 100%;
margin-top: 5%; - вопрос: что это?! ответ: 105%;

мало того что ты растягиваешь слой на всю высоту браузера, ты добавляешь к нему еще 5% высоты того же агента!

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