|
CSS - Position Fixed Img At Bottom Of Page, So Text Scrolls Behind
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;
}
Similar TutorialsI'm working on a site with a div element with a fixed position, some 800 pixels from the left. The site is optimized for 1024x768. However, if a user with a resolution of 800x600 views the page, this div element will be missing, and the user won't be able to scroll over to see it. Is there some way I can get around this? One idea would be to align the div on the right instead of the left, but I don't want a lot of whitespace between my content (on the left) and my div (on the right). I was hoping that I could specify a parent element with a relative position, and that position: fixed would reference the position of the parent element, but that only seems to work when the child div element is position:absolute, not position:fixed. Thanks for any insight. 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 How can I fix a Div a set distance below another Div without a set height? 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. I could do this using Frames but I absolutely loathe them so I need to do it in CSS I have an A-Z across the top of the page which stays there while the results scroll below. Unfortunately, while I can do basic CSS, complicated stuff like this is way beyond me! Help would be most appreciated! ok my site works perfect in ffox but when i load it in ie the fixed position dose not work :'( why not?, if i go back in firefox it will i am trying to do this example here w3schools.c0m/css/tryit.asp?filename=trycss_position_fixed the o, in .com has been changed to 0 so i could post. sorry the text " Some more text " I wish to had dead center on the right side of the page, not near the top like that, mainly, i wish to put two more lines of text just under it as well, all being dead center of the page, on the right, i cannot figure it out, any help please? Since position:fixed does not work in IE, are there any other ways to achieve the fixed effect, without using javascript? I know there is a well documented solution for this but as I can't remember what is causing it, it's a bit hard to search for it. Basically I want to fix my footer to the bottom of the page. As soon as I set it's position to fixed it works in Firefox but in IE the footer shoots back up to the top of the page. If I set the position to absolute then the footer starts at the bottom but the page scrolls with the page content. Sorry for the large amounts of CSS / HTML. PHP Code: <style type="text/css"> <!-- html { height:100%; margin:0; padding:0; } body { margin:0; padding:0; height:100%; background:#FFF; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background: url(images/layout/top_back.jpg); background-repeat: repeat-x; } #wrap { position:relative; background-image: url(images/layout/top_section.jpg); background-repeat:no-repeat; min-height:100%; } * html #wrap { height:100% } * html #inner_holder { height:100% } #footer_hold_all { position: absolute; bottom: 0; width: 100%; height: 134px; } #footer_hold_top { position: relative; top: 0; width: 100%; height: 109px; background: url(images/layout/footer_image_back109.png); } #footer_hold_bottom { position: relative; top: 0; width: 100%; height: 25px; background: url(images/layout/lowernav_background.jpg); } #footer_top { background: url(images/layout/illustration.png); position: relative; top: 0; left: 0; width: 760px; height: 109px; } #footer_bottom { line-height: 25px; text-indent: 5px; text-align: left; vertical-align: middle; } #footer_bottom a{ color: #435769; text-decoration:none; font-weight:bold; font-size:1.0em } #footer_bottom a:hover{ color: #E2B69D; } .bold { font-weight: bold; } #os_logo { width: 196px; height: 78px; position: absolute; top: 0; left: 0; float: left; } #os_search { width: 196px; position: absolute; top: 10px; right: 0; float: right; } #os_search label { display: block; } #os_search form { display: inline; } #inner_holder { width: 100%; position: absolute; top: 100px; } #left { float:left; width:200px; text-align:center; border: 1px dashed green; } #main { position:relative; margin-left:200px; border: 1px dashed red; } #right { float:right; width:200px; text-align:center; border: 1px dashed blue; } #content { padding:5px; margin-right:200px; text-align:left; border: 1px dashed purple; } --> </style> DIV Layout: PHP Code: <body> <div id="wrap"> <div id="inner_holder"> <div id="left"> left </div> <div id="main"> <div id="right"> right </div> <div id="content"> </div> </div> </div> <div id="os_logo"> <img src="images/layout/xxx_logo.jpg" alt="Logo" width="196" height="78" /> </div> <div id="os_search"> <form action="searchsite.php" method="post" name="search"> <label for="search">Search Site</label> <input name="search" id="search" type="text" size="20" /> <input name="submit" type="submit" value="GO" /> </form> </div> <div id="footer_hold_all"> <div id="footer_hold_top"> <div id="footer_top"></div> </div> <div id="footer_hold_bottom"> <div id="footer_bottom" class="bold"> <a href="sitemap.php">Sitemap</a> | <a href="accessibility.php">Accessibility Options</a> | <a href="http://validator.w3.org/check?uri=referer;verbose=1">XHTML Valid</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS Valid</a> </div> </div> </div> </div> </body> The layout in question: Page: http://www.westeros.org/ASoWS/index-Frames.html CSS (general): http://www.westeros.org/ASoWS/ASoWS-All-Frames.css CSS (IE): http://www.westeros.org/ASoWS/ASoWS-IE.css In Mozilla the above CSS 'frames' layout is mostly working, save that I can't figure out a way to hide the text above the header and below the footer. Is that at all doable with this layout? In IE, however, the header, footer and sidecolumns are all over the place. I have another CSS 'frames' layout (see the links below), which does work in IE, and part of the problem with the new layout seems to be that IE really doesn't like having left and right values specified for the header and footer. However, without those, I don't know how to make sure that they start and stop 10px away from the edge. Any workarounds for that that anyone can think of? Old CSS 'frames' layout (does work in IE): Page: http://www.westeros.org/BoD/ CSS (general): http://www.westeros.org/BoD/BoD-All.css CSS (IE): http://www.westeros.org/BoD/BoD-IE.css Please look at this URL http://www.finance.samif.com/Koelkast When I select any check box on left column then one pop up is display on screen. This image shows properly in Fire fox. When I scroll up down then image is fixed in fire fox. Vertically and Horizontal But when I used IE and select check box on bottom left menu then I can't see pop up image. Because this is not display vertically middle or it is not fixed. Please give me idea or suggestion how I can fix it. Thanks I have a scrolling div on a page. Within the div is a tabular form. I want to place a button that is has a fixed position within the div. So if the HTML code is like this: Code: <div id="div1"> <div id="buttonID"></div> <form> <table> <tr> <td> </td> </tr> </table> <form> </div> The css I thought would achieve what I wanted is Code:
#div1{
div1 CSS goes here.
}
#div1 #buttonID{
position: fixed;
top: 300px;
left: 20px;
}
However, while the button is fixed, its position is fixed in relation to the page, not within the div which is annoying. Can anyone point out what I'm doing wrong here? Can a sumbit button for a form be located outside the form or does it matter? Hi all, I've got a site which you have to scroll horizontally to view the content (different eh?), but I want the menu to stay in a fixed position on the left side of the screen. Can anyone tell me if/how I can do this? Cheers! I'll start with my code. code:--------------------------------------------------------------------------------<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body { height: 100%; width: 100%; overflow: hidden; margin: 0px; padding: 0px; } #menu { position: absolute; display:block; bottom:0px; left:0px; width:100%; border:1px solid #002E80; background-color: #E5EFFF; } #content{ padding: 5px; width: 100%; height: 100%; overflow: auto; z-index: 100; } </style> </head> <body> <div id="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> <div id="menu"> <table width="100%" border="0"> <tr> <td><div align="left"> <input type="button" name="prevBut" value="<< Prev" /> </div></td> <td><div align="right"> <input type="button" name="nextBut" value="Next >>" /> </div></td> </tr> </table> </div> </body> </html> -------------------------------------------------------------------------------- The problem falls on the positioning of the scrollbar. I need it to be over my bottom menu. Right now it falls below the menu. Why is this? Hi! My first post I got a problem with my sticky footer as you can see the footer is fine, fixed to the bottom of the page but I got an unnecessary scroll The site: www dot flyttamig dot com think the problem is that i put 100% height on html html, body { margin:0; padding:0; height:100%; } Can you guys help me get rid of this scroll Thanks Hi All, I have been working on this validated site - http://www.edgeandbarrett.com/zub/test2/logo.htm and it works on all browsers, mac and pc, all apart from IE7 (and 6 of course with fixed). When viewing it, on ie7, it seems the padding is not being read, so the fixed navigation, is overlapping my content. This is the css - Code:
* {
margin : 0;
padding : 0;
}
img {
display : block;
border : 0;
}
body {
background-color : #eeeeee;
font-family : helvetica, arial, sans-serif;
line-height : 18px;
}
hr, .hide {
position : absolute;
top : 0;
left : 30px;
}
#site {
width : 870px;
margin : auto;
}
#header {
position : fixed;
display : inline;
height : 100%;
width : 200px;
top : 30px;
background : #eeeeee;
z-index : 4;
}
#logo {
position : relative;
top : 10px;
z-index : 5;
}
.picbar {
position : relative;
padding-top : 5px;
padding-bottom : 5px;
margin-top : 22px;
margin-bottom : 12px;
border-top : 1px solid #9f9f9f;
border-bottom : 1px solid #9f9f9f;
z-index : 6;
}
.menu {
position : relative;
width : 190px;
z-index : 7;
}
.menu .title {
font : bold 13px Georgia, "Times New Roman", Times, serif;
color : #333333;
padding : 5px 0 5px 0;
}
.menu .title a {
text-decoration : none;
color : #333333;
}
.menu .title a:hover {
text-decoration : none;
color : #940f04;
}
.menu .title a:visited {
text-decoration : none;
color : #940f04;
}
.menu ul {
list-style-type : none;
}
.menu ul li {
padding-bottom : 2px;
}
.menu ul li a {
font : normal 12px Arial;
color : #333333;
padding : 7px 0 7px 0;
line-height : 17px;
text-decoration : none;
}
.menu ul li a:visited {
color : #940f04;
}
.menu ul li a:hover {
color : #940f04;
}
.menu h1 {
padding : 5px 0 5px 0;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 13px;
color : #333333;
}
.menu a {
color : #333333;
text-decoration : none;
}
.menu a:hover {
color : #940f04;
}
#container {
position : relative;
background-color : #fff;
width : 650px;
margin-left : 220px;
padding-top : 90px;
z-index : 3;
}
#container h1 {
padding-bottom : 10px;
padding-bottom : 10px;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 13px;
color : #333333;
}
#container h2 {
padding-bottom : 10px;
padding-bottom : 10px;
font-size : 13px;
color : #333333;
}
#container p {
padding-bottom : 10px;
font-size : 13px;
color : #333333;
border-bottom : 1px solid #9f9f9f;
}
#container a {
color : #000;
text-decoration : none;
}
#container a:hover {
color : #940f04;
}
.pic {
padding-top : 5px;
padding-bottom : 5px;
margin-bottom : 18px;
border-top : 1px solid #9f9f9f;
border-bottom : 1px solid #9f9f9f;
}
.text {
background-color : #fff;
width : 420px;
padding-bottom : 30px;
font-size : 13px;
color : #333333;
}
.about {
background-color : #fff;
width : 420px;
padding-bottom : 30px;
margin-bottom : 20px;
font-size : 13px;
color : #333333;
border-bottom : 1px solid #9f9f9f;
}
.ser {
background-color : #fff;
float : left;
width : 210px;
padding-bottom : 15px;
font-size : 13px;
color : #333333;
}
.ser2 {
background-color : #fff;
float : left;
width : 210px;
padding-left : 8px;
padding-top : 47px;
padding-bottom : 15px;
font-size : 13px;
color : #333333;
}
.test {
background-color : #fff;
width : 420px;
padding-bottom : 30px;
font-size : 13px;
color : #333333;
}
.line {
background-color : #fff;
float : left;
width : 420px;
padding-bottom : 15px;
margin-bottom : 20px;
border-bottom : 1px solid #9f9f9f;
}
#footer {
position : relative;
background-color : #fff;
width : 650px;
margin-left : 220px;
padding-top : 20px;
padding-bottom : 20px;
border-top : 1px solid #9f9f9f;
z-index : 1;
}
#footer p {
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 12px;
color : #505050;
text-align : left;
}
#footer a {
color : #505050;
text-decoration : none;
}
#footer a:hover {
color : #940f04;
}
I have no idea the fix, have tried display:inline; and had a look around, but am not sure what the exact problem is, and am quite new so all a bit confusing. Any help would be really useful!!! i have also uploaded 2 screenshots. one how it looks on all other browsers . . . and one on IE7!!! http://www.edgeandbarrett.com/zub/test2/how%20it%20should%20look.png http://www.edgeandbarrett.com/zub/test2/ie7.png Its the only issue i have before i can complete site . . . . . . and really want to crack on!!!!!! Thanks, Orwel Hello! I'm working on a website right now and have sort of dived in further than I understand conditional CSS. The website is he www.kekoz.com I have that little menu in the upper right and the info in the lower right. I like those being fixed so when the user scrolls they are always up there. But I can't figure out how to make them stop from colliding with the main pictures when you change the height of the page. Any help would be grand! Right now they're position super simple: Code: #links{ position:fixed; top: 20px; right:20px; width:300px; }
Code: #info_box{ position:fixed; bottom: 25px; right:10px; width:550px; }
I tried to set a minimum height on them, but I think that would have to do with some sort of a container around them. Or maybe I'm just going about it all wrong. Also a couple other things I'm sort of thinking. I would like the "Scroll this way" thing to always be centered between the lower edge of the pictures and the bottom of the window. Not %100 sure how to get that set up. And the last thing I'm thinking for this page, which I'm not sure is all CSS would be to have the "scroll this way" thing actually fade based on the scroll position. I think this might be Jquery but thought I'd throw it out there to see if anyone had any advice. Hello, Is there a method by which we can use position:fixed in Internet Explorer 5.5 and 6.0 ? I have searched google but did not find anything really useful. Please help me. Hello all i am having trouble with getting a layer to stay put when i school down the page. This is my code: Code:
#Layer1 {
position:absolute;
width:64px;
height:73px;
z-index:1;
left: 0px;
top: 101px;
}
<div id="Layer1">
<div align="left"><img src="images/gun.gif" width="58" height="73" /></div>
</div>
Everytime i scroll down the image goes with it. I need it stay where i put it without moving at all. If anyone could help then that would be great David |
|||||||