Adding image to bottom of page

Get Started
1

Hi there,

Here’s the site:

www.pokerdrawings.com

I want to add an image of a tree to the bottom left of the page. The problem is, depending on where I place it inside the header, it does one of 3 things:

a) it doesn’t show up

b) it shows up, but when I scroll down on the page, the tree moves up (whereas I want it to stay fixed in the bottom left EXACTLY like the image in the top left)

c) it shows up, and when I make my chrome window smaller, the image stays the same size and therefor blocks a bunch of the content.

What CSS do I need to add so that this image works exactly like the image in the top left?

Currently, I only have this:

#treeimg { position:absolute; left:10px; bottom:55px; z-index: 5 }

Do I need to create separate div for this?

Here is a bunch of header code, sorry. Just not sure at all where to put it.

<body class="clearfix">
	
	<div id="main-leftarea">
		<div class="topbg"></div>
		
		<a href="<?php bloginfo('url'); ?>">
			<img id="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="logo" />
		</a>
		<img id="treeimg" src="http://www.pokerdrawings.com/wp-content/uploads/2011/02/tree.png">
		<div id="glow"></div>
		
		<?php $home = is_home(); ?>
		
		<div id="menu">
			<ul id="main-menu">
				<li><a href="<?php bloginfo('url'); ?>/#home" class="active<?php if (!$home) echo(' external'); ?>"><?php _e('Home','Glider') ?></a></li>
				
				<?php
				$pagesContent = array();
				$i=0;
				
				$home_pages_num = count(get_option('glider_home_pages'));
											
				$arr = array( 'post_type' => 'page',
							'orderby' => 'menu_order',
							'order' => 'ASC',
							'post__in' => get_option('glider_home_pages'),
							'showposts' => $home_pages_num );
			
				query_posts($arr); ?>
				<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
					<?php $hash = get_the_title();
					$hash = strtolower(preg_replace('/ /','_', $hash)); ?>
					
					<?php if ($i!=0) { ?>
						<li><a href="<?php bloginfo('url'); ?>/#<?php echo $hash; ?>"<?php if (!$home) echo(' class="external"'); ?>><?php the_title(); ?></a></li>
					<?php } ?>
					
					<?php $pagesContent[$i]['hash'] = $hash;
					global $more; $more=1;
					$pagesContent[$i]['content'] = get_the_content();
					$pagesContent[$i]['content'] = apply_filters('the_content', $pagesContent[$i]['content']);;
					$pagesContent[$i]['title'] = get_the_title();
					
					$thumb = '';
					$width = 173;
					$height = 173;
					$classtext = '';
					$titletext = get_the_title();
												
					$thumbnail = get_thumbnail($width,$height,$classtext,$titletext,$titletext);
					
					$pagesContent[$i]['thumbnail'] = $thumbnail["thumb"];
					
					$pagesContent[$i]['use_timthumb'] = $thumbnail["use_timthumb"];
										
					$pagesContent[$i]['portfolio_categories'] = get_post_meta($post->ID,'et_portfolio_categories',true) ? get_post_meta($post->ID,'et_portfolio_categories',true) : '';
										
					$pagesContent[$i]['portfolio'] = ( (bool) get_post_meta($post->ID,'et_portfolio_page',true) ) ? true : false;
					
					$i++; ?>
				<?php endwhile; endif; wp_reset_query(); ?>
				
				<li><a href="<?php echo get_category_link(get_cat_ID(get_option('glider_blog_cat'))); ?>" class="external"><?php _e('Blog','Glider'); ?></a></li>
				
			</ul>

		</div> <!-- #main-menu -->

				
		<span id="active-arrow"></span>	
		
		<div id="right-border"></div>

	</div>

</div>

<!-- #main-leftarea -->

Any help greatly appreciated. Let me know if I need to clarify.

Thanks

2

Hi, have you gotten anywhere with this? The link you have posted seems to redirect elsewhere?!

If you want your #treeimg to remain fixed on the page and not move when the page scrolls you need to position:fixed rather than absolute. You should set the z-index to 0 or 1 to have it behind other elements.

If you are wanting the image to resize as well when the viewport changes then you could perhaps specify the #treeimg dimensions as percentages.

3

great, thanks

4

Sorry to come back to this so late.

Here is the new link:

www.myvancouverpsychologist.ca

I’ve thrown something together, and it looks okay, but I’d rather learn the proper way to do it.

Right now I have an image at the bottom left with contact information.

Here’s the code I’m using:

#treeimg { position:fixed; left:10px; bottom:55px; z-index: 5; width: 12%; height: 6%; }

and

<img id="treeimg" src="http://myvancouverpsychologist.ca/images/callme.png">

Totally amateur, I know. I’m not really sure the proper way to do this, any tips? I don’t really understand how I can make it so that I can leave height and width both at 100%.

Or if I should even have an image at all instead of just basic text?

Can anyone help me out?

Thanks

5

I’m not too sure what your goal is. You might not even be able to do exactly what you want. ie. For it to play nice at all resolutions. HTML/CSS isn’t a perfect page layout system.

Like you say, it does work OK. The problem at the moment seems to be that your contact number (#treeimg) resizes as the browser window resizes. If you keep #treeimg fixed width (195x61) it starts to overlap the menu and main content area at small resolutions. You could perhaps mark it up so that #treeimg moves off screen to the left as the resolution decreases (like the photo), but it is still going to be obscured and probably requires some changes to the markup. The photo doesn’t move with respect to the viewport, but #treeimg does.

How do you envisage this working?

There is nothing terribly amateur with what you have so far, except that #treeimg doesn’t reflect its content (a phone number). If it was text it would be more accessible, but the image looks good. You should use appropriate alt text on the image in this case.

---- EDIT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Your DOCTYPE is mangled.

6

you will need to use javascript to make it do this.

7

Ok so I currently have a block of text at the bottom left of the page:

www.myvancouverpsychologist.com

I just want the text to act exactly like the photo at the top left. right now, when I resize my browser, the text gets all funky. How would I get it to move off screen to the left?

thanks!!