CSS problem

MoNkeE · 10 May 2006 at 14:12

Hi all,

I'm having a bit of a CSS problem (as you may well tell by the title)!

The site I'm making uses a navigation bar down the left hand side, which is in the shape of a guitar. Basically, what I have is 3 cells. I have the top cell which contains the head of the guitar and 3 frets. The middle part comprises of the buttons (each being a different fret), and the end part is the base of the guitar.

What I'm trying to do is make it so that the base of the guitar is always at the bottom of the page (as it won't be used for anything else but style). In between this space, I will have a repeating background of the fretboard to fill the space. The idea behind it is that it looks like a complete guitar, no matter what the size of the browser is, and there'll only be a scroll bar if the window is smaller than the menu. I can't really show you any pictures as I can't login to my FTP here

The code for the page is:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<LINK href="images/wills.css" type=text/css rel=stylesheet>
	<!--[IF IE]>
	<link href="images/wills-ie.css" type=text/css rel=stylesheet>
	<![endif]-->
</head>

<body>
<div class="recurring">
<div class="navigation">
</div>
<div class="navextra" name="Link 1">Extra<br>Link 1</div>
<div class="navextra" name="Link 2">Extra<br>Link 2</div>
<div class="base"><img src="images/base.gif">
</div>
</div>
</BODY>
</HTML>

The code for the CSS is:

Code:

A:link {
	FONT-SIZE: 10pt; COLOR: #104e8b; FONT-FAMILY: verdana; TEXT-DECORATION: none
}
A:visited {
	FONT-SIZE: 10pt; COLOR: #104e8b; FONT-FAMILY: verdana; TEXT-DECORATION: none
}
A:hover {
	FONT-SIZE: 10pt; COLOR: #ffffff; FONT-FAMILY: verdana; TEXT-DECORATION: underline
}


BODY {
	FONT-SIZE: 12pt;
	COLOR: #ffffff;
	FONT-FAMILY: Arial;
	BACKGROUND-COLOR: #000000;
	margin: 0px;
}

.navigation {
	height: 491px;
	width: 200px;
	background-image: url(guitar.gif); 
	background-repeat: no-repeat;
}

.navextra {
	height: 50px;
	width: 144px;
	background-image: url(fret.gif); 
	background-repeat: no-repeat;
	text-align: center;
	padding: 8px;
	float: left;
}

.recurring {
	height: 100%;
	width: 200px;
	background-image: url(fret.gif); 
	background-repeat: repeat-y;
	float: left;
}

.base {
	position: relative;
	float: left;
}

If anyone can help, I'd greatly appreciate it. If you have any further questions, just ask.

-RaZ

MoNkeE · 10 May 2006 at 14:51

Hey there,

That seems to have done most of the job, however, there's a small gap at the very bottom of the page between the end of the page and the image. I've managed to upload a few pics:

Showing what the navigation bar looks like:

Showing the gap up close:

Showing what the repeating background looks without the base in place:

The part at the very bottom is NOT part of the image - it's part of the repeating background from the "recurring" class. It would seem there's some padding, but there's not.

The new code for the HTML is:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<LINK href="images/wills.css" type=text/css rel=stylesheet>
	<!--[IF IE]>
	<link href="images/wills-ie.css" type=text/css rel=stylesheet>
	<![endif]-->
</head>

<body>
<div class="recurring">
<div class="navigation">
</div>
<div class="navextra" name="Link 1">Extra<br>Link 1</div>
<div class="navextra" name="Link 2">Extra<br>Link 2</div>
</div>
<div class="base"><img src="images/base.gif">
</div>
</BODY>
</HTML>

The only changes to the CSS are:

Code:

.base {
	position: absolute;
	bottom: 0;
	left: 0
}

Thanks for the help

-RaZ

CSS problem

MoNkeE

MoNkeE

MoNkeE

MoNkeE