我正在尝试创建一个左侧边栏和右侧内容的布局，这是我第一次使用这种布局类型创建网站:
更新:
我已经更新了 css，因为我做了一些更改，但我现在被告知我可以使用 overflow: auto;在#leftCol 和#content 上，以便页面将根据页面上的数据展开。
我试过了，但它把我的内容 div 推到导航栏下，就像整个 #leftCol 都不见了，因为我只剩下 <li>选项
我该怎么做？
文档类型: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">© <?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;
}
最佳答案
Doctype: HTML5 -> Transitional
没有这样的东西。
Issues:
I am having trouble to create a layout that expands dependent on the amount of data given.
好的
How would I produce the graphic -> Metal so that it expands.
以什么方式、在什么条件下扩展？
Why am I getting overlap with I hover over my nav dropdown menu -> The nav does not seem to get wider for the number of options within it.
您已经为导航元素设置了固定宽度。为什么期望它会扩展？
Would I make my #rightCol graphic a fixed width?
取决于您要实现的目标。我猜你可能不需要。
Do I even need #rightCol?
可能不会。
Should I make the width 960 or 990px?
为您的布局命名一些目标。
关于css - HTML 和 CSS 布局帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5776062/