|
|
Posted by pacal on 11/19/44 11:32
Jeff wrote:
> Hey
>
> I'm testing this on IE, 6.0 (but I want my code to work on all modern
> browsers: Opera, FireFox, IE, Netscape Navigator)
>
> The problem is that the "container" DIV isn't displayed centralized in the
> browser window, it's align to the right, I want it to be centered, not
> aligned to the right, what should I do to solve this?
>
> (( Below are the code I'm having trouble with ))
>
> I'm trying to create a three column layout. I want the container block to be
> centered in the browser window, so that's why I use left:100px; right:100px;
> I know I instead could specify width:800px - But I guess width:800 (800 is
> just an example here, it could be 700 also) may be to wide for the browser
> window and the user needs to scroll to show the whole window. The user
> should not need to scroll to show the whole width of the container DIV.
> What's your opinion about this, please tell me? is it a better way of doing
> this?
>
> Please help me with this on
>
> Jeff
>
> Data from my CSS file:
> #container {
> left:100px;
> right:100px;
> height:400px;
> background-color:#FF0000;
> position:relative;
> }
>
> #calendar {
> background-color:#DDF;
> position:absolute;
> right:20px;
> top:100;
> width:175px;
> }
>
> My index.php file:
> </head>
> <body>
> <div id="container">
> <p>The outer block</p>
> <div id="calendar">
> <The inner block>
> </div>
> </div>
> </body>
> </head>
>
>
try this
left and right 50% centers the left top of the <div> to the center of
the window
width and height give the <div> its dimension
and margin-left and top negative pull the <div> back half the height and
width to the top and left
test.css
#container {
position:absolute;
left: 50%;
top: 50%;
width: 500px;
height:400px;
margin-left:-250px;
margin-top:-200px;
background-color:#FF0000;
color: #000000;
border: solid 1px black;
}
#calendar {
background-color:#DDF;
position:absolute;
left: 50%;
top: 50%;
width: 200px;
height:100px;
margin-left:-100px;
margin-top:-50px;
color: #000000;
border: solid 1px black;
}
index.html
<html>
<head>
<LINK href="test.css" type=text/css rel=stylesheet>
</head>
<body>
<div id="container">
<p>The outer block</p>
<div id="calendar">
<p>The inner block<p>
</div>
</div>
</body>
</head>
</html>
greets
pacal
Navigation:
[Reply to this message]
|