Programming Help

Web Development



What's Here?

  • Members: 149,581
  • Replies: 506,709
  • Topics: 79,845
  • Snippets: 2,666
  • Tutorials: 706
  • Total Online: 1,756
  • Members: 90
  • Guests: 1,666

Welcome to Dream.In.Code
Become an Expert!

Join 149,581 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,756 people online right now. Registration is fast and FREE... Join Now!




Bottom align an image in a Div

 
 Reply to this topicStart new topic

Bottom align an image in a Div, Is it me or...
kyrotomia
9 Oct, 2007 - 03:18 PM
Post #1

D.I.C Head
**

Joined: 5 May, 2007
Posts: 50



Thanked: 1 times
My Contributions
HI,
I'm trying to bottom align an image into a div. I tried several css style on my div and nothing did the job yet. Here is the code I am currently using :

Css
CODE

#test11{
    background-image:url(images/index_16.gif);
    background-repeat:no-repeat;
    vertical-align: bottom;
    width:7px;
    float: left;}

.Middle{height:750px;}    


In my html page :
CODE
  
<div id="test11" class="Middle"><img src="images/Content_bas_ver.gif"></div>


If this can help , I am using a HTML 4.01 Transitional doctype. Also note that the problem both happen in Firefox and Windows Internet explorer.

Thank you alot for any help!
User is offlineProfile CardPM
+Quote Post

fuzzyjello
RE: Bottom Align An Image In A Div
16 Oct, 2007 - 06:24 PM
Post #2

New D.I.C Head
*

Joined: 13 Apr, 2007
Posts: 19


My Contributions
QUOTE(kyrotomia @ 9 Oct, 2007 - 04:18 PM) *


CODE

#test11{
    background-image:url(images/index_16.gif);
    background-repeat:no-repeat;
    vertical-align: bottom;
    width:7px;
    float: left;}

.Middle{height:750px;}    




Try,

CODE

#test11 {

background: url(images/index_16.gif) bottom;
background-repeat:no-repeat;
vertical-align: bottom;
width:7px;
float: left;

}

Does this solve your problem?
User is offlineProfile CardPM
+Quote Post

kyrotomia
RE: Bottom Align An Image In A Div
16 Oct, 2007 - 06:33 PM
Post #3

D.I.C Head
**

Joined: 5 May, 2007
Posts: 50



Thanked: 1 times
My Contributions
I'd like to tell you it did help.. it didn't.

I still thank you. I am now trying to slice all the site differently to get around this problem...
User is offlineProfile CardPM
+Quote Post

fuzzyjello
RE: Bottom Align An Image In A Div
16 Oct, 2007 - 06:39 PM
Post #4

New D.I.C Head
*

Joined: 13 Apr, 2007
Posts: 19


My Contributions
QUOTE(kyrotomia @ 16 Oct, 2007 - 07:33 PM) *

I'd like to tell you it did help.. it didn't.

I still thank you. I am now trying to slice all the site differently to get around this problem...


I apologize, I read your initial code wrong. You're trying to align the image in the div to the bottom, not the background image. Unfortunately, you may have to apply a style to the image in the div.

Ex.

CODE


<img src="images/Content_bas_ver.gif" style="padding-top: 500px;" />



Try playing around with the padding on the image.
User is offlineProfile CardPM
+Quote Post

kyrotomia
RE: Bottom Align An Image In A Div
17 Oct, 2007 - 04:59 AM
Post #5

D.I.C Head
**

Joined: 5 May, 2007
Posts: 50



Thanked: 1 times
My Contributions
Thank you a lot fuzzyjello.

This did the trick. However, the image isn't displayed at the same position in IE and Firefox, while Firefox would show the image in the perfect spot, IE shows it a little more towards the bottom. I though pixel were the same size for everyone blink.gif ahahha.

Anyways, Thank you again and I'll sure remember that little trick. Any idea on how I could set different size for IE / Firefox.
User is offlineProfile CardPM
+Quote Post

fuzzyjello
RE: Bottom Align An Image In A Div
17 Oct, 2007 - 05:24 AM
Post #6

New D.I.C Head
*

Joined: 13 Apr, 2007
Posts: 19


My Contributions
IE may be putting a standard margin on your image. Make sure your margins and paddings are set to 0 when possible. But try this for your image:

CODE

<img src="images/Content_bas_ver.gif" style="padding: 500px 0px 0px 0px; margin: 0px;" />
User is offlineProfile CardPM
+Quote Post

axel
RE: Bottom Align An Image In A Div
17 Oct, 2007 - 12:19 PM
Post #7

Bug Juice Doesn't Come in a Jar
Group Icon

Joined: 31 Dec, 2006
Posts: 1,897


Dream Kudos: 100
My Contributions
Yeah I pretty much always set my margins and padding to 0, unless of course I need to be something else. IE tends to goof things up if you don't.
User is offlineProfile CardPM
+Quote Post

skyhawk133
RE: Bottom Align An Image In A Div
17 Oct, 2007 - 12:21 PM
Post #8

Head DIC Head
Group Icon

Joined: 17 Mar, 2001
Posts: 15,262



Thanked: 61 times
Dream Kudos: 1650
Expert In: Web Development

My Contributions
Try bottom: 0px;

Not sure it works in all browsers though it should...
User is offlineProfile CardPM
+Quote Post

kyrotomia
RE: Bottom Align An Image In A Div
17 Oct, 2007 - 03:52 PM
Post #9

D.I.C Head
**

Joined: 5 May, 2007
Posts: 50



Thanked: 1 times
My Contributions
Hi guys. I tried your suggestions but none worked ;
The padding thing did not change a thing , i would need 349 px for IE and 370px for firefox.

As for the bottom:0px; .... I am not quite sure what it is supposed to do... the layout didn't even change.

Thank you again guys.
User is offlineProfile CardPM
+Quote Post

axel
RE: Bottom Align An Image In A Div
18 Oct, 2007 - 03:49 PM
Post #10

Bug Juice Doesn't Come in a Jar
Group Icon

Joined: 31 Dec, 2006
Posts: 1,897


Dream Kudos: 100
My Contributions
Could you post the URL so I can see it?
User is offlineProfile CardPM
+Quote Post

mocker
RE: Bottom Align An Image In A Div
18 Oct, 2007 - 07:09 PM
Post #11

D.I.C Regular
Group Icon

Joined: 14 Oct, 2007
Posts: 289



Thanked: 17 times
Dream Kudos: 25
My Contributions
It would help to have the div and contents of what you are applying the style to. From what you posted, all that can be figured out is that "something" is set to test11. Whether this is the image, a <div> or something else is required before figuring out how the style is being applied.

the vertical-align attribute is applied to a container class, so a <div> or <td>. If you have something else inside that container class modifying the height or position it will throw it off, including add padding to something that is already aligned.

bottom: 0px; sets an element 0px from the bottom. Using the left,right,top,bottom settings requires the you set the position to absolute. See this example:
http://www.w3schools.com/css/tryit.asp?fil...position_bottom
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/7/09 10:42PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month