Position absolute not resizing correctly

HTML & CSS
1

I need to do a position: absolute on my images.The problem is they move when I resize the browser.No other element including images do this until I attempt to use the position: absolute element.I know there are other ways to maybe accomplish this but I really need to learn how to use this element in a responsive design.My website is www.michaelmorris.website. The way it’s viewed on my home page under a large monitor is how I want it when resized of course smaller but not having the images moving all over the place. I can also create a screen shot of what I want. I do not want to go with another method if I don’t have to. I want to know why position absolute doesn’t work.

<!doctype html>
	<html lang="en">
	<head>
			<meta charset="utf-8">
		<meta name="description" content="The HTML5 Herald">
		<meta name="author" content="SitePoint">
		<meta name="viewport" content="width=device-width,initial-scale=1.5">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="michaelmorris1a.css">
		 <link rel="stylesheet" type="text/css" href="footer.css">
		<title>The HTML5 Herald</title>
	<!--
	https://www.sitepoint.com/community/t/divs-moving-downward-when-i-resize-the-browser/224155
	morrism35 (michael morris)
	May 16,2016 2:56 AM
	-->
		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<style>
	html,body {min-height:100vh;}
	body {
		font-size:100%;
		background-image:url("Images/solid maroon.png");
		background-repeat:no-repeat;
		background-size:100% 100%;
		padding:0;
		margin:0;
	}
	.bgwrap.h {
		background-image:url("Images/Top Banner.jpg");
		background-repeat:no-repeat;
		background-size:100% 100%;
	}
	.bgwrap.d {
		background-color:rgba(0,0,0,.3);
	}
	.container {
		max-width:800px;
		margin:0 auto;
	/*    outline:1px solid lime;  /* TEST Outline.  To Be DELETED. */
	}
	.names {
		display:table;
		width:100%;
		padding:2vh 0;
	/*    outline:1px solid yellow;  /* TEST Outline.  To Be DELETED. */
	}
	.tcell {
		display:table-cell;
		text-align:center;
		vertical-align:bottom;
	/*    outline:1px solid blue;  /* TEST Outline.  To Be DELETED. */
	}
	.m,.c {
		text-align:right;
		color:#eee8aa;
		font-size:1.825em;
		font-style:italic;
		text-transform:uppercase;
		width:35%;
	}
	.c {
		text-align:left;
		width:40%;
	}
	.ring {
		display:block;
		max-width:60px;
		height:auto;
		margin:0 auto 20px;
	}
	.date {
		display:table;
		width:100%;
		max-width:550px;
		border-spacing:6px 8px;
		color:#eee8aa;
		text-transform:uppercase;
		font-size:1.25em;
		font-style:italic;
		margin:0 auto;
	}
	.date span {
		display:table-cell;
		vertical-align:middle;
		text-align:center;
		width:56%;
	/*    outline:1px dotted lime;  /* TEST Outline.  To Be DELETED. */
	}
	.date span + span {
		width:44%;
	}
	img{
	max-width: 100%;
	}
	#tes{
	margin: 0;
	  padding: 0;
	  list-style: none;hnnbvcxzbc
	border: 5px solid #eee8aa; 
	}
	li a{
	color: #FFFFFF;
	 font-size:1.82em;
		font-style:italic;
		list-style: none;
	}
	#MasterContainer{
		width: 100%;
	  margin: 0px;
		}
	.r1{  	
		  width: 20%;
	   position: absolute;
	   top: 20%;
	   left: 25%;
	}
	.r2{  	
	  width: 40%;
	  position: absolute;
	  top: 20%;
	  left: 40%;
	}
	.r3{  	
		  width: 20%;
	  position: absolute;
	  top: 35%;
	  left: 25%;	
	}
	.r4{ 
      position: absolute; 	
		top: 20%; 
		right: 10%;
	  width: 20%;
	}
	.r5{  	
		position: absolute; 	
		top: 35%; 
		right: 10%;		
	  width: 20%;
	}
	.container.i {
		padding-top:3vh;
		}
		.wedding{
			border: 5px solid #eee8aa; 
		width: 50%;
		}
	@media screen and  (max-width: 650px) {
		body {font-size:40%;}
		.r1{
		 top: 15%;
	   left: 20%;
		}
		.r2{
			  top: 15%;
	  left: 35%;
		}
		 .r3 {
		 top: 25%;
	  left: 20%;	
		}
			.r4{
			  top: 25%;
	  left: 20%;
		}
		 .r5 {
		 top: 35%;
	  left: 20%;	
		}
		}
		</style>
	</head>
	<body>
	<div class="bgwrap h">
		<div class="container">
			<div class="names">
				<div class="tcell m">Michael</div>
				<div class="tcell"><img class="ring" src="Images/gold.gif" alt="Wedding Ring" width="120px" height="60px"></div>
				<div class="tcell c">Christina</div>
			</div>
		</div>
	</div>
	<div class="bgwrap d">
		<div class="container">
			<div class="date">
				<span>Sept 2, 2016 7:00&nbsp;PM</span><span>Salisbury, NC</span>
			</div>
		</div>
		</div>	
		<div id="MasterContainer">
		<section>
		 <ul id="tes">
		<li class="l"><a href="index.html">Home</a></li>
	<li class="l"><a href="gallery.html">Gallery</a></li>
	<li class"l"><a href="MessageBoard.php">Messages</a></li>
	<li class"l"><a href="About.html">About Us</a></li>
	<li class="r1"><img src="http://michaelmorris.website/Images/Roses.jpg"> </li>  
	<li class="r2"><img src="http://michaelmorris.website/Images/save date.jpg"></li> 
	 <li class="r3"><img src="http://michaelmorris.website/Images/Roses.jpg">  </li>
	 <li class="r4"><img src="http://michaelmorris.website/Images/Roses.jpg"></li>
	 <li class="r5"><img  src="http://michaelmorris.website/Images/Roses.jpg"> </li>
	</ul>
	</section>
			<div class="footer">
			 <p class="contact">Michael Morris</br> 905 Hoke Street</br> Kannapolis, NC 28081</br>704-783-7696</br>
			 morrism35@yahoo.com</br>www.michaelmorris.website</p>
			 <div class="names">
			   <div class="tcell m">Michael</div>
				<div class="tcell"><img class="ring" src="Images/gold.gif" alt="Wedding Ring" width="120px" height="60px"></div>
				<div class="tcell c">Christina</div>
			</div>
			 <p class="contact2">Christina Vandivier</br> 905 Hoke Street</br> Kannapolis, NC 28081</br>704-467-6934</br>
			 chrisitnavandivier@gmail.com</br>www.michaelmorris.website</p>
			</div>
		</div>
	</body>
	</html>
2

Hi there morrism35,

I have absolutely no idea how you want the
“position: absolute” items to appear. :ng:

But I would suggest that you start by adding
“position: relative” to this element’s CSS…

 <ul id="tes">

coothead

3

Exactly like that. Thats what it looks like on my laptop and I need it to look like a smaller version on a smaller device like a tablet or cell phone. When I resize it the images move way off course about 10-20 pixesl.

1683×747 630 KB

4

Could you please explain why you need to use position:absolute to achieve this layout? Is this something that maybe could be done with margins?

Elements that have position: absolute are positioned relative to the nearest positioned container. If you follow @coothead’s suggestion, that would be the <ul> element. None of your containers have positioning, so that the <li>'s are positioned relative to the <body>.

5

Always thought that was position: relative. I thought position: absolute was were you could add an element anywhere on the page that you wanted. At least that’s the definition that I always read as. I guess I could do it with margins even though my first attempt ended with not being able to add a margin to my last image. I really rather find out why position: absolute doesn’t work when resized. Is this an element that isn’t supposed to be used in a responsive design. I’m in it to build my own website but to really learn also.

6

In this example:

<body>
<div class="outer">
    <div class="inner">
        <img src="">
    </div>
</div>
</body>

If you give <img> a position: absolute; top: 20px; left: 50px, it will be placed 20px from the top and 50px left of the top left-hand corner of the <body>. If you want it positioned 20px from the top and 50px left of the top left-hand corner of the <div class="inner">, you need to give that div position: relative. The absolutely positioned element’s position is based on the container that has been given a position. If there is none, it will be based on the <html> element, not the <body> element as I stated before.

The trouble with absolute positioning is that it takes the element out of the normal flow of the document, so it can create some problems with responsiveness. Maybe some of the experts in responsive web design can jump in here and explain better why.

2 Likes
7

Hi, Michael. How are you and Christina doing?

I would like to ask you to run your page through the html validator before we work on it. It’s not that we can’t spot problems… it’s just a standard prerequisite that helps clear a number of problems. For example:

HTML break tags are written <br>, not </br>.
<li class"l"> should have an equals sign after the word “class” and before the className.
Foreground images should have an “alt” attribute.
And there’s a stray </div> tag.

Little things that add up.

You want to talk about positioning some images.

Validate the code and please format the new HTML so it is uniformly indented by level and it will be easier to see how to go about positiong the images.

Cheers.

https://validator.w3.org/nu/

https://jigsaw.w3.org/css-validator/

8

Thank you so much for this. I was using the position: absolute without any regard for the container. I used it against the ul tress class and it works great. I tested it with screenfly which allowed me to test it against multiple screen sizes. Why couldn’t someone have just told explained this concept to me I could have saved myself a lot of time.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.