Printable View
How do I make a DIV centered on the page, but down a certain amount? If I use absolute positioning, it's going to move it to a given place on the screen, but I need to allow for different widths of the screen. And I need to have the top of the div at 150 px from the top of the window.
Solution? :)
This won't work perfectly, but I don't know of a better way.
adject the left depending on how wide the div is.Code:.myDiv {
position: absolute;
top: 150 px;
left: 40%;
}
if the container has centered text (text-align: center;) the div 'should' be centered (although firefox appears not to do this).
As to the space above, well if there is nothing else there, use a margin?
Vince
try using top-margin: 150px;
not sure about the centering though.
I think what I'm going to do is nest the divs and have the first one centered and base it off of that, since I'll know the width of the container.
as some one's who just done this....
margin-left: auto;
margin-right: auto;
top: 15px; /* or what ever distance you want... or yo ucould use margin-top: xxxxx */
TG
That doesn't work for my application, because my margins are wider than the div.
Ecniv, this behaviour is a bug of IE5 and IE6 in quirks mode.
ober, what do you mean by "margins are wider than the div"?
Well, unless I misunderstand the purpose and position of divs, my div is not the width of the page, so changing the margins of the page would not affect the location of my div.
Maybe I'm not understanding something here.... either way, I still can't get it to work. I have 2 divs and I want them to appear in the same position on the page. (centered, and approximately 150px down). One is hidden while the other is not.
The way it works at the moment is that they are stacked on top of each other, no matter what is hidden or visible. So when the top one is hidden, I have a lot of white space before you get to the second div.
Maybe divs are the wrong tool to be using?
ahh ok thanks cornedbee, I was wondering why it didn't appear to work in Firefox. Any really good website(s) to help me code better since ie is crap in some things and firefox is also crap in some things...? Probably means my current sites are useless to all but IE users :(
The above is rough code (I assume this the type of thing you are trying) to do a div swap - it errors, but works... on this IE at work. Dunno about firefox or the rest, but worth a quick go.Code:<html>
<head>
<style type='text/css'>
body {
color: #fff;
background: #000;
margin: 0;
padding: 0;
}
div#first {
margin-left: 20%;
margin-right: 20%;
margin-top: 150px;
width: 60%;
height: 100px;
border: solid 1px #0f0;
}
div#second {
margin-left: 20%;
margin-right: 20%;
margin-top: -100px;
width: 60%;
height: 100px;
border: solid 1px #0f0;
visibility: hidden;
}
</style>
<script language='javascript'>
function doSwap(x) {
if (x==0) {
window.document.all.first.style.visibility = 'Hidden';
window.document.all.second.style.visibility = 'Visible';
}else{
window.document.all.first.style.visibility = 'Visible';
window.document.all.second.style.visibility = 'Hidden';
}
}
</script>
</head>
<body>
<a href='#' onClick='doSwap(1);Return;'> First </a> <a href='#' onClick='doSwap(0);Return;'> Second </a>
<div id='first'>First Div</div>
<div id='second'>Second Div</div>
</body>
</html>
I expect Cornedbee has a better example.
Vince
To center a block-level element it needs a given width and you do:
And actually Firefox is crap in very, very few things. There's practically nothing that IE supports that Firefox doesn't support, exmpting only proprietary stuff.Code:container_of_div {
/* Because IE5 doesn't support the margin stuff */
text-align: center;
}
div.centered {
width: somevalue; (can be %, px, whatever)
margin-left: auto;
margin-right: auto;
/* Counteract the container. */
text-align: left;
}
Some good URLs:
http://css-discuss.incutio.com/
especially
http://css-discuss.incutio.com/?page...ngBlockElement
http://www.quirksmode.org/
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
ahhhhhhhh! I can't win! I get it to work in Opera, and then it looks like **** in IE! :mad: I was so close :(
Ok, here's what I have:
CSS:HTML/PHP:Code:.cdiv {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
position: absolute;
top: 100px;
}
.cdivcontain {
text-align: center;
width: 100%;
}
Right now, it is exactly where it needs to be in Opera. In IE, it sits on the right of the screen, half showing, half not. Using "text-align:left" makes it show up left aligned (obviously) and it looks horrible.PHP Code:echo "<div class='cdivcontain' align='center'>";
echo "<div class='cdiv' id='div2' style='visibility:hidden'>";
experiments($header);
echo "</div>";
echo "<div class='cdiv' id='div1' style='visibility:visible'>";
Any idea how I can fix this in IE without screwing it up in the other browsers??
Fabulous. I just tried it in Firefox, and Firefox puts it in between Opera and IE. ***?
You might try it this way:
css:
javascript:Code:body{
margin: 0;
padding: 0;
text-align: center;
}
.cdiv{
position: relative;
width: 100%;
top: 100px;
margin: 0 auto;
}
.cdiv#first{
display: none;
}
and the htmlCode:<script type="text/javascript">
function doSwap(x) {
if (x==0) {
document.getElementById("first").style.display = 'none';
document.getElementById("second").style.display = 'block';
}else{
document.getElementById("first").style.display = 'block';
document.getElementById("second").style.display = 'none';
}
}
</script>
Tested in IE 6, Opera 7 and Firefox 0.9, all works.Code:<a href='#' onClick='doSwap(1);Return;'> First </a> <a href='#' onClick='doSwap(0);Return;'> Second </a>
<div class="cdiv" id="first">
first div
</div>
<div class="cdiv" id="second">
second div
</div>
Working example can be found here:
http://validweb.nl/vbforums/center.html
enjoy!
I may have to try that... I thought about using a Javascript setup, but thought it would be more work than that.