image at bottom?

**Anexxion** · 08-07-2008, 04:56 AM

i want to put the repeat-x menu_pat.gif onto the bottom of topnav so it aligns with that big white thing

www.voigrafic.com/golfsite1

**coothead** · 08-07-2008, 12:29 PM

Hi there Annexion,

change this...

Code:


#menu {
	background: transparent url(http://www.voigrafic.com/golfsite1/images/menu_pat.gif) repeat-x;
       width:430px;
	height:40px;
	float:right;
	position: relative;
	vertical-align: baseline;
	}

...to this...

Code:


#menu {
	background: transparent url(http://www.voigrafic.com/golfsite1/images/menu_pat.gif) repeat-x;
       background-position:0 51px;
       width:430px;
       height:40px;
       padding-top:60px;
	float:right;
	}

coothead

**Anexxion** · 08-07-2008, 05:48 PM

Okay, Nyne, everytime you help it doesn't work lol noffense. Thanks coothead. I also want to place the entire site horizontally in the middle, how? I've looked for tuts and tried all ofit but to no avail.

**TheJoshMan** · 08-07-2008, 06:08 PM

Had you explained in maybe a little more clarity about what exactly you were trying to achieve, I may have helped. The only difference between the solution I posted and what coothead posted was the margins.

I thought you wanted the box lined up with the big white thing, or maybe it was that big white thing, or the other one... Either way, the general idea was the same, you were defining the "position" as absolute when it should have been relative, no offense.

**Anexxion** · 08-07-2008, 06:36 PM

yeah no problem I thank you anyways :P

also, I cant get my images aligned to the bar now!

**coothead** · 08-07-2008, 06:42 PM

Hi there Anexxion,

Your page appears to be an excellent example of 'Divitis'

Check out the symptoms here...

Divitis:- what it is, and how to cure it

Here it is the simplified code...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Untitled Document</title>
<style type="text/css">
html,body {
    margin:0;
    padding:0;
    background: #f5f5f5 url(http://www.voigrafic.com/golfsite1/images/bg_pat.gif) repeat-x scroll center top;
 }
#container {
    width:804px;
    height:770px;
    text-align:center;
    margin:100px auto 0;
    background: transparent url(http://www.voigrafic.com/golfsite1/images/bg_site.png) no-repeat; 
 }
#menu {
    width:430px;
    height:32px;
    padding-top:60px;
    margin-left:374px;
    background: transparent url(http://www.voigrafic.com/golfsite1/images/menu_pat.gif) repeat-x 0 51px;
 }

</style>

</head>
<body>

<div id="container">
   <div id="menu">ssss</div>
</div>

</body>
</html>

coothead