Just a few pixels off... [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

View Full Version : Just a few pixels off...

Doug89

04-10-2006, 12:57 AM

Hi everyone, i was just working on my first CSS layout.

I was going off of a tutorial, figured it would help me to learn and i think i am getting the hang of it. Anyway i am having a small problem with this simple, modest layout. Here is a picture of the problem:

http://i16.photobucket.com/albums/b21/Doug89/problme1.gif

And here is the source code:

<!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>
<title>DougDaly.com - Layout by Arutha.co.uk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body {
background-color: #DBD7C5;
margin-top: 60px;
margin-left: 150px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
color #70706F;
}
#maintop{
margin-top:0px;
padding:0px;
margin-bottom:0px;
}
#banner{
display:block;
float:left;
}
#navleft{
float:left;
width:16px;
height:14px;
}
#navright{
float:right;
width:18px;
height:14px;
}

#navbutton{
margin-top:1px;
padding:1px;
}
#contenttop{
height: 6px;
float:left;
position:static;
width:472px;
margin:0px;
padding:0px;
border:0px;
}
#navrepeat{
float:left;
background-position:left top;
background-image: url(images/navigation_repeat.jpg);
background-repeat: repeat-x;
width:438px;
height:14px;
text-align:center;
}

#main_repeat{
width:472px;
float:left;
position:static;
margin: 0px;
padding: 0px;
background-image: url(images/content_repeat.jpg);
background-position:top;
background-repeat:repeat-y;
height:auto;
}
#main_repeat_inside{
margin-left: 15px;
margin-right: 15px;
}
#main_content_text{
margin-left:20px;
margin-right:20px;
}

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<div align="center">
<div style="width: 600px;" align="left">
<img src="images/banner.jpg" alt="Banner" id="banner"/>
<img src="images/main_top.jpg" alt="MainTop" id="maintop" border="0" vspace="0" hspace="0"/>
<div style="width:472px;">
<img src="images/navigation_left.jpg" id="navleft" border="0" vspace="0" hspace="0"/>
<div id="navrepeat">
<img src="images/button1.jpg" alt="Button1" id="navbutton" border="0"/>
<img src="images/button2.jpg" alt="Button2" id="navbutton" border="0"/>
<img src="images/button3.jpg" alt="Button3" id="navbutton" border="0"/>
</div>
<img src="images/navigation_right.jpg" id="navright" border="0" vspace="0" hspace="0"/>
</div>
<img src="images/content_top.jpg" alt="ContentTop" id="contenttop" border="0" vspace="0" hspace="0"/>
<div id="main_repeat">
<div id="main_content_text">
Is this how i should setup the content?<br><br>
I suppose so... :D
</div>
<img src="images/content_end.jpg" alt="contentbottom" id="contenttop" border="0" vspace="0" hspace="0"/>
<img src="images/mainend.jpg" alt="MainEnd" id="contenttop" border="0" vspace="0" hspace="0"/>
</div>
</div>
</div>
</body>
</html>

See the few pixels off between the top, the nav bar and the main content?

Any ideas on how to fix this?

Thanks! :D

PS - Dont worry about the text in there, i was just playing around with stuff to try to figure out how to get content text in there :)

_Aerospace_Eng_

04-10-2006, 12:59 AM

Few ways you could tackle this. The way I would do it is to set the line-height and font-size to 0 for the the div that contains your nav. Another way would be to set all of the images in your nav to display:block; you would also have to float these to the left but I think even if these images were floated to the left the default display goes to block. And is this happening only in IE or is it happening in FF as well? IE tends to display whitespace as slight line breaks sometimes.

Doug89

04-11-2006, 10:32 PM

Ok thanks, now i have one last little problem here. But that your reply was a big help, i made some adjustments (perhaps one too many or somethin, i dunno) and now i have this code:

<!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>
<title>DougDaly.com - Layout by Arutha.co.uk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body {
background-color: #DBD7C5;
margin-top: 60px;
margin-left: 150px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
color #70706F;
}
#maintop{
display:block;
float:left;
margin-top:0px;
padding:0px;
margin-bottom:0px;
}
#banner{
display:block;
float:left;
}
#navleft{
display: block;
float:left;
width:16px;
height:14px;
}
#navright{
float:right;
width:18px;
height:14px;
}

