yui - жидкий заголовок, исправление содержимого - PullRequest
Новая
       5

yui - жидкий заголовок, исправление содержимого

0 голосов
/ 07 декабря 2009

Как создать жидкий заголовок (100%) и исправить содержимое (950px) и нижний колонтитул с помощью yui?

Примерно так: 

---------------------------------- 
|         header (liquid)        |
---------------------------------- 
       |  left   | right |
       -------------------
       |      footer     |
       -------------------

Любой вклад будет высоко ценится.

Ответы [ 2 ]

0 голосов
/ 12 декабря 2009

Лучший способ сделать это, используя CSS Grids, - создать div вне div # doc2, который вы бы использовали в качестве div вашего заголовка. Просто удалите div # hd внутри # doc2 div, и у вас вообще не будет этого заголовка. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>YUI Base Page</title>
   <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
</head>
<body>
<div id="doc3" class="yui-t7"><div id="hd" role="banner">Header</div></div>
<div id="doc2" class="yui-t7">
   <div id="bd" role="main">
    <div class="yui-g">
    <!-- YOUR DATA GOES HERE -->
    </div>

    </div>
   <div id="ft" role="contentinfo"><p>Footer</p></div>
</div>
</body>
</html>
0 голосов
/ 09 декабря 2009

Здесь я привел очень простую структуру для вас. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Stackoverflow</title>
<style type="text/css">
body{
    margin:0;
    }
#container{
    width:100%;
    }
#header{
    width:100%;
    background:olive;
    }
#content{
    width:950px;
    margin:0 auto;
    overflow:hidden;
    }
#left{
    width:500px;
    float:left;
    background:blueviolet;
    }
#right{
    width:430px;
    float:right;
    background:green;
    }
#footer{
    width:100%;
    overflow:hidden;
    background:red;
    }
</style>
</head>

<body>
<div id="container">
    <div id="header">I'm the header with a width of 100%</div>    

    <div id="content">
        <div id="left">
            <h1>I'm the left floated content</h1>
            <p>lorem ipsum</p>
        </div>

        <div id="right">
            <h2>I'm the right floated content</h2>
            <p>lorem ipsum</p>
        </div>

        <div id="footer">
            <h3>I'm the footer</h3>
        </div>
    </div>
</div>
</body>
</html>

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...