|
CSS - Absolutely Relative Positiong
Hey everyone,
I remember once reading an article on positioning everything relative when doing a float site using CSS. The problem is, if I do something like: css Code: Original - css Code html *{ position:relative; }
It seems to only apply relative positioning to absolutely nothing. Then if I do something like: css Code: Original - css Code html * *{ position:relative; }
It seems to apply anything that is an immediate child of <body> Now the real problem is, if I do something like: css Code: Original - css Code html * * *{ position:relative; }
It seems to only apply the relative positioning to grandchildren of <body>. That is to say children of children of <body>. IE: html4strict Code: Original - html4strict Code <body> <div><!-- not relative --> <p><!-- is relative --> </div> </body>
Is there way to easily set it up so that everything is relatively positioned? Similar Tutorialshi, did some searching but couldn't find the answer i'm looking for. if i have an image on a page, how can i position a layer relative to the image, ie: top left corner of the image... do i place the image in a div tag, or can i somehow get its x,y position? thanks 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>
I have a section of my application where I need a menu containing forms in a box aligned to the left. When one of these form names are clicked, I need it to unhide the div and display the proper form to the right of the menu. This works fine in Internet Explorer, but when the forms become visible in Firefox they completely cover up the menu. Here's what I've got: CSS Code: #forms .form { display: none; position: absolute; left: 0; top: 0; }
#forms { position: relative; }
#adminbar { float: left; border: 1px solid #000; padding: 5px; position: relative; }
HTML Code: <div id="adminbar">
<a href="javascript:void(0);" onclick="hide(getElementsByClassName('form')); show('software');">Software</a>
</div>
<div id="forms">
<div id="software" class="form">
<h1>Software Administration</h1>
<form class="ttcform">
<fieldset>
<legend>New Software Item</legend>
<ol>
<li>
<label>Software Name</label>
<input type="text" size="30" name="name"/>
</li>
</ol>
</fieldset>
<fieldset class="submit" align="center">
<input type="submit" name="submit" value="Create Software"/>
</fieldset>
</form>
<hr>
<form class="ttcform">
<fieldset>
<legend>Edit Software Item</legend>
<ol>
<li>
<label>Software Name</label>
<input type="text" size="30" name="name"/>
</li>
</ol>
</fieldset>
<fieldset class="submit" align="center">
<input type="submit" name="submit" value="Create Software"/>
</fieldset>
</form>
</div>
</div>
Javascript (In case you need it): Code: function show(el) {
if(typeof el == 'string') {
document.getElementById(el).style.display = 'block';
return true;
}
else if(typeof el == 'object') {
for(var i = 0; i < el.length; i++) {
if(typeof el == 'object') {
hide(el[i].id);
}
else {
hide(el[i]);
}
}
return true;
}
return false;
}
function hide(el) {
if(typeof el == 'string') {
document.getElementById(el).style.display = 'none';
return true;
}
else if(typeof el == 'object') {
for(var i = 0; i < el.length; i++) {
if(typeof el == 'object') {
hide(el[i].id);
}
else {
hide(el[i]);
}
}
return true;
}
return false;
}
function getElementsByClassName(className) {
var retEls = [];
var els = document.getElementsByTagName('*');
for(var i = 0; i < els.length; i++) {
if(els[i].className == className) {
retEls.push(els[i]);
}
}
return retEls
}
Sorry if this has been discussed, I can't seem to find it if it has been. I'm attempting to absolutely display several <div> tags, with padding and a set width/height. However, when I place them side by side, the borders overlap, and the width/height is larger than the values I've assigned. Is there some sort of formula to calculate the left, top, width and height values to make it so they do not overlap, the padding is applied, and the correct width/height is displayed (cross-browser, back to at least IE 6)? Thanks! I've been playing around with centering an absolutely positioned div and in this post is the method I've come up with. I've tested it in firefox and IE but am curious as to whether it works in opera and if there are better ways of doing it. The div needs to be absolutely positioned because I'm using top & bottom to set it's height. Here's the code 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" lang="en" xml:lang="en">
<head>
<title>Center Test</title>
<style>
body
{
margin: 0px;
height: 100%;
}
.centered
{
position: absolute;
border: 2px solid black;
width: 196px;
background: orange;
margin: auto;
top: 100px;
left: 0px;
right: 0px;
bottom: 100px;
min-height: 50px;
height: expression((document.body.clientHeight < 250 ? 50 : document.body.clientHeight - 200 ) + 'px');
left: expression('auto');
right: expression(((document.body.clientWidth < 200 ? document.body.clientWidth - 200: document.body.clientWidth / 2 - 100 )) + 'px');
}
</style>
</head>
<body>
<div class='centered'>
I'm a centered absolutely positioned div.
</div>
</body>
</html>
Hi I need to create a base box with 9 sub elements, four boxes in each of the four corners, four edges between the corners and a center box. The problem I'm having is that I can only position the corner and edge boxes precisely if I make the base box absolute and position the sub boxes absolutely. The problem with this though is that the base box "offsetHeight" property never grows when items are added to it. The items appear in their correct position but the base box height is always zero. The only time the base box changes size is if I add text to it. Is there no way to create a box with precisely positioned sub elements that grows in depth in response to added sub divs? Thanks for any help. What causes this? I have my small login form absolutely positioned relative to the content div, and it displays differently when there is/isn't content in it... have a look Test you can click the link to remove the data and position the bitlogin div as it is supposed to be... when the content is added, the bitlogin div moves down approx. 13px... What's the deal? Hello I have a DIV (let's call it "the parent") which contains three child DIVs. Each of the children has some text in it. Neither the parent nor any of the three children have any special positioning attributes applied to them, and so the parent sizes just so that it wraps the children. So far so good. Now I want another DIV child, which when visible will completly fill the parent (using the size the parent now has because of its other three children, not stretching the parent in any way). I tried giving the parent "position:relative", and giving this fourth child "position:absolute; top:0; left:0; width:100%; height:100%", which works fine in FF but doesn't work in IE. I tried also "bottom:0; right:0" instead of the "width:100%; height:100%", still to no avail. Is there a way to make this work in IE? Is there maybe another way to make this without absolutely-positioning the fourth DIV? Cheers, Calius Sample code follows: Code: <html> <body> This is a test<br /> <div style="width:400px; position:relative; border:1px solid red;"> <div style="position:absolute; background-color:green; height:100%; left:0; top:0; width:100%;">COVER ALL</div> <div style="border:1px solid blue; margin-bottom:16px;">1</div> <div style="border:1px solid blue; margin-bottom:16px;">2</div> <div style="border:1px solid blue;">3</div> </div> This is a test<br /> </body> </html> Can someone tell me how z-index calculated on two elements that are both absolute position I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I am trying to create an image that stays in one place no matter how large the window is. This seems to work great in FF but when i open it in IE the image is not where i positioned it! Has anyone ever seen this? Thanks. Code:
#apDiv4 {
position:relative;
left:370px;
top:328px;
width:154px;
height:130px;
z-index:1;
clip: rect(auto,auto,auto,0px);
margin-left: auto;
margin-right: auto;
}
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>
I'm having an issue using position: relative in IE6. Basically I'm doing this: Code:
<style>
.class1 {
width: 900px;
padding: 0px;
margin: 0 auto 0 auto;
}
.floatimg {
position: relative;
top: -200px;
left: 0px;
padding: 0px;
margin: 0px;
}
</style>
<div class="class1">
<img class="floatimg" src="foo.gif" />
<p>Some text.</p>
</div>
So, basically I'm trying to move the image up a bit in the div. This works in the latest firefox and IE7, but in IE6 the image moves up, but the text does not. It stays as if the image had not been moved and this leaves a big gap. Hi, Code can be found below and output as it is currently @ http://www.generating-sets.com/index.new.php Anyway, I have the box with the id of 'newsbar'. My problem is i want this box in the following posistion: It should sit on the bottom footer bar and be in between the two sidebars. The code below makes it overlap the two sidebars. So how could i make the posistion relative to the two side bars so it nests in the middle? All this CSS is doing my head in, but for glory without tables! lol Charlie PHP Code: h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} a:link {color: #ffffff; text-decoration: none;} a:hover {color: #dedbcb; text-decoration: underline;} a:visited { color: #ffffff; text-decoration: none;} body {margin: 0; padding: 0; font-family: sans-serif; font-size: .7em; line-height: 1.4em} div#header {padding: 2%; text-align: center; background-color: #0e2e3b; color: #ffffff; margin-bottom: 2px; border-bottom: solid #ffffff 1px} div#navbar {padding: 0%; text-align: center; background-color: #0e2e3b; color: #ffffff; margin-bottom: 0px; border-bottom: solid #ffffff 1px} div#newsbar {padding: 1%; text-align: center; background-color: #0e2e3b; color: #ffffff; margin-bottom: 0px; border: 2px #ffffff solid; position: relative;} div#footer {padding: 0%; text-align: center; color: #ffffff; clear: both; background-color: #0e2e3b; border-top: solid #ffffff 1px} div#maincontent {padding: 2%; text-align: justify; margin-left: 150px; background-color: #0e2e3b; color: #ffffff; margin-bottom: 2px; border-right: solid #ffffff 1px; border-left: solid #ffffff 1px} div#leftcolumn {padding: 2%; float: left; text-align: right; background-color: #0e2e3b; color: #ffffff; width: 150px;} div#rightcolumn {padding: 2%; float: right; text-align: right; background-color: #0e2e3b; color: #ffffff; width: 10px;} Im working on a project that required some css that I'm not used to using to pull off an effect. here is the url http://www.staging.crea8te.com/ftea I'm having one issue: Issue: the basic structure is <div1>position: relative <subdiv></div>position:absolute <subdiv></div>position:absolute </div> <div2> </div> <div3 </div> I'm not a pro at using positioning by any means with something like this and I don't understand why div2 is sitting at the top instead of at the bottom of div1. div 2 and 3 display correctly .. just arent showing up at the bottom of div1 i can paste the html and css if necessary it is just kind of a lot and didnt want to have a huge post.... any ideas? Okay I have a big problem and I don't know what is happening and it's really really bugging me. I have some extra space at the top of my page, it's about 10 lines in height. the items below the space are made up of two classes. They are .source and .quote. I tried using position:relative so that they move up but I have a problem. I tried Code: position:relative;bottom:7em; but that just amde them disapear leaving just their space. Also the .source iems are missing already and I don't know how to make them apear. I'm not hiding them at all at any point. http://142.177.157.241:8080/bikers/ the automatic parse URLs options doens't work even when it's used. Hi! I can not solve one problem. As You can see here bezlica.ru/joomla/ , I need to have image "contacts" at the bottom of the grave. Currently, it is relative to top and works fine on different resolutions. But, if content needs to be expanded like this bezlica.ru/joomla/index.php?option=com_content&task=view&id=12&Itemid=9, images drops down from the grave to bottom. Maybe there is a way to make it relative to the bottom of the screen, or some other solution? It needs to stay fixed where it is on different resolutions, that is why it is so hard for me! Any help will be appreciated. Regards, Konstantin. I am trying to have div mian, lightback, and darkback extend vertically to accommodate all cnav and content items. Obviously it is not working, but I cannot seem to spot my mistake. I would be very grateful if someone would be able to help me find where I am going wrong. HTML. Code:
<div id="main">
<div id="lightback">
<div id="darkback">
<div id="contentnav">
<div class="cnavlink"></div>
<div class="cnavspacer"></div>
<div class="cnavitem"></div>
<div class="cnavitem"></div>
<div class="cnavspacer"></div>
<div id="cnavbox"></div>
</div>
<div id="contentbox">
THIS IS CONTENT
</div>
</div>
</div>
</div>
CSS: Code:
#main {
width: 761px;
position: absolute;
left: 100px;
top: 328px;
height: auto;
}
#lightback {
background-color: #222322;
border-top-width: 0px;
border-right-width: 3px;
border-bottom-width: 0px;
border-left-width: 3px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #C6A084;
border-right-color: #C6A084;
border-bottom-color: #C6A084;
border-left-color: #C6A084;
position: relative;
height: auto;
width: 755px;
}
#darkback {
background-color: #131313;
height: auto;
width: 745px;
margin-right: 7px;
margin-left: 4px;
position: relative;
}
#contentnav {
position: relative;
width: 150px;
margin: 4px;
float: right;
background-color: #131313;
border-top-width: 10px;
border-bottom-width: 10px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #424242;
border-bottom-color: #424242;
}
.cnavspacer {
background-color: #424242;
height: 10px;
width: 100%;
position: relative;
}
.cnavlink {
background-color: #282828;
background-repeat: repeat;
height: 21.5px;
width: 100%;
position: relative;
margin-top: 2px;
margin-bottom: 2px;
}
.cnavitem {
width: 100%;
height: 150px;
margin-bottom: 4px;
position: relative;
background-color: #424242;
margin-top: 4px;
}
#cnavbox {
width: 100%;
height: 50px;
margin-bottom: 4px;
position: relative;
background-color: #424242;
margin-top: 4px;
}
#contentbox {
background-color: #222322;
width: 577px;
position: relative;
float:left;
border-top-width: 10px;
border-right-width: 1px;
border-bottom-width: 10px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #424242;
border-right-color: #424242;
border-bottom-color: #424242;
border-left-color: #424242;
margin-top: 4px;
margin-right: 4px;
margin-bottom: 4px;
margin-left: 3px;
}
Hi, I'm following a tutorial and I would like to understand the position functioning. I have a box container and some elements in. In the css, the are all set relative position. I don't understand why the second element (AMPT) has its contain offset and third one (Writing) is not. I understand that the first element has like a reference the container box. I would sincerely glad if you can help me to understand the relative positioning. Thanks in advance. PS: I'm using firefox and here is the code: artefact89.free.fr/relative.html (without www) |
|||||||