Help needed with HTML

Nathan H · Apr 23, 2008

Hi all,

i'm playing with HTML trying to do my website.

The problem i'm having is the footer "Website designed by NDH Web Design" is appearing in the midle of my text field like an additional layer.

here is my HTML code so far, Please Help....

Thanx in advance...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hughes Hosting - Control</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="main">
<div id="header">
<div style="width:596px; height:320px; position:relative;"><img alt="" src="images/spacer.gif" height="67" style="display:block "/><a href="index.html"><img src="images/name.gif" alt=" " /></a><img alt="" src="images/spacer.gif" height="23" style="display:block "/>
<div style="width:532px; height:50px; position:relative; padding-right:63px; left: 0px;"><a href="index-4.html" class="link3">Your Privacy</a><img src="images/list1.gif" alt=" " /><img alt="" src="images/spacer.gif" height="6" style="display:block "/><a href="index-5.html" class="link3">Terms of Use</a><img src="images/list1.gif" alt=" " /><img alt="" src="images/spacer.gif" height="6" style="display:block "/><a href="index-6.html" class="link3">control</a><img src="images/list1.gif" alt=" " /> </div>
<div class="menu" style="position:absolute; top:277px;"><a href="index.html"><img src="images/home1.jpg" alt=" " width="145" height="42"/></a><a href="index-1.html"><img src="images/about.jpg" alt=" " width="154" height="42" onmouseover="this.src='images/about1.jpg'" onmouseout="this.src='images/about.jpg'"/></a><a href="index-2.html"><img src="images/services.jpg" alt=" " width="151" height="43" onmouseover="this.src='images/services2.jpg'" onmouseout="this.src='images/services.jpg'"/></a><a href="index-3.html"><img src="images/contact.jpg" alt=" " width="145" height="43" onmouseover="this.src='images/contact3.jpg'" onmouseout="this.src='images/contact.jpg'"/></a> </div>
</div>
<div style="width:597px; position:relative; margin:0 auto;">
<div style="width:299px; height:301px; float:left;">
<div style="float:left;">
<div class="wel_top"></div>
<div class="about_c">
<div class="wel_cont" style="height:301px;">
<div style="width:266px; text-align:left;" class="font1">
<strong>Hughes Hosting</strong> Control
<br/>
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
</div>
</div>
</div>
<div class="wel_bot"></div>
</div>
</div>
<div style="width:296px; height:164px; float:left">
<div style="float:left;">
<div class="serv_top"></div>
<div class="cli_c" style="height:301px;">
<div class="serv_cont">
<div></div>

<div style="width:266px; float:left; text-align:left;">
<form action="" method="post" name="form3">
<div class="form3">
<div style="width:251px; float:left; " class="font1"><strong>XXXX XXXX</strong></div>
<br/>
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
<br/> Your text here.
</div>
</form>
</div>
</div>
</div>
<div class="serv_bot"></div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div style="width:596px;" id="footer" class="h3">Copyright © 2008. All rights reserved. <a href="http://www.ndhwebdesign.com" class="link3">Website designed by NDH Web Design.</a></div>
</div>
</body>
</html>

ComputerLife · Apr 23, 2008

What is the url so we can take a look.

Nathan H · Apr 23, 2008

It's not live yet so i can't post the URL. Sorry

MHCG · Apr 23, 2008

It's very hard for me to read without Dreamweaver and it's not installed on this computer. Have you thought about using style sheets? It would clean up your code and make it easier to identify what the issue is.

Edit: nevermind, I just noticed you referenced a style.css

Anyways, I'll play with it a bit. I suspect it's the height in one of your sections.

Nathan H · Apr 23, 2008

I'm having a blonde moment.......(lol)
but what do you mean by Style Sheets.

thecoldone06 · Apr 23, 2008

Could you post your CSS page as well? I've copied your code into an html file and am troubleshooting.

Nathan H · Apr 23, 2008

I'm not at home currently.

But i'll post it with in the next half hour.

Thanx

MHCG · Apr 23, 2008

your CSS page (Cascading Style Sheets)

Nathan H · Apr 23, 2008

Sorry for the delay guys.

here's the contents of my css sheet:

body
{
background:#333333 url(images/bg_main.jpg) repeat-x top fixed;
font:11px Tahoma, serif;
color:#564b47;
padding:0px;
margin:0px;
text-align:left;
}
img{border:0;}
form{margin:0;}
.input{width:251px; height:19; font:11px tahoma, serif;}
.textarea{width:251px; height:100px; overflow:auto;}
#main
{
width: 598px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
}
#header
{
text-align: right;
background: transparent url(images/header.gif) no-repeat top;
width:596px;
height:320px;
padding: 0px;
margin: 0px;
position:relative;
margin:0 auto;
}
#center
{
border-left: solid 300px #ffff00;
}
#l_c{margin:0px; width:100%; }
#left
{
width:200px;
float:left;
position:relative;
margin-left:-300px;
margin-right:1px;
}
#content
{
position: relative;
margin: 0px;
}

#footer
{
position:relative;
clear:left;
padding:0px;
margin:0px;
text-align: center;
vertical-align:middle;
color:#ADADAD;
font:11px Tahoma, serif;
}
.menu{
width:596px;
margin-left: 0%;
top:0;
left:0px;
}
html>body .menu{margin-left: 0%; margin-top:0; top:-42px;}
.wel_top{background:url(images/bg_wel_top.gif) no-repeat top left; width:299px; height:17px; margin-left:0;}
.wel_c{background:url(images/bg_wel_c.gif) repeat-y top left; width:299px; height:35%; margin-left:0;}
.wel_bot{background:url(images/bg_wel_bot.gif) no-repeat bottom left; width:299px; height:19px; margin-left:0;}
.serv_top{background:url(images/bg_serv_top.gif) no-repeat top left; width:296px; height:17px;}
.serv_c{background:url(images/bg_serv_c.gif) repeat-y top left; width:296px;}
.serv_bot{background:url(images/bg_serv_bot.gif) no-repeat top left; width:296px; height:19px;}
.about_c{background:url(images/bg_about_c.gif) repeat-y top left; width:299px; height:35%; margin-left:0;}
.cli_c{background:url(images/bg_cli_c.gif) repeat-y top; width:296px;}
.wel_cont{width:269px; height:auto; margin:0 14px 0 16px;}
.serv_cont{width:266px; height:auto; margin:0 14px 0 16px;}
.font1{color:6b6b6b; font:11px Tahoma, serif; line-height:12px;}
.font2{color:ADADAD; font:11px Tahoma, serif;}
/*.font1{color:adadad; font:11px Tahoma, serif;}*/
.link1{color:#0066c3; font:bold 11px Tahoma, serif; text-decoration:underline; text-align:right;}
.link1:hover{color:#0066c3; font:bold 11px Tahoma, serif; text-decoration:none; text-align:right;}
.link2{color:#6b6b6b; font:11px Tahoma, serif; text-decoration:underline;}
.link2:hover{color:#6b6b6b; font:11px Tahoma, serif; text-decoration:none;}
.link3{color:#2a89d0; font:bold 11px Tahoma, serif; text-decoration:none;}
.link3:hover{color:#2a89d0; font:bold 11px Tahoma, serif; text-decoration:underline;}
.link4{color:#6b6b6b; font:11px Tahoma, serif; text-decoration:none;}
.link4:hover{color:#6b6b6b; font:11px Tahoma, serif; text-decoration:underline;}
/*.link1{color:#2a89d0; font:bold 11px Tahoma, serif; text-decoration:underline;}
.link1:hover{color:#2a89d0; font:bold 11px Tahoma, serif; text-decoration:none;}*/
.list2
{
background:url(images/bg_list.gif) no-repeat top left;
position:relative;
left:5px;
text-align:left;
width:251px;
height:17px;
padding-left:15px;
padding-top:2px;
}
.list2_link{text-decoration:none; font:bold 10px tahoma, serif; color:#464545; text-transform:uppercase;}
.list2_link:hover{color:#464545; text-decoration:underline;}
.h1{height:14px}
html>body .h1{height:18px}
.h2{height:12px;}
html>body .h2{height:18px;}
.h3{top:37px; left:1px;}
html>body .h3{top:73px;}

thecoldone06 · Apr 23, 2008

What browser are you using? I put in your css page and viewed the file without changing any html and the following came up. Didn't look anything like what i saw before:

mityay · Apr 23, 2008

Not too sure about this, but try setting position to "absolute" instead of "relative" in your css file for #footer, and set "left" and "top" properties.

Also it's refferencing to .h3 class (bottom of your css). Try playing with "top" and "left" properties.

Hope this helps.

MHCG · Apr 23, 2008

With the .css page, I get the same as thecoldone. Did you put your .css page in the same directory as the html page?

thecoldone06 · Apr 23, 2008

I tried it using IE 7 and get what Nathan is talking about. Your probably going to play around with it and come up with some sort of hack for IE. It's a pain in the ass that so many people use IE lol. Why can't the vast majority of people use something that actually works.

Nathan H · Apr 23, 2008

silly question again, but how do i post a screen shot?

the normal method of taking PrtSc and then paste isn't working?

MHCG · Apr 23, 2008

thecoldone06 said:
I tried it using IE 7 and get what Nathan is talking about. Your probably going to play around with it and come up with some sort of hack for IE. It's a pain in the ass that so many people use IE lol. Why can't the vast majority of people use something that actually works.

I absolutely hate IE. The fact that you have to hack pages to support IE is total BS. Try putting a .png file with transparency in a website and open it up in IE.

It's as if Microsoft looked at the HTML standards and said. "Eh, I don't really like that. I'm going to interpret it to mean this..."

MHCG · Apr 23, 2008

It looks ok in IE 6 and Firefox. Apparently just not IE 7.

thecoldone06 · Apr 23, 2008

Nathan H said:
silly question again, but how do i post a screen shot?

the normal method of taking PrtSc and then paste isn't working?

Other than doing that I'm not sure.

Nathan H · Apr 23, 2008

how do i attach an image (.jpg)

it would be coming from my pc not a website so there's no URL?

MHCG · Apr 23, 2008

Click "Post Reply" and then there's a "manage attachments" button. There's file size limitations though so you'll probably have to resize.

Nathan H · Apr 23, 2008

Here is a screen shot of the error, it only happens in IE7 but not in firefox

P.S. MHCG thanks very much mate

Help needed with HTML

New Member

New Member

New Member

New Member

New Member

Member

New Member

New Member

New Member

Member

Attachments

New Member

New Member

Member

Attachments

New Member

New Member

New Member

Member

New Member

New Member

New Member

Attachments

Similar threads