Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Фиксированный дизайн с выравниванием по центру


Автор: compaq 12.4.2008, 20:36
Как можно сделать такое 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
Обшибся

Автор: KonstRuctor 13.4.2008, 11:55
Мне не нравится вот это:
<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
Спасибо за помошь у меня почти получилось  smile   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
браузеры как люди - у каждого свои замуты) к примеру, у Navigator по стандарту height:100% - на самом деле 102 и тд
можно опредилить разрешение экрана и уже отталкиваться от него. 

PS:

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

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)