#navbutton{
margin-top:1px;
padding:1px;
}
#contenttop{
line-height: 0px;
font-size: 0px;
height: 6px;
float:left;
position:static;
width:472px;
margin:0px;
padding:0px;
border:0px;
}
#navrepeat{
line-height: 0px;
font-size: 0px;
float:left;
background-position:left top;
background-image: url(images/navigation_repeat.jpg);
background-repeat: repeat-x;
width:438px;
height:14px;
text-align:center;
}

#main_repeat{
width:472px;
float:left;
position:static;
margin: 0px;
padding: 0px;
background-image: url(images/content_repeat.jpg);
background-position:top;
background-repeat:repeat-y;
height:auto;
}
#main_repeat_inside{
margin-left: 15px;
margin-right: 15px;
}
#main_content_text{
margin-left:20px;
margin-right:20px;
}

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<div align="center">
<div style="width: 600px;" align="left;">
<img src="images/banner.jpg" alt="Banner" id="banner"/>
<img src="images/main_top.jpg" alt="MainTop" id="maintop" border="0" vspace="0" hspace="0"/>
<div style="width:472px;">
<img src="images/navigation_left.jpg" id="navleft" border="0" vspace="0" hspace="0"/>
<div id="navrepeat">
<img src="images/button1.jpg" alt="Button1" id="navbutton" border="0"/>
<img src="images/button2.jpg" alt="Button2" id="navbutton" border="0"/>
<img src="images/button3.jpg" alt="Button3" id="navbutton" border="0"/>
</div>
<img src="images/navigation_right.jpg" id="navright" border="0" vspace="0" hspace="0"/>
</div>
<img src="images/content_top.jpg" alt="ContentTop" id="contenttop" border="0" vspace="0" hspace="0"/>
<div id="main_repeat">
<div id="main_content_text">
Is this how i should setup the content?<br><br>
I suppose so... :D
</div>
<img src="images/content_end.jpg" alt="contentbottom" id="contenttop" border="0" vspace="0" hspace="0"/>
<img src="images/mainend.jpg" alt="MainEnd" id="contenttop" border="0" vspace="0" hspace="0"/>
</div>
</div>
</div>
</body>
</html>

And this problem:

(See Attachment)

Thanks

_Aerospace_Eng_

04-11-2006, 10:43 PM

Post a link to your site. Its hard to help without actually having the images.

Doug89

04-12-2006, 02:35 AM

I dont have one for this, i was just doing this to try to learn some CSS.

So dont worry about it, i now have my sights set on a site that i will be publishing (hopefully soon) which will consist of a digital portfolio of my digital photography. I was actually doing awesome with the layout, everything was going on without a hitch, which in programmers terms means that something very big and bad is going to happen. It did. :(

I have 3 problems:

1. The background repeat is not working

2. The top of the page and the bottom arent even close.

3. I dont know how to put in the text and links parts.

If you have time here's the source code, otherwise dont bother, ill try to figure it out ;)

<!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>
<title>Douglas Daly Photography</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

body {
background-color: #FFFFFF;
margin-top: 25px;
margin-left: 50px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color #000000;
}
#backgroundrepeat{
width: 800px;
height: auto;
position:static;
margin: 0px;
padding: 0px;
background-image:(images/background-main.jpg);
background-position: left top;
background-repeat: repeat-y;
text-align: center;
}
#maintop{
display:block;
float:left;
margin-top:0px;
padding:0px;
margin-bottom:0px;
}
#bannerleft {
display:block;
float:left;
width:34px;
height:79px;
padding: 0px;
}
#banner{
display:block;
float:left;
}
#bannerright{
display:block;
float:right;
width: 36px;
height:79px;
}
#linkside{
display:block;
float:left;
width:24px;
height:450px;
padding: 0px;
}
#linkarea{
display:block;
float:left;
width:108px;;
height:450px;
padding:0px;
}
#contenttitle{
display: block;
float: left;
width: 445px;
height: 46px;
}
#titletext{
text-align:center;
float: left;
width: 445px;
height: 46px;
margin-top: 15px;
padding: 2px;
}
#mainconten****er{
background-image: url(images/watermark-content.jpg);
float:left;
padding:0px;
width: 445px;
height: 404px;
}
#watermarktext{
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
text-align: center;
width: 445px;
height: 404px;
}
#watermarktoright{
display: block;
float: right;
width: 25px;
height: 404px;
padding:0px;
}
#titletoright{
display:block;
float:right;
padding:0px;
width:25px;
height:48px;
}
#contentrepeat{
display:block;
float:left;
width:602;
background-image: url(images/content-repeat.jpg);
background-repeat: repeat-y;
background-position: left top;
text-align: center;
}
#header{
width:602px;
height:532px;
float:left;
display:block;
padding:0px;
}
#mainbox{
padding:0px;
width: 602px;
text-align:center;
align:center;
margin-top:30px;
margin-bottom:30px;
float:left;
}
#bodyarea{
padding:0px;
margin:0px;
float: left;
display:block;
width:602px;
height:auto;
}
#contenttext{
padding:0px;
margin-left: 75px;
margin-right: 20px;
float:left;
text-align:left;
width:602px;
}
</style>
</head>

