•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 428,563 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,624 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1558 | Replies: 5 | Solved
 |
•
•
Join Date: Apr 2007
Location: Nottingham
Posts: 91
Reputation: 
Rep Power: 2
Solved Threads: 0
Junior Poster in Training
CSS stylesheet layout Hi all, I'm new to css and html too for that matter.
this is my html so far:-
and this is my stylesheet:-
my problem is that there is a gap at the top of the page, how do i stop this happening?
thanks
Mark
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
Mark
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 964
Reputation:
Rep Power: 5
Solved Threads: 48
Posting Shark
First up, add a body tag around the body, and a html close tag after everything:
Then change your CSS like this:
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.
<!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> <body> <ul class="banner"> test </ul> <ul class="navbar"> test </ul> <ul class="main"> test </ul> </body> </html>
Then change your CSS like this:
ul.banner {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 78px;
background-color: green;
padding: 0px;
margin-top:0;
}
ul.navbar {
position: fixed;
top: 78px;
left: 0px;
width: 180px;
height: 100%;
bottom: 0px;
background-color: red;
padding: 0px;
margin-top:0;
}
ul.main {
position: fixed;
top: 78px;
left: 180px;
right: 0px;
width:100%;
height: 100%;
bottom: 0px;
background-color: yellow;
padding: 0px;
margin-top:0;
}
body
{
margin-top:0;
padding-top:0;
}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.
If it only works in Internet Explorer; it doesn't work.
•
•
Join Date: Oct 2005
Location: Manchester, UK
Posts: 482
Reputation:
Rep Power: 3
Solved Threads: 33
Posting Pro in Training
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++).
Note to self... pocket cup
•
•
Join Date: Apr 2007
Location: Nottingham
Posts: 91
Reputation:
Rep Power: 2
Solved Threads: 0
Junior Poster in Training
yeah, thats sorted it ty
•
•
Join Date: Apr 2005
Location: Old Hampshire, Old England (LOL)
Posts: 11,937
Reputation:
Rep Power: 30
Solved Threads: 268
If you want a good editor that closes your tags and higlights your syntax take a look at Aptana (windows)
TRY MY SUGGESTIONS AT YOUR OWN RISK!
james.bennet1@ntlworld.com
james.bennet1@ntlworld.com
it does do the automatic tagging, i'm thinking of turning it off, it's annoying lol |
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Why do people wish for tableless with CSS? (HTML and CSS)
- Random CSS Stylesheet selector exists? (JavaScript / DHTML / AJAX)
- Cool CSS Layout Web Portal (Website Reviews)
- ASP display data in 3 col & rows using CSS layout (ASP)
Other Threads in the HTML and CSS Forum
- Previous Thread: Making IE and Mozilla display your box objects the same way
- Next Thread: display numbers with comma separator in html
