Multiple fixed images with HTML?

Rowenna · 08-11-2011, 10:37 PM

I'm hoping someone can help me here as I'm completely stuck!

I want to have two seperate images.. maybe more that stay static with the page. That is to say that even when you're scrolling, they stay in view at the top of the page.
I have managed to do this to a certain degree but not quite there.

I want my logo to remain top left and another image to stay 82% 50% at the right. (Actually it's a column/divider which will stretch the page length).

I managed to make image 2 (the column) Do this but the top left image simply sits at the top of the page and doesn't "follow or stick as it were with the scroll.

Does anyone know the correct coding to make this happen so that two images are in different ares of the page but remain the whole time?

Any help would be greatly appreciated. Thank you.

Sammy12 · 08-11-2011, 10:58 PM

yeah, position: fixed;
http://www.w3schools.com/cssref/pr_class_position.asp

I think I answered this a few minutes ago in another post

Rowenna · 08-11-2011, 11:11 PM

Okay well I thought I'd post what I have so you can see what I mean. The image on the left isn't the one I'll use but it is an example of positioning. The bar on the right does what I want it to but the image top left won't move with the page.

<BODY BACKGROUND="http://i1108.photobucket.com/albums/h401/thislgbtlife/WebsiteBar.jpg" border="0" alt="Photobucket" BGCOLOR="#5D92B3">

<style type="text/css">

body {
background-repeat: no-repeat;
background-position:82% 50%;
}
</style>

<body background="http://i1108.photobucket.com/albums/h401/thislgbtlife/WebsiteBar.jpg" border="0" alt="Photobucket" bgproperties="fixed">

<div style="position: absolute; left: ...px; top: ...px;">

<background-repeat:no-repeat;>
<background-attachment:fixed;>
<img src="http://i1108.photobucket.com/albums/h401/thislgbtlife/ThinLizzyThumbnail.png" border="0" alt="Photobucket
">

</STYLE>

</head>

<body>
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
CONTENT HERE
</body>

</html>

Sammy12 · 08-11-2011, 11:14 PM

im sorry what?

1. wrap your code in [code][/code]
2. that code doesn't make sense

okay you need a doctype and an <html> and <head>. did you accidently leave those out or do you not know how?

Rowenna · 08-11-2011, 11:18 PM

No I am very new to this I'm afraid so I feel a little lost on this part of the process. Would it be possible for you to show me how the code would make sense.
I know it must be quite annoying for you but it would help me to be able to see it so that I can see where I've gone wrong.

Sammy12 · 08-11-2011, 11:21 PM

yeah sure, let me make a new document...I don't know exactly what layout your are looking for but i'll just recreate what you had. ill use transitional doctype since i think a strict or html5 would not be right for you.

Rowenna · 08-11-2011, 11:33 PM

Thank you, I really do appreciate this. I am enjoying the learning process so far and am hoping to improve.. soon!

Sammy12 · 08-11-2011, 11:41 PM

okay let's start your page out right. try to create your website based off of what I provided. A word of caution, using image URLs will slow your website and photobucket's load time. I would suggest downloading the image and uploading it to your server instead.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Title Goes Here</title>
		<style type="text/css">
			* { margin: 0; padding: 0; }
			
			body.page {
				font-family: Arial, sans-serif;
				font-size: 12px;
				color: #444;
				direction: ltr;
				width: 100%;
			}
			
			ol, ul { list-style: none; }
			a, img { border: 0; outline: none; }
				
			#static-panel { 
				position: fixed;
				left: 0%;
				top: 0%;
				width: 15%;
				background-color: #EEE;
			}
			
			#static-panel .main-image img {
				display: block;
				margin: 10px auto;
			}
			
			.content {
				height: 1600px;
				width: 85%;
				float: right;
				background-color: #DDD;
			}
		</style>
	</head>
	<body class="page">
		<div id="static-panel">
			<div class="main-image">
				<img src="http://i1108.photobucket.com/albums/h401/thislgbtlife/ThinLizzyThumbnail.png" class="Thin Lizzy Image"/>
			</div>
			<div class="main-content">
				
			</div>
		</div>
		<div id="home" class="content">
			
		</div>
	</body>
