|
CSS - Z-index + Absolute Aligning
Hi,
I'm attempting to float a menu (in a table) just to the left of a table I'm centering on my page. The menu, idealy, will be sticking out the left side of the table. Below is the code, firstly, for the menu and secondly, the CSS for the menu. html Code: Original - html Code <!--FLOATING MENU--> <table id="menu" cellspacing="0"> <tr> <td class="mbutton" onmouseover="this.className='obutton';" onmouseout="this.className='mbutton';"> Button </td> </tr> <tr> <td class="mbutton" onmouseover="this.className='obutton';" onmouseout="this.className='mbutton';"> Button </td> </tr> <tr> <td class="mbutton" onmouseover="this.className='obutton';" onmouseout="this.className='mbutton';"> Button </td> </tr> </table> <!--FLOATING MENU--> <table id="menu" cellspacing="0"> <tr> <td class="mbutton" onmouseover="this.className='obutton';" onmouseout="this.className='mbutton';"> Button </td> </tr> <tr> <td class="mbutton" onmouseover="this.className='obutton';" onmouseout="this.className='mbutton';"> Button </td> </tr> <tr> <td class="mbutton" onmouseover="this.className='obutton';" onmouseout="this.className='mbutton';"> Button </td> </tr> </table> css Code: Original - css Code #menu { position: absolute; top: 100px; left: 28%; z-index:0; width:70px; border-left: 2px solid #000; border-right: 0px; border-bottom: 2px solid #000; border-top: 2px solid #000; padding:0px; }
#menu {
Now here's what's going on. As you can see, I'm trying to use a percentage from the left to align the menu - but as the resolution/window size changes, so does the menu's position in relation to the table. I need a stable way to make sure the menu is always in line with the table. Firefox and Mozilla also seem to be rendering the positioning a lot differently. I've thought about relative positioning, but I can't figure out exactly how it works or find a good tutorial on it. If anybody has a link to a tutorial on specifically this area, that would be great - or if you know the answer, I'd very much appreciate it if you could help me out. Thanks in advance - feel free to say so if you'd like more information. Similar TutorialsPlease look at this page - http://casadelsol.tmhdesign.com/about.asp I have a div with an id of "header". In that div I placed this code Code: <div style="width:200px;height:200px;background-color:yellow;margin:0 0 -50px 400px;z-index:10000"> </div> As you can see it goes under the absolutely positioned div element with an id of top_header. I want to put a drop-down menu in the top header area but it slides under the top_header element. Can you help? Thanks Hello all, I am having a problem I can't seem to figure out. The site is: http://www.ciccotticenter.org/test_site/ When you view the site in IE6, the logo in the top left corner disappears. I have tried everything I can think of. Interestingly when I add * { border: 1px solid red; } it works. But I can't figure out what thats doing to make it work. Any ideas? Thanks, Ryan on my page http://tampabay-online.org/cetr/news/ the left side : Code: .content {
position:relative;
width:300px;
margin-left: 155px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
and the two on the right are : Code: #right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
#sidebar {
position:absolute;
width:200px;
top:400px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
If someone has a their font bigger on the artists section then the div will grow and go under the sidebar div. Any way to make these relative or fix that problem? Thanks! I am trying to position a footer at the bottom right hand corner of the page with style
Code: {position: absolute; bottom: 0px; right: 0px;}
However, the footer is not lying on the bottom, its about an inch off the bottom, interfering with a form field. How do I fix this? I can't create a complicated webpage without using absolute positioning for areas. For ex I want to create 2 top areas of screen width on top of page. Then I want 3 columns with 1st and 3rd columns having 3-4 seperate containers. Without using absolute I am way to confusied to get this happening. When using Absolute positioning is it best to have the first <div> be static so that that the Absolute Positioning has something a reference point? Thank you IE browser seems fine but mozilla display a simple table with links inside in a squished up format, not present on the web design. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="GENERATOR" content="PageBreeze Free HTML Editor (http://www.pagebreeze.com)">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>mybar.html</title>
</head>
<style type="text/css">
#elButton a {
color: #000000;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration: none;
/*border:1px outset aqua;*/
/* background-color:#00ffff;*/
border-right-style:solid;
border-right-width:1px;
width: 110px;
/* padding: 3px 5px;*/
/*margin: 1px;*/
}
</style>
<body bgcolor="#ffffff">
<p>
<table style="WIDTH: 487px; HEIGHT: 26px" cellspacing="0" cellpadding="0" width="487"
align="right" bgcolor="#00eaea" border="0">
<tr>
<td valign="top" align="middle">
<div id="elButton">
<a href="#">Java Script</a>
<a href="#">Dynamic HTML</a>
<a href="#">Server Side</a>
<a href="#">Client Side</a>
</div></td></tr></table></p>
</body>
</html>
Hello everyone, I would like to ask for any and all help on solving this problem I am having. Well recently I used to make all of my web sites in tables until I came upon an article saying you should use CSS and absolute positioning. Therefore, my problem is this, If you go to this partially completed site, http://sykotic-designz.org/newsite/index.html. You will now notice that there are two 'shadow' images. One on the left and one on the right. The one on the left works fine. Test it by making your browser window smaller and bigger. You will notice the right shadow moves. I have tried various alternatives like using a table just for the one image but you still need to use absolute position and did not work, I have messed with displaying absolute position by % and by pixels. But it doesn't want to seem to work either. I am mainly having problems probably because I am new to the DIV tags in which I use entirely through out this page, I am not sure if CSS will help at all. You can view the source of the page if you wish. I appreciate and and all help you may provide, thanks! Hi, A simple question ... i'm sure i've done something like this before but can't remember how ... I centered a web page in the browser and used divs to hold the text and main content for the page - but when the page is viewed at different resolutions or left-side panels are opened (such as media player in IE) my div layers are not repositioning with the page ... I know this must be easy but it aint workin somehow ... thanks in advance ... I've only just started mucking round with CSS. Just by looking at other peoples sites and seeing how they do something, and then mucking around with what they've written to learn it. What I am trying to do at the moment, is just have a blank page with at the absolute center (Vertical and Horizontal) of the screen have some text. But the text is only horizontally centered not vertically. Heres the codes: In seperate stylesheet Code: #center {
position: absolute
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
and in the page Code: <div id="center">
<p><span class="aus">Austrlia</span><br>
<span class="contact">admin@sixfootone.com +61 412 587890</span>
</p></div>
Any ideas? Thanks If I do something like this: .divSubHomeRtPhoto { position: absolute; left: 340px; top: 167px; width: 420px; height: 420px; } Then <div class="divSubHomeRtPhoto"> my left and top positions don't seem to take in IE 5.2 for Mac. This seems to be fairly well known, from what I read on the internet. What this means for me though, is that I have to almost do away with positioning through CSS if I want my pages to work with IE 5.2 Mac, whcih I recently discoverd I do want to work. How do other cross browser CSS writes deal with this problem? Thanks for your help CJB I have a div that should be sat at the bottom of its containing div (absolute positioned, bottom: 0, right 0) and it does so in Firefox, but in IE it is raised by about 20px or so. Any help to iron this out would be great. The page and its effects can be seen at www.prioritypie.f2s.com/KSA/KSA6/index.htm and the css at www.prioritypie.f2s.com/KSA/KSA6/styles/KSA6style.css It's the "menuContainer" div which isn't sitting right, nested in the "header" div. Many thanks for any help Hey guys, This is my first time messing with absolute positioning, and I am in a pickle. I have created a website and it contains a services page. On the list of the services, when you scroll over each word, a block of text describing that particular service pops up. Now, I have placed the box using <span>'s and hidden blocks. My problem is that when I change screen resolutions, the placement of the box changes. I am looking for a resolution-independent workaround for this, so that others running 1024, 1280, etc wont have a problem viewing the site correctly. I have searched the web dry it feels like. Maybe I'm just bad at looking, but its the last thing I need to do before putting up the site. Check out the page and source code he URL Additionally, this is the code I used to make this (it's Eric Meyers PURE CSS codes): Code: <style type="text/css">
<!--
div#links a:hover {text-decoration: none;
background: #698165;}
div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute; top: 535px; left: 233px; width: 377px; height: 230px;
padding: 5px; margin: 10px; z-index: 100;
color: white;
font: 10px Verdana, sans-serif; text-align: justify;}
div#links a:link { text-decoration: none;
color: white;}
div#links a:visited { text-decoration: none;
color: white;}
-->
</style>
then the code is activated by: Code: <a href="#">Mowing <span>Service Landscapes will tend and maintain your lawn with the most substantial of detail and care. Our services will provide you with a beautiful, healthy landscape that will turn heads. If you are looking for quality and dependable service that you can turn to time and time again, look no further than Service Landscapes. </span> </a> Any help would be greatly appreciated, and thanks in advance! Now i have used some of this on one of my designs and at 1280x1024 resolution it looks perfect however if you decrease the resolution then it move the image into a place i dont want it to be. Now is there a way around this or am i just going to have to put the "this site is best viewed at 1280x1024" sign on it? Is it possible to position something below a division that has the property { position: absolute } and can expand to a varied length depending on what is contained with it? hi I have a long list of images positioned absolutely, and vertically down the page. However, if I wanted to add a new image to the top of the list... how can I do this without having to change all the positioning values of the other images? cheers nathan Good morning, I've been working on my site, and it's in its final stages, but I'm experiencing a problem I can't figure out. I have a floating bar with all of my navigation links in it which is absolutely defined with the following code: Code: #headerBar { /* sets position of floating bar */
position: absolute;
clear: both;
top: 57px;
left: 0px;
padding: 0px;
margin: 0px;
width: 100%;
filter: alpha(opacity=50);
-moz-opacity: .50;
opacity: .50;
}
The problem I'm experiencing is that in Firefox, Safari, and Opera, the bar appears magically in the perfect position, however, in Internet Explorer, the bar is 5-10 pixels higher than it should be. The url is: http://www.alokw.com Any suggestions? Thanks! I have a DIV that is positioned as absolute and have used the required CSS to make it centered. But when viewed in Internet Explorer it is 1 or 2 pixels off-center?? Here is the CSS code: Code:
div.mpheader {
position: absolute;
display: block;
overflow: hidden;
padding: 0px;
top: 0px;
width: 900px;
height: 655px;
margin-top: 0px;
margin-left: -450px;
left: 50.0%;
background-image: url(images/header.png);
}
and the HTML code in the body: Code: <div class="mpheader"> </div> and here is the link to the site: highriserocks.com/maydayparade I have other CSS for A classes which are inside the DIV tags also but it's just the main image that is slightly off center. Any ideas?? Much appreciated! Adam |
|||||||