Cloud Icon

[mwdewitt]

Hey, everyone. I have a simple question for you. I want to take this cloud icon and place it at the bottom of all my #main-col pages, but above the footer. The “div” #main-col is 818 pixels wide, so it should land 409 pixels smack dab in the middle. How would I go about doing this? Any suggestions? Also, I got my inspiration from Twitter. Twitter does this on each of their own personal pages with the Twitter logo. So, if you need some reference for what I am trying to do, that would be the place to start. All help is appreciated! Thank you in advance!

[joshuanhibbert]

Use CSS to define the dimensions of the image and then set margin: 0 auto; where 0 is the top and bottom margin (change accordingly) and auto is the left and right (using auto will center the element).

.cloud {

display: block;

height: 48px;

margin: 0 auto;

width: 34px;

}

[mwdewitt]

Thank you. How would I go about writing the HTML to add this new CSS code to the #main-col for all the pages on my website? Sorry. You are going to have to hold my hand on this one. I am not very skilled at coding. All I know is that you stated a “class” with your CSS code, but I do not know how to implement it on my website.

[joshuanhibbert]

Use the following HTML:

[mwdewitt]

I actually used…

…because the code you gave me did not work. Now, how do I get the cloud to go to the bottom of the #main-col on pages? Click here to see what I am talking about.

[joshuanhibbert]

@mwdewwitt I forgot to add display: block; to the CSS, I have fixed that now. In regards to placement, you currently have the image inside the #main-col element. Take it out and have it below (just above the div you are using to clear), then when you add content it will automatically get pushed down.

[TheDoc]

Go back to what Josh did, it’s a much better solution.

Check this out, you just needed to add display: block to it: http://jsfiddle.net/waPmk/

[TheDoc]

Ah, he beat me to it!

[mwdewitt]

Okay, I think I have it figured out. Phew! That took a lot more than I expected it to. Thanks, guys!

[joshuanhibbert]

@TheDoc Cheers! I should have just done up a fiddle.

[Author]

Posts