|
CSS - Position An Element Outside Its Container
Hoping someone can help. I'm trying to figure out a way to align something to the left of an existing element within a container of variable height. The existing element is already aligned to the left edge of the container. To be more specific, I am trying to place a helper graphic to the left of the email text-field in the "Leave a Comment" form (not the "Email this Zing" form) on this page:
http://www.zingfu.com/?zing=4419693e9e98f If it's possible to the place the helper graphic right next to the text field in the code, but then to break it out of the container div to move to the left of the text field, that would be great. Or if I could apply positioning to the helper graphic based on the positioning of the text field, that'd be fine too. But I'm not sure if either is possible. Little help? Similar TutorialsI have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. I want to position my website logo to top left corner (0,0) and I dont want it push my container div down. I cant place logo tag within container tag because the logo overflows to left. if you couldnt picture it in your mind, please check the attached image thank you in advance. http://www.refinethetaste.com/html/ Hello; i'd like to ask you how to set the smiles of the images to the center of a container? please. my code as following; Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>welcome to my page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
#container
{
padding: 1px;
border: 1px;
width: 150px;
background-color: lightblue;
margin: auto;
}
#container p
{
padding: 0;
margin: 0;
text-align: center;
}
#smile ul
{
margin-left: 0;
padding: 0;
text-align: center;
}
#container li
{
display: inline;
list-style: none;
text-align: center;
margin:0;
padding: 0;
}
#container img
{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id= "container">
<p> smile </p>
<ul id="sul">
<li> <img alt="h" src="honorhim.jpg" >
<li> <img alt="c" src="cool.gif" >
<li> <img alt="t" src="tongue.gif">
<li> <img alt="s" src="smile.jpg">
<li> <img alt="z" src="zall_coho.gif">
<li> <img alt="b" src="biggrin.gif">
<li> <img alt="con" src="cool.gif">
<li> <img alt="r" src="razz.gif">
</ul>
</div>
</body>
</html>
I have a container div that has a height of 500px. My page content only takes up about 300px and I want a copyright notice at the bottom of the page. So I am trying to get the copyright div to bottom align on the container div. In FF, position:absolute;bottom:0; works but that doesn't work in IE which for some reason places the div outside the container div. Any tips on how to do this? Hi, I'm trying to do something that is simple with table cells but which I'm finding difficult using CSS. Basically I have a container div that is 400px height. I want to position 3 divs in a row (float: left) at the bottom of that div and put an image in each of them. So, in short... <div id="outer"> <div id="inner1"><img src="x.jpg" /></div> <div id="inner2"><img src="y.jpg" /></div> <div id="inner3"><img src="z.jpg" /></div> </div> ...where the three images are bottom aligned. I want to have the images in their own div containers so that I can give each of their boxes 33% of the screen width and set apdding if required. No doubt I'm approaching this the wrong way. Can anyone help? Thanks, Pat Hi all 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>
<title> new document </title>
<style>
div.outer {
background-color: yellow;
overflow: auto;
}
h1 {
margin: 10px;
}
</style>
</head>
<body>
<div class="outer">
<h1>Title</h1>
</div>
</body>
</html>
Expected result (Firefox): expected.JPG Unexpected result (Internet Explorer): unexpected.JPG Is there something I can do against this instead of adding a padding-top to the H1 or a padding-top to the div.outer? Thanks for help, Josh I'm looking for a CSS element that behaves like a table, where the size of the container will always be just big enough to surround the data inside, and will grow or shrink based on the content inside without having to specify any widths or heights. A div (with a border) with no width specified will go on forever horizontally. A table (with a border) with no width will stop as soon as the data inside ends. Is there a way to simulate this table behavior using CSS? Thanks okay I don't know why my text will not wrap in any of my "float:rights" My quicklink section I don't care about as much as the feature student section I'm building. The text spills out of the paragrah block and keeps running. http://www.mgan.net/form-honors/main(2).htm Any thoughts on how to fix it or a link to a site that would explain it's just as good Hi all, The easiest way to see the problem is to look at this demo in firefox. (I haven't patched it to work in IE yet.) The menu items in the 1st 2 menu's don't expand to fill the available area. Any ideas? I have a "see details" link over in the bottom right of a table cell - exactly were I want it. But when I resize the browser window to make it smaller and squish it together the link does not stay in its cell but goes left crashing into content. How do I keep it wrapping but still hugging the right wall of the rightmost cell? Using Mozilla. I have the code below - you'll see. Thanks <html> <table border 1px> <tr> <td>Configuration Management System</td> <td><ahref=http://ms.fc.na.bz/>http://ms.fc.na.bz/</a></td> <td>Source for configuration management documents and drawings from many projects. These are primarily engineering design documents. Each Directorate must be searched separately... <a STYLE="position: absolute; right: 20px; color:red;" href=details. php?id=3&Type_view= detail&Type_Submit=&key_word= > see details</a> </td> </tr> </table> <html> For most of my webpages, I use a few element templates for body, div, etc. I'm using more positioning in my pages, and so for the sake of nested div's, I want to add some standardized positioning to my template:
Code: div{
padding: 0;
margin: 0;
border: 0 #000000 solid;
/*** added positioning atributes ***/
position: relative;
top: 0;
left: 0;
z-index: 0;
}
I know that some of this is "standard", but I want to be absolutely sure the browser is going to render my page as I want it. My question is, will/should adding this positioning increase the processing/rendering time of the page (as using table-less design uses a lot of divs)? It's probably a silly thing to worry about, but I'm also interested in what atributes are more processing intensive. Please look at this page - http://www.mts-diesel.com/index.php?cPath=20_23_42 The breadcrumb trail links on the main page in FF are higher up than the same element in Chrome and IE. If anyone can shed some light it would be greatly appreciated. Thanks so much, Tom *** After posting I have been playing with other options, but would still love to know why the bg position on .container_12 does not work. Please look at this page http://www.mts-diesel.com/index.php?cPath=20_24_56 There is an element w/ an class of container_12 that I have put an inline style declaration of style="background:transparent url(images/container_12_bg.jpg) 0 1000px !important;" I am trying to push the background down below the navigation but for some reason I can only move the background image to the right, and not down as needed. Thank you for any help. Tom I have a sad feeling that its not possible, but I thought I'd ask anyway... I have a box element that is 150px x 400px with overflow: scroll; The box contains a large list of links. Now, the user can scroll down and click on a link in the box, which causes the page to refresh. Is there a way of making the scroll bar in the box "drop down" to the element that was clicked when the page is refreshed? It would be very similar to how named anchors work to force a whole page to scroll to a certain position.... I don't know why but for some reason I thought if you give an element a position of absolute the margin is irrelevant. Not so in FF huh? Tom I can't figure out why the ul with the id #two is not responding to my position attempt. It is child of an li in the ul w/ a class .menu on www.eagletransmission.net If you mouse over Gallery the dropdown should be flush with the left side of the parent li but it is not. Aaaaargh Tom Hey, I've got a quick question - I know this must have a common workaround to it, I just can't seem to find it. I have a div positioned absolutely within several parent divs making up the rest of the page. To put the issue simply, it seems to be positioning this child div relative to the body. top:20; and left:20; will put it 20 from the top and left of the body of the page rather than he top and left of the block level div it's nested within. There's no positioning applied to its direct parent. The issue is the same in both IE5.5+ and FF. I can whip up a code example, but I think this is a simple issue that would be easier interpreted as I've put it. Thanks in advance for any help on this. =) I am working with a dynamic page of search results where a link that should reveal a hidden layer could occur multiple times. My problem is that I need the popup layer to position relative to the link that called it, NOT to the whole page. Right now, now matter which link is clicked it shows up in the same place on the page. I have found many examples where this is the desired effect, multiple links affecting a single result area, but I can't find an example for what I need. It's similar to a sub-menu being relative to a drop-down parent, but those all seem to use lists. This shouldn't be that complicated! Thanks for any help! Here is what I've got: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Popup Test</title> <style type="text/css" media="screen"><!-- div#outer { position: relative; display: none; margin: 0; } .inner { padding-bottom: 4px; background-color: #ccc; text-align: center; position: absolute; left: 0px; top: 30px; width: 256px; border: solid 1px #333; } .inner img { border: 1px solid #333; } --></style> <script type="text/javascript"> function toggleLayer(whichLayer) { if (document.getElementById) { // this is the way the standards work var style2 = document.getElementById(whichLayer).style; style2.display = style2.display? "":"block"; } else if (document.all) { // this is the way old msie versions work var style2 = document.all[whichLayer].style; style2.display = style2.display? "":"block"; } else if (document.layers) { // this is the way nn4 works var style2 = document.layers[whichLayer].style; style2.display = style2.display? "":"block"; } } </script> </head> <body> <table width="740" border="0" cellspacing="0" cellpadding="0"> <tr valign="top" height="100"> <td class="searchresult" colspan="2" valign="top" width="740" height="120"> <div id="outer"> <div class="inner"> <a href="javascript:toggleLayer('outer');" title="Click to Close"><img src="http://www.google.com/images/logo_sm.gif" alt="Google" height="55" width="150" border="0" vspace="3"><br> Close</a> </div> </div> <a href="javascript:toggleLayer('outer');">popup link 1</a> </td> </tr> </table> <table width="740" border="0" cellspacing="0" cellpadding="0"> <tr valign="top" height="100"> <td class="searchresult" colspan="2" valign="top" width="740" height="100"> <div id="outer"> <div class="inner"> <a href="javascript:toggleLayer('outer');" title="Click to Close"><img src="http://www.google.com/images/logo_sm.gif" alt="Google" height="55" width="150" border="0" vspace="3"><br> Close</a> </div> </div> <a href="javascript:toggleLayer('outer');">popup link 2</a> </td> </tr> </table> </body> </html> Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim |
|||||||