Question

我正在尝试创建一个CSS框架，其中我有一个小的左框架和一个大的右框架。

我想在左边放一个徽标和一些misc链接。

我想在右侧放置导航和内容。

当我向左侧添加内容时，它会将内容向右推到最低点。我使用了一个示例CSS框架页面来开始。

我希望Media Room和About链接位于右侧框架的顶部，我只是看不到它。

HTML代码段：

<!-- Left Frame -->
<div id="framecontentLeft">
    <div class="innertube">
        <header>  
        <hgroup>
        <div class="FloatingBox">
                    <h1>6&nbsp;&nbsp;
            <span class="AppleGreen">C</span>&nbsp;&nbsp;
            <span class="AppleYellow">o</span>&nbsp;&nbsp;
            <span class="AppleOrange">l</span>&nbsp;&nbsp;
            <span class="AppleRed">o</span>&nbsp;&nbsp;
            <span class="ApplePurple">r</span>&nbsp;&nbsp;
            <span class="AppleBlue">s</span>&nbsp;&nbsp;
        </h1>  

        <h2>
            A&nbsp;
            <span class="AppleBlue">Nostalgic</span>
            <span class="ApplePurple">Trip</span>
            <span class="AppleRed">Down</span>
            <span class="AppleOrange">Memory</span> 
            <span class="AppleYellow">Lane</span>.
        </h2>
        </div>

                <br /><br /><br /><br /><br /><br />
                <a class="AppleRed" href="#">Have Footage To Submit?</a>

        <br /><br /><br /><br />
            <a class="AppleRed" href="#">Need To Contact Us?</a>
    </hgroup>  
     </header>
 </div>
</div>

<!-- Right Frame -->
<div id="maincontent">
    <div class="innertube">

    <?php include('includes/menu.inc'); ?>

    </div>
</div>

这是CSS：

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    /* vertical-align: baseline; */
    background: transparent;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 2;
    background-image: url('images/background.png');
    /*width: 90%; */
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
}

.framecontentLeft, .framecontentRight{
   position: absolute; 
    top: 0; 
left: 0; 
width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

.framecontentRight{
left: auto;
right: 0; 
width: 150px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #fff;
color: #fff;
}

.maincontent{
position: absolute; 
top: 0;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
/*right: 150px; */ /*Set right value to WidthOfRightFrameDiv*/
bottom: 0;
overflow: auto; 
background: #fff;
}

.innertube{
   margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
    padding: 0 0 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

任何人都可以帮助我了解如何解决这个问题并实现我的目标吗？

Answer 1

我注意到的第一件事是你在标记中有<div id="maincontent">但是样式中的.maincontent会定位<div class="maincontent">

我不会使用绝对位置。

Answer 2

拜托，帮自己一个忙，摆脱绝对定位。
在这种特殊情况下你可以做的是浮动侧面菜单并将主内容层保持为正常的静态定位div，只需添加适当的左边距。
请参阅以下示例代码：

标记：

<body>
<div id="container">
    <div id="sidemenu">some content</div>
    <div id="maincontent">blah blah blah</div>
</div>
</body>

风格：

* { /* jolly selector '*' applies the following rules to all elements */
    margin: 0;
    padding: 0;
}
body {
    background: #CCC; /* whatever background you see fit */
}
#container {
    width: 100%;
    float: left;
    display: inline; /* IE fix */
}
#sidemenu { /* this layer is floated LEFT */
    float: left;
    display: inline; /* IE fix */
    width: 200px;
    background: #DDD;
}
#maincontent { /* this layer is a plain fixed-position div */
    margin-left: 220px; /* the margin makes it align correctly with the left 'frame' */
}

CSS Frames，我的内容不遵守框架限制

2 个答案: