Simple HTML problem....

Toggle sidebar Toggle sidebar
C

Codewiz

Diamond Member
Jan 23, 2002
5,758
0
76
I can't seem to get my page to do what I want.

Link

My logo and table below it have white space to the top and left of it. How can I get rid of it? I want the image and table all the way to the left so there is no white space beside it.

Here is my code....

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<img src="banner.png" width="750" height="120">
<table width="750" border="0" bgcolor="#666666">
<tr>
<td><strong><font color="#FFFFFF" face="Arial, Helvetica, sans-serif">Home</font></strong></td>
<td><strong><font color="#FFFFFF" face="Arial, Helvetica, sans-serif">Projects</font></strong></td>
<td><strong><font color="#FFFFFF" face="Arial, Helvetica, sans-serif">Downloads</font></strong></td>
<td><strong><font color="#FFFFFF" face="Arial, Helvetica, sans-serif">Music</font></strong></td>
<td><strong><font color="#FFFFFF" face="Arial, Helvetica, sans-serif">About</font></strong></td>
</tr>
</table>
<p></p></body>
</html>
 
B

Barnaby W. Füi

Elite Member
Aug 14, 2001
12,343
0
0
well first of all, there should be *no* reason to use a table there. tables are for *tabular* data (think, chart, graph, *table*!) and not for layout, however unfortunately CSS had not evolved to the point where it solves 100% of layout problems yet.

anyways, find a good CSS tutorial, that html is bloated, ugly, and looks like its from 1996. (no offense of course, i used to use html just like that, until i got into web stuff alot more and realized that CSS is The Way To Go (tm))

ok check this out. this is what that html would ideally look like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Untitled Document</title>

<style type="text/css">
div.navigation { font-family: Arial, Helvetica, sans-serif; font-weight: bold; background: #666; color: #fff; width: 750px; padding: 2px; }
</style>

</head>

<body>
<img src="banner.png" width="750" height="120" alt="Software Fusion">

<div class="navigation">
Home | Projects | Downloads | Music | About
</div>

</body>
</html>

there...isnt that a little more sane? no redundant font tags, no tables for things that look nothing like tables, etc.

check out this page for a *great* intro to CSS (its where i got my start): http://www.w3.org/MarkUp/Guide/Style

just remember...there really isnt ever a need for redundant tags like that, and there is *no* need for the font tag, in fact it has been deprecated (at least in xhtml 1.0). make a css class and use <whatever class="foo"> to gain the attributes of class foo.

btw if this seems like i'm being a jerk, i'm not, i'm just trying to help you out, like i said, i used to do things the same way. in fact, look at my old old site at incise.org/www1/ if you want, then look at the main incise.org site now. much more importantly, look at the source. www1 was total spaghetti. unreadable, confusing, redundant, and very prone to missing closing tags and whatnot.

and to answer your real question with some css:

(inside of <head>):

<style type="text/css">
body { margin: 0px; }
</style>

and last off...sorry for the rant ;)
 
geoff2k

geoff2k

Golden Member
Sep 2, 2000
1,929
0
76
Depending on the browsers you need to support, CSS may or may not be the answer. Check out the CSS master grid to get some idea of the wide range of what is supported and what isn't supported out there.
 
C

Codewiz

Diamond Member
Jan 23, 2002
5,758
0
76
I think in my case a table IS the way to go unless you can show me how to do this DHTML menu system another way. The source I posted earlier was just to show a simple example to my simple problem.

The repeating tags were taken care of before you ever posted.....

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JScript">

var eOpenMenu = null;
function OpenMenu(eSrc,eMenu){
eMenu.style.left = eSrc.parentElement.offsetLeft + divMenuBar.offsetLeft;
eMenu.style.top = divMenuBar.offsetHeight + divMenuBar.offsetTop;
eMenu.style.visibility = "visible";
eOpenMenu = eMenu;
}

function CloseMenu(eMenu){
eMenu.style.visibility = "hidden";
eOpenMenu = null;
}

function MenuBar_over(){
var eSrc = window.event.srcElement;
if ("A" == eSrc.tagName.toUpperCase()){
var eMenu = document.all[eSrc.parentElement.id.replace("tdMenuBarItem","divMenu")];
if (eOpenMenu && eOpenMenu != eMenu){
CloseMenu(eOpenMenu);}
if (eMenu){
OpenMenu(eSrc,eMenu);}
}
}

function MenuBar_out(){
var eTo = window.event.toElement;
if (eOpenMenu && eTo && !eOpenMenu.contains(eTo) && "tblMenuBar" != eTo.id){
CloseMenu(eOpenMenu)}
}

function Menu_out(){
var eSrc = window.event.toElement;
if (eOpenMenu && !eOpenMenu.contains(eSrc) && !divMenuBar.contains(eSrc)){
CloseMenu(eOpenMenu)}
}

