Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Multiple fixed images with HTML?

    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.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    yeah, position: fixed;
    http://www.w3schools.com/cssref/pr_class_position.asp

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

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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><P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    CONTENT HERE<P>
    </body>

    </html>

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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?

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you, I really do appreciate this. I am enjoying the learning process so far and am hoping to improve.. soon!

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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>
    Last edited by Sammy12; 08-12-2011 at 12:44 AM.

  • #9
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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>
    Last edited by Sammy12; 08-12-2011 at 01:03 AM.

  • Users who have thanked Sammy12 for this post:

    Rowenna (08-12-2011)

  • #11
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •