|
CSS - Absolutely Positioning Troubles (again)
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
}
Similar TutorialsHere's my page. It's a catalogue of all my DVDs. I'm having a problem such that rows underneath rows with multiple lines of text (you'll see what I mean) are missed out. Anyone know what I'm missing? To save you all some time, here's the CSS for it: Code: div.dvd {
float: left;
width: 200px;
margin: 20px 40px 20px 40px;
text-align: center;
border: 1px;
}
I have a gap between my <td> data. HTML Code: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="11" height="31"><img src="/images/header_left.jpg" width="11" height="31" border="0" alt="" /></td> <td class="header" height="31"><? echo $query_data[3]; ?> <? echo $query_data[0]; ?></td> <td width="16" height="31"><img src="/images/header_right.jpg" width="16" height="31" border="0" alt="" /></td> </tr> <tr> <td class="smaller" colspan="2"><b><? echo $query_data[1]; ?></b><br /> <? echo nl2br($query_data[2]); ?><br /> and so on... CSS Code:
.header {
background-image: url(http://www.mysite.com/images/header_fill.jpg);
background-repeat: repeat-x;
}
This displays nicely in Firefox et al. But IE sucks so... Any suggestions? Please and thanks. 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? 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>
Can someone tell me how z-index calculated on two elements that are both absolute position 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? 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. 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>
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> 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? Can someone please take a look at my CSS on this page and let me know what fixes I need to implement/read about in order to get the page to look acceptable in IE. I've checked and both the CSS and HTML are valid. I'm feeling more and more confident in my CSS abilities as time goes by but I can't seem to get a grasp on ALL the fixes IE seems to require. Thanks in advance! stuboo Hi, First post, first issue ... I am having some difficulties with the tag <table> in a fluid layout. without the attribute width set to 100%, the table is at the the top. If I set it up, the table goes down to the bottom. Can anybody explain why? ----------- 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 Here</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <STYLE> #outer_wrapper { width: 800px; } #container { float: left; } #left { background: #BBB; width: 150px; float: left; padding: 0px; border: solid 1px #000; } #main { background: #EEE; padding:4px; padding-left:160px; border: solid 1px #000; } table { border: solid 1px #A4A4A4; } </STYLE> </head> <body> <div id="outer_wrapper"> <div id="container"> <div id="left"> left here<br/><br/><br/><br/><br/><br/> </div> <div id="main"> <table cellspacing="0" cellpadding="2" width="100%"> <tr> <td align="top" valign="top"><b>Line 1</b></td> <td align="right">Line 2</td> </tr> </table> </div> </div> </div> <div id="footer"> footer here </div> </center> </body> </html> http://turkeybot.info/flash/play.php?id=121 When you go below the game eand hover where it says to, the instructions for the game come up. Problem is, the z-index I set for it isn't working, and it's letting the form below it override it. What's the problem? K, finally got a working drop down menu, pretty well exactly how I want it...however, in IE it works properly, but in FF it seems to grow in width and cover the drop down part up. Probably somethin to do with a preset 'td' width in my html, but not sure. Here is what i'm talking about, and here is the style sheet. Any help is greatly appreciated! Hello everyone. I am new to CSS and I have been trying to create a CSS layout composed of a 2x2 grid using DIVs. The top cells have fixed width and height, with the bottom ones having fixed width and variable height depending on the content. I achieved this with success as they look as intended in IE8 (don't have 9 available) and the latest versions of Firefox and Opera. In Chrome (and Safari for that matter), sometimes it will render just fine or look one or two pixels out of place depending on the width of the browser window. Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<style type="text/css">
html,body {
margin: 0px;
background-image: url(http://i.imgur.com/NHbHt.png);
background-repeat: repeat-y;
background-position: center;
background-color: #f7f4ee;
text-align: center;
}
#wrap {
width:750px;
margin:0px auto;
text-align:left;
}
#topleft {
display:block;
margin-left:1px;
float:left;
width:572px;
height:127px;
background-color:#ccc;
padding:0px 0px
text-align:left;
}
#topright {
display:block;
margin-left:1px;
margin-right:1px;
float:left;
width:175px;
height:127px;
background-color:#ffffff;
padding:0px 0px;
text-align:left;
}
#bottomleft {
display:block;
margin-left:1px;
float:left;
width:572px;
background-color: yellow;
padding:0px 0px
text-align:left;
}
#bottomright {
display:block;
margin-left:1px;
margin-right:1px;
float:left;
width:175px;
background-color:green;
padding:0px 0px;
text-align:left;
}
</style>
</head>
<body>
<div id="wrap">
<!-- Slideshow -->
<div id="topleft">
topleft
</div>
<!-- Logo -->
<div id="topright">
<img src="logo.png" alt="logo" width="175" height="127">
</div>
<!-- Contents -->
<div id="bottomleft">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ipsum nec justo auctor tristique in eu sapien. Vestibulum commodo lacinia volutpat. Donec tempor imperdiet sagittis. Cras gravida viverra nisi eget adipiscing. Mauris quis sollicitudin odio. Nunc eu nulla enim, at tempor nibh. Maecenas iaculis egestas condimentum. Praesent non odio velit.
</div>
<!-- Menu -->
<div id="bottomright">
bottomright
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<p>Sidebar</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ipsum nec justo auctor tristique in eu sapien. Vestibulum commodo lacinia volutpat. Donec tempor imperdiet sagittis. Cras gravida viverra nisi eget adipiscing. Mauris quis sollicitudin odio. Nunc eu nulla enim, at tempor nibh. Maecenas iaculis egestas condimentum. </p>
</div>
</div>
</body>
</html>
The lines shown are part of the background, as it was the easiest solution I came across with to make it look like the columns go all the way down to the bottom of the page. So, I believe my issue lies on the DIVs and/or the centered background but I have no idea how to work around this. Thanks in advance for your time and advice. Cheers Hi all probably a stupid question but i cant find the answer i am making a site and when i zoom out in the browser the page sits to the left, how do i make it stay in the center Cheers Howdy, Very simple css layout, but IE (7) is messing it up. What else is new. Header div is centered with the curved top border (16 pixels high), uses background tag in css. body mas a main background, which is centered. it's an 800pixel wide gif with 20 pixel sides which leaves 760 white pixels in the middle. main container is 760 pixels wide, and centered thus creating the layout. header and body combined should make a seamless border around the main container. but it doesn't in IE. why not?!?! it works well in FFX, Chrome, Safari, Opera. argh. can't seem to post urls, so i'll have to post my code: 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> <title>GreenSky Capital Inc. :: Customized Financial Solutions :: Home</title> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="header"></div> <div id="container_main"> Put some text here. </div> </body> </html> CSS: Code: html,body {
margin: 0px;
padding: 0px;
background: #e0e0e0 url(../images/bg_main.gif) repeat-y center top;
font-family: verdana,"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #6C6C6C;
text-align: center;
}
#header { margin: 0 auto; width:800px; padding:0; height: 16px; background: #e0e0e0;background: url(../images/bg_top.gif) no-repeat top right ;}
#top_nav { margin: 0; padding:0; width:230px;height: 180px;}
#top_sep { margin: 0 auto; padding:0; }
#container_main { margin: 0 auto; padding:0;width:760px; background:#fff; }
#container_content { width:720px; margin: 0 20px 0 20px; background:#fff; text-align: left; }
#roscripts_m4 { margin:0; padding:0;width:100%;}
#roscripts_m4 li { margin:0; padding:0;display:inline;list-style-type: none; }
#roscripts_m4 a:link, #roscripts_m4 a:visited { color: #056839;width:230px;text-align:left;text-indent:15px;float:left;font-size:11px;height: 30px;line-height: 30px;font-weight: bold;text-decoration: none;border-bottom:1px solid #6AB94E;}
#roscripts_m4 a:link.active, #roscripts_m4 a:visited.active, #roscripts_m4 a:hover {color: #fff;background: url(../images/bg_nav.gif) no-repeat top left ;}
#news, #support {background: #efefef; }
#footer { margin: 0 auto; padding:0; width:760px; height: 30px; clear:both; text-align: center;}
.sidebox { margin-top:40px; background: url(../images/bg_side.gif) no-repeat top center; height: 300px;}
.sidebox_head h2 { margin: 0; padding: 16px; 0 0 10px; color: #fff; font-size: 12px; }
.sidebox_body { margin: 0; padding: 0 0 0 10px; border: 0; font-size: 11px; }
.sidebox_body p, .sidebox_body form {margin: 0; padding: 0;}
.sidebox_body form label { width: 200px; position : relative; display : block; }
.sidebox_body form label input { position : absolute; left : 40%; top : 0px; }
.sidebox_body form input,.sidebox_body form textarea { font-size: 10px; border: 1px solid #c0c0c0; background: #e0e0e0; }
.sidebox_body form textarea { font-family: verdana, arial, helvetica; font-size: 10px; width: 200px; height: 50px; overflow:hidden}
.sidebox_body form span { float:right;margin-right:20px;}
.sidebox_body form submit {border: 1px solid #c0c0c0; background: #e0e0e0;}
#content_right h1 { font-size: 20px; color: #056839; width: 100%; border-bottom:1px solid #056839; }
#content_right h2 { font-size: 12px; color: #056839; width: 100%; }
#content_right li {padding-bottom: 10px;}
any help would be much appreciated! thanks, ynot2k is there any way to have the background of a table be at 50% opacity and the text be at 100% opacity? i've been playing with this code: style="filter:Alpha(Opacity=xx)" ...where xx is 50 or 100 and have placed it within the <table> tag and also within a <font> tag, but nothing seems to work. the font wants to be the same opacity as the table. is there any way around this? on a possible workaround, i've tried using semi-transparent PNG file as the background of the table, and that didn't work. i couldn't get the PNG file to do semi-transparent. it wanted to do a diffusion transparency, which looked like @ss. |
|||||||