|
CSS - Position Image At Bottom Of Page
Hello
Trying to position an image at the bottom of my webpage which: a) will always stay at the bottom of the page regardless of length (page length not window height so the position: fixed is not quite what I'm looking for) b) will not slide on top or under divs on my page (what position: absolute does) but instead stop moving up once it reaches content above it and the scrollbar appears (as tables do) c) I can layer divs on top of so far this is as close as I've got: in the html <!-- container for site info --> <div id="container"> <!-- other content in divs here --> <!-- other content in divs here --> <!-- footer for bottom image --> <div id="footer"> <!-- footer details, who / when / copyright --> <div id="footerdetails"> details here </div> <!-- footer details, who / when / copyright --> </div> <!-- footer for bottom image --> </div> and in the css #container { position: absolute; top: 0px; width: 750px; height: 100%; } #footer { position: absolute; bottom: 0px; height: 230px; width: 750px; background-image: url(../images/footer.jpg); background-repeat: no-repeat; background-position: bottom left; } #footerdetails { position: relative; margin: 0px 0px 0px 0px; padding: 9px 0px 10px 70px; top: 195px; width: 680px; text-align: left; voice-family: "\"}\""; voice-family:inherit; } I know I'm sort of answering my question above (tables) but I've seen this done with divs, just can't get the right combination of css - anyone have any ideas on this? Thanks in advnace. a+ gar Similar TutorialsI want to be able to position an image at the very top of a cell/div/container/whatever and one at the very bottom. It's too bad there is no float:top and float:bottom. Something like this [HTML] <div style="background-color: red"> <img src="images/top.jpg" style="?" /> <img src="iamges/bottom.jpg" style="?" /> </div> [/HTML] I have a logo which I would like always positioned at the bottom of a div. Does anyone know a way of achieving this? http://www.willisemail.co.uk/skill/ The logo is in the bottom right hand corner. Cheers Jemes /* Site Holder Start */ #box { width: 750px; margin: 0px auto; padding: 0px; text-align: left; border: 1px solid #979696; background-color: #FFFFFF; background-image:url(../Images/mid.jpg); } /* Site Holder End */ /* Site Holder Start */ #box2 { margin-left: 49px; margin-right: 50px; margin-top: 10px; margin-bottom: 10px; padding: 0px; text-align: left; background: #ccc url(../images/img_MainWhiteBg.jpg) repeat-y 50% 0; } /* Site Holder End */ /* Content Start */ #content { width: 461px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /* Content Start */ #content2 { margin-left: 14px; margin-right: 15px; margin-top: 0px; margin-bottom:0px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /*Right Menu Start*/ #right { width: 178px; padding:0px; float:right; background-color:#FFF; overflow: hidden; } #right2 { margin-top:0px; margin-left:14px; margin-right:14px; padding:0px; background-color:#FFF; overflow: hidden; } .RightMenu { margin-top:10px; padding: 0px; font-size: 13px; color: #6884AE; font-weight: bold; } .RightMenu ul { padding: 0px; margin: 0px; list-style-type:none; } .RightMenu li { background-image: url(../images/img_Li_Image.jpg); background-repeat: no-repeat; background-position: 0em; padding-top: 0px; padding-bottom: 0px; padding-right: 1px; padding-left: 14px; margin-top:5px; } .imgTitle { text-align:center; margin-top: 13px; margin-left:0px; margin-right:0px; } /* Right2 Menu End */ .imgRight { text-align:center; margin-top: 10px; margin-left:0px; margin-right:0px; border: 1px solid #979696; } .imgMain { text-align:center; margin-top:10px; border: 1px solid #979696; } .Menu { margin-top:10px; padding: 0px; } .Menu ul { padding: 0px; margin:0px; list-style-type:none; } .Menu li { display: inline; list-style-type:none; padding-top: 0px; padding-bottom: 0px; padding-right: 1px; padding-left: 0px; margin:0px; } .Main { padding:5px; border: 1px solid #979696; margin-top:8px; margin-bottom:10px; } .Cove{ margin-top:15px; text-align:center; } Greetings! I am trying to position a transparent gif at the bottom of a page, repeating on the x axis, so that text scrolls behind it. I have the gif fixed at the bottom of the page, but the text is still over top of it. I think I will need to create an element, position it at the bottom of the page, use the transparent gif for the background, and give it a z-index higher than zero, right? If so, I can't get it it to work! What I am currently doing: Code:
body{
background:transparent url('/flames.gif') center bottom fixed repeat-x;
}
Can anyone suggest how I make sure the green 'Quick Contact' graphic/box always sit at the bottom of the right column (immediately above the Footer), no matter how much text there is in the lefthand column on this web page: www.ultimate-system.com/index.html , using css? The stylesheet I'm using is found at www.ultimate-system.com/style.css. Many thanks i am trying to use CSS to position an embeded .swf rotating cube so that it is always at the bottom of a webpage and is unaffected by scrolling. i've managed to make it start out at the bottom but it always scrolls up with the scroll bar. i realize ie6 has trouble with fixed postioning, so i was wondering if anyone had any ideas on how to get around it without using javascript? here's my page: http://www.myspace.com/marx0i0 and here are some examples of what im trying to do: http://bonrouge.com/test/fixed.htm http://www.howtocreate.co.uk/fixedPosition.html finally, here is my code: <embed allowScriptAccess="never" allowNetworking="internal" SRC="http://www.geocities.com/marx0i0/untitled.swf" HEIGHT=200 WIDTH=200 STYLE= "position: absolute; center:0px; bottom: 0px; overflow: auto;" WMODE= "transparent"> thanks very much for any help! Hi all. This is my first time posting ever so please be gentle. On my website I have background image with stripes and grey. I want it to go all the way down the bottom of the page. Currently the background image stops where the content ends. I have tried height:100%; and that solves the problem, but creates another if the user has a smaller browser window. Can someone please help me out? Page URL: leannemarie.com/testing_index.php CSS: leannemarie.com/css/testing_main.css Thanks LeAnne I'm trying to position a DIV on the right bottom side of the page using the following code: position:absolute; right:0; bottom:0; Unfortunately when I scroll down the page, the div remains in it original place :-( I want a footer that's at the bottom of the page. If there isn't much content that means it should be at the bottom of the screen and there will be no scrollbars. If there is tons of content then it should show after the content and only be visible if the user scrolls to the bottom of the page. This code shows what I'm after and the problem I'm hitting. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>title</title>
<style type="text/css">
body, html {margin: 0; padding: 0; height: 100%}
#top {background: red; position: absolute; top: 0px; left: 0px; height: 50px; right: 0px;}
#content {background: orange; margin: 50px 200px;}
#leftNav {position: absolute; left: 0px; top: 50px; bottom: 50px; width: 200px; background: yellow}
#rightNav {position: absolute; right: 0px; top: 50px; bottom: 50px; width: 200px; background: cyan}
#bottom {background:green; position: absolute; bottom: 0px; left: 0px; height: 50px; right: 0px;}
</style>
</head>
<body>
<div id="content">
Content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="leftNav">
LeftCol
</div>
<div id="rightNav">
rightNav
</div>
<div id="top">
I'm at the top.
</div>
<div id="bottom">
I'm at the bottom.
</div>
</body>
</html>
Appreciate your thoughts. Hi guys, I am attempting to create a rather complex background, which needs to 'stretch' in a certain place. Here is my code; which currently works flawlessly in Firefox: CSS Code: body {
margin: 0px; padding: 0px; height: 100%; background: #AAAAAA;
}
#cont {
position: relative; margin: 0px auto; top: 20px; width: 760px; height: 800px;
}
#titlet {
position: absolute; top: 0px; left: 0px; width: 742px; height: 9px; background: url(img/titlet.png);
}
#titletr {
position: absolute; top: 0px; left: 742px; width: 17px; height: 9px; background: url(img/titletr.png);
}
#title {
position: absolute; top: 9px; left: 0px; width: 742px; height: 164px; background: url(img/title.jpg);
}
#titler {
position: absolute; top: 9px; left: 742px; width: 17px; height: 164px; background: url(img/titler.png);
}
#bgnd {
position: absolute; top: 173px; bottom: 336px; left: 0px; width: 742px; background: url(img/bgnd.jpg);
}
#bgndr {
position: absolute; top: 173px; bottom: 336px; left: 742px; width: 17px; background: url(img/bgndr.png);
}
#clouds {
position: absolute; left: 0px; bottom: 17px; width: 742px; height: 319px; background: url(img/clouds.jpg);
}
#cloudr {
position: absolute; left: 742px; bottom: 17px; width: 17px; height: 319px; background: url(img/cloudsr.png);
}
#cloudb {
position: absolute; left: 0px; bottom: 0px; width: 742px; height: 17px; background: url(img/cloudsb.png) no-repeat;
}
#cloudbr {
position: absolute; left: 742px; bottom: 0px; width: 17px; height: 17px; background: url(img/cloudsbr.png) no-repeat;
}
HTML Code: <body> <div id="cont"> <div id="titlet"></div><div id="titletr"></div> <div id="title"></div><div id="titler"></div> <div id="bgnd"></div><div id="bgndr"></div> <div id="clouds"></div><div id="cloudr"></div> <div id="cloudb"></div><div id="cloudbr"></div> </div> </body> The problem relates to the 'bgnd' and 'bgndr' values. I have combined 'top' and 'bottom' to have the backgrounds tile in exactly the right place between the other div elements. Is there a hack that can allow me to use this method in IE? Ok I have two layers positioned on the bottom left and right of my page as you can see here.. The problem is when I resize the page the two layers move up with it and then if I use the scroll wheel they dont go back to the bottom and they stay where they are. Anyone know how I can get it so if I were to resize the page the two elements would stay at the bottom. I tried that footer demo that everyone posts the link for but I couldnt get it to work for the case I have. Anyone have any ideas? Thanks , appreciate any help you can give me. Hi, I'm trying to do something that is simple with table cells but which I'm finding difficult using CSS. Basically I have a container div that is 400px height. I want to position 3 divs in a row (float: left) at the bottom of that div and put an image in each of them. So, in short... <div id="outer"> <div id="inner1"><img src="x.jpg" /></div> <div id="inner2"><img src="y.jpg" /></div> <div id="inner3"><img src="z.jpg" /></div> </div> ...where the three images are bottom aligned. I want to have the images in their own div containers so that I can give each of their boxes 33% of the screen width and set apdding if required. No doubt I'm approaching this the wrong way. Can anyone help? Thanks, Pat I am presently creating a website for a friend of mine who's a model and wants her own website, I have decided to make it using xhtml and css. The problem that I am having is that I would like to have a footer which is at the very end of the page no matter how much content there is to the page. I have uploaded the code to here When this page is viewed in IE the footer is displayed at the bottom of the screen although the content carries on after the footer. When this page is viewed in Firefox the footer is displayed just below the bottom of the screen although again the content carries on after the footer. I have Googled this and tried out a couple of the suggested ways of getting the page to work and it just doesn't appear to want to work, so I am obviously doing something wrong :s Does anyone have any idea how I would be able to get the footer to stay at the very bottom of the webpage? Also if you look at the website you will see that the navigation sidebar only goes down as far as its content, I would prefer it if the sidebar went down to the footer (which will hopefully be at the bottom of the webpage). Again does anyone have any idea how I would be able to get it to do this. Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's Hello. So I have this situation (on the right): h t t p : / / img339.imageshack.us/img339/6958/1stb.png and when I change my browser resolution, I get this (on the right): h t t p : / / img35.imageshack.us/img35/3892/2ndhw.png Is it possible to do that the image wouldn't change the place on a screen even you when change the resolution of the browser? And yes, the image must be behind the text. Thanks in advance for any suggestions and tips. Hey guys. You can run an image, a border, text, whatever you want off the top of the page, but can you do it with the bottom of the page. Code:
.top {
position: relative;
left: 0px;
top: -75px;
}
That will of course run an image off the top of the page, but Code:
.bottom {
position: relative;
left: 0px;
bottom: -250px;
}
this line of code will simply but the image relative to the top image and it's completely visible, meaning the user can view the entire image simply by scrolling down. I'm placing my <id>'s in tables right now, but I'm open to whatever. I simply want an image consistently, running off the top of the page and the bottom of the page at all times. Any ideas? Thanks in advance. Does anybody know how to put one image on TOP of another? I'm using CSS, and was wondering why my image wasn't showing up....Turns out it was underneath another image, but it needs to be on top! Any clue how to fix it? Thanks! |
|||||||