<body>

<div align="center">
<div style="width: 800px;" align="left;">
<div id="backgroundrepeat">
<div id="mainbox">
<img src="images/graystone-top.jpg" id="maintop" border="0" vspace="0" hspace="0">
<div id="header">
<img src="images/maintop.jpg" id="maintop" border="0" vspace="0" hspace="0">
<img src="images/graystone-left-repeat.jpg" id="bannerleft" border="0" vspace="0" hspace="0">
<img src="images/banner.jpg" id="banner" alt="Douglas Daly Photography" border="0" vspace="0" hspace="0">
<img src="images/graystone-right.jpg" id="bannerright" border="0" vspace="0" hspace="0">
</div>
<div id="bodyarea">
<img src="images/left-of-links.jpg" id="linkside" border="0" vspace="0" hspace="0">
<img src="images/links-area.jpg" id="linkarea" border="0" vspace="0" hspace="0">
<img src="images/title.jpg" id="contenttitle" border="0" vspace="0" hspace="0">
<img src="images/right-of-title.jpg" id="titletoright" border="0" vspace="0" hspace="0">
<img src="images/watermark-content.jpg" id="mainconten****er" border="0" vspace="0" hspace="0">
<img src="images/right-of-watermark.jpg" id="watermarktoright" border="0" vspace="0" hspace="0">
<div id="contentrepeat">
<div id="contenttext">
This is the part where the content would repeat if need be.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

_Aerospace_Eng_

04-12-2006, 02:40 AM

Again we need a link, because the page has images in it. Its not that hard to plop the files on a free webhost temporarily.

Doug89

04-12-2006, 03:31 AM

Alright then, settle down there... :lol:

Ill do that tommorrow, cant now, gotta go to bed, its 3 AM.

Anyway, i have fixed all but 2 problems. FYI

1. I cant get this little tiny piece of the one image to show

2. I cant get the whole thing centered on the page.

So if this helps at all then so be it. If not, ill try to get it on a freewebs thing tomorrow.

Here is the source:
(sorry for the sloppiness :) )

<!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>
<title>Douglas Daly Photography</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

body {
background-color: #000066;
margin-top: 25px;
margin-left: 50px;
margin-right:50px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
#backgroundrepeat{
width: 800px;
height: auto;
position:static;
margin: 0px;
padding: 0px;
background-image:(images/background-main.jpg);
background-position: left;
background-repeat: repeat-y;
}
#maintop{
display:block;
float:left;
margin-top:0px;
padding:0px;
margin-bottom:0px;
}
#bannerleft {
display:block;
float:left;
width:34px;
height:79px;
padding: 0px;
}
#banner{
display:block;
float:left;
}
#bannerright{
display:block;
float:right;
width: 36px;
height:79px;
}
#linkside{
display:block;
float:left;
width:24px;
height:450px;
padding: 0px;
}
#linkarea{
display:block;
float:left;
width:108px;;
height:450px;
padding:0px;
}
#contenttitle{
float: left;
width: 445px;
height: 46px;
background-image: url(images/title.jpg);
background-repeat: no-repeat;
}
#titletext{
text-align:center;
float: center;
font-size: 16pt;
font-variant: small-caps;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin-top: 7px;
padding: 2px;
}
#mainconten****er{
background-image: url(images/watermark-content.jpg);
float:left;
padding:0px;
width: 445px;
height: 404px;
}
#watermarktext{
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
text-align: center;
width: 445px;
height: 404px;
}
#watermarktoright{
display: block;
float: right;
width: 25px;
height: 404px;
padding:0px;
}
#titletoright{
display:block;
float:right;
padding:0px;
width:25px;
height:48px;
}
#contentrepeat{
float:left;

