|
CSS - Big Gap With Relative Positioning + Other Layer Issues
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... Similar TutorialsHello, 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 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) 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 Dreamweaver. 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. Hi, I'm trying to set up a side menu, which appears on the right-hand side of the page. Code:
<style type="text/css">
#SideMenu {
color: #639;
background-color: #FBFBFB;
position: absolute;
top: 275px;
left: 630px;
width: 190px;
height: 250px;
}
</style>
However, when the browser window is resized, the layer then obstructs the main content (by floating over it), and does not remain in its place as it should. This is how it should look like:: However, as the browser is resized, the layer does this: I'm tring to remedy this using CSS only, so please send any suggestions to me. The code for the sidebar is: Code: <div id="SideMenu"> <p>Side Content. I like to eat food.</p> </div> Any ideas guys?! I need to position a 200px high by 300px wide layer in the center of the page. does anyone know a simple way to do this, i have thought about using JS to calculate the width of the page, take off the 200px, and halve it, but that seems like overkill, isnt there a simple CSS command? Thanks Xaphan Well, I can't post links so this is going to be hard as hell to type out. I have a layer within that page that I want in a certain position, yet when I move the width of my browser the layer does not stay where I want it. Obviousely, this does not make any sense because its something you have to see. I checked the rules for the forums and I can't find where it states anything about URLs, if someone would be so kind to show me, I'd appericiate it. Not that it matters witout seeing it on the page but my code for this layer is: Code: <div id="Layer1" style="position:absolute; left:848px; top:85px; width:118px; height:167px; z-index:1">
<div class="mltop">schedule +4hrs </div>
<p>00:00 - Music <br>
01:00 - Music <br>
02:00 - Music <br>
03:00 - <a href="">BRR</a></p>
<p><b>Current time: 00:00</b><br>
Times in CST/CDT
<br>
</p>
</div>
I have a webpage located at http://www.niu-sae.com I have a drop down menu image, in a div layer that will pop up when you roll over the first link "Active Chapter". First of all the positioning is all weird... when I am at full screen I have to set the div left at 285... even though it is really only about 116. any idea what I am doing wrong? Second even when I get it lined up... the way it is now... it changes if you resize the window. HELP. please. I am trying to get the footer DIV to appear directly below the content div on the page. Cant get it to work. CSS and DIV code is below if anyone can offer some advice? Thanks. Code:
#page_footer {
background-color: #ff0000;
width: 729px;
height: 30px;
position:relative;
bottom: 0px;
left: 35px;
font-family: arial, tahoma, times new roman;
font-size: 11px;
font-weight: normal;
color: #5A5A5A;
}
<!-- // MANDATORY PAGE CONTENT HOLDER // -->
<div id="page_content_holder_sizing">
<div id="page_content_section_name"><?=str_replace("::", "-", $page_title)?></div>
<div id="page_content_top_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>
<div id="page_content_bottom_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>
<!-- // CONTENT TEMPLATE // -->
<!-- // END CONTENT TEMPLATE // -->
</div>
<!-- // MANDATORY PAGE FOOTER // -->
<div id="page_footer">
footer goes here
</div>
<!-- // END MANDATORY PAGE FOOTER // -->
<!-- // END MANDATORY PAGE CONTENT HOLDER // -->
I am trying to learn CSS Positioning in an effort to move away from table-based layout. I use some pretty complicated layouts and I am a big fan of the "stretch" effect for my site headers. As my first project, I am converting a site that uses a stretch header, and in table layout, used to be divided into 5 columns. I have managed to re-create the header almost as good as the original with just 3 divs, using absolute positioning, z-index, and a background image. Then I used relative positioning to create the div for the main content, and I was planning to do another relative-positioned div for the footer. I feel that I'm very close but could use a little help to get over the hump. I have two main problems: 1. When you resize the window horizontally below about 850px, the images in the header start to overlap. I would like them to "bump" each other and have a scrollbar appear. I've tried to fix this using the min-width property in various divs, and I tried to use a wrapper div, but nothing seemed to work very well. This is something I can live with, but any tips would be appreciated. 2. Relative positioning seems to work fine for the main content div (#middlebox in my .css). However, I did the footer div in the same manner, and it only works in Firefox, not IE. If I could get it to work in both Fx and IE I'd be happy - I don't care about any other browsers. 3. Any other tips and tricks that would make it cleaner or better, etc. would be appreciated. Remember I am a n00b so go slow. Original site (tables): http://www.gpleague.com New test site (css): http://www.gpleague.com/cssp.htm Css file: http://www.gpleague.com/csstest.css In the following code i need *Signup* to align just to the right of *Login*. Due to *SearchContainer* location, it must be absolute positioned. Thanks for the help. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css" title="">
#SearchContainer { position:absolute; z-index:1; width:210px; height:125px; border:1px solid red; }
#SearchField { position:relative; z-index:3; width:200px; top: 5px; border:1px solid orange; }
#LoginMessage { position:relative; z-index:3; width:200px; top: 10px; border:1px solid yellow; }
#Login { position:relative; z-index:3; width:150px; top: 20px; border:1px solid green; }
#Signup { position:relative; z-index:4; width: 25px; top: 20px; left: 10px; border:1px solid blue; }
</style>
</head>
<body>
<div id="SearchContainer">
<div id="SearchField">Epsum factorial non</div>
<div id="LoginMessage">Lorem ipsum dolor</div>
<div id="Login">Li Europan lingues<br>Li Europan lingues</div>
<div id="Signup">xxx</div>
</div>
</body>
</html>
Ok here's my problem - I have three columns/layers (left, center, right) which are inside the content layer. I need to use relative positioning so when the page is re-sized all the page elements are still centered on the page. The problem I am having is that I cannot figure out a way for the colums to be aligned and seem to go under one another. I also need to keep the center colum with an overflow. If anyone has any ideas I would be very grateful! Thanks <div id="content"> <div id="leftcolumn"></div> <div id="centercolumn"></div> <div id="rightcolumn"></div> <!-- End content --> </div> #leftcolumn { background-image: url(images/leftcolumn.gif); height: 412px; width: 148px; position: relative; margin-top: 0px; margin-left: 4px; } #centercolumn { background-color:#FFFFFF; height: 412px; width: 382px; position: relative; margin-top: 0px; margin-left: 3px; overflow: auto; text-indent: 2px; } #rightcolumn { background-image:url(images/rightcolumn.gif); height: 412px; width: 148px; position: relative; margin-top: 0px; margin-left: 7px; } Hello Can anybody explain me the difference between the absolute and the relative positioning methods? If i use nested <span> elements in a table row which one is suitable? And also what the "Z-index" property tells us? I am so confused with these terms nowadays.And waiting your help. Thank You Very Much... How can I position several elements, relative to the position of another element? I tried this: <div> Test <span style="position:relative;top:40;left:40">Foo</span> <span style="position:relative;top:40;left:40">Bar</span> </div> I want both Foo and Bar to be 40 pixels to the right and below of Test. But they appear next to eachother instead of stacking on top of eachother. How can I position them "relative" to the div tag? Hi, I have the following code: PHP Code: <table cellspacing="0" cellpadding="2" border="0"> <tr> <td valign="top"> <span style="position: relative; top: 80px; left: 10px;"><img src="images/sold.gif" alt="" border="0"></span> <img src="upload/mainimage.jpg>" alt="" border="0"> </td> </tr></table> The span and sold.gif image are pushing the main image down in the table, so there's a big piece of whitespace above it. Not sure what I'm doing wrong here.. is there some special trick I should know about using relative positioning? Alright... i am creating a simple website and because of the way the site is to be created, I am using position: relative. However I'm trying to get the links on the left and right of an image to go under part of the image... In IE it works fine... in Opera, NS, and FF it doesn't. Is there something I need to add to my css to get it to work properly... CSS: Quote: td.homeleft {position:relative; top:50px; left:50px; font-size:14px; } td.homeright {position:relative; top:50px; right:30px; font-size:14px; } HTML Code: <html> <head> <link rel="stylesheet" href="lolli.css" type="text/css"> <title>UF Lollicup!</title> </head> <body bgcolor="fdf066"> <table align="center"> <tr> <td class="homeleft"> <center>Menu<br><br> Shop Now<br><br> What's New<br><br> Promos</center> </td> <td> <img src="images/homepageflower.gif"> </td> <td class="homeright"> <center>Links<br><br> Feeback<br><br> Newsletter<br><br> Pictures</center> </td> </tr> <tr> <td colspan="3" align="center"> <img src="images/bar.gif"> </td> </tr> <tr> <td colspan="3" align="center"> Gainesville, Florida 352-505-3662 </td> </tr> </table> </body> </html> I know some of you don't like tables... sorry for using them. Here's the site I'm working on: Site in Progress Here's what the site should look like: http://www.crash-tech.com/Lollicup/images/main.jpg Also the blue bar at the bottom... I'm going to want to place text on top of that as well, so would use relative positioning again. If anyone can suggest a better way to do this, that would be great. Had also considered doing the main page in Flash or using the image and mapping links. Thanks in advance. Code: <div style="width: 500px; height: 500px;"> <div style="position:relative; top: 0px; left: 0px; width: 30px; height: 10px;">at 0</div> <div style="position:relative; top: 10px; left: 0px; width: 30px; height: 10px;">at 10</div> </div> The divider seems to add a break rendering absolute positioning useless. How can I fix this so that I can use absolute positioning in more than one div inside the main fixed size container? Thanks ok, here's what i'm working with: multiple rows of data (divs stacked on top of eachother, we'll call main_container), with 2 columns each. the right hand column has a list of emails (call it sent_details), but it only shows as many as can fit in main_container. the design calls for me to put a "more" link on the bottom right hand corner of sent_details. so, i have to give sent_details a position of relative and the more link an absolute position fixed to the bottom right. in firefox, when i click "more", sent_details will expand, reveling more emails (sent_details was given overflow: hidden). in IE, however, sent_details will expand, however all sent_details below it will remain in their fixed positions, making the expanded div above it overlap. does anyone have a suggestion to fix this? do i need to post code? thanks Hi, I'm not sure if this is possible or not, but I can't get it to work accurately, and I wondered if anyone could give me some help. I would like to position a layer at an absolute position (T:128 L:253) which is no problem, but then I would like that layer to have a relative width from that fixed point, expanding/contracting to whatever size the browser is. I've tried several different things, but can't seem to get this particular setup. If I set the width of the layer to 100%, the layer positions itself correctly on the page, but pushes beyond the right hand side of the browser causing a horizontal scroll. Has anyone done this before? Am I missing something critical? or is this impossible to do with layers/css Thank you! |
|||||||