|
CSS - Absolute Positioned Breaking Out Of Relative Container?
Code:
<div class="container"> <div>Booya</div> </div> Code:
.container {
position: relative;
}
.container div {
position: absolute;
bottom: 0;
right: 0;
}
Is there any way to position the nested div relative to its grandparent vs. its parent without losing the relative positioning, or is JS the only option? Similar TutorialsI'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work. I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing. I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach. Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image. Essentially, my code is something like this: CSS: Code:
td#CONTENTDISPLAY
{
width: 100%;
height: 100%;
text-align: left;
vertical-align: top;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
div#CONTENTBANNER
{
position: relative;
height: 100%;
padding: 0 0 0 0;
}
img.CONTENTIMG
{
position: absolute;
height: 100%;
}
HTML: Code:
...
<td id="CONTENTDISPLAY">
<div id="CONTENTBANNER">
<img class="CONTENTIMG" />
</div>
</td>
...
Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning. Can anyone help point me in the right direction? Thanks! - skubik hello, i have a centered element and i would like to create an absolutely positioned div that attaches to the left side of the centered div. ive been following this resource which states: Quote: #wrapper {position: relative; width: 760px; margin: 0 auto; text-align: left; } This will make an inner element that you absolutely position at, for example, top: 0; left: 0; appear at the top left corner of the wrapper, and not of the the top left of the entire window. and so my css is: Code:
body {
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
text-align: center;}
#container {
position:relative;
border: 4px #99968F solid;
width:587px;
margin: 20px auto;}
#left_block {
position:absolute ; top: 0px; left: 0px;
width: 299px;
height: 209px;
background-image: url(../images/mediaplayer_bg.png);}
what is happening though is that the left block is in the top left of the window and not the top left of the centred div. does anyone know how i can get this in the top left of the centred div and then ultimately to the left of the centred div (is a negative value possible?) thank you! 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 The goal of the following code is to have a search box with several tabs above it to narrow down the search. The issue is that the design calls for a little upside down triangle to appear below the tab and bleed into the text box. The code works great in Firefox and even in IE6 where the Doctype was switched to HTML 3.2. I'm using 4.01 Transitional and noticing that the arrow doesn't center itself below the tab, rather it centers itself in the entire page. If I take out the width: 100% from .searchbox li.active .downarrow, then both browsers behave the same, although the downarrow now appears in the left bottom corner of the tab rather than the center. Note that I've stripped most of the code away to narrow down the issue. Code:
<style>
.searchbox ul { float: left; padding-left: 10px; list-style: none; padding: 0; margin: 10px 0 0 0; }
.searchbox li { float: left; }
.searchbox li .downarrow { display: none; }
.searchbox li a { display: block; float: left; font-size: 12px; padding: 3px; color: #213327; }
.searchbox li.active { position: relative; }
.searchbox li.active a { color: #fff; border: 1px solid #b3b2b0; background: #266d1e url('/c2footsearchbg.jpg') repeat-x scroll top left; }
.searchbox li.active a:hover { text-decoration: none; }
.searchbox li.active .downarrow { display: block; position: absolute; bottom: -9px; width: 100%; height: 10px; text-align: center; margin: auto; }
.searchbox div { clear: both; display: inline-block; }
.searchbox input.txt { border: 2px solid #999; padding: 5px 0 0 3px; width: 305px; height: 30px; }
.searchbox input.submit { font-weight: bold; font-size: 12px; color: #fff; width: 71px; height: 30px; border: 0; background: transparent url('/c2searchbutton.jpg') no-repeat scroll top left; vertical-align: top; cursor: pointer; }
.searchbox input.submit:hover { background-position: 0 -30px; }
</style>
<div class="searchbox">
<h3>Search</h3>
<ul id="c2FootSearch">
<li class="active"><a href="/index.php">Main</a><div class="downarrow">↓</div></li>
<li><a href="/groups/">Groups</a><div class="downarrow">↓</div></li>
<li><a href="/people/">People</a><div class="downarrow">↓</div></li>
<li><a href="/petitions/">Petitions</a><div class="downarrow">↓</div></li>
<li><a href="/news/">News</a><div class="downarrow">↓</div></li>
<li><a href="http://www.google.com">Google</a><div class="downarrow">↓</div></li>
</ul>
<div>
<form action="/searchall.html" method="post">
<input type="hidden" name="search" value="main" />
<input type="text" name="q" class="txt" />
<input type="submit" value="Search" class="submit" />
</form>
</div>
</div>
hey guys JonnoWalmsley.com is giving me grief. I have a nav bar which is position:absolute; bottom:0px (so stuk to the bottom of the screen at all times, with the appropriate z-index etc). It works fine on FF, but IE seems to be starting from the center of the page, which effectively pushes the nav bar over to the right, and partially off the screen on smaller screens. Code: <div style="position:fixed; bottom:0px; background-color:#0a2a1a; width:899px;">...nav links...</div> I need IE to render the same as FF, and start the nav panel from the left. Any ideas? IE Screenshot FF Screenshot We don't use position absolute for anything else on our site, but it seems that our drop down still goes under some content. Here is the css: Code:
#nav {
background-image: url('../images/nav-full-bg.jpg');
background-repeat: repeat-x;
width: 967px;
height: 69px;
padding: 0;
margin: 0;
overflow: hidden;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display:block;
padding: 11px 12px 13px 12px;
font-weight:bold;
font-size: 13px;
font-family: "Trebuchet MS", Bitstream Vera Sans, Verdana;
color: #626262;
margin: 0;
text-decoration: none;
}
#nav li { /* all list items */
float: left;
}
#nav li ul { /* second-level lists */
position:absolute;
width: 200px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
border-bottom: 2px solid #808080;
background-image: url(../images/davidpng2.png);
z-index: 900;
}
#nav ul li {
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#nav li ul li a{
padding:5px;
display: block;
width: 190px;
color: #000;
font-weight:normal;
font-family:verdana;
font-size:11px;
}
#nav li ul li a:hover{
background-color:#a2c9f4;
}
#nav li ul ul { /* third-and-above-level lists */
margin: -23px 0 0 200px;
;
}
#nav li ul li ul li a{
display: block;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
Okay I learned html/css about two years ago, and haven't really used it much since. but I'm trying to get back into it and have run into a problem with my design. Basically what I have is a DIV tag in the index that is used to center everything on the page, and provide a border. Basically what I wanted to do was add buttons that I made in photo shop and a banner to every page I'm making, so I put them in a SSI file. That works just fine, but what I'm trying to do is make them positioned relatively positioned to the DIV in the index but still have them in the SSI file, but every time I try to add the styles to either my SSI file, style sheet for the index page, or right to the main index it wont position them inside the div. Sorry if that really didn't make sense. If you need an example take a look at the texts from last night home page (sorry it wont let me include a url) and I'm trying to get it kinda like that but with the buttons along the top of that centered outlined portion, and the banner above that. I'm really stumped here, ladies and gentlemen, so if anyone has any idea how I can get this working that would be amazingly helpful. And if I missed anything you need to know just let me know, its pretty late and I can't really think straight right now, haha Thanks in advance. Code:
#ticker {
background: transparent url('../images/dark_gradient.png');
overflow: hidden;
display: table;
margin-left: 20px;
margin-top: 10px;
width: 835px;
height: 52px;
}
#ticker #items {
position: relative;
top: 0px;
left: 829px;
}
the point is to use javascript to scroll the #items div along the container (#ticker). now, using this method, overflow: hidden does not seem to be working correctly. (i know display: table only works in FF, but this is an internal tool, so no need to make IE fixes yet) ... now, when i change display: table to display: block, the overflow works, but now the #items div is no longer relative to the container, but relative to the window. I'm creating a blog for someone, and my issue resides in <h2>. Using Wordpress, <h2> is typically the blog entry title. As you know, blog entry titles vary, because people put in different titles for different entries. I have <h2> formatted to my friend's likings, but an issue has arisen. If a blog entry title is particularly longer than the average, <h2> breaks into another line of text. This results in corrupting the layout entirely. So my question: How do I go about formatting <h2> so that the blog entry title text fills up the entire width of <h2> without breaking into a new line? Clarification (if needed): I want the font size to be dependent upon the physical length of text in the blog title Here's my code for <h2>. It resides in two containers of sorts. Code: h2
{
float:left;
font-family:"Franklin Gothic Medium";
font-size:55px;letter-spacing:-2px;
width:728px;
padding: 0;
margin: 0;
}
This is my first post/topic. Be gentle! Thanks. http://cad-design-engineering.com/New I double checked, and this page validates. (CSS and XHTML) The gray background on the right hand side - I can't adjust the width. When I do get a change, it breaks something - the links panel shifts to the bottom of the screen. Code:
#container
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding: 4px 0 0 0;
margin-right: -185px;
}
This is the output from the Firefox Web Developer plugin: Code:
#container (line 147)
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding-top: 4px;
padding-right-value: 0pt;
padding-bottom: 0pt;
padding-left-value: 0pt;
padding-left-ltr-source: physical;
padding-left-rtl-source: physical;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
margin-right-value: -185px;
margin-right-ltr-source: physical;
margin-right-rtl-source: physical;
}
Not sure what I'm doing wrong. I've been perplexed for several days on this one. Thank you. Hi all, I want to place a piece of text directly below an item that has a 'position: absolute' style on it, but when I put a div in there for the new text, it just places the text at the top of that absolute positioned item. Is there any way to get past this apart from floating the item? Cheers. Hi. I have a page with 3 absolutely positioned columns. I want the footer to set right underneath the main content. Currently I have a container for the main content and a footer <div> that sits outside of this container. However, certain browsers (NN7 & IE6) are pushing the footer down too far. Anyone know how I can control this? Here's my css: #container{ position:relative; height:100%; width:780px; } #footer { position: relative; top: 0px; left: 0px; clear:both; } I cannot get the footer to sit at the bottom of the page when I use absolute positioning. I need the #main to stretch to whatever the content height and the footer to sit underneath. I know its fairly easy to achieve with relative positioning but I need absolute positioning for for other elements. Can anyone help? html, body {height:100%;} #container { width: 900px; position: absolute; top: 0px; left: 50%; margin-left: -450px; } #header { width: 900px; height: 105px; position: absolute; left:0; top: 0; } #main { position: absolute; left:0; top: 105px; } #footer { position:absolute; bottom:0; border: 1px solid yellow; } I have created a 2-column liquid layout that works perfectly in Safari, FF(Win & Mac), Netscape(Win & Mac), IE5(Mac) and IE6(Win). In IE5 and 5.5 (Win) I don't get any images. the images are all position:absolute, with their containers set to position: relative. I tried them at first as simple image tags with a class assigned. I then tried to wrap them in Divs with ids. I also messed a little with the z-indexes. Nothing has worked so far. The HTML... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"><!-- @import url(css/base.css); --></style> <style type="text/css" media="print"><!-- @import url(css/print.css); --></style> </head> <body> <div id="container"> <div id="head"> <div id="headerTitle"><img src="images/headerTitle.gif" alt="Ken Dalton" height="100" width="325" border="0"/></div> <div id="headerGraphic"><img src="images/headerGraphic_Home.gif" alt="Header Graphic" height="100" width="400" border="0"/></div> </div> <div id="leftColumn"> <img src="images/typewriter_Home.gif" alt="typewriter" height="220" width="120" border="0"/> <p class="linkSelectedTop1">Welcome</p> <p class="link1"><a href="bio.php">Biography</a></p> <p class="link1"><a href="blog.php?category=">Musings</a></p> <p class="link1"><a href="guestBook.php">Guest Book</a></p> <p class="link1"><a href="links.php">Links</a></p> <p class="link1"><a href="mailto:ken@kendalton.com">Contact</a></p> </div> <div id="rightColumn"> <div id="rightPages48"><img src="images/rightPages48.gif" alt="graphic" height="600" width="48" border="0"/></div> <div id="krdPortrait"><img src="images/krdPortrait.gif" alt="Portrait of Ken Dalton" height="200" width="175" border="0"/></div> <h1>Welcome</h1> <p class="clear"> </p> </div> <div id="footer"><p> </p></div> </div> </body> </html> The CSS... html { height: 100%; margin: 0 auto; padding: 0; text-align: left; background-color: #000000; } body { height: 100%; margin: 0; padding: 0; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 80%; background-color: #000000; } a { text-decoration: none; color: #A50023; } #container { position: relative; margin: 0; padding: 0; min-height: 100%; } * html #container { height: 100%; } #head { position: relative; background-image: url("../images/headerBlend.gif"); background-repeat: repeat-x; background-position: 0 0; text-align: left; margin: 0; padding: 0; height: 100px; } #headerTitle { position: absolute; top: 0; left: 0; z-index: 10; } #headerGraphic { position: absolute; top: 0; right: 0; z-index: 9; } #rightPages48 { position: absolute; top: 0px; right: 0; z-index: 10; } #krdPortrait { position: absolute; top: 0px; right: 64px; z-index: 10; } #leftColumn { float: left; top: 100px; left: 0; z-index: 10; width: 120px; margin: 0; padding: 0; background-color: #000000; text-align: right; } #leftColumn p { font-weight: bold; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } #leftColumn a { color: #BFA673; } #leftColumn a:hover { color: #A50023; } .link1 { border-top: 1px solid #606880; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } .linkSelected1 { color: #A50023; border-top: 1px solid #606880; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } .linkSelectedTop1 { color: #A50023; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } #rightColumn { position: relative; min-height: 100%; margin: 0; margin-left: 120px; padding: 0; background-image: url("../images/rightColumnFill48.gif"); background-repeat: repeat-y; background-position: 100% 0%; background-color: #FFFFFF; text-align: left; } * html #rightColumn { height: 100%; } #rightColumn h1, h2, h3, h4, h5, h6, p { margin-left: 36px; margin-right: 320px; margin-top: 0px; margin-bottom: 0px; } #rightColumn h1 { font-size: 200%; color: #606880; padding-top: 36px; } #rightColumn p { color: #333333; margin-top: 9px; } #clear { width: auto; height: 500px; margin-right:48px; margin: 0; padding: 0; margin-right:48px; background-color: Transparent; } #footer { width: auto; height: 72px; margin: 0; padding: 0; background-color: #000000; } #footer p { margin-top: 36px; } I'm trying to place an absolutely positioned layer over other layers. It works in everything but Windows IE (surprise). If you remove the 'main' <DIV> it works fine (unfortunately, that is not an option). http://www.tuttobellotrouve.com/newsite/tuttobello/testpage.html CSS is internal. You SHOULD be able to see a small frame with a gift package in it, floating over a narrow horizontal box. Ideas? Thanks, Brad I'm make a simple display:hidden , display:visiable "pop up" div box. The popup works wonderful in FF but IE, the button does not display. Here is my full page (short and simple) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function DIVshow(div_id)
{
var popUp = document.getElementById(div_id);
popUp.style.visibility = "visible";
}
function DIVhide(div_id)
{
var popUp = document.getElementById(div_id);
popUp.style.visibility = "hidden";
}
</script>
<style type="text/css">
#popupcontent {
position: absolute; top: 50%; left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
visibility: hidden;
overflow: hidden;
background-color: #F6F6BB;
border: 1px solid #333;
padding: 5px;
}
</style>
</head>
<body>
<p><a href="#" onClick="DIVshow('popupcontent');">Click here</a> to open the popup.</p>
<div id="popupcontent">
<p>This is a popup window!</p>
<input type="button" value="close" onClick="DIVhide('popupcontent');" />
</div>
</body>
</html>
Working sample can be seen he Click Here It works in both IE and FF if I write my hidden div tag like this: Code: <div id="popupcontent">
<div>
<p>This is a popup window!</p>
<input type="button" value="close"
onClick="DIVhide('popupcontent');" />
</div>
</div>
Obviously I want to avoid the extra div tags if possible. Anybody know what happening here and how to fix it? Thanks! It seems strange to me if I begin a page with: body{text-align: center} and a following div with a wrapper: #wrapper{position: absolute; top: 0px} that this would push everything to the left or the right depending on the browser. It seems the logical thing to occur would be that the body tag would shift everything to the center and the wrapper would simply press up to the top of the screen. My problem is fixed simply by changing the position to relative for the wrapper, but I'm curious why that's the case. Thanks. Hi everyone. I have a header section to my website, and to line up the navigation to the top of the bottom most element, I used absolute positioning to acheive this inside a relative positioned element. The strange thing is is that when first loaded, the absolutely positioned navigation is pulled completely from the parent relative div and shoved to the top of the screen. However, on refresh it jumps to where it should be per the css. Here's the CSS... Code:
#hd {
position: relative;
float: left;
width: 780px;
margin: 30px 0 0 0;
padding: 0;
background-color: #0099CC;
}
#hdlogo {
float: left;
margin: 0 0 18px 0;
padding: 0;
text-align: left;
}
#hdnav {
margin: 0;
padding: 0;
}
#hdnav ul {
position: absolute;
bottom: 16px;
right: 0;
height: 22px;
margin: 0;
padding: 0;
}
#hdnav ul li {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
#hdnav ul li a:link img, #hdnav ul li a:visited img {
border: 0;
}
#hdbar {
clear: right;
width: 780px;
margin: 0;
padding: 0;
}
And the HTML... Code: <div id="hd"> <div id="hdlogo"> <img src="images/logo.gif" alt="Home" title="Home"/> </div> <div id="hdnav"> <ul> <li><a href="index.htm"><img src="images/home.gif" alt="Home" title="Home" /></a></li> <li><a href="aboutus.htm"><img src="images/aboutus.gif" alt="About us" title="About us" /></a></li> <li><a href="performance.htm"><img src="images/performance.gif" alt="Performance" title="Performance" /></a></li> <li><a href="aesthetics.htm"><img src="images/aesthetics.gif" alt="Aesthetics" title="Aesthetics" /></a></li> <li><a href="sustainability.htm"><img src="images/sustainability.gif" alt="Sustainability" title="Sustainability" /></a></li> </ul> </div> <div id="hdbar"> <img src="images/hd-bar.gif" alt="" title="" /> <!-- hd-bar is 780px wide by 16px high --> </div> </div> Just for further knowledge, here's the body tag, and the two container wraps for the rest of the site... Code:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #555759;
}
body a:link, body a:visited {
text-decoration: underline;
color: #555759;
}
body a:hover {
text-decoration: underline;
color: #555759;
}
#content {
width: 780px;
margin: 0 auto;
padding: 0;
}
#allwrap {
float: left;
width: 780px;
margin: 0;
padding: 0;
}
#content centers everything and #allwrap is a container for all it's child elements. I've also had a colleague that said in IE 6.0 that the navigation stacks, rather than displays inline. Does anyone have any ideas? Thanks a bunch.. -Brian Below is a simple test page that fails to load properly on the Mozilla browser. It appears to work properly in IE. Any suggestions to getting the span width to set properly, based upon the content of the span would be a great help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Span test</title> <style TYPE="text/css"> .submenu { background-color: #FFFFFF; color: #D4BA6B; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; border-bottom: 0px solid #000000; position: absolute; margin: 0px; padding: 0px; min-width: 100px; visibility: visible; z-index: 1; } .submenuItem { background-color: #FFFFFF; color: #000000; border-left: 2px solid #ff0000; border-right: 2px solid #ff0000; border-bottom: 2px solid #ff0000; border-top: 2px solid #ff0000; font-family: "arial narrow", arial, verdana, sans-serif; font-weight: normal; font-size: 12pt; padding-top: 2px; padding-bottom: 2px; padding-right: 5px; padding-left: 5px; position: absolute; z-index: 1; cursor: pointer; cursor: hand; } </style> <SCRIPT LANGUAGE="javascript"> function getWidth() { oSpan = document.getElementById("testSpan"); iWidth1 = oSpan.offsetWidth; alert ("Width1 = " + iWidth1); } </SCRIPT> </head> <body onload="getWidth()"> <div class="submenu"> <span class="submenuItem" id="testSpan">This is the item that I am testing today.</span> </div> </body> </html> |
|||||||