newbie: css problem!

J

Jeff

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>
 
D

Disco Octopus

Jeff said:
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>
Click to expand...

maybe if yoiuy play around with this....

margin-left:auto;
margin-right:auto;
padding-left:100px;
padding-right:100px;

instead of this....
left:100px;
right:100px;

I am not sure exactly wht you are trying to acheive, but this may give you
a different approach.

good luck.
 
P

pacal

Jeff said:
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>
Click to expand...
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Stuck with html and css 25
Positioning CSS components 1
Interfering CSS 1
Please Help? 0
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
I am trying to detect Which image id="" was clicked ? 22
Need help , Having problem with Drag n Drop... 1
Closing an overlay outside the overlay as well 1

Members online

Total: 24 (members: 1, guests: 23)
Robots: 368

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,066
Latest member
VytoKetoReviews

Latest Threads

Top