Question

我正在尝试使用左侧的侧边栏和右侧的内容创建布局，这是我第一次使用此布局类型创建网站：

更新

我更新了css，因为我做了一些更改，但我现在被告知我可以使用overflow：auto;在#leftCol和#content上，页面将根据页面上的数据进行扩展。

我已经尝试了这个，但它将我的内容div推送到导航栏下，就像整个#leftCol丢失一样，因为我只剩下<li>个选项

我怎么能这样做？

Doctype：HTML5

HTML：

<!DOCTYPE html>
    <head>
    </head>
    <body>
        <div id ="wrapper">
            <div id ="header">
            <h1 id = "companyName"></h1>
            <h4 id = "companyQuote">""</h4>
            </div>
    <div id="leftCol">
     <nav>
            <ul>
            <?php if($this->session->userdata('logged_in')): ?>
                <li><?php echo anchor('admin/dashboard', 'Dashboard');?></li>
                <li><a>Edit Pages<a>
                <?php if(is_array($cms_pages)): ?>
                        <ul>
                            <?php foreach($cms_pages as $page): ?>
                            <li><a href="<?=base_url();?>admin/editpage/index/<?= $page->id ?>/<?php echo url_title($page->name,'dash', TRUE); ?>"><?=$page->name?></a></li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endif; ?>
                    </li>
                <li><a>Gallery</a>
                <ul>
                    <li><?php echo anchor('admin/addimage','Add Image');?></li>
                    <li><?php echo anchor('admin/deleteimage','Delete Image');?></li>
                </ul>
                </li>
                <li><a>Sales</a>
                <ul>
                    <li><?php echo anchor('admin/addsale','Add Sale');?></li>
                    <li><a>Edit Sale</a>
                                <?php if(is_array($sales_pages)): ?>
                                        <ul>
                                            <?php foreach($sales_pages as $sale): ?>
                                            <li><a href="<?=base_url();?>admin/editsale/index/<?= $sale->id ?>/<?php echo url_title($sale->name,'dash', TRUE); ?>"><?=$sale->name?></a></li>
                                            <?php endforeach; ?>
                                        </ul>
                                    <?php endif; ?>
                                    </li>
                    </li>
                    <li><?php echo anchor('#','Delete Sale');?></li>
                </ul>
                    <li><?php echo anchor('admin/home/logout','Log Out');?></li>
                </li>
            <?php else: ?>
            <?php redirect('admin/home'); ?>
                <?php endif; ?>
        </nav>
    </div><!-- Left Col End -->
         <div id="content">
         <h1><?= $title ?></h1>
        <p> <?= $content // loads template file ?> </p>
       </div><!-- Content End -->     

        <div id="footer">&copy; <?php echo date('Y');?></div>
        </div> <!-- Wrapper Close -->
    </body>

CSS：

/*Reset */
html, body, h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset { padding: 0; margin: 0; }

/* Main CSS */
html,body{
    height:100%;
}
#wrapper{
    width:960px;
    min-height:100%;
    margin: 0 auto;
}
#header{
    background-image:url('../images/header.png');
    background-color:#000;
    height:220px;
}



/*Menu */
nav{
    float:left;
    width:190px;
    height:25%;
    margin:0 0 0 0;
}

nav ul{
    float:left;
    width:190px;
}

nav li a{
    margin-left:10px;
    font-size:14px;
    color:#fff;
    text-decoration:none;
}

nav ul li{
    display:block;
    list-style:none;
    width:190px;
    height:25px;
    position:relative;
    background-image:url('../images/normal.png');
} 

nav ul li ul{
    display:none;
}

nav ul li ul li li{ /* edit page drop down */
    display:none;
}


nav ul li:hover ul{ /*Main Drop Down */
    display:block;
    position:absolute;
    left:190px;
    top:0px;
}

nav ul li ul li:hover li{ /* edit page drop down */
    display:block;
    position:absolute;
    left:0px;
    top:0px;
}

nav li:hover{
    width:100%;
    background-image:url('../images/onclick.png');
}

/*Content */
 #leftCol{
    float:left;
    width:190px;
    background-image:url('../images/metalnavbg.png');
    border: red 1px solid;
}

#content{
    float:left;
    width:990px;
    overflow:auto;
}

#content h1{
    margin: 10px 0 0 0;
    text-indent:25px;
    font-family: 'Josefin Slab', arial, serif;
    font-size:24px;
}

#content p{
    margin:10px 0 0 0;
    text-indent:26px;
}

#footer{
    clear:both;
    background:url('../images/footer.png') no-repeat #000;
    width:100%;
    height:60px;
}

/* Misc*/

#metal{
    float:left;
    margin:160px 0 0 -190px;
    background-image:url('../images/metalnavbg.png');
    height:auto;
    width:190px;
}

/* Text Formatting */

#companyName{
    text-align:center;
    padding-top:45px;
    font-size:35px;
    color:#f0f0ef;
}

#companyQuote{
    text-align:center;
    font-size:18px;
    color:#a5a4a2;
}

/*Forms */
/*General*/

#validation{
    font-weight:bold;
    color:#ff0101;
}

.form{
    width: 400px;
    height:100%;
    padding: 15px 25px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;

}

.form fieldset{
    border:none;
}

#formLayout{
    border:2px solid #000;
}

#formLayout label{
   clear:  both;
    display: block;
}

#formLayout input{
    font-size:12px;
    border: 2px solid #999;
    padding: 6px 8px;
    background-color: #fff;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
    color: #000;
    width: 250px;
}



#formLayout .small{
    color:#ff0101;
    display:block;
    font-size:11px;
    font-weight:bold;
    text-align:left;
    width:140px;
}

#formLayout textarea{
    width:250px;
}

#error{

    width:250px;
    height:20px;
    margin:-30px 0 0 270px;
    padding-bottom:10px;
}

#error p{
    color:#ff0101;
    text-align:left;
}
/* Page Edit Form */

#pageEdit .form, #formLayout{
    width: 490px;
    height:100%;
    padding: 15px 55px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;

}

#pageEdit textarea{
    width:480px;
}

#deleteImage{
    float:left;
    margin-left:25px;
    width:100px;
    height:100px;
}

#deleteImage .thumbnail{
    margin:0 auto;
    height:90px;
    width:90px;
}

Answer 1

Doctype：HTML5 - ＆gt;过渡

没有这样的事情。

的问题：

我无法创建一个根据给定数据量扩展的布局。

行

我如何制作图形 - ＆gt;金属使它膨胀。

以什么方式扩展，在什么条件下扩展？

为什么我将鼠标悬停在我的导航下拉菜单上 - ＆gt;对于其中的选项数量，导航似乎并没有变宽。

您为nav元素设置了固定宽度。为什么会期望它扩大？

我会将#rightCol图形设为固定宽度吗？

取决于你想要实现的目标。我的猜测是你可能不需要。

我甚至需要#rightCol吗？

可能不是。

我应该将宽度设为960还是990px？

为您的布局命名一些目标。

HTML＆amp; CSS布局帮助

1 个答案: