Link to home
Create AccountLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

Why do these images slip underneath where they should be when the screen gets smaller?

My page at http://www.brucegust.com/campaig is coming together, but I noticed that when I make the screen smaller, the images in the upper right hand corner slip down and I don't know why. It's one of those things that might not be a big deal, but it's indicative of my having done something wrong and I want to do it right.

Code is attached. Where am I blowing it that makes the images do that? See the attached screenshot to see what I'm talking about.

CSS:

body {
	font-family: Helvetica, Microsoft Sans Serif;
	font-size: 12px;
	color: #ffffff;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-color:#000000;
}

#top_graphics {
height:227px;
}

#left-container {
height:227px;
width:660px;
float:left;
background-image:url(images/header_01.jpg);
}

#top_filler {
height:227px;
background-image:url(images/header_02.jpg);
background-repeat: repeat-x;
}

#right-container {
height:227px;
width:833px;
float:right;
vertical-align:top;
}

#right_top {
clear:both;
width:833px;
height:108px;
}

#right_bottom {
width:833px;
height:119 px;
}

#top_carousel {
background-image:url(images/top_carousel_01.jpg);
float:left;
width:519px;
height:119px;
}

#bottom_carousel {
background-image:url(images/top_carousel_02.jpg);
float:right;
width:314px;
height:119px;
margin:0px;
}

#nav_bar {
height:54px;
background-image:url(images/menu_filler.jpg);
background-repeat: repeat-x;
}

#body_filler {
height:840px;
background-image:url(images/body_filler.jpg);
}

#tray_header {
margin-top:35px;
margin-left:auto;
margin-right:auto;
background-image:url(images/tray_header.jpg);
width:1574px;
height:20px;
}

#tray_center {
margin-left:auto;
margin-right:auto;
background-image:url(images/tray_center.jpg);
background-repeat:repeat-y;
width:1574px;
}

#tray_text {
margin-left:25px;
margin-right:25px;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 16px;
color: #ffffff;
}

#tray_footer {
margin-left:auto;
margin-right:auto;
background-image:url(images/tray_footer.png);
background-repeat:no-repeat;
width:1574px;
height:20px;
}

#links_background {
margin-left:auto;
margin-right:auto;
background-image:url(images/links_background.png);
background-repeat:no-repeat;
width:1574px;
height:53px;
}

#links_background a.home {
margin-left:7px;
display:inline-block; /**** important ****/
width:258px;
height:53px;
background-image:url(images/home.png);
}

#links_background a.home:hover {
margin-left:7px;
width:258px;
height:53px;
background-image:url(images/home_over.png);
}

#links_background a.about {
margin:0px;
display:inline-block; /**** important ****/
width:258px;
height:53px;
background-image:url(images/about.png);
}

#links_background a.about:hover {
margin:0px;
width:258px;
height:53px;
background-image:url(images/about_over.png);
}



#imagefadebox {
  display: inline; 
  position: absolute;  
  list-style-type: none; 
  list-style-position: inside; 
  list-style-image: none; 
  margin-top: 0px; 
  margin-right: 0px; 
  margin-bottom: 0px; 
   margin-left: -40px;
}

#portfolio { margin: 0px; }

Open in new window

problem.png
Avatar of Gary
Gary
Flag of Ireland image

Told you this in one of your other questions.
Because the image on the right added with the image on the left is wider than the screen.
You can get around it with absolute positioning of right-container so it's always to the right.
Will need to change order in which you add the containers so the left one is added last.
Should end with something like this

<div id="top_graphics">
	
	<div id="top_filler">
		<div id="right-container">
			<div id="right_top"><img border="0" src="images/header_03_01.jpg" usemap="#contact"></div>
			<div id="right_bottom">
				<div id="top_carousel"></div>
				<div id="bottom_carousel"></div>
			</div>
		</div>
	</div>
<div id="left-container"></div>
</div>

Open in new window


right-container needs - position:absolute;top:0
left-container needs - position:absolute;top:0


But you are also running into an issue that the phone/email etc & special offer will be hidden once you go down to 1000px, so it may be best to put them in a seperate image with a transparent background.
I would also make the left image have a transparent background, and put the background it currently has as a background image on the top_graphics div with the color black applied
Avatar of Bruce Gust

