I’m having a problem with the background images behind the images of the paper pile. I don’t know if it’s related to the graphics or the styling. I want the graphic to be placed directly behind the paper pile graphic with a border around, as I don’t expect the graphic to be seen and the paper clip to be shown to some extent. I hope someone can pin point what is wrong cause I’ve been mingling with the graphic and just can’t solve it.
So what’s actually meant to happen? I can’t quite figure what you want it to look like.
I want it to align in the middle of the paper pile graphic but show some of the background graphic edge and the paper clip.
Hi,
It looks like you can do that by adding more top padding to the <p> tag that contains the paperpile image.
Try this and then change the top padding to suit your taste.
[B]#inner p[/B] {
margin:0;
[COLOR=Blue]padding:55px 20px 20px;[/COLOR]
font-size:1em;
background: url(images/background_image_graphic2_03.gif) no-repeat;
[COLOR=Red]/* background-position: 15% 12% 35% 12%; */[/COLOR]
}
I removed your background-position as it was not correct. It can’t have four values applied to it. I don’t think you need to use it at all either with padding adjustments.
If you want the paper clip to lay on top of the paperpile image then you will need to AP another element above and set the paper clip only as a small BG image.
The pager image is centered over the background image now. If you are going to have an opaque image on the top (the paper stack image) the background image can’t show through. Why not just merge them into one image? Or delete the wihite portion of the page image and make is a transparent png.
The page is good, except the paper pile graphic needs to be positioned more to the left so it’s under the paper clip, refresh to see an update of the page unless I have to adjust the graphic?
paper pile graphic needs to be positioned more to the left so it’s under the paper clip
That ain’t going to happen with just two images.
You can’t slide the paperpile underneath a PORTION of the BG image.
That’s why I said this:
If you want the paper clip to lay on top of the paperpile image then you will need to AP another element above and set the paper clip only as a small BG image.
I would probably remove the paperclip from the BG image completely. Then make it the third image in the stack.
Here is an example of what I was suggesting
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
p {
float:left;
position:relative;
margin:0;
padding:40px;
background:orange;
}
p img {
display:block;
width:250px;
height:250px;
background:blue;
}
p span {
position:absolute;
top:20px;
left:30px;
width:40px;
height:80px;
background:red; /*paperclip image here*/
}
</style>
</head>
<body>
<p>
<img src="paperpile.jpg" alt="#"><span></span>
</p>
</body>
</html>
I’ve been trying to figure out how to nest that HTML,
<div class="floatwrap">
<p>
<img src="paperpile.jpg" alt="#"><span></span>
<p class="left"><a href="tutorials/ramen/paperpile.jpg" class="highslide left" onclick="return hs.expand(this)">
<img src="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="200" width="200" />
</a>
</p>
</p>
You can’t have a <p> within a <p>. If you have a <p> open and then open another one, the browser silently inserts a </p> to close the first one before opening the second one.
My example was not meant to be nested into your existing code. It was meant to show you the concept.
You already had the <p> tag and the image in place, all you had to do was add the <span> and then style it in your CSS like I did.
Now that I see what you are doing there is no need use the padding on the <p> tag. Just set dimensions on it that are the same size as your shadow BG image. After that you can position your paperpile image with margins.
Here’s what you need to do:
- Take your BG image and REMOVE the paper clip from it.
- Now make a NEW png image with paper clip only. (as small as possible)
- Post the links to those two NEW IMAGES
Then we can start adjusting your code
I cropped the paperclip out from the top to make a temporary image. When you get those image corrections done I can plug them into this new code.
http://www.css-lab.com/test/husky/tutorial-3.html
Then you will have your paperclip on top of the paperpile img.
I have also reworked a lot of the html/css so it will be futile to try and copy bits and pieces from my page to yours. Just save the page and start fresh.
You had a .left class set along with the .highslide class on the anchors. Not sure why you did that, it was applying left floats to them. I removed that left class and just used margins instead.
Ah, I forgot something I can’t figure out what is causing the gap look at the bottom of the page to see what I mean, it’s noticeable 
Is that the phrase for “thank you!” in another language? 
I can’t figure out what is causing the gap look at the bottom…
I don’t see a gap in FF. Maybe post a screen shot and indicate what browser you are using.
^ Well at this point it is not a gap, it is just the text creating the extra height.
The problem is just a lack of a background. I would move the BG color from #inner to #wrap. That will set the BG color down the entire page.
[B]#wrap[/B] {
width:700px;
margin:auto;
[COLOR=Blue]background:#b7b7b7;[/COLOR]
}
Is that the phrase for “thank you!” in another language?
The problem is just a lack of a background. I would move the BG color from #inner to #wrap. That will set the BG color down the entire page.
Clever !