Member Avatar for alienlinux

Hi all, I'm new to css and html too for that matter.

this is my html so far:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>AlienNet Public Access Gateway</title>
  <embed src="audio/thunder3.wav" autostart="true" loop="false" width="0" height="0"></embed>
  <link rel="icon" type="image/png" href="http://alienlinux.homelinux.net/images/alien.png">
  <link rel="stylesheet" href="mystyle.css">
</head>

<ul class="banner">
test
</ul>

<ul class="navbar">
test
</ul>

<ul class="main">
test
</ul>

and this is my stylesheet:-

ul.banner {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 78px;
  background-color: green;
  padding: 0px;
}

ul.navbar {
  position: fixed;
  top: 78px;
  left: 0px;
  width: 180px;
  height: 100%;
  bottom: 0px;
  background-color: red;
  padding: 0px;
}

ul.main {
  position: fixed;
  top: 78px;
  left: 180px;
  right: 0px;
  width:100%;
  height: 100%;
  bottom: 0px;
  background-color: yellow;
  padding: 0px;
}

my problem is that there is a gap at the top of the page, how do i stop this happening?
thanks :D
Mark

  • 4 Contributors
  • 5 Replies
  • 106 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by alienlinux
Member Avatar for MattEvans

First up, add a body tag around the body, and a html close tag after everything:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>AlienNet Public Access Gateway</title>
  <embed src="audio/thunder3.wav" autostart="true" loop="false" width="0" height="0"></embed>
  <link rel="icon" type="image/png" href="http://alienlinux.homelinux.net/images/alien.png">
  <link rel="stylesheet" href="mystyle.css">
</head>
[B]<body>[/B]
<ul class="banner">
test
</ul>

<ul class="navbar">
test
</ul>

<ul class="main">
test
</ul>
[B]</body>
</html>[/B]

Then change your CSS like this:

ul.banner {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 78px;
  background-color: green;
  padding: 0px;
[B]  margin-top:0;[/B]
}

ul.navbar {
  position: fixed;
  top: 78px;
  left: 0px;
  width: 180px;
  height: 100%;
  bottom: 0px;
  background-color: red;
  padding: 0px;
[B]  margin-top:0;[/B]
}

ul.main {
  position: fixed;
  top: 78px;
  left: 180px;
  right: 0px;
  width:100%;
  height: 100%;
  bottom: 0px;
  background-color: yellow;
  padding: 0px;
[B]  margin-top:0;[/B]
}
[B]body
{
  margin-top:0;
  padding-top:0;
}[/B]

It gets rid of the white top border for me on Opera9 and Firefox2. The whole layout doesn't work on Internet Explorer 6; you might want to check that out.

Member Avatar for pty

Matt is right; try to get used to closing a tag right after you open it then typing between them (this way you won't leave any tags unclosed). Some html editors do this for you (bluefish, quanta, notepad++).

Member Avatar for alienlinux

yeah, thats sorted it ty :D

Member Avatar for jbennet

If you want a good editor that closes your tags and higlights your syntax take a look at Aptana (windows)

Member Avatar for alienlinux

i don't use windows, but i have an awesome editor called quanta+ :) it does do the automatic tagging, i'm thinking of turning it off, it's annoying lol

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.