|
CSS - Position A Layer Relative To Where You Are On Screen
Hello,
I've been trying to find a solution to this on the board already but nothing quite answers what Im trying to do. I have a layer that opens from this css: Code: #helplayeropen {
margin-top: auto;
margin-right: auto;
float: right;
position: relative;
right: 0px;
top: 80%;
z-index: auto;
visibility: hidden;
}
The problem is that if the page is scrollable, when you scroll to the bottom and open the layer, it opens the layer 80% from the top of the original screen, not the new view of the page. 80% from the real top, not 80% from the top of your current view of the page. Is there any way to get the layer to open 80% from the top of the screen that you are viewing and not from the absolute top. Heres an example of whats going on Go here and click on the help chilli (right floating layer) Similar TutorialsDreamweaver. I built a simple animated banner: two overlapped layers containing an image with their own link. Timeline to define hide/show timing. It works fine at the top of the page (absolute position) Now I need to place the animation in the row #11 of a dynamic table. In CSS Rules I set "relative" position for these two layers and they are shown inside row #11. Timeline is played but layers are not overlapping. I've tried some settings but I get always the same. Any idea on how overlap theese two layers with relative position? Thank you in advance. I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
Hello, I am very new to CSS, having only used stylesheets for basic formatting of text, etc. I have created a site where the layout is based on tables (I know ... when I have spare time, I will start learning CSS for this). I have a main table with 1 row and 1 column, height 95%, width 100%. Within this I have a table with a fixed layout (set height, width) for the table elements. This table is centre and middle aligned. Unfortunately the text provided for one of the cells in the table is exceeding the amount expected and the cell height has increased to accommodate for this. I thought of creating a layer and placing it over the cell and inserting the text here and setting the overflow to scroll. However, depending on screen resolution, browser the layer is not always positioned where I want it. Can I somehow position the layer relative to the table cell ? If not, do you have any suggestions as to what I can do to fix this. I do not have the option to rewrite the site using CSS, due to deadlines. Thanks in advance for your help. Bea EDIT: OK, I've worked out all of the issues except the fourth one, which doesn't really have to do with CSS specifically. Why do line breaks insert gaps? The problem is especially prevalent in IE. First issue: I'm trying to position one image over another image and its inserting this big gap! As seen on http://www.zacwittedesign.com/olive/pool.html we have the "about the pool" image position on top of the big image to the left side, but you can see there is a big gap above the big image. If I simply comment out the 'about the pool' image, the gap goes away and all is fine. I thought relatively placed elements were not supposed to affect the flow of elements beneath them? Can you see anything wrong in my code? Second Issue: There are two issues with the layer on the top of the page where the dots should be coming out of 'new projects' (id=projects_layer). It should be positioned over top.jpg as seen in hotstuff.html. In that page I manually moved it down by adding an additional 60px to the relative offset, but the space where it would have occupied remains and pushes the whole page down. Everything should look like it does in portfolio.html which doesn't currently use layers. You can see a version without my manually shifting it down and demonstrating the third issue at pool-valign.html. Third Issue: The vertical-align of all the images inside the projects layer. For the layout to be correct, the images need to be top-aligned or they won't line up with the dots and they'll slightly cover the button images beneath them. I have a style property set vertical-align:top; but it doesn't seem to do anything. Do I misunderstand the vertical-align property? There's also a small gap beneath the images when viewed with IE. I've changed the background color of the layer so you can more easily see the problem. Fourth issue: You've probably noticed in my code that I insert and HTML comment for every line break. That is because if I don't, IE reads the line beaks as non-whitespace and inserts both vertical or horizontal gaps between the images. Whats the deal there? Fifth Issue: In IE there is a one or two pixel gap above right.jpg where the tim olive logo is. This doesn't happen on firefox and it doesn't happen on pages that don't use layers like portfolio.html. ...And I haven't even tried it on a mac browser yet... Hello, i'm making a new site and i did the layout in photoshop, then i did the slices and i came out with this layout: _http://chromex.altervista.org/cse/CSE.htm The problem is now to add the content since i have to use Layers Visibility. But i cant make them stay in the same place. When i resize the window, the layer doesnt stay in the same place Any solution? PS: click on contatti in the layout to show the layer Im working on a project that required some css that I'm not used to using to pull off an effect. here is the url http://www.staging.crea8te.com/ftea I'm having one issue: Issue: the basic structure is <div1>position: relative <subdiv></div>position:absolute <subdiv></div>position:absolute </div> <div2> </div> <div3 </div> I'm not a pro at using positioning by any means with something like this and I don't understand why div2 is sitting at the top instead of at the bottom of div1. div 2 and 3 display correctly .. just arent showing up at the bottom of div1 i can paste the html and css if necessary it is just kind of a lot and didnt want to have a huge post.... any ideas? Hi, I'm following a tutorial and I would like to understand the position functioning. I have a box container and some elements in. In the css, the are all set relative position. I don't understand why the second element (AMPT) has its contain offset and third one (Writing) is not. I understand that the first element has like a reference the container box. I would sincerely glad if you can help me to understand the relative positioning. Thanks in advance. PS: I'm using firefox and here is the code: artefact89.free.fr/relative.html (without www) I'm having an issue using position: relative in IE6. Basically I'm doing this: Code:
<style>
.class1 {
width: 900px;
padding: 0px;
margin: 0 auto 0 auto;
}
.floatimg {
position: relative;
top: -200px;
left: 0px;
padding: 0px;
margin: 0px;
}
</style>
<div class="class1">
<img class="floatimg" src="foo.gif" />
<p>Some text.</p>
</div>
So, basically I'm trying to move the image up a bit in the div. This works in the latest firefox and IE7, but in IE6 the image moves up, but the text does not. It stays as if the image had not been moved and this leaves a big gap. 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 This may or may not be a stupid question, but mostly because the sites I learn this stuff from dont really go into much detail I really have to ask... Whats the real difference between using... margin: 12px 0px 0px 12px and position: relative; top: 12; left: 12; This is mostly concerning <div>'s that are just making boxes onscreen (which will have images/text in em). I guess you guys will wanna see code, so heres an example: Code: div#menu_head {
background: #ffffff;
float: left;
margin: 0px 0px 0px 0px;
width: 200px;
height: 60px;
font-family: verdana;
font-size: 11px;
border-top: 1px #000000 solid;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-bottom: 1px #000000 solid;
color: #000000;
}
div#cont_head {
background: #ffffff;
float: left;
margin: 12px 0px 0px 12px;
width: 200px;
height: 60px;
font-family: verdana;
font-size: 11px;
border-top: 1px #000000 solid;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-bottom: 1px #000000 solid;
color: #000000;
}
As you can see on #cont_head I used a margin to set it 12 pixels away from #menu_head ... If I were to change it to this instead... Code: div#cont_head {
background: #ffffff;
float: left;
position: relative;
top: 12;
left: 12;
width: 200px;
height: 60px;
font-family: verdana;
font-size: 11px;
border-top: 1px #000000 solid;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-bottom: 1px #000000 solid;
color: #000000;
}
...then it still looks exactly the same in the browser. So I am mainly looking to know, please, which one is proper to use and why? im sorta confused on what the purpose of both margins and position:relative are specifically for. I mean as far as I know.. position:relative; is like position:static; but allows you to take where its naturally supposed to go, and adjust it. so to me that makes sense for my situation. That's what its there for!.. but the only site i could find that shows floats being used with spacing inbetween it using margins to do so. but i mean how do i know that are right? yknow? Your help is greatly appreciated. And maybe since I was brave enough to post this I might mention another strange thing I don't understand (compared to old, non-xhtml ways) Code: <div id="container"> <div id="sub_container"> <div id="pasta"></div> <div id="trees"></div> <div id="widget"></div> <div id="squirrel"></div> </div> </div> Code: div#container {
background: #ff0000;
position: relative;
margin: 0 auto 0 auto;
width: 600px;
border-top: 1px #000000 solid;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-bottom: 1px #000000 solid;
}
div#sub_container {
padding: 4px;
position: relative;
}
For whatever reason that #sub_container seems to be required if I want to have padding of 4 pixels around all my content. because if i put the padding: 4px into #container instead and remove #sub_container altogether.. then the width stretches further than it is supposed to... and actually just now as I write this, I suddenly consider that maybe, like with borders, when you add padding it increases the width/height by the padding amounts. hmm maybe that must be it then I am not sure why I hadnt thought of that. I guess because it never did that with tables. Is this new assumption correct? But then thats almost like the padding gets put onto the outside of the layer rather than the inside of the layer like before??? I'm sorry I am just a confused person I guess :P Thank you so very much for the help.. I really do appreciate it. -Chi Hi there, What I am looking to do is have a layer that is in front of the rest of the page, that is always there and doesn't move when the rest of the page is scrolled. Basically I want an overlay at the bottom of the browser that shows an image, but this image should always be on screen at that exact position in the browser. The site in question is he earlybirdarts.co.uk Sorry if I am explaining myself badly, I can be bad with words sometimes. Any help is greatly appreciated :-) Regards, Lawrence I've seen a fix for this online before, but I can't seem to find it now. Basically I've got the following layer declartion: HTML Code _NOT_ php PHP Code: <div style=" color: black; font-size: 10pt; font-family: arial; text-align: center; visibility: hidden; display: block; position: absolute; z-index: 3; top: 115px" id="default"> When I make this layer visible it shows up in the exact position I want it to in most browsers, but in Mozilla it is 10 pixels to low. How can I get this layer to show up on Mozilla in the same pos as IE? Should I use javascript to adjust that "top" to 125 if its Mozilla? Or is there a CSS way to resolve this. Ok, I thought I had some idea what I was doing, but I'm starting to realize that I have none... If everything is square in the top-left corner there is _NO_ problem, everything looks fine. However, when I set the content of the page to _center_ obviously the positions of the dropdown menus get messed up. Is there anyway for the dropdowns to follow the bottom of the "Weddings" text? I.E. when the user stretches their window window open further it still lines up in the correct place? Should all 3 parts be on layers? or is it ok to have two tables, and a pull down menu as a layer? Hello I'm hoping a CSS guru will be able to help me out. I'm thinking this is a simple question, but CSS is not my strength. I have a three column layout. First column is going to contain RSS feed headline, second column is the main site content and the third column is meant for ads. As it stands now, the first column and the third column are slowing the page load, since they use javascript to suck in RSS (for the headline) and phpAdNew for the the Ads. What I'd like to do is create a div at the bottom of the page, so these load last and then are positioned relatively to those columns? I hope that makes sense. I'm not sure how to move position after page load.. almost seems like I need to make a layer within a layer or something?? This is an example of what I'm trying to do: Code: <html> <head> <title>Test</title> </head> <table cellpadding=0 cellspacing=0 border=0 valign="top"> <tr> <td width=100> <!-- headline rss feed javascript --> </td> <td width=500> <!-- main content --> </td> <td width=100> <!-- phpAdNew javascript --> </td> </tr> </table> <div id="headline"> <script language="javascript" src="http://www.domain.com/path/to/headline.js></script> <!-- I'd like this to be placed in column 1 --> </div> <div id="ads"> <script language="javascript" src="http://www.domain.com/path/to/ad.js></script> <!-- I'd like this to be placed in column 3 --> </div> </body> </html> Anyways, any help is greatly appreciated. Let me know if you need any additional information from me, etc. Thanks! hanji Hello I'm running into a very simple CSS problem (IMHO). I'm hoping that someone will be able to help out. The problem is related to a div layer that I'm positioning. The layer is positioned fine, but there is a gap at the bottom of the page where the div was created, eventhough it's positioned else where. This gap only happens in IE, FireFox looks great (no gap). Basically the code is this: Code: <div id="right-footer"> <img src="images/logo_small.gif" border=0><br /> </div> This is at the bottom of the page, above the </body></html>. I have content on the page, so scrolling is necessary. The gap is approximately 40px tall. Here is the relevant section of the stylesheet: Code: #right-footer {
position: relative;
top: -100px;
left: 550px;
width: 100px;
height: 10px;
overflow: none;
z-index: 100;
padding: 0px;
margin: 0px;
}
As you can see, the layer will be positioned above where div is in the code and pushed to the left, it's height is 10px. I added the z-index, overflow, padding, margin in a desperate attempt to fix it. Commenting out the div block or setting position to absolute removes the gap, but my position is blown. Any ideas? Please let me know if you need any more information or code. Thanks! hanji Hi folks, Just got one of those "can I or can't I" questions that relates to position:relative and position:absolute. I have the following structure - Code: <div>
<div style="position:relative">
<ul style="position:relative">
<li>
<p>
<span style="display:block"></span>
<span style="display:block"></span>
<span style="display:block; position:absolute"></span>
</p>
</li>
</ul>
</div>
</div>
The Third Span is where I am not sure about. I'd like it to sit at the bottom right of the enclosing <p>. When I use <span style="display:absolute; bottom:2px; right:2px>, the whole span disappears - not exactly sure where it vanishes to. Without the bottom and right declarations, the span stays put. There is sufficient space within the <p> for the <span> to move about. This absolute positioning worked fine without the relative div and relative ul - so I am assuming that's where my issue lies. BUT, I need the outer structure and it's not an option to change anything except the third <span>. Question is: Is what I am attempting going against the grain and something that just isn't going to work? If so, what steps can I take to position the contents of the <span> where I need it? I have tried making the <span> fit the width of the <p> and then positioning the internal contents to text-align:right. I can't do a padding-top or margin-top as the content in the second span is variable. Any clever ideas? The code below displays the boxes i want but i do not understand why those that could be aligned to left are not aligned. I would like to have those boxes to be aligned to the left. Any help is appreciated. Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title></title>
<style type="text/css">
div {
position: relative;
width: 10em;
padding: 0.25em;
margin: 0.25em;
border: 1px solid black;
text-align: center;
overflow: auto;
float: left;
}
</style>
</head>
<body>
<div style="top: 0em; height: 2em;"> 8 pm</div>
<div style="top: 5em; height: 2em;"> 9 pm</div>
<div style="top: 10em; height: 2em;">10 pm</div>
<div style="top: 8em; height: 5em;">Box A</div>
<div style="top: 9em; height: 5em;">Box B</div>
</body>
</html>
|
|||||||