CSS Image Positioning

Status
Not open for further replies.

borderfox

New Member
I'm a css novice so bear with me..

I have a simple css layout - header/footer/3 columns. I have added an image to the left hand column. In order to position it right at the bottom of the column, I have done the following;

I added this to the end of the main.css page:


#image positioning {
.classonyourimg {position: absolute; bottom: 0;
}

In the xhtml page, I added this within the div that sets out the left column;

<img class="classonyourimg" src="images/logo.gif"/>


Its displaying - but not at the bottom of the column. How have I fudged it?
 

louie

New Member
did you try adding the image as a background for the left div with no repeat, positioned bottom, centre?
 

borderfox

New Member
did you try adding the image as a background for the left div with no repeat, positioned bottom, centre?
Cheers, that worked. However, I also need to get one line of text underneath it. Would that leave the .class as the only option?
 

louie

New Member
you can do this few ways:

1. add the text the image at the bottom
2. add a blank white area to the image
3. use nested divs
Code:
<div id='left'>
    <div id='bottom_image'>
    </div>
    <div id='text_under'>
    </div>
</div>
 

louie

New Member
try this:

Code:
<!-- Begin Left Column -->
  <div id="leftcolumn">
    <!-- the ul li foo here-->
     <div id='bg_image_left' style='clear:both; height:65px; background-image: url(images/sei_logo.gif); background-repeat: no-repeat; background-position: center bottom;'>
    </div>
    <div id='text_left_bottom'>
      <p>A Registered SEI Assessor </p>
    </div>
  </div>
 

borderfox

New Member
try this:

Code:
<!-- Begin Left Column -->
  <div id="leftcolumn">
    <!-- the ul li foo here-->
     <div id='bg_image_left' style='clear:both; height:65px; background-image: url(images/sei_logo.gif); background-repeat: no-repeat; background-position: center bottom;'>
    </div>
    <div id='text_left_bottom'>
      <p>A Registered SEI Assessor </p>
    </div>
  </div>
Thanks for your efforts louie. Unfortunately, that still leaves it stuck to the bottom of the javascript menu.
 

daviddoran

New Member
Changing:
Code:
#image positioning {
.classonyourimg {position: absolute; bottom: 0;
}

To:

Code:
.classonyourimg {position: absolute; bottom: 0px;}

Should do the trick I think, just invalid CSS in the first place I believe.
 

louie

New Member
Thanks for your efforts louie. Unfortunately, that still leaves it stuck to the bottom of the javascript menu.

Wasn't that the entire tread about, to put the image at the bottom?

The left div does not expand if any other divs like center or right do.
That only works on tables.
With divs you need to asign height but that will always be a pain unless you have a fix height for all divs.

Try option 1 I gave you above.
 

borderfox

New Member
Changing:
Code:
#image positioning {
.classonyourimg {position: absolute; bottom: 0;
}
To:

Code:
.classonyourimg {position: absolute; bottom: 0px;}
Should do the trick I think, just invalid CSS in the first place I believe.
@David: Leaves it right below the javascript nav.menu - but what I want to achieve is to get it down to the bottom of the fixed height left column.

louie said:
With divs you need to asign height but that will always be a pain unless you have a fix height for all divs.
The left column div has a fixed height of 370.
Will revert to the first option you mentioned if all else fails.
 

louie

New Member
There is other ways to do this by including the left div inside the center div and float it left.
Add the image as you did to the left div before, but this time to the center div with position bottom, left.

This way the image will always be at the bottom left, no matter how much the center scrolls down.

It's a little more complicated, but if you know how stacking divs works, anything can be achieved.
 

SlitheryImp

New Member
If you follow Davids instructions by changing:

#image positioning {
.classonyourimg {position: absolute; bottom: 0px;
}


to

.classonyourimg {position: absolute; bottom: 0px;}

after that all you have to do is add:

position: relative; to #leftcolumn
 

borderfox

New Member
Cheers Slithery. Seems to display alright on IE. With firefox, its rendered a bit further up the column than it should. Is that fixable?
 
Status
Not open for further replies.
Top