Jump to content

Making Tabs

Imoddedu

By Imoddedu
in HTML/XHTML

Recommended Posts

Imoddedu Member

Imoddedu

Posted
Posted

Hey there! Having a problem with making some basic tabs. As you can see in the picture below, there is a huge gap between the navigation tabs, and the main body. I tried setting margin/padding to 0, but nothing worked. tabproblemhtml.jpghere is the code:index.html

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><!-- Meta Information --><title>aaaaaaaaaaaaaaaaaa </title><meta name="Robots" content="index,follow" /><meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> <meta name="Keywords" content="" /><meta name="Description" content="" /><!-- CSS/JavaScript --><link rel="stylesheet" href="main.css" type="text/css" /><link rel="Shortcut Icon" href="images/logo/favicon.ico" /><script type="text/javascript" src="includes/js/jquery.js"></script></head><body><div id="page"><div id="pageheader"><center><img src="images/logo/pagelogo.png" alt="aaaaaaaa"/></center><center><div id="topnavbar"><a href="#"><img id="home" src="images/home.png" alt="aaaaaaaa" /></a><a href="#"><img src="images/blog.png" alt="Blog" /></a><a href="#"><img src="images/portfolio.png" alt="Portfolio" /></a><a href="#"><img src="images/download.png" alt="Download" /></a><a href="#"><img src="images/videos.png" alt="Videos" /></a><a href="#"><img src="images/contact.png" alt="Contact" /></a></div></center></div><center><div id="content"><h1>aaaaaaaa</h1></div></center><center><div id="footer"><span id="footerText">Copyright 2010 <a href="#"><span id="footerLink">aaaaaaa</span></a>. | (999)-999-999 | 9999 Somewhere Place | aaaaaa </span><br /><br /><a href="#"><img src="images/social/feed.png" alt="Feed" /></a><a href="#"><img src="images/social/blogger.png" alt="Blogger" /></a><a href="#"><img src="images/social/facebook.png" alt="Facebook" /></a><a href="#"><img src="images/social/twitter.png" alt="Twitter" /></a><a href="#"><img src="images/social/linkedin.png" alt="LinkedIn" /></a><a href="#"><img src="images/social/digg.png" alt="Digg" /></a><br /><br /><a href="#"><span id="footerLink">Peter Xenopoulos</span></a><span id="footerText">|</span><a href="#"><span id="footerLink">Blog</span></a><span id="footerText">|</span><a href="#"><span id="footerLink">Portfolio</span></a><span id="footerText">|</span><a href="#"><span id="footerLink">Download</span></a><span id="footerText">|</span><a href="#"><span id="footerLink">Videos</span></a><span id="footerText">|</span><a href="#"><span id="footerLink">Contact</span></a><br /></div></center></div></body></html>

and main.css

/* Main CSS */body {  background-color: #878585;}img {  border: none;}a {text-decoration: none;}h1 {  color: #506168;}#page {  width: 900px;  height: 1200px;}#topnavbar {  width: 700px;  height: 50px;  background-color: #878585;}#content {  width: 700px;  height: 900px;  background-image: url(images/contentbg.png);}#footer {  width: 700px;  height: 50px;}#footerText {  color: white;  font-size: 11px;  font-family:"Georgia", Times, serif;}#footerLink {  color: white;  font-size: 11px;  font-family:"Georgia", Times, serif;}#footerLink:hover {  color: #f63c3c;}

Link to comment
Share on other sites
cousineaug Member

cousineaug

Posted
Posted
Hey there! Having a problem with making some basic tabs. As you can see in the picture below, there is a huge gap between the navigation tabs, and the main body. I tried setting margin/padding to 0, but nothing worked.
Here is a debugging tip. put 1px borders around the key containers so you can see where things line up. In your case, you will probably find that everything is ok: the topnavbar touches the content. Then you will suspect it is the H1 that is causing your problem. Remove the H1 tag on your title and you will see what I mean.So in your style sheet
h1 {  color: #506168;  margin-top: 2px; /* move it near the top of the container*/}

Since you should likely not have more than one H1 in your document, this should suffice. However, you can target this one specifically by its location '#content h1' or by assigning it a class..Guy

Link to comment
Share on other sites
Imoddedu Member

Imoddedu

Posted
  • Author
Posted
Here is a debugging tip. put 1px borders around the key containers so you can see where things line up. In your case, you will probably find that everything is ok: the topnavbar touches the content. Then you will suspect it is the H1 that is causing your problem. Remove the H1 tag on your title and you will see what I mean.So in your style sheet
h1 {  color: #506168;  margin-top: 2px; /* move it near the top of the container*/}

Since you should likely not have more than one H1 in your document, this should suffice. However, you can target this one specifically by its location '#content h1' or by assigning it a class..Guy

Thanks for clearing that up, worked great! :)
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...