Hello,
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:
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?
HTML:
<html>
<head>
</head>
<body>
<div id ="wrapper">
<div id ="header">
<h1 id = "companyName">Houses</h1>
<h4 id = "companyQuote">"Houses"</h4>
</div>
<div id="leftCol">
<nav>
<ul>
<li>Dashboard></li>
<li>Edit Pages
<ul>
<li><a href="#">Pages</a></li>
</ul>
</li>
<li>Gallery
<ul>
<li><?php echo anchor('admin/addimage','Add Image');?></li>
<li><?php echo anchor('admin/deleteimage','Delete Image');?></li>
</ul>
</li>
<li>Sales
<ul>
<li>Add Sale</li>
<li>Edit Sale
<ul>
<li><a href="#">Sales</a></li>
</ul>
</li>
</li>
<li><Delete Sale </li>
</ul>
<li><Log Out</li>
</li>
</nav>
</div><!-- Left Col End -->
<div id="rightCol">
<section id="content">
<h1>PageName></h1>
<p>Content<p>
</section>
</div><!-- Right Col End -->
<div id="footer">content</div>
</div> <!-- Wrapper Close -->
</body>
</html>
CSS:
/*Reset */
html, body, h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset { padding: 0; margin: 0; }
/* Main CSS */
#wrapper{
width:990px;
height:auto;
margin: 0 auto;
}
#header{
background-image:url('../images/header.png');
background-color:#000;
width:990px;
height:220px;
}
#leftCol{
width:190px;
float:left;
}
#rightCol{
width:990px;
margin:0 0 0 0px;
}
/*Menu */
nav{
float:left;
width:190px;
height:500px;
margin:0 0 0 0;
background-image:url('../images/metalnavbg.png');
}
nav ul{
float:left;
margin:0;
list-style:none;
font-size:14px;
width:190px;
}
nav li a{
font-size:14px;
color:#fff;
line-height:25px; /*Text Hight On Button */
text-decoration:none;
text-indent:25px;
display:block;
width:190px;
height:27px;
background-image:url('../images/normal.png');
}
nav ul li ul{
display:none;
}
nav ul li:hover ul{
display:block;
}
nav a:hover{
background-image:url('../images/onclick.png');
}
/*Content */
#content{
width:990px;
}
#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:990px;
height:60px;
}
/* Misc*/
#metal{
float:left;
margin:160px 0 0 -190px;
background-image:url('../images/metalnavbg.png');
height:400px;
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 */
#leftFormCol{
float:left;
width:100px;
border:1px solid gray;
}
#rightFormCol{
float:left;
width:150px;
margin:0 0 0 75px;
border: 1px solid blue;
}
/*General*/
#validation{
font-weight:bold;
color:#ff0101;
}
form{
width:100%;
float:left;
margin: 0 0 0 25px;
border: 1px solid black;
}
fieldset{
border:none;
}
label{
width:30px;
margin: 0 42px 3px 5px;
border: 1px solid green;
}
input{
width:130px;
height:20px;
margin: 0 42px 3px 5px;
border: 1px solid red;
}
::-webkit-input-placeholder{
text-indent:5px;
color:red;
}
/*Admin Login */
#loginForm{
margin: 0 auto 10px;
width:150px;
height:150px;
background-color:#c5c4c3;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#loginForm label{
font-weight:bold;
margin:5px 0 0 15px;
display:block;
}
#loginForm input{
margin:10px 0 0 15px;
height:15px;
}
#loginForm input[type=submit]{
margin-top:5px;
display:block;
}
#sales{
width:150px;
height:180px;
margin-left:15px;
border: 1px solid red;
}
#sales .thumbnail{
height:150px;
width:150px;
}
#sales .location{
float:left;
text-align:center;
font-weight:bold;
margin-left:8px;
}
#sales .price{
float:left;
text-align:left;
font-weight:bold;
padding-left:5px;
color:#ff0101;
}