margin-left: 0px;
margin-right: 0px;
background-image: url(images/content-repeat.jpg);
background-position: left;
padding: 0px;
background-repeat: repeat-y;
}
#header{
width:602px;
height:532px;
float:left;
display:block;
padding:0px;
}
#mainbox{
padding:0px;
width: 602px;
margin-top:30px;
margin-bottom:30px;
float:left;
}
#bodyarea{
padding:0px;
margin:0px;
float: left;
display:block;
width:602px;
height:auto;
}
#contenttext{
text-align: left;
margin-left: 137px;
margin-right: 30px;
padding:0px;
}
#mainconten****ermark{
padding:0px;
margin-left:0px;
margin-right:0px;
background-image: url(images/watermark-content.jpg);
float: left;
width: 445px;
height:404px;
}
#maincontenttext{
text-align:left;
margin-left: 5px;
margin-right: 5px;
padding:0px;
}
</style>
</head>

<body>

<div align="center">
<div style="width: 800px;" align="left;">
<div id="backgroundrepeat">
<div id="mainbox">
<img src="images/graystone-top.jpg" id="maintop" border="0" vspace="0" hspace="0">
<div id="header">
<img src="images/maintop.jpg" id="maintop" border="0" vspace="0" hspace="0">
<img src="images/graystone-left-repeat.jpg" id="bannerleft" border="0" vspace="0" hspace="0">
<img src="images/banner.jpg" id="banner" alt="Douglas Daly Photography" border="0" vspace="0" hspace="0">
<img src="images/graystone-right.jpg" id="bannerright" border="0" vspace="0" hspace="0">

<img src="images/left-of-links.jpg" id="linkside" border="0" vspace="0" hspace="0">
<img src="images/links-area.jpg" id="linkarea" border="0" vspace="0" hspace="0">

<div id="contenttitle">
<div id="titletext">
This is where the title goes.
</div>
</div>
<img src="images/right-of-title.jpg" id="titletoright" border="0" vspace="0" hspace="0">
<div id="mainconten****ermark">
<div id="maincontenttext">
It works up here, just not down there!
</div>
</div>
<img src="images/right-of-watermark.jpg" id="watermarktoright" border="0" vspace="0" hspace="0">
<div id="contentrepeat">
<div id="contenttext">
This is the part where the extra stuff that doesnt fit above goes, but it wont work!
</div>
</div>
<img src="images/mainend.jpg" id="maintop" border="0" vspace="0" hspace="0">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Here is the attachment with the picture of the first problem (in the lower right hand corner, not the little yellow box, that must have popped up when i took the screen shot ;) )

Thanks! :D

Doug89

04-12-2006, 02:50 PM

Alright, i uploaded them onto my freewebs account, and added a little bit more. I think it looks pretty good for only my 2nd website and the first one i ever laid out in CSS. :D

So heres the link, you can see the problems:

http://www.freewebs.com/theairsniper/temp.htm

Thanks! :D

BTW- None of the links work ;)

Piperwolf

04-12-2006, 03:15 PM

heheh

<br />
<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#EEEEEE" align="center">
<font size="2" color="#000000" face="verdana, arial">
This website is hosted for free by
<a href="http://members.freewebs.com/" rel="nofollow">
<img style="border:0px; width:71px; height:16px;vertical-align:bottom;"
src="http://images.freewebs.com/Images/logo-tm.gif" alt="Freewebs.com - free website">
</a>.
</font>
<font size=2 color="#0000FF">

Get your own<a href="http://members.freewebs.com/" target="_blank" rel="nofollow">
Free Website</a> now!
</font>
</td>
</tr>
</table>


