HTML & CSS Layout help
Question
I am trying to create a layout with the sidebar on the left and content on the right, this is my first time creating a site with this layout type:
Update:
I have updated the css as I have made a few changes but I have now been told that I can use overflow: auto; on the #leftCol and the #content so that the page will expand dependent on the data on the page.
I have tried this but it pushes my content div under the nav and it is like the whole #leftCol goes missing because I am only left with the <li> options
How Could I do this?
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">© <?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;
}
1 answers
solution1
5 ACCPTED 2011-04-25 13:18:55
Doctype: HTML5 -> Transitional
There's no such thing.
Issues:
I am having trouble to create a layout that expands dependent on the amount of data given.
OK
How would I produce the graphic -> Metal so that it expands.
Expands in what way, and under what conditions?
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.
You've set a fixed width for the nav element. Why would expect it to expand?
Would I make my #rightCol graphic a fixed width?
Depends what you're trying to achieve. My guess is you probably don't need to.
Do I even need #rightCol?
Possibly not.
Should I make the width 960 or 990px?
Name some goals for your layout.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.