|
CSS - The Relative Absolute Position Of My Problem
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? Similar TutorialsI 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;
}
I am a newbie to CSS and HTML I am trying to understand how div positioning works I made a CSS and a class container where I did put some thing now I made another class say named useful which is placed inside div tags of class container white I am finding problem is when the next div element of class useful is placed then its position is not coming as I desire some one told me to use float to over come it worked when I used an image but it did not worked when it was not an image here are the contents of my CSS about which I am asking .header_container { margin:auto; height:101px; width: 1290px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: #D5EDB3; border-right-color: #D5EDB3; border-bottom-color: #D5EDB3; border-left-color: #D5EDB3; } .header { background-image: url(n/mm_health_photo.jpg); height: 101px; width: 382px; } .header1 { position:relative; background-color: #D5EDB3; height:101px; width: 908px; float:left; border-left-color:#999900; border-left-width: thin; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: solid; margin-left: 381px; margin-top: -101px; } Now the problem is in above CSS margin-left and margin-top has been used which I dont think is needed following is my html code <!-- Header Container Startts --> <div class="header_container" > <div class="header"> </div> <!-- header container left image in this box --> <div class="header1"></div> <!-- the right side of header --> </div> <!--Header Finishes here --> Not sure where to put this because it involves php, dhtml, css and layers? But anyway I'll give it a shot here. I have a problem that I can't seem to tackle. Basically what I need is: I need to set a number of layers on an absolute position from a relative point, the topleft corner of an image of a map (that has no fixed position from the top of the page because the amount of content from the top before the image of the map can change because it is a dynamically generated page). I have: An image of a map and in a mysql table a number of sets of xy coordinates (in pixels) from the top-left corner on that image to some points on the map. (Unfortunately I can't show you the pages, but I'll try to be as clear as posssible) Trying to accomplish: A map somewhere on a page and query from a database a set of x-y-coordinates of different points, that correspond to top left corner of that map. On the exact x-y coordinates I want to display a small image of a crosshair, so that a number of points are indicated on the map with crosshairs. The points on the map (read: sets of x-y coordinates) can differ. Solution (I thought): Use layers using the <div> tag. So I use a layer to specify the location of the map. Then I query the table for all the x-y coordinates of the poins on the map and create a layer for every set of x-y coordinates. Here's the code ($cat and $de are taken from an URL): PHP Code: //get xy coordinates of primary position $locbase = mysql_query("SELECT lb_xcoord, lb_ycoord FROM locbases WHERE lb_cat_id = $cat AND lb_ad_id = $de "); $locbasered = mysql_fetch_array($locbase); $xred = $locbasered["lb_xcoord"]; $yred = $locbasered["lb_ycoord"]; //get xy coordinates of other positions on the same map $locotherbases = mysql_query("SELECT lb_xcoord, lb_ycoord FROM nuke_zc_locbases WHERE lb_cat_id = $cat AND lb_ad_id <> $de "); //position the map at coordinates 0-0 echo "<div id=\"Layer1\" style=\"position:relative; left:0; top:0; z-index:0;\"><IMG SRC=\"$img\" border=\"0\"></div>"; //position the primary position on the map in a layer on top of the map layer echo "<div id=\"Layer2\" style=\"position:relative; left:$xred; top:$yred; z-index:1;\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\"></div>"; //create a loop and for each loop create a layer with based on the set of x-y coordinates and display a crosshair image in that layer $k = 3 ; while( $locothers = mysql_fetch_array( $locotherbases ) ) { $xgrey = $locothers["lb_xcoord"]; $ygrey = $locothers["lb_ycoord"]; echo "<div id=\"Layer$k\" style=\"position:relative; left:$xgrey; top:$ygrey; z-index:$k\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\" ></div>"; $k++ ; } Problem 1: This all works (except for problem 2, described later) when the position statements in the tag are set to absolute. Then it will display correctly in the left hand corner and all crosshairs are positioned correctly. The thing is that I want it embedded in another page, so that it is displayed below some content that is also dynamically generated (so I can't set position to absolute, because I don't know where the content before the map stops) So I have to set it to relative and then all the divs are displayed relative to the previous tag. Since the tags are dynamically generated through a while loop, the crosshairs will all move down a blank line. Problem 2: The layers do not stack exactly as planned, first because the images of the crosshairs are displayed under the map (but the z-index builds up correctly doesn't it?) he weird thing is that when I put the <div> tag of the map image after the looped and primary crosshair div-tags, then the crosshairs are all displayed on top of the map. To my knowledge the z-index should work regardless of where the code is , no?) Anyone any idea how to do this? (or would I have to display the map and crosshairs in an <iframe>within the dynamically generated page) Thanks for any feedback! Cheers, Gurt I am trying to run a javascript that constructs a menu but must use absolute positioning. I can put the menu correctly where I want it by setting parameters of left and top from origin. However... this doesn't work too well for a page consisting of 800px tables centered for looking good in any resolution 800x600 and up. So I was wondering if it is possible to use absolute positioning and define an origin using anchor tags or something like that. Any help please? im creating ajax auto complete text box but my div tag does not appear correctly in IE7 (ok on firefox) appearing behind the textbox IE7 screen shot URL Firefox screen shot URL codes are HTML Code:
<tr>
<td align="left">PHONE BRAND</td>
<td>:</td>
<td>
<div class="au_cm_loc">
<asp:TextBox ID="txtBrand" runat="server" CssClass="textbox"></asp:TextBox>
<div id="pnlBrand" class="au_cm_pnl"></div>
</div>
</td>
</tr>
<tr>
<td align="left">PHONE MODEL</td>
<td>:</td>
<td>
<div class="au_cm_loc">
<asp:TextBox ID="txtModel" runat="server" CssClass="textbox"></asp:TextBox>
<div id="pnlModel" onmouseout="autoComplete.closeSuggestionPanel(event, this)" class="au_cm_pnl"></div>
</div>
</td>
</tr>
CSS Code:
.au_cm_loc
{
text-align:left;
position:relative;
}
.au_cm_pnl
{
position:absolute;
top:25px;
left:0px;
border:1px solid #39AAE4;
width:204px;
max-height:50px;
overflow-x: hidden;
overflow-y: auto;
visibility:hidden;
background-color:#FEFEFE;
z-index:500;
}
.au_cm_pnl a
{
display:block;
padding:5px 0px;
width:95%;
margin:-7px 0px;
color:Blue;
text-decoration:none;
padding-left:5%;
background-image:url(../Images/textbox_bg.jpg);
}
.au_cm_pnl a:hover
{
background-image:url(../Images/button_bg.jpg);
color:#FFFFFF;
}
please help me to fix this problem thank you chathura Why does GOOD VERSION, below, work perfectly, but the BAD VERSION fails (all browsers)? The only difference is the order of TOPIMAGE and BOTTOMIMAGE in the 2nd IMAGEBUTTON. How can I adjust my CSS so both versions work? GOOD VERSION Code: <style>
a.IMAGEBUTTON img.TOPIMAGE { z-index:1; position:absolute; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; }
</style>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
BAD VERSION Code: <style>
a.IMAGEBUTTON img.TOPIMAGE { z-index:1; position:absolute; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; }
</style>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
<img class="TOPIMAGE" src="pics\pic2.jpg" />
</a>
THANKS 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 css-ers, I wonder if anyone can tell me what I've done wrong. I have an absolutely positioned div that shows up perfectly in all browsers except IE 6 (I haven't tried it in IE7 yet). I have another abs pos div on the page that behaves perfectly. Any suggestions? This is the x/html: Code: <div id="logo"> <a href="index.html"></a> </div> This is the CSS: Code: #logo {
left: 20px;
top: 0px;
position: absolute;
z-index: 5;
margin: 0pt;
border: 1px solid #315185;
}
#logo a {
background: transparent url(../images/logo.jpg) no-repeat scroll 0px 0px;
display: block;
height: 435px;
width: 140px;
}
#logo a:hover {
background: url(../images/logo.jpg) no-repeat scroll 0px -435px;
display: block;
height: 435px;
width: 140px;
}
Thanks for any tips or references. Hi, I have a table with the following div : div#mod-banner { height:60px; position:absolute; right:180px; top:22px; width:468px; } in IE7 and Opera looks ok but in IE6 it shows it like its left aligned or something. I dont have any knowledge of CSS , can anybody help me? Thanks I have an application that includes a login form and it's positioned absolute in the upper right corner. It works great in Safari and Firefox but in IE6 it is not displayed at all. Yet, if I view the source it is there. This is what my css looks like: Code:
#header{
width:780px;
margin-bottom:10px;
background:#e4dbcc;
height:90px;
}
#header .logo{
font-size:2em;
color:#301d0e;
width:400px;
}
#header .logo_subtext{
font-size:1em;
color:#301d0e;
padding-left:80px;
border-bottom:10px solid #e2d2bb;
}
#header .login{
clear:both;
width:380px;
position:absolute;
top:20px;
left:408px;
font-size:70%;
}
Here is the html: Code:
<div id="header">
<div class="logo"> Program </div>
<div class="logo_subtext">company name</div>
<div class="login">
<form action="index.php?action=login" method="post">
login: user <input type="text" name="user_name" size="8"/> password <input type="password" name="password" size="12"/>
<input type="submit" name="Submit" value="submit"/><br />
Don't have an account? <a href="index.php?action=register">Register here</a> Forget password? <a href="index.php?action=password"> click here </a>
</form>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.php" id="current">ABOUT US</a></li>
<li><a href="index.php?action=program" >PROGRAM</a></li>
<li><a href="index.php?action=contact" >CONTACT</a></li>
<li><a href="index.php?action=register" >REGISTER</a></li>
</ul>
</div>
Thanks in Advance. I have an image gallery. Code for the whole thing I've set below.The main image display window is set w/ a fixed position w/ this CSS code: Quote: #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } I want to use it on dynamic php pages that have constantly changing content. I cannot w/ the fixed position. I need it to float correctly to the right of the thumb sidebar images. I've set it into my .tpl pages & it works well w/ no apparant css conflicts. But the main window is still fixed while the thumbs show wherever I place their code. Any ideas how I can float it all as a unit? Thanks, Gene PLEASE HELP ME I have an inline css tester that I built w/ help from W3Schools.com's CSS examples. > http://www.easysavannah.com/pmdinlinecsslinks.html Maybe this will help someone here. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Lightweight Image Gallery</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="imagetoolbar" content="false"> <meta name="description" content=""> <meta name="keywords" content=""> <style media="screen,projection" type="text/css"> /* general styling for this example */ * { margin: 0; padding: 0; } body { padding: 20px; } /* begin gallery styling */ #jgal { list-style: none; width: 200px; } #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } #jgal li.active img { display: block; } #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } /* styling without javascript */ #gallery { list-style: none; display: block; } #gallery li { float: left; margin: 0 10px 10px 0; } </style> <!--[if lt IE 8]> <style media="screen,projection" type="text/css"> #jgal li { filter: alpha(opacity=50); } #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); } </style> <![endif]--> <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> <script type="text/javascript"> var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; var li = document.getElementById('jgal').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].style.backgroundRepeat = 'no-repeat'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jgal').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); </script> </head> <body> <ul id="gallery"> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_1.jpg" alt="Josef & Erika 1"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/roland_ads_2.jpg" alt="Roland Ads"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_2.jpg" alt="CD Cover 2"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_1.jpg" alt="CD Cover 1"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_3.jpg" alt="Josef & Erika 3"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_2.jpg" alt="Josef & Erika 2"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/lktrd_poster1.jpg" alt="LKTRD Poster"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/je_4.jpg" alt="Josef & Erika 4"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/inside_1.jpg" alt="Inside Magazine"></li> <li><img src="http://monc.se/kitchen/stew/gallery/images/oceanen_4.jpg" alt="Oceanen"></li> </ul> <p style="clear: both; padding-top: 2em;">Link back to article: <a href="/kitchen/80/lightweight-image-gallery-with-thumbnails">Lightweight Image Gallery with Thumbnails</a>.</p> </body> </html>
Hi, I have a problem that seems like it's on the edge of solveability but I haven't hit on it yet. I have a page that's layed out like this: http://i55.photobucket.com/albums/g129/alexmarsz/CSSProblem1a.jpg And most of the time it's fine. There's an image in BackgroundDiv with a javascript function that resizes the image to fit the screen, and then three divs are absolute within it, with BottomDiv then relative below. The problem is that ColumnLeft has a variable length. Sometimes it gets long and busts out of BackgroundDiv. Which would be fine if BottomDiv would politely push down like it does when BackgroundDiv expands. But it doesn't. Instead, ColumnLeft overlaps, as seen he http://i55.photobucket.com/albums/g129/alexmarsz/CSSProblem1b.jpg If you want to see it in action, here is a mock-up: http://www.simunomics.com/Mockup-NewLayout.php If your screen is wide it may not bust out, but narrow your browser down to ~1000px or imagine the LeftColumn being longer and you'll see what I mean. The Divs are structured in the HTML like this: Code:
<div id="BackgroundDiv" onload="resizeImage('BkgImage');" style="min-height:840px">
<div id="TwoColumnInfoBox" align="center">
</div>
<div id="ColumnLeft" class="FactoryBox">
</div>
<div id="ColumnRight" class="FactoryBox">
</div>
<img onload="resizeImage('BkgImage');" id="BkgImage1" src="Images/FactoryForm.JPG" width="100%" />
</div>
<div id="BottomDiv">
</div>
And the css looks like this: Code:
#BackgroundDiv {
color: #FFFFFF;
margin-left: 210px;
margin-top: 10px;
padding: 10px;
}
#TwoColumnInfoBox{
position:absolute;
margin-top:20px;
right:70px;
margin-left:auto;
z-index:50;
background-image:url(Images/InfoBackground.GIF);
color:#000000;
height:150px;
width:250px;
}
#ColumnLeft{
position:absolute;
margin-left:5%;
margin-top:50px;
z-index:30;
}
#ColumnRight{
position:absolute;
right:5%;
margin-top:200px;
z-index:28;
}
.FactoryBox{
color:#FFFFFF;
width:300px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
#BottomDiv {
color: #FFFFFF;
margin-left: 210px;
margin-top: 10px;
padding: 10px;
}
Just to address some considered but unfeasible options (so far as I know), if I float ColumnLeft I can't position it over the image, so it has to be absolute. And if I use the image as a background attribute, I can't dynamically resize it. (Not until CSS 3 anyway.) Again, I feel like this is close but not-quite-there, like there should be some sort of wrapper I can make to get BottomDiv to respect the proper distance. Thanks in advance for any suggestions. 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... Hi, i think i use too many DIV tags. How can I get around this problem? Is there any direction you think you can push me to? The homepage is here http://www.chocolateriewanders.com/...lder/index.html an image explaining the layout of the graphics is he and another question: would you ever consider to combine CSS and tables? i ask because of this design, that i have .... the main box is kinda easy to arrange in tables, i don't really know yet if i can manage to make it entirely in css .... any ideas are appreciated EDIT: okay - starting from scratch 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! Hi, guys I am working on this css issue and could use your expertise. It follows the basic principles of the article http://www.stopdesign.com/articles/absolute/. But I cant seem to get it to work. Here is the issue I am trying to have some text that appears at the top of source code be displayed down at the bottom of the page. The issue is with validation error messages it pushes the page down and then the text starts to overlap. To see it in action look at: https://www.homeloancenter.com/HomeEquity/HomeEquity.aspx I would greatly appreciate any help you can give. Or a push in the right direction. Hello, I am trying to absolute position two elements within a relatively positioned DIV. My relatively positioned DIV is necessary to center my content on the page. The elements within this DIV must be placed in the upper left corner of the DIV. The reason why is because I want them to be placed on top of one another. Here is the code I have thus far: <div> <div id="elem1Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;"> <img id="myItem1" src="image1.png" /> </div> <div id="elem2Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;"> <img id="myItem2" src="image2.png" /> </div> </div> Can anyone help me accomplish my goal? For some reason, the second image is always below the first image. In reality I need it right on top of the first image. At the same time, these two images centered in relation to my page. That is why I placed them in a general div element. Thank you! Crystal |
|||||||