ASKER

So because of the way I have my page set up, since the left graphic is 660px and my right graphic is 833px, once my user's browser window is shrunk to something less that 1000px, I've got problems.

The way to get around that is to introduce an absolution positioning on both the left and right container so there's never any stacking, regardless of the size of the browser. Otherwise, the view is going to shift around.

Right?

Here are the changes I made:

CSS:

body {
	font-family: Helvetica, Microsoft Sans Serif;
	font-size: 12px;
	color: #ffffff;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-color:#000000;
}

#top_graphics {
height:227px;
}

#left-container {
position:absolute;top:0;
height:227px;
width:660px;
float:left;
background-image:url(images/header_01.jpg);
}

#top_filler {
height:227px;
background-image:url(images/header_02.jpg);
background-repeat: repeat-x;
}

#right-container {
position:absolute;top:0;
height:227px;
width:833px;
float:right;
vertical-align:top;
}

#right_top {
clear:both;
width:833px;
height:108px;
}

#right_bottom {
width:833px;
height:119 px;
}

#top_carousel {
background-image:url(images/top_carousel_01.jpg);
float:left;
width:519px;
height:119px;
}

#bottom_carousel {
background-image:url(images/top_carousel_02.jpg);
float:right;
width:314px;
height:119px;
margin:0px;
}

Open in new window


HTML:

<div id="top_graphics">
	<div id="top_filler">
		<div id="right-container">
			<div id="right_top"><IMG SRC="images/header_03_01.jpg" usemap="#contact" border="0"></div>
			<div id="right_bottom">
				<div id="top_carousel"></div>
				<div id="bottom_carousel"></div>
			</div>
		</div>
	</div>
	<div id="left-container"></div>
</div>

Open in new window


You can see what I'm looking at by heading out to http://www.brucegust.com/campaign. It seems as though I'm running into the phone/ email and all that being hidden right from the start. I'm going to start building the images you recommended, but what am I doing wrong right now that I've got what you see currently?
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Got it!

Let me explain what it is that you just had me do so I understand why it worked and not just that it worked.

Apart from establishing an absolute dynamic in terms of the placement of the left and right containers, you have a problem once your user's window gets smaller than the combined widths of the two divs. At that point, the images stack on top of one another. But when you define the exact position of the the divs, then they remain in position regardless of the user's browser?

Correct?
BTW: Now that the page is behaving, I can better appreciate what you were talking about as far as my email and portfolio link disappearing when you get smaller than 1000 px. Rather than do what you suggested, I think I'm going to go back and redesign the whole thing according to 1024 pixel standard. It might look great in Photoshop at 2000 px across, but I don't want the horizontal scroll bars happening every time someone comes out to my page.

Thanks!
Yes, since you are using a fluid layout it's no problem to absolute position left and right and they will never move, even if another image along the same horizontal overlaps them - the last image in the order will take the upper precedence.
If you want a quicker solution just move the email etc into a transparent image and give it an absolute postion either left or right, probably left so it never overlaps the left image no matter how small the browser is
Need to remove the sizing on #tray_center to remove the scrollbars as it is set at 1574px
Actually thinking about it, you could take it down to two images
The left image as you have now but increase the width to add in the email, special offer text/images.
The right image would just be the earth and texture you have - nothing else.

But heres the little tricky part, I'm assuming you have the images in layers.
Remove the background on the left image, leaving the honeycomb - so now you have a transparent background, layered with the honeycomb and the logo, email, special offer.
Apply a black background to the top_graphics div.
Gary, I dig what you did, but I need that email and stuff parked off to the right. In addition, I've got a little slide show going on now and that needs to be on the right hand side as well, so I think I'm good to go with what I've got save one thing:

If the user does minimize their screen, having the right hand side fold behind my logo is cool, but I'm lost as to how to ensure that my slideshow and that one container that's houses the lower half of my globe would fold underneath as well.

I'm going to go ahead and give you the points for this question, but if you would be willing to jump in on this last inquiry I have, that would be awesome!

Here's the question: https://www.experts-exchange.com/questions/28035873/I-need-to-get-this-container-to-slip-underneath-my-logo-How.html