Hi, im trying to align a div in the center of the page.
A have managed to align a div in the center of the page, well the text anyway.
But the background of the div is an image. And the image doesnt align, it simply stays to the left, and the text is aligned in the center.
Where am i going wrong??!!
So far i have a "container div" which is acting as a frame for all my other div's to sit into, so that i can arrange them.
The containers left and right margin's have been set to auto?!
Ive tried setting its width to 100%, but this doesnt work!
Simple center align!
The container must be set to a width that is less than that of the viewport if your going to center it! if you have width 100% then thats the full width of available screen so it can't center.
Hugo.
Simple center align!
ive also tried setting it to different lengths, em, px, and non seem to make it center?! :?
Simple center align!
Show a link.
Simple center align!
Background position of an image will automatically be top left unless you specify otherwise. background-position: center center or 50% 50% will centre your image horizontally & vertically.
Simple center align!
right, so far i have managed to center align the container. So that now when i resize the window, the divs stay center.
But now i want to have my menu on the side of a div, so that it also moves when resized. At the moment i can only correctly position via fixed, but when i resize, it stays put and the other divs move!!
body { background: #FFFFCC; padding:0; margin:0; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 90%; color: black; } .container { text-align: center; } .header { background-image: url("./images/header/header1.jpg"); background-position: center; background-repeat: no-repeat; height: 200px; width: 760px; } .menu { top: 200px; position:absolute; left: 100px; } .content { background-image: url("./images/content.jpg"); background-position: center; background-repeat: repeat-y; width: 760px; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #sideNav { position: absolute; width: 1em; } #sideNav dd { position: absolute; left: 5em; margin-top: -5em; width: 10em; background: #CCCCCC; border: 1px solid gray; } #sideNav ul { padding: 2px; } #sideNav li { text-align: center; font-size: 85%; height: 18px; line-height: 18px; } #sideNav li a { color: #000; text-decoration: none; display: block; } #sideNav li a:hover { color: #FFFFFF; }
and the html is at
although ive now realised that the center align doesnt work in firefox!![/code]
Simple center align!
I don't see anythign in your CSS that should cause the container to centre.
Simple center align!
ive managed to get the desired effect using tables ...
but im trying to do it with CSS instead!!
Simple center align!
To centre your container, you'll need to add margin:0 auto to it. To get your left menu where you want it, you'll need to use absolute positioning, but it needs to be in relation to your container, not the viewport. To enable this, you need to add position: relative to .container and then adjust your left & top values from there.
Simple center align!
Ive got it how i want it to look, but it doesnt align correctly in Firefox, just IE??
Ive implemented your ideas and they worked, but just not in FF!
Simple center align!
Ive implemented your ideas and they worked, but just not in FF!
To centre your container, you'll need to add margin:0 auto to it. To get your left menu where you want it, you'll need to use absolute positioning, but it needs to be in relation to your container, not the viewport. To enable this, you need to add position: relative to .container and then adjust your left & top values from there.
Simple center align!
im not sure where your going pineapple??
Ive said that ive tried the things that tyssen had suggested and they still didnt work in FF.
Simple center align!
Your code contains no mention of the margin: 0 auto; code that would center it in the Fox.
Also, your menu doesn't show at all in Firefox.
Also, your link up there is wrong
Simple center align!
The reason that the code had no mention of the margin: ; property, was because i tried following the instructions by the letter, and they didnt work.
Also, turns out that the margin needs to be in the header and content div's, not the container itself.
Also, the menu doesnt show in firefox. But this only happens when it inside a DIV, any ideas??
Simple center align!
To get a container to centre in Firefox, you apply margins to the container itself.
Try this code:
<div id="container">
this will be centred
</div>
#container {
width: 65px;
height: 200px;
margin: 0 auto;
}
Come on, try it, tell me what happens.