CSS positioning problem [Archive]

Click to See Complete Forum and Search --> : CSS positioning problem

amosharper

11-06-2007, 04:29 AM

Hi all,

I'm facing a problem with positioning several small images at any given position on a larger background image. Since my page is centered, I need to position these relative to the top-center of the page, so they stay in exactly the same place above the background image, which is an 800x600px untiled jpeg (bodypic.jpg).

The overlay images in the code below are [rv_splat.jpg]. I currently have only put one in, as you can see.

[index.htm]body {
background-color: #FFFFFF;
font-size:12px;
font-family:Verdana;
margin: 0;
padding: 0;

}

div#splat_rv {
position: relative;
right: 250px;
z-index: 1;

}

div#bodypic {
top: 0;
text-align: center;
background: url(bodypic.jpg) no-repeat top center;
background-attachment: scroll;
height: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 0px;
border: /*thin solid #FFFFFF*/none;
z-index: 0;

}

div#bodypic_bshadow {
text-align: center;
background: url(bodypic_bshadow.jpg);
background-attachment: scroll;
background-position: 50% 0%;
background-repeat: no-repeat;
height: 27px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 0px;
z-index: 0;

}
[style1.css]
<head>
<title>School of Motoring</title>
<LINK rel="stylesheet" type="text/css" name="style1" href="style1.css">
</head>

<body>

<div id="bodypic">

<div id="splat_rv"><img src="splat_rv1.gif" border=0></img></div>

</div>
<div id="bodypic_bshadow"></div>

</body>

The problem is that making the rv_splat overlaying images relative to the page means that I can only have one image per line, rather than at an arbitrary y position. This is no good - I need the images to be at any given position relative to y=0% and x=50%.

Is there a wrokaround, or way of doing this?

Note: The images will later be linked to new pages, so the solution will have to be able to wrap <a> tags around.

Huge thanks in advance,

- Amos

Centauri

11-06-2007, 08:02 AM

A few problems here. Even though you are centering the background image, the #bodypic and #bodypic_bshadow divs are still occupying the full width of the screen, and any positioning will be referencing the left edge. The auto side margins will not do anything unless the div has a specified width. Top and Z-index will not do anything unless a positioning other than the default of static is applied. So css for these two divs should be more like :div#bodypic {
background: url(bodypic.jpg) no-repeat top center;
width: 800px
height: 600px;
margin: 0 auto;
padding: 0;
border: /*thin solid #FFFFFF*/none;
}

div#bodypic_bshadow {
background: url(bodypic_bshadow.jpg);
background-position: 50% 0%;
background-repeat: no-repeat;
height: 27px;
width: 800px;
margin: 0 auto;
padding: 0;
}

Can you upload a composite of the images (maybe to imageshack if you like) showing where the overlayed images are to be (will they be arranged in a horizontal or vertical row, or at different locations, etc?) If the images are to be linked to new pages, then you have a menu which should appear in the html as an unordered list of links - positioning and image replacement is then done all in the css. Normally positioning is done using margins and floats, but sometimes absolute positioning is required, but should be kept to a minimum. Relative positioning causes problems, as it only renders the object at the offset location, but it still occupies the original position.

Once I see the layout and images, I can advise the best structure to use.

amosharper

11-06-2007, 10:17 AM

Thanks for your quick reply, Centauri.

bodypic.jpg
http://s136.photobucket.com/albums/q187/amosharper/th_bodypic.jpg (http://i136.photobucket.com/albums/q187/amosharper/bodypic.jpg)

bodypic_bshadow.jpg
http://s136.photobucket.com/albums/q187/amosharper/th_bodypic_bshadow.jpg (http://i136.photobucket.com/albums/q187/amosharper/bodypic_bshadow.jpg)

splat_rv.jpg
http://i136.photobucket.com/albums/q187/amosharper/splat_rv1.gif
It's probably important to point out that the splat is a very temporary image. I will probably use five or six different images for different links.

The links will be exactly positioned over certain aspects of bodypic.jpg: the rearview mirror, the sign, the road, the horn and the mobile phone.

Thanks again for your help,

- Amos

amosharper

11-06-2007, 11:21 AM

Left it too late to edit. Remove "th_" in the above URLs to get to the fullsize images.

Just now, I defined the div#bodypic as relative, made the width 900 rather than allowing it to fill the screen, and changed splat_rv from a <div id="..."> to simply an absolute, anchored image <a href="..." id="..."><img></a> within the div#bodypic, and this seems to be working brilliantly. Is this what you would have done?

Thanks,

- Amos

Centauri

11-06-2007, 04:52 PM

Basically, except that for accessibility, I would make the links actual text links, and position and size them in the css whilst hiding the text and applying the image as a background image, which would also allow for a hover effect to be implemented. For the layout you have, absolute positioning probably would be the best (could be done otherwise, but a lot of mucking around). Once I had more than 1 link, I would make them all part of an unordered list so the html makes more sense.