Simple CSS question

S

Sems

Hi
I am playing with some simple HTMl and CSS (see below) and have a problem with it.
If you open the below HTML in Firefox above the nav bar there is a row or purple. I can't seem to lift the nav and the columns to cover this. Can anyone help me please? I'm sure its a simple tweak of the HTML or CSS but can't figure it out. Thank you!

<html>
<head>
<style>
body,
html {
margin:0;
padding:0;
color:#000;
background:#a7a09a;
}
#wrap {
width:500px;
margin:0 auto;
background:#99c;
}
#header {
background:#ddd;
}
#nav {
background:#c99;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#main {
float:left;
width:200px;
background:#9c9;
}
#sidebar {
float:right;
width:100px;
background:#99c;
}
#footer {
clear:both;
background:#cc9;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><h1>Heading</h1></div>
<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</div>
<div id="main">
<h2>Col 1</h2>
<p>Lorem ipsum dolor sit amet, con adipiselit...</p>
</div>
<div id="sidebar">
<h2>Col 2</h2>
<p>Lorem ipsum dolor sit amet, con adipis elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
 
M

MG

Sems said:
Hi
I am playing with some simple HTMl and CSS (see below) and have a problem
with it.
If you open the below HTML in Firefox above the nav bar there is a row or
purple. I can't seem to lift the nav and the columns to cover this. Can
anyone help me please? I'm sure its a simple tweak of the HTML or CSS but
can't figure it out. Thank you!

<html>
<head>
<style>
body,
html {
margin:0;
padding:0;
color:#000;
background:#a7a09a;
}
#wrap {
width:500px;
margin:0 auto;
background:#99c;
}
#header {
background:#ddd;
}
#nav {
background:#c99;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#main {
float:left;
width:200px;
background:#9c9;
}
#sidebar {
float:right;
width:100px;
background:#99c;
}
#footer {
clear:both;
background:#cc9;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><h1>Heading</h1></div>
<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</div>
<div id="main">
<h2>Col 1</h2>
<p>Lorem ipsum dolor sit amet, con adipiselit...</p>
</div>
<div id="sidebar">
<h2>Col 2</h2>
<p>Lorem ipsum dolor sit amet, con adipis elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>

Change this:
#header {
background:#ddd;
}

To this:
#header {
background:#ddd;
border:2px solid red;
}


Some comments:

1. Instead of typing code as you did, give us a URL.

2. Use a doctype so that you can validate your html at
http://validator.w3.org/ . Also validate your CSS at
http://jigsaw.w3.org/css-validator/

3. Indent your html correctly. It is much easier to read.

That's just 3 for starters. Enough for now.

MG
 
G

Gus Richter

Hi
I am playing with some simple HTMl and CSS (see below) and have a problem with it.
If you open the below HTML in Firefox above the nav bar there is a row or purple. I can't seem to lift the nav and the columns to cover this. Can anyone help me please? I'm sure its a simple tweak of the HTML or CSS but can't figure it out. Thank you!

You're best advised to ask CSS questions at c.i.w.a.stylesheets .

An easy way to confirm if a problem is due to collapsing margins is to
include this temporarily in your stylesheet:
* {margin:0 !important;}
To only accomplish what you ask, add this:
h1 {margin-bottom:0;}
but to also move the whole #wrap to the top of the viewport, do the same
to margin-top or:
h1 {margin:0;}
 
D

dorayme

<[email protected]
ups.com>,
Sems said:
Hi
I am playing with some simple HTMl and CSS (see below) and have a problem
with it.
If you open the below HTML in Firefox above the nav bar there is a row or
purple. I can't seem to lift the nav and the columns to cover this. Can
anyone help me please? I'm sure its a simple tweak of the HTML or CSS but
can't figure it out. Thank you!

<html>
<head>
<style>
body,
...

Not quite as simple as it could be (you are not likely needing a
div to wrap the h1, nor another to wrap the ul. You can id or
class and style the h1 and ul directly) but essentially your
problem can be solved by over-riding default bottom margins and
top margins to a couple of elements.

<http://dorayme.netweaver.com.au/defaultMargin.html>
 
D

dorayme

MG said:
. ....
....
Some comments:
....

3. Indent your html correctly. It is much easier to read.

If posted on usenet, there is an argument for not indenting it.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top