</html>

Rowenna · 08-11-2011, 11:50 PM

Okay, so now the top left image is doing what I want it to but my "image"/divider on the right is gone and there's a margin on the left. I basically want to do the same thing twice. I guess, in effect it's two static background images.

Sammy12 · 08-11-2011, 11:58 PM

negative, the image cannot be static, it has to be embedded into the script because this is a liquid layout (not yet).

try plugging this in a new document

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Title Goes Here</title>
		<style type="text/css">
			* { margin: 0; padding: 0; }
			
			body.page {
				font-family: Arial, sans-serif;
				font-size: 12px;
				color: #444;
				direction: ltr;
				width: 100%;
			}
			
			ol, ul { list-style: none; }
			a, img { border: 0; outline: none; }
				
			#static-panel { 
				position: fixed;
				left: 0%;
				top: 0%;
				width: 15%;
				background-color: #EEE;
				height: 100%;
			}
			
			#static-panel .main-image img {
				display: block;
				margin: 10px auto;
			}
			
			.content {
				height: 1600px;
				width: 85%;
				float: right;
				background-color: #DDD;
			}
			
			.content > * {
				height: 100%;
			}
			
			.left-panel {
				width: 65%;
				float: left;
				background-color: #CCC;
			}
			
			.right-panel {
				width: 35%;
				float: right;
				background-color: #BBB;
			}
		</style>
	</head>
	<body class="page">
		<div id="static-panel">
			<div class="main-image">
				<img src="http://i1108.photobucket.com/albums/h401/thislgbtlife/ThinLizzyThumbnail.png" class="Thin Lizzy Image"/>
			</div>
			<div class="main-content">
				
			</div>
		</div>
		<div id="home" class="content">
			<div class="left-panel">
				Left Panel Script
			</div>
			<div class="right-panel">
				Right Panel Script
			</div>
		</div>
	</body>
</html>

Rowenna · 08-12-2011, 12:06 AM

Ah, I'm with you now. Much clearer on the laying out which I was confusing myself with.
Thank you again. Can now make more progress first thing in the morning.

Sammy12 · 08-12-2011, 12:08 AM

here is the finished code. I used a negative margin so that the divider could be in px (static). only problem with 100% width website is that when you decrease the size of your browser, things are typically messed up (if you decrease codingforums you will see the result). Good luck on your website

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Title Goes Here</title>
		<style type="text/css">
			* { margin: 0; padding: 0; }
			
			body.page {
				font-family: Arial, sans-serif;
				font-size: 12px;
				color: #444;
				direction: ltr;
				width: 100%;
			}
			
			ol, ul { list-style: none; }
			a, img { border: 0; outline: none; }
				
			#static-panel { 
				position: fixed;
				left: 0%;
				top: 0%;
				width: 15%;
				background-color: #EEE;
				height: 100%;
			}
			
			#static-panel .main-image img {
				display: block;
				margin: 10px auto;
			}
			
			.content {
				height: 1600px;
				width: 85%;
				float: right;
				background-color: #DDD;
			}
			
			.content > * {
				height: 100%;
			}
			
			.left-panel {
				width: 65%;
				float: left;
				background-color: #CCC;
				margin: 0 -5px 0 auto;
			}
			
			.right-panel {
				width: 35%;
				float: right;
				background-color: #BBB;
			}
			
			#home.content .divider {
				width: 5px;
				background: url('http://i1108.photobucket.com/albums/h401/thislgbtlife/WebsiteBar.jpg');
				float: left;
			}
		</style>
	</head>
	<body class="page">
		<div id="static-panel">
			<div class="main-image">
				<img src="http://i1108.photobucket.com/albums/h401/thislgbtlife/ThinLizzyThumbnail.png" class="Thin Lizzy Image"/>
			</div>
			<div class="main-content">
				
			</div>
		</div>
		<div id="home" class="content">
			<div class="left-panel">
				Left Panel Script
			</div>
			<div class="divider"></div>
			<div class="right-panel">
				Right Panel Script
			</div>
		</div>
	</body>
</html>