this isnt your code right? Its from your free service? They added an odd period. Just thought it was somewhat funny that they're hosting people but their review process didn't catch this snaffoo.

btw, looks nice.

Doug89

04-12-2006, 11:51 PM

Yeah i have to put a stupid thing in there, thanks for commenting though.

Can anyone find the problem? :D

Doug89

04-12-2006, 11:53 PM

No not my code BTW, the websites ;)

_Aerospace_Eng_

04-13-2006, 02:57 AM

Though part of your code was making their advertisement look the way it did. Anyways it looks like you have a case of divitis meaning to many divs being used for such a simple site. Try it like this
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Douglas Daly Photography</title>
<style type="text/css">
html, body {
background:#0D1B66;
margin:0;
padding:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
#container {
width:602px;
margin:20px auto;
background:url(images/left-of-links.jpg) 0 99px no-repeat;
}
#header {
height:79px;
padding-top:20px;
font-size:0;
line-height:0px;
background:url(images/graystone-top.jpg) no-repeat top center;
}
#header ul {
margin:0;
padding:0;
}
#header ul li {
float:left;
list-style:none;
}
#links {
width:108px;
height:450px;
margin-left:24px;
float:left;
display:inline;
background:url(images/links-area.jpg) repeat-y;
}
#links ul {
margin:0;
padding:0;
}
#links ul li {
list-style:none;
}
#links a, #links a:link, #links a:visited {
margin:10px auto 0 auto;
border: 2px solid #FFF;
color: #000;
text-decoration: none;
display: block;
width:80px;
background-color: #CCC;
font-weight: bold;
text-align: center;
padding:2px 0;
}
#links a:hover {
color: #FFF;
background-color: #000;
}
#content {
width:470px;
height:450px;
position:relative;
float:left;
background:#FFF url(images/watermark-content.jpg) no-repeat 0 46px;
}
#titletext {
height:36px;
background: #FFF url(images/title.jpg) no-repeat;
text-align:center;
font-size: 16pt;
font-variant: small-caps;
color: #FFFFFF;
padding-top:10px;
position:relative;
}
#righttitle {
position:absolute;
top:0;
right:0;
}
#rightbar {
position:absolute;
top:46px;
right:0;
}
#main {
margin-right:25px;
height:404px;
width:445px;
overflow:auto;
}
#main p {
margin:0;
padding:10px;
}
#footer {
clear:both;
height:50px;
background:url(images/mainend.jpg) no-repeat;
}
#freewebbar {
text-align:center;
color:#FFF;
background-color:inherit;
}
#freewebbar a {
color:#FFF;
background-color:inherit;
text-decoration:underline;
}
#freewebbar a:hover {
text-decoration:none;
}
</style>
</head>

<body>
<div id="container">
<div id="header">
<ul>
<li><img src="images/graystone-left-repeat.jpg" width="34" height="79" alt="" /></li>
<li><img src="images/banner.jpg" width="532" height="79" alt="" /></li>
<li><img src="images/graystone-right.jpg" width="36" height="79" alt="" /></li>
</ul>
</div>
<div id="links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">My Policy</a></li>
<li><a href="#">My Portfolio</a></li>
<li><a href="#">Ordering</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content"><img id="rightbar" src="images/right-of-watermark.jpg" width="25" height="404" alt="" />
<div id="titletext"><img id="righttitle" src="images/right-of-title.jpg" width="25" height="46" alt="" />
This is where the title goes.
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
<div id="footer"> </div>
<div id="freewebbar">This site is hosted for FREE by <a href="http://members.freewebs.com/" rel="nofollow"><img style="border:0px; width:71px; height:16px;" src="http://images.freewebs.com/Images/logo-tm.gif" alt="Freewebs.com" align="absmiddle"></a>. <a href="http://members.freewebs.com/" target="_blank">Click here to get your own Free Website!</a></div>
</div>
</body>
</html>

Doug89

04-13-2006, 12:26 PM

Wow! That looks awesome! Thanks so much! You were a big help! Thanks again! :D

Doug89

04-16-2006, 02:15 AM

Hello all, having another problem. Although the code worked great Aero, i thought the site was a tad too small. So i widened it a bit.

