So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.
For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?
Behold! http://jsfiddle.net/QHeDZ/
I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.
You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.
Just add <div id="clear"></div> before closing this div <div id="landing-links">
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right; //modify this to left(so it could be next to the other container)
}
Hope this helped you!Cheers!
Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:
#landing-links-left { line-height: 20px; }
#landing-links ul {
margin: 0;
line-height: 20px;
}
Related
I am pretty new to this. I am hoping for some help and advise keeping my divs side by side. One is a menu which works fine but now my content is overlapping and I'm not sure what I did. I should make multiple saves. any advice on positioning my divs would be crazy appreciated.
apologies if my formatting of the post is wrong. brain is fried and my website is due for class tomorrow.
body {
background-color: #35455e;
}
h1 {
text-align: center;
font-size: 400%;
color: #ecb3ff;
padding-left: 30px;
}
h2 {
text-align: center;
font-size: 300%;
color: #ecb3ff;
padding-left: 40px;
}
ul {
list-style: none;
overflow: hidden;
list-style: none;
text-align: center;
border-style: hidden;
}
a {
color: white;
text-decoration: none;
font-size: 125%;
padding-left: 12px;
}
a:hover {
color: #fff666;
}
a:active {
color: #9bc1ff;
}
div.header {
background-image: url("https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-
9/22089728_10212094710577763_385045730802353501_n.jpg?
oh=534f6bd3108f6f68f96cf5709e404b9f&oe=5AD4BADA");
background-size: initial;
background-repeat: repeat;
border-radius: 8px;
height: 573px;
width: 449px;
border: 10px;
box-shadow: 10px 10px 5px #333333;
float: left;
position:fixed;}
div.main{
position: relative;
top: 500px;
right: 500px;
}
li {
width: 30%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Madison Queen's Art Portfolio: Home</title>
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Madison Art Portfolio</h1>
<ul>
<li>Home</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div><!--closing of header-->
<div class="main">
<h2>Madison Art Portfolio</h2>
</div><!--CLOSING OF MAIN-->
</div><!--CLOSING OF THE CONTAINER-->
</body>
</html>
As you are using position:fixed; in div.header and position:relative; in div.main you can change the stack of them using z-index value in CSS. if you want your header on the front side and main on the back side then add z-index:2 in div.header and z-index:1 in div.main.
it is overlapping because you have specified the fixed position to the header which is placing the header on the fixed place and anything on the page will overlap with the header. you can try position:absolute
Remove all the code from div.main. It's not required. Also remove position: fixed from the div.header block.
Heyah, I have a transition for when you click the 'burger icon'(on mobile screens, max 580px) and then it becomes an 'x', I would like to also add a transition to the menu that then opens, can anyone help me how I can achieve that?
transition: all ease-in-out 0.4s;
Do I use this? and if so where do I put it?
$(document).ready(function() {
$("#burger-container").on('click', function() {
$(this).toggleClass("open");
});
});
$(document).ready(function() {
$("#burger-container").on('click', function() {
$("header nav ul").toggleClass("open1");
$("nav").toggleClass("open1");
});
});
/***** BASE STYLES *****/
body{
font-family: Raleway;
margin: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/************************************/
.wrapper{
max-width: 1180px;
margin: 0 auto;
}
h1.logo {
float: left;
padding: 0;
padding-left: 4%;
}
header nav h2{
height: 0;
margin: 0;
text-indent: -10000px;
}
#main-banner, #main-banner img{
width: 100%;
}
#main-banner img{
border-top: 2px dashed #a5053d;
border-bottom: 4px solid #a5053d;
}
p{
padding: 0 4%;
text-align: justify;
line-height: 170%;
float: left;
}
h2{
text-align: center;
margin: 4px 0 0 0;
}
.bigger{
font-size: 16.25px;
font-weight: bold;
}
.paragraph{
margin-bottom: 4%;
}
.work img{
padding-right: 1%;
}
.work p{
margin-bottom: 5%;
padding: 0 15%;
text-align: center;
}
.work{
text-align: center;
}
#burger{
height: 0;
width: 0;
}
header{
padding: 0;
}
nav{
float: right;
padding-right: 2%;
}
nav ul{
display: flex;
}
nav li{
margin: 10px 20px;
list-style: none;
}
nav li a {
text-decoration: none;
color: #666666;
font-size: 20px;
}
a:hover {
color: #a5053d;
font-weight: bold;
}
/*************FOOTER************/
.links ul {
list-style: none;
display: block;
margin: 0 auto;
width: 300px;
}
.links ul li {
display: inline-block;
}
.links ul img {
margin: 0 4%;
height: 40px;
width: auto;
}
footer{
margin-top: 15px;
}
.bottom{
background-color: #e8e8e8;
height: 70px;
padding-top: 2px;
margin-top: 150px;
}
li img:hover{
box-shadow: 0 0 30px #c1c1c1;
-moz-box-shadow: 0 0 30px #c1c1c1;
-webkit-box-shadow: 0 0 30px #c1c1c1;
-o-box-shadow: 0 0 30px #c1c1c1;
border-radius:100px;
}
/******** BURGER ********/
#media all and (max-width: 580px){
#burger-container{
margin: 25px 0 0 0;
width: 50px;
float: right;
padding-right: 70px;
}
#burger{
cursor: pointer;
display: block;
}
#burger span{
background: black;
display: block;
width: 50px;
height: 3px;
margin-bottom: 10px;
position: relative;
top: 0;
transition: all ease-in-out 0.4s;
}
#burger-container.open span:nth-child(2){
width: 0;
opacity: 0;
}
#burger-container.open span:nth-child(3){
transform: rotate(45deg);
top: -13px;
}
#burger-container.open span:nth-child(1){
transform: rotate(-45deg);
top: 13px;
}
}
/***************mobiles*********************/
#media all and (max-width: 580px){
nav{
width: 100%;
padding-right: 45px;
background-color: #666666;
height: 0;
}
header nav ul{
height: 0;
display: block;
overflow: visible;
}
header nav ul.open1, nav.open1{
height: auto;
}
header nav ul li{
width: 100%;
margin: 20px;
}
nav li a, nav ul li{
color: white;
text-align: right;
display: block;
}
header .wrapper{
width: 100%;
padding: 0;
}
h1 {
margin: 20px;
padding: 0;
}
h1.logo {
padding: 0;
margin: 20px;
}
header{
padding: 0;
}
.paragraph{
padding: 10px 20px 40px 20px;
}
.work p{
padding: 0 0 40px 0;
margin: 0 20px;
}
.work h3{
padding: 0 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="img/heart.png">
<title>heartcube</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/burger.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Raleway" rel="stylesheet">
</head>
<body>
<header>
<div class="wrapper">
<h1 class="logo">Heartcube</h1>
<!-- ............BURGER............ -->
<div id="burger-container">
<div id="burger">
<span> </span>
<span> </span>
<span> </span>
</div>
</div>
<nav>
<h2>Main Navigation</h2>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
</ul>
</nav>
</header>
<!-- START OF HOMEPAGE CONTENT-->
<div id="main-banner">
<img src="http://heartcube.co.uk/img/london.jpg" alt="london banner">
</div>
<div class="wrapper">
<section id="home-menu">
<h2>Betti Bremm</h2>
<p class="paragraph"><span class="bigger">A little bit about me.</span> I'm a young and motivated Webdesigner located in West London. My journey into tech started when I was quite young already, I always loved setting up websites and my own homepages, but without coding
it myself. I've always been fascinated with the internet, it's design and social media. I was hooked and wanted to learn how to build my own site to fit my own specific needs. That curiosity then opened a door that could never be shut. When I
learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for
detail to write clean, elegant code.</p>
<div class="work">
<img src="http://heartcube.co.uk/img/html.png" alt="HTML icon">
<h3>Hand-Coded HTML</h3>
<p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
<img src="http://heartcube.co.uk/img/css.png" alt="CSS icon">
<h3>Well-Organized CSS</h3>
<p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
<img src="http://heartcube.co.uk/img/pencil.png" alt="Pencil icon">
<h3>Ease Converting Designs into Code</h3>
<p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
</div>
</section>
</div>
<!-- ..END OF HOMEPAGE CONTENT-->
<div class="bottom">
<footer>
<div class="wrapper links">
<ul>
<li>
<img src="http://heartcube.co.uk/img/mail.png" alt="Email">
</li>
<li>
<img src="http://heartcube.co.uk/img/twitter.png" alt="Twitter">
</li>
<li>
<img src="http://heartcube.co.uk/img/tumblr.png" alt="Tumblrn">
</li>
<li>
<img src="http://heartcube.co.uk/img/instagram.png" alt="Instagram">
</li>
<li>
<img src="http://heartcube.co.uk/img/linkedin.png" alt="LinkedIn">
</li>
</ul>
</div>
</footer>
</div>
</body>
other links of this code :
Homepage
or on codepen here
Here's a full list of changes to (and notes on) existing snippet I made in order to enable the animation:
You can't animate transition from 0 to auto or to 100%. The only library capable of doing it is velocity.js but they use a kind of a hack to determine the value they are rendering to before animating. To better understand the underlying problem read this.
The article linked above will also explain why I changed animating height to animating max-height.
The #burger element didn't have height and width, making it difficult to use. (One had to click exactly on the lines of the burger on order to open it).
In order to calculate the proper max-height of the element, I chose to wrap your menu inside a wrapper (.animator) as it simplified the JavaScript needed to calculate the height, when opening.
There's no point into making both the container and the contents have height:0 when closed. You're only over-complicating the animation and making it harder for yourself to understand/debug what's going on. So I removed placing open1 on children, I only left it on parent.
There's no point in having more than one instance of $(document).ready(){}. Just place all the code you want to run on that event into one single wrapper.
Generally speaking, there are two types of code you want to run when a page loads:
a. DOM manipulation code - place on $(document).ready(){} - runs first
b. bind to event code - place on $(window).load(){} - runs after
Since this script was a "bind to event" code, I placed it in $(window).load(){}.
Updated pen.
Note: If you ask yourself why I didn't include a SO snippet in the answer and used your pen, the main reason is because your SO snippet is incomplete, as you used relative links for the following assets:
normalize.css,
main.css,
burger.css,
index.js
In the following code from: http://6.470.scripts.mit.edu/css_exercises/exercise5.html
<html>
<head>
<style type="text/css">
.wrapper1 {
width: 65%;
margin: 0px auto 0px auto;
border: 1px solid;
text-align: center;
background: #eeeeee;
}
.wrapper2 {
clear: left;
width: 80%;
margin: auto;
border: 1px solid;
background: #111111;
}
.p1 {
margin: 20px;
font-size: 70px;
}
.p2 {
font-size: 50px;
}
.link-gr {
list-type: none;
}
.link-gr li{
float: left;
}
.link-gr li a{
display: block;
width: 100px;
}
</style>
</head>
<body>
<div class="wrapper1">
<div class="wrapper2">
<p class="p1">MIT 6.470</p>
<p class="p2">Learn Web Programming this IAP</p>
<ul class="link-gr">
<li>Comprehensive Curriculum</li>
<li>Insightful Guest Lectures</li>
<li>Interaction with Sponsors</li>
<li>$30,000+ in Total Prizes</li>
</ul>
</div>
Copyright © 2012 MIT 6.470
</div>
</body>
the ul.link-gr links are falling outside the div. I mean everything excluding the links are wrapped inside div.wrapper2 with border and black-ish background but the links are placed outside the box (like outcast-ed). This is very strange. Some explanation from your side will be highly appreciated.
Thanks
I would think this is a float problem: your code contains
.link-gr li{
float: left;
}
The problem is that its container is not float: left, which means that the list items are free to go anywhere. Try adding float: left to the .link-gr as well:
.link-gr{
float: left;
}
This may solve the problem. Fiddle: http://jsfiddle.net/abZHK/1/
Ah floats...
Explanations
See this old article from P.I.E: Clearing floats (IE/Win is IE version 6 there)
Solution
Apply this modern clearfix (on parent of the non-contained floats)
My apologies if this too basic of a question but CSS is boggling me. I think I'm doing something that CSS is supposed to do easily but it is simply not working the way I read the documentation.
Here's my example. It's been massively simplified but the basic problem remains. I'm sure this is some core misconception on my part, I just don't know where it lies.
Here's the goal:
Here's what I get now:
Here is the HTML:
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
And here's the CSS:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000;
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
padding: 0px 30px;
border-top: none;
border-bottom: none;
color: #000;
background: #d6b982;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42 {
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background: #d6b982;
}
I can't get the floats right (I know, Yet Another Float Question). The main issue is that this is going to be a menu with a variable number of items, so as the menu grows, ("Departments" now, but later "Departments", "Services", "Sections", etc.) it should push to the left, reducing the length of the line I can't use a fixed length on the leading line (#block-imageblock-42). Also, the menu items will have separators, so I can't just full-width things. This needs to be done in pure CSS, no jQuery or other JS.
Here's my JSfiddle of the problem: http://jsfiddle.net/zjfsy/
UPDATE: I have modified the question to be more specific per the requests of folks trying to help. The "goal" image at the top has been updated to more accurately reflect the issue. One thing I really want to make clear is that this specific instance is not so important. I already doctored up a position:absolute fix that will hold for the short term. My desire is to understand better why this is so hard. I have three containers. I want two of them to float right and the third to expand to fill the space from the last container to the edge of the page. It seems like this is what float was supposed to do. I assume this is some base misunderstanding on my part.
Anyway. Here's more constraints:
The leading bar needs to expand to fill the empty space between the
left side and the swish.
Each of the tabs needs to have a separator that allows the background through.
The number of the tabs is variable, based on client choices -- which
can change regularly.
I can't really change the structure of the HTML, other than
modifying it with CSS.
And again, all help is very much appreciated.
here is my solution: http://jsfiddle.net/abbood/b56Vq/ (never used jsfiddle before.. so sorry if i did this wrong, or if i was supposed to fork your project)
here is the code:
<html>
<head>
<link href="betterStyle.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<ul>
<li><div></div><div>Departments</div></li>
<li><div></div><div>Services</div></li>
<li><div></div><div>Sections</div></li>
<li><div></div><div>stuff</div></li>
</ul>
</div>
</body>
</html>
//betterStyle.css
#wrapper {
height: 2.5em;
background-color: #e0203b;
background-image: url('http://s11.postimage.org/a1jmymlgv/bage_Box.png');
background-position: bottom;
background-repeat: repeat-x;
}
ul
{
list-style-type: none;
float: right;
margin: 0;
padding: 0;
}
ul li {
float: right ;
display: inline-block;
}
/* text */
ul li div:nth-child(2) {
line-height: 2.5em;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
background-color: #d6b982;
float: right;
padding-right: 1em;
}
/* image */
ul li div:nth-child(1) {
background-image: url('http://s8.postimage.org/b2qycoatd/top_menu_swish.png');
background-position: left top;
background-repeat: no-repeat;
float: left;
width: 53px;
height: 40px;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
}
notes:
i created my own image and I linked to it using some image hosting service.
you can add as many tabs as you want (i assumed that each tab will have that image attached to it.. i wasn't sure how you wanted the final thing to look like (the right edges look too sharp).. but i'm sure you can adjust it to your liking.. when adding extra tabs the horizontal line shrinks.. i think that's what you meant when you said so as the menu grows, it should push to the left, reducing the length of the line
update:
Here is the updated answer without changing a line in the html: http://jsfiddle.net/abbood/SkxkC/ (for some reason there is a bump under the folder image in jsfiddle.. i tested it on mac chrome/safari/firefox and they worked fine.. lemme know if it isn't working perfectly for you though)
html (pretty much same.. just added a couple of tabs just for fun):
<body>
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
<li><span title="Departments" class="nolink">Services</span>
</li>
<li><span title="Departments" class="nolink">Classes</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
</body>
css:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000; /* red */
height: 40px;
position: relative;
z-index: -2;
}
#line-wrapper div {
background-color: #ff0000; /* red */
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
border-top: none;
border-bottom: none;
color: #000;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
margin: 0;
padding: 0;
}
#nice-menu-1 ul {
padding: 0;
background-color: #ff0000; /* red */
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#nice-menu-1 li{
list-style-type: none;
display: inline-block;
padding: 0 2em;
background: #d6b982; /* bage */
height: 40px;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42
{
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background-color: #d6b982 !important;
position: absolute;
z-index: -1;
}
I a have also done something similar that does not use the position:relative feature for the #line-wrapper since that may cause you some problems when you implement it.
See http://jsfiddle.net/zjfsy/
#block-imageblock-42 {
/* top-menu-leading-line */
height:6px;
width:100%;
background: #d6b982;
position:absolute;
margin-top:34px;
}
#line-wrapper {
display: block;
height: 40px;
width: 100%;
background-color: #ff0000;
}
Hope this helps! (I am definitely going to vote wxactly's answer up since it is a better answer than mine since it doesn't require "hard coding" with magic number margins, etc. Definitely use his answer if you can, but now at least you have two different ways.
New to the site, hope somebody can help me.
I'm designing a new site using CSS3 and HTML5 (not a wizard in either, but getting the basics down), but for some reason, when I view a basic layout in IE9, it will not display colours or formatting properly. The same page will show as requested in Chrome and in Firefox. Could somebody please assist me on this?
I'll post code below, just a very basic layout with testing colours and sample text. Thanks.
`
HTML CODE
<!DOCTYPE html>
<html>
<head>
<link href="css/test.css" rel="stylesheet" media="screen">
<title>Testing123.com</title>
</head>
<body>
<header id="mainHeader"><h1>TestSite123.com</h1>
<nav id="mainNav">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</nav>
</header>
<aside id="lhs">
<h2>Recent1</h2>
<h2>Recent2</h2>
<h2>Recent3</h2>
</aside>
<content id="Content">
<h2>News</h2>
<h2>Misc</h2>
</content>
<aside id="rhs">
Right Side
</aside>
<footer id="mainFooter">Footer</footer>
</body>
</html>
CSS CODE
#charset "utf-8";
/* CSS Document */
/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
margin: 0;
padding: 0;
border: 0;
}
html {
background-color: #ffffff;
}
body {
width: 85%;
margin: 0 auto;
}
header#mainHeader {
background-color: #000000;
height: 140px;
position: relative;
}
header#mainHeader h1 {
color: #ffffff;
font-size: 2em;
font-family: Arial;
}
nav#mainNav ul, ul.menu {
list-style: none;
}
nav#mainNav {
background-color: #e3e6eb;
text-decoration: none;
position: relative;
height: 25px;
margin-top: 54px;
margin-bottom: none;
}
header#mainHeader nav ul {
float: right;
position: relative;
margin-top: 1px;
}
header#mainHeader nav li {
float: right;
font-family: Garamond;
font-size: 1.2em;
padding: 0 12px;
}
aside#lhs{
width: 200px;
background-color: brown;
font-size: 1.8em;
float: left;
}
content#Content {
font-size: 1.6em;
color: red;
background-color: black;
width: 200px;
}
aside#rhs{
background-color: green;
font-size: 1.4em;
float: right;
position: relative;
width: 150px;
}
footer#mainFooter {
clear: both;
background-color: white;
font-size: 1.2em;
}
/*end of css file*/`
First of all, in your CSS, don't overspecify your ID's (or any element for that matter)
so don't write header#mainHeader but just #mainHeader
Second,
Don't give your html element a background-color, set this on the body tag instead.
Third,
What is it exactly that doesn't display correctly?