Need help position 3 images in a row

**longroad** · Aug 19, 2004 18:35

I made a navbar with a drop shadow (so they're not in fashion, but it looks good with the rest of the site.)
As it is with drop shadows, the left end side is different from the right. So I've cut the left and right into seperate images, and have a middle image which will be repeated.
I cant get all 3 images to line up, even though in dreamweaver they are displayed together on the same line, when viewed in a browser, all 3 images are on seperate lines.
I've attached the files which will make it easier to see what Im talking about.
here is the html:

Code:

<div id="navredleft"></div>
<div id="navredmiddle"></div>
<div id="navredright"></div>

and the CSS:

Code:

#navredleft
{
	width: 18px;
	height: 37px;
	background-image: url(navredleft.jpg);
	background-repeat: none;
	position: relative;
	left: 13%;}

#navredmiddle
{
	width: 60%;
	height: 37px;
	background-image: url(navredmiddle.jpg);
	background-repeat: repeat-x;
	position: relative;
	left: 14%;}

#navredright
{
	width: 23px;
	height: 37px;
	background-image: url(navredright.jpg);
	background-repeat: none;
	position: relative;
	left: 73%;}

I really would appreciate anyone who could spare a few minutes to dip their hand in this one.
Thanks

**jfitz** · Aug 19, 2004 20:11

Try this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#navredleft
{
width: 18px;
height: 37px;
background: url(navredleft.jpg);
background-repeat: none;
float: left;}

#navredmiddle
{
width:60%;
height: 37px;
background: url(navredmiddle.jpg);
background-repeat: repeat-x;
position: relative;
float:left;
}

#navredright
{
width: 23px;
height: 37px;
background: url(navredright.jpg);
background-repeat: none;
float:left;
}

</style>
</head>
<body>

	<div id="navredleft"></div>
	<div id="navredmiddle"></div>
	<div id="navredright"></div>

</body>
</html>

This will work but you'll have to put it into a containing div to centralise it again. Your problem then will be that the central div will be 60% of 60% but it should be possible to tweak it back into a suitable width. Unfortunately that'll give you a layout that will break at a certain point if the window is made too small. Sorry, nothing better comes to mind at the moment.

John

**jfitz** · Aug 19, 2004 20:55

Ok this seems to work better.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#navredleft
{
width: 18px;
height: 37px;
background: url(navredleft.jpg);
background-repeat: none;
position:absolute;
z-index:2;
}

#navredmiddle
{
width:100%;
height: 37px;
background: url(navredmiddle.jpg) repeat-x;
position:absolute;
z-index:1;
}

#navredright
{
width: 23px;
height: 37px;
background: url(navredright.jpg);
background-repeat: none;
position:absolute;
right:0;
z-index:3;
}

#navbar
{
width:60%;
position:relative;
left:20%;

}
</style>
</head>
<body>

<div id="navbar">
	<div id="navredleft"></div>
	<div id="navredmiddle"></div>
	<div id="navredright"></div>
</div>
</body>
</html>

**longroad** · Aug 19, 2004 23:35

Thanks, I will give it a go.

User Tag List

Thread: Need help position 3 images in a row

Thread Tools

Display

Need help position 3 images in a row

Bookmarks

Bookmarks

Posting Permissions