I thought i made all of the necessary adjustments, and i may have made one or two slice changes, but i cant figure out what is wrong. Maybe someone could. Thanks a bunch! :D

Click Here! (http://www.freewebs.com/theairsniper/temp.htm)

Doug89

04-17-2006, 09:45 PM

Anyone? Please?

_Aerospace_Eng_

04-18-2006, 08:59 AM

You do realize that there will now be a horizontal scrollbar on an 800x600 resolution.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Douglas Daly Photography</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html, body{
background:#069;
margin:0;
padding:0;
border:0;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
color:#000;
}
#container{
width:880px;
margin:20px auto;
background: url(images/links_left.jpg) 0 106px no-repeat;
position:relative;
}
#header{
height:74px;
padding-top:26px;
font-size:0;
line-height:0px;
background: url(images/maintop.jpg) no-repeat top center;
}
#header ul{
margin:0;
padding:0;
}
#header ul li{
float:left;
list-style: none;
}
#links{
width:159px;
height:563px;
margin-left:29px;
float:left;
display:inline;
background:url(images/links_area.jpg) repeat-y;
}
#links ul{
margin:0;
padding:0;
}
#links ul li{
list-style:none;
}
#links a, #links a:link, #links a:visited {
margin:10px auto 0 auto;
border:2px solid #FFF;
color: #000;
text-decoration: none;
display: block;
width: 100px;
background-color: #CCC;
font-weight: bold;
text-align:center;
padding:2px 0;
}
#links a:hover{
color: #FFF;
background-color:#000;
}
#content{
width: 657px;
position:relative;
float:left;
background: #FFF url(images/content_area.jpg) no-repeat 0 49px;
}
#titletext{
height:39px;
background: #FFF url(images/title.jpg) no-repeat;
text-align:center;
font-size:16pt;
font-variant:small-caps;
color: #FFFFFF;
padding-top:10px;
position:relative;
}
#righttitle{
position:absolute;
top:0;
right:0;
}
#rightbar{
position:absolute;
top:106px;
right:0;
}
#main{
width:655px;
height:514px;
overflow:auto;
}
#main p{
margin:0;
padding:10px;
}
#footer{
clear:both;
height:46px;
background: url(images/mainend.jpg) no-repeat;
}
#freewebbar {
text-align:center;
color:#FFF;
background-color:inherit;
}
#freewebbar a {
color:#FFF;
background-color:inherit;
text-decoration:underline;
}
#freewebbar a:hover {
text-decoration:none;
}
</style>
</head>

<body>
<div id="container"><img id="rightbar" src="images/content_right.jpg" width="35" height="563" alt="">
<div id="header">
<ul>
<li><img src="images/banner_left.jpg" width="48" height="80" alt=""></li>
<li><img src="images/banner.jpg" width="777" height="80" alt=""></li>
<li><img src="images/banner_right.jpg" width="55" height="80" alt=""></li>
</ul>
</div>
<div id="links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">My Policy</a></li>
<li><a href="#">My Portfolio</a></li>
<li><a href="#">Ordering</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="titletext">
This is where the Title Goes. </div>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
<div id="footer"> </div>
<div id="freewebbar">This site is hosted for FREE by <a href="http://members.freewebs.com/" rel="nofollow"><img style="border:0px; width:71px; height:16px;" src="http://images.freewebs.com/Images/logo-tm.gif" alt="Freewebs.com"></a>. <a href="http://members.freewebs.com/" target="_blank">Click here to get your own Free Website!</a></div>
</div>
</body>
</html>
I dropped it down to HTML4.0 since you don't seem to know what XHTML is.

Doug89

04-18-2006, 03:46 PM

Thanks so much Aero, as always you were a big help :D

It looks awesome, but it depends on a the size of the screen for the scroll bar i suppose. I just thought it was a bit too small for a picture gallery and all that i am putting on it.

Thanks again!

BTW - Thanks for dropping it down to HTML, i do know OF XHTML, but i do not know how to implement it, however i dont think i really need it here do i? Thanks! :D

Doug89

04-18-2006, 03:50 PM

BTW, i promise i wont resize it again! :P

Thanks again man! :D