</script>
<style type="text/css">
BODY { font-family:"Verdana, Arial, Helvetica, sans-serif"; font-size:80%;}

DIV#divMenuBar { background-color:#666666; }
TABLE#tblMenuBar TD { font-size:100%; color:#FFFFFF; padding:0px 5px 0px 5px; cursor:Default; }
TABLE#tblMenuBar TD.clsMenuBarItem { font-weight:bold; cursor:Default; }

/* These two style rules added for links in MenuBar */
TABLE#tblMenuBar TD.clsMenuBarItem A { text-decoration:none; color:#FFFFFF; font-weight:bold; }
TABLE#tblMenuBar TD.clsMenuBarItem A:hover { color:#FFFFFF; }
DIV.clsMenu {
font-size:93%; background-color:#666666;
position:absolute; visibility:hidden; width:130px;
padding:5px 5px 5px 8px; border-top:1 white solid;
}
DIV.clsMenu A { text-decoration:none; color:#FFFFFF; font-weight:bold; }
DIV.clsMenu A:hover { color:#FFFFFF; }
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0"
topmargin="0" marginwidth="0" marginheight="0">
<img src="banner.png" width="750" height="120">
<p></p>
<ddMenu>
<DIV ID="ddMenuLayer" STYLE="position:absolute; left:0px; top:120px; width:750px; height:35px; z-index:1">
<DIV ID="divMenuBar" ONMOUSEOVER="if (document.all) MenuBar_over();" ONMOUSEOUT="if (document.all) MenuBar_out();" ONSELECTSTART="return false;">
<TABLE ID="tblMenuBar" BORDER="0" WIDTH="750">
<TR>
<TD CLASS="clsMenuBarItem" ID="tdMenuBarItemHome"> <A TARGET="_self" HREF="index.htm">Home</A>
</TD>
<TD>|</TD>
<TD CLASS="clsMenuBarItem" ID="tdMenuBarItemProjects"> <A TARGET="_self" HREF="projects.htm">Projects</A>
</TD>
<TD>|</TD>
<TD CLASS="clsMenuBarItem" ID="tdMenuBarItemDownloads"> <A TARGET="_self" HREF="downloads.htm">Downloads</A>
</TD>
<TD>|</TD>
<TD CLASS="clsMenuBarItem" ID="tdMenuBarItemMusic"> <A TARGET="_self" HREF="music.htm">Music</A>
</TD>
<TD>|</TD>
<TD CLASS="clsMenuBarItem" ID="tdMenuBarItemAbout"> <A TARGET="_self" HREF="about.htm">About</A>
</TD>
<TD>|</TD>
<TD WIDTH="100%"></TD>
</TR>
</TABLE>
</DIV>
<DIV CLASS="clsMenu" ONMOUSEOUT="Menu_out();" ID="divMenuProjects">
<DIV CLASS="clsMenuSpacer"></DIV>
<DIV> <A TARGET="_self" HREF="mmserver.htm">Multimedia Server</A> </DIV>
</DIV>
<DIV CLASS="clsMenu" ONMOUSEOUT="Menu_out();" ID="divMenuAbout">
<DIV CLASS="clsMenuSpacer"></DIV>
<DIV> <A TARGET="_self" HREF="aboutme.htm">About Me</A> </DIV>
</DIV>
</DIV>
</ddmenu>
<p class="clsMenu"></p>
</body>
</html>


You may not like that my CSS sheet is in the HTML file in this case but I have my reasons........Also does anyone know why my menus would work in IE and Opera but not in Netscape or Mozilla. My site will still be functional even if they don't work in Netscape and Mozilla but I would like to fix the problem if possible.
 
rh71

rh71

No Lifer
Aug 28, 2001
52,844
1,049
126
Originally posted by: Codewiz
You may not like that my CSS sheet is in the HTML file in this case but I have my reasons........Also does anyone know why my menus would work in IE and Opera but not in Netscape or Mozilla. My site will still be functional even if they don't work in Netscape and Mozilla but I would like to fix the problem if possible.
Click to expand...

I suggest you grab something like this so that it works across ALL browsers. ;)
 
C

Codewiz

Diamond Member
Jan 23, 2002
5,758
0
76
Originally posted by: rh71
Originally posted by: Codewiz
You may not like that my CSS sheet is in the HTML file in this case but I have my reasons........Also does anyone know why my menus would work in IE and Opera but not in Netscape or Mozilla. My site will still be functional even if they don't work in Netscape and Mozilla but I would like to fix the problem if possible.
Click to expand...

I suggest you grab something like this so that it works across ALL browsers. ;)
Click to expand...

That is nice and very customizable but that is SO overkill. What it takes him pages of code to do, I have in a 1/10 of the code. I just need to figure out what Mozilla has a problem with.
 
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom