PDA

View Full Version : Help needed with HTML


Nathan H
04-23-2008, 02:06 PM
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 &copy; 2008. All rights reserved. <a href="http://www.ndhwebdesign.com" class="link3">Website designed by NDH Web Design.</a></div>
</div>
</body>
</html>

ComputerLife
04-23-2008, 03:20 PM
What is the url so we can take a look.

Nathan H
04-23-2008, 04:22 PM
It's not live yet so i can't post the URL. Sorry

MHCG
04-23-2008, 04:29 PM
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
04-23-2008, 04:41 PM
I'm having a blonde moment.......(lol)
but what do you mean by Style Sheets.

thecoldone06
04-23-2008, 04:42 PM
Could you post your CSS page as well? I've copied your code into an html file and am troubleshooting.

Nathan H
04-23-2008, 04:44 PM
I'm not at home currently.

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

Thanx

MHCG
04-23-2008, 05:01 PM
your CSS page (Cascading Style Sheets)

Nathan H
04-23-2008, 05:32 PM
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
04-23-2008, 05:37 PM
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
04-23-2008, 05:40 PM
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
04-23-2008, 05:50 PM
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
04-23-2008, 05:56 PM
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
04-23-2008, 06:00 PM
silly question again, but how do i post a screen shot?

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

MHCG
04-23-2008, 06:07 PM
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
04-23-2008, 06:09 PM
It looks ok in IE 6 and Firefox. Apparently just not IE 7.

thecoldone06
04-23-2008, 06:16 PM
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
04-23-2008, 06:26 PM
how do i attach an image (.jpg)

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

MHCG
04-23-2008, 06:32 PM
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
04-23-2008, 09:08 PM
Here is a screen shot of the error, it only happens in IE7 but not in firefox

P.S. MHCG thanks very much mate:D

Nathan H
04-23-2008, 09:19 PM
I have a similar issue with another page Firefox displays it correctly while IE7 misses the bottom 3 items..

Jory
04-23-2008, 09:50 PM
Without actually saving your code and testing it I'd say you need to increase the width of your footer to slightly under the amount of your container and change it to "clear: both;" instead of just left. That should put it directly under the last element in the code.

Edit: It looks like your width is already what I suggested. I missed that in the html.