Member Avatar for Violet_82

Hi there,
I am working on css positioning and I have encountered a problem.
I have these two pages:
1)http://antobbo.webspace.virginmedia.com/various_tests/2011_10_25_css_positioning/test.htm
2)http://antobbo.webspace.virginmedia.com/various_tests/2011_10_26_image_slides/test.htm

the first one has box B (yellow) and C(red) with

position:absolute;
top 0;
right 0;

the second one has 3 images with:

img
{
position:absolute;
top: 0;
left:0;	
}

Now why in the first one the boxes overlap whereas in the second one the boxes are nicely laid out one after another one?

Here's the code:

html for 1)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title>test</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
		<div id="a">
			<p>A</p>
			<div id="b">
				<p>B</p>
			</div>
			<div id="c">
				<p>C</p>
			</div>

		</div>

	</body>

</html>

css for 1)

#a
{
width:800px;
height:500px;
background-color:blue;
position:relative;
}

#b
{
margin:0 auto;
width:72px;
height:150px;
background-color:yellow;
position:absolute;
top:0;
right:0;

}

#c
{
width:70px;
height:150px;
background-color:red;
/*margin-top:30px;*/
position:absolute;
top:0;
right:0;

}

html code for 2)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Image slides test</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>

		<div class="main_container">

			<div class="wrap">

				<img src="water_thumb_7.jpg" class="front" alt="">
				<img src="back1.jpg" alt="">

			</div>

			<div class="wrap">

				<img src="water_thumb_5.jpg" class="front" alt="">
				<img src="back2.jpg" alt="">

			</div>

			<div class="wrap">

				<img src="water_thumb_6.jpg" class="front" alt="">
				<img src="back3.jpg" alt="">

			</div>

		</div>


	</body>

</html>

CSS for 2)

.main_container
{
	width:496px;
	height:500px;
	border:1px solid blue;
	margin: 0 auto;
}

.wrap
{
	border: 1px solid magenta;
	width:150px;
	height:150px;
	margin-top:10px;
	margin-left:10px;
	float:left;
	position:relative;

}

img
{
position:absolute;
top: 0;
left:0;	
}

thanks

  • 3 Contributors
  • 3 Replies
  • 123 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Violet_82

Recommended Answers

All 3 Replies

Member Avatar for Dandello

In the first instance both div box B and div box C have positions of

position:absolute;
top:0;
right:0;

So they are actually positioned in the same place inside of box A.

In the instance that works (neat effect BTW) the box position is relative and the images inside are absolute.

Edited by Dandello because: n/a
Member Avatar for drjohn

Nice effect

The effect would be even better if the first image in each case was, for example, a black and white version of the revealed image. Several other options are also possible for your initially displayed images (the coloured blocks for those who didn't view the source code)

Member Avatar for Violet_82

Ahhhh ok, I see now, thanks Dandello. Yes it is a very nice effect, but nothing I came up with, was just replicating what was done in the tutorial
thanks again

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.