Hello, could someone tell me how i could position a div tag exactly in the center of the browser being liquid and the div tag size fixed to 650px by 450px.
here is an example as to what I'm looking for:
Argo54325 0 Junior Poster in Training
qazplm114477 14 Junior Poster
Hello, could someone tell me how i could position a div tag exactly in the center of the browser being liquid and the div tag size fixed to 650px by 450px.
here is an example as to what I'm looking for:
try
/*CSS*/
#div_id{position:absolute; top:0; left:0; width:100%; z-index:100;}
ko ko 97 Practically a Master Poster
Use auto margin to center the div tag.
div {
margin: 0 auto;
width: 650px;
}I have no idea to stay exactly center at vertical alignment. Note that auto margin need static width.
Dragennd 12 Light Poster
Typically the way I center my layers is to make them relatively positioned and place them inside a table.
<html>
<head>
<style type="text/css">
.layer1 {
z-index: 1;
position: relative;
width: 500px;
height: 600px;
background-color: #000000;
}
</style>
</head>
<body>
<table align="center" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center">
<div class="layer1"></div>
</td></tr></table>
</body>
</html>Simply put a table that equals the whole size of the page and make the layer relative so the table can center it. Remember a div layer that is relatively positioned is relatively located to where you originally start it. Being centered in the middle of the table thats where it starts.
For a working reference check my website mastersofzi.110mb.com and look at the code. I put my primary layer in a table and relatively position it with all layers inside it absolutely positioned to the edge of the relative layer.
Argo54325 0 Junior Poster in Training
So let me get this straight.
You have a container that is liquid (so basically window), and you would like to center a div, 650px by 450px. Horizonal is easy,
margin: 0 autoGetting it vertically, we would have to go jquery
Here is a link from stackoverflow
Using the JQuery worked well, though there is a new issue. If i resize the window the div stay centered to the proportions of the window when it first loaded, so the liquid part i wanted is still missing. What can i do to fix it?
<html>
<head>
<title>Test</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
</script>
<script type="text/javascript">
$(document).ready(function(){
// Your code here
$(".centerDiv").center();
});
</script>
<style type="text/css">
body {margin:0px;}
.centerDiv{height:450px;width:650px;background-color:#0099CC}
</style>
</head>
<body>
<div class="centerDiv"></div>
</body>
</html> diafol
You may consider the jquery ui framework. It has a few themes - you can create your own. The widgets are really good. I've only just started using it myself and am amazed at the results. Worth a look I think.
macneato 29 Posting Pro in Training
Ok not a problem, lets bind the center function to window resize (GOT TO LOVE JQUERY).
Lets give this a try:
$(document).ready(function(){
// Your code here
$(".centerDiv").center();
});
//If the User resizes the window, we will recenterdiv
$(window).bind("resize", recenterdiv);
function recenterdiv(e){
$(".centerDiv").center();
} Argo54325 commented: Solved my issue! +2
MJ Pieterse 2 Poster
i can't view the sample link, but i would suggest that you put the style coding on your container tag for the div to align it in the center. Don't use absolute as it will not work for the layout you are looking for.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.