PDA

Click to See Complete Forum and Search --> : Centering our layout...

DanUK
01-23-2008, 07:09 AM
Hello guys, Hope you can help me out please.

I'm having a bit of a nightmare with our CSS layout, it's a fixedwidth layout, but it aligns itself to the left of the page (mainly because of how the background is)... however, we want it to be aligned in the center of the page. I know I can do this margin: 0 auto; but I don't know how I can do it properly with the background image?

I'd be really appreciative if someone has a type of background that would "go" with our colours, or could somehow edit the one I am attaching? It's totally beyond me! At the moment with our layout too, when we do a Print Preview in Firefox (as we use screen,print for the css) it aligns weirdly, I'm guessing this is due to some error in the CSS too... whereas IE prints it fine...

Any help is really appreciated. I am attaching my scaled down layout as layout.txt and the background image.

Thank you for any help you can provide :)
WebJoel
01-23-2008, 09:09 AM
In order to get "margin:0 auto;" to 'center' anything, you need a valid !doctype at the beginning of the page (required by IE, fails without one present), and, a WIDTH has to be stated on the 'centered' DIV or container. This can be in either "px" or "%", but a width:foo;, margin:0 auto; and valid !doctype are required.

I didn't check your code, -this is pretty much the only reasons this would not work is that one of these are omitted..
DanUK
01-24-2008, 06:09 PM
Hello, thanks for your reply :)

It's not so much a problem centering it, using your methods will of course work. My problem is mainly getting it to work with the background image I have

Thank you
cssGalactic
01-24-2008, 07:19 PM
body {
text-align:center; /*This will align it to the center in IE*/
}


/*.centerLayout is a class applied to the body and #container is the wrapper*/

.centerLayout #container {
margin: 0 auto;
width:850px;
height:600px;
text-align:left;
}

That should do the trick.
WebJoel
01-24-2008, 08:01 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>/index.php</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body {
margin: 0px;
padding: 0px 0px 0px 25px;
background: #999 url('bg-image.gif') repeat-y;
font-family: Tahoma, helvetica, sans-serif;
font-size: 12px;
}

....and atached image. Other than that, I do not understand the question here... :confused:
cssGalactic
01-24-2008, 08:08 PM
I see the codes from the .txt file and I can tell you it will never work well on IE. You need a wrapper and the auto margins are applied to the wrapper no the body. The body should have the text align center so to fool IE.
DanUK
01-24-2008, 08:53 PM
Hi guys, thanks for the replies

I tried that provided code Joel, but it doesn't seem to be much different, and the image lost its quality?

Basically, what I'm looking for is that the whole site is centered rather than being on the left as it is currently; I know to do that I'll need a container which is margin:0 auto;, but my main problem is getting it to work with our background image. As you will see by it, the left part isn't as big as the right part, and has a gradient on either side of the "right blocks". At the moment too, the right blocks are aligned by a left padding, also not sure how to make that work if we're aligning it all in the left.. I'm guessing float?

I'm really stumped on it, and i'm appreciative of the help :)
cssGalactic
01-25-2008, 12:42 AM
I have work on the layout. Its not perfect but its a start
See the attached files
DanUK
01-25-2008, 07:29 AM
Hi there :)
Thanks so much for that! It looks fine in Firefox, but IE has gone a bit crazy, the content part is pushed over under the right blocks, and the right blocks seem bigger? Also the gradient image seems distorted, not sure why?

Thanks again for that, it's getting there!!! :)
smyhre
01-25-2008, 09:45 AM
Ever tried puting in * {margin: 0; padding: 0; border: 0;} to reset all browser defaults in your css. It might not solve the problem per say, but it takes away defaults margins, padding, and border settings which can really mess up a layout.

I was thinking you might have a double margin float bug, but I can't see anything in the code which would trigger that at this point.
nickelleon
01-25-2008, 11:13 AM
in the body element, just add top center after the repeat on the background.

background: #999 url('bg.jpg') repeat-y;
becomes
background: #999 url('bg.jpg') repeat-y top center;

http://www.w3schools.com/css/css_background.asp for more info.
WebJoel
01-25-2008, 03:26 PM
I am still not understanding what you're after here... the way you describe it (in my mind) seems contradictory. I do not understand what effect you say you do not already have. :confused: But anyway...

You know, -if you want to have the background-image be (or appear to be) re-sizeable (that is, the left-hand edge and the right-hand edge are seperate images that respond independantly and fluidly to the visitor's browser-size), you COULD do this

Here is "image1.jpg"

###||| | | (<-- think "gradient dark left-to-right")

and here is "image2.jpg"

| | |||### (<-- think "gradient darker right-to-left")

Do this:

html, body {width:100%;....}
html {background:url(image1.jpg) top left repeat-y;}
body {background:url(image2.jpg) top right repeat-y;}

This way, "html" and "body" are "100% width", and the left-hand gradient sequence (maybe 50px wide by 3 or 4px tall) tiles vertically along the LEFT, and the right-hand gradient sequence (again, maybe 50px width by 3 or 4px tall) tiles vertically on the RIGHT. Your content wrapper or whatever, centers in the browser irregardless.

You CAN use two images for the total BACKGROUND-image/s of a web document if you place one on HTML and the other on BODY. Advantage too, -this particular set-up with repeat-y would make the background-image appear to be fluidily re-sizable due to the html, body {width:100%;....}

This technique works with all browsers that I am aware of, -and is especially useful for, say, a repeating background-image pattern, and a second, "fixed' logo image, in the center of the viewscreen that 'stays put' when the visitor scrolls-down the page...
DanUK
01-25-2008, 06:06 PM
Hi guys, thanks again for the help :)

I have managed to correct the problem in IE by adding a "float: left;" to the content_left and footer divs, so in IE it aligns properly now.

WebJoel, sorry for confusing you! I don't see how I have, all I have wanted to achieve is what I have now - you did it fine :) I just basically wanted it instead of aligning to the left, it aligns in the center of the page, so let's say someone has a really large resolution, and maximises their browser, before it would have the site in the left of the page, whereas now it aligns it nicely in teh left :)

The problem I'm having now is getting htis image to work. I'd rather not have two seperate ones as mentioned earlier. Although it's saved as high quality png (I thought it degraded quality before) is there a way I can make it so that it doesn't repeat itself and uses a block colour that it blends into? Before on our layout (on the right) it would have the gradient, and blend into a block colour which stops this weird grainy image appearing.

Thanks :D

Any other comments about our layout, using the provided code above by Joel and just adding the float: left's to the divs I mentioned above. Should it work ok in other browsers?
DanUK
01-25-2008, 06:09 PM
Just to also be a pain with this...
On the .centerLayout #container { css, there was a "height:900px;" element. Is there a way not to use this, as when there is a large page (with lots of content) I guess it'll cause a problem...

The problem with not using it is that if there's a small page, everything ends early, and the right blocks seem to just float in midair, for example the background image doesn't repeat itself down to the bottom of the page

Hope this makes sense too
WebJoel
01-25-2008, 06:33 PM
Is your site online? It might be easier to see how it currently displays instead of trying to re-create what you may or may not currently be using.

And, from my above re: background-image on HTML and also on BODY, -give one of them the default background-color and the other element, "background-color:transparent;" and this should still work and fill-in the 'patchiness' of the image that you mentioned.

The background-image: -I think you were using a *jpg and since it consisted of something just 24-colors, -I changed it to a *gif. There might possibly be some change in the color due to that...
If the *gif has or had any transparency in it, this might be why you cited the 'patchiness'... I didn't improve the image, I merely copied, clipped & renamed. I don't like working with *jpg images used for anything other than "photographs" due to *JPG's lossy nature. Edit it two or three times and you start getting moire patterns... I use 'web graphics', -anything less-than 256 colors I make 'em as *GIFs. Just a personal preferance, nothing more. :)

I'm still holdoing out hope for the proposed 'transparent *JPG' format... *JPGs that allow transparency like *GIFs do... :D
smyhre
01-26-2008, 08:43 PM
On the .centerLayout #container { css, there was a "height:900px;" element. Is there a way not to use this, as when there is a large page (with lots of content) I guess it'll cause a problem...

One way you might be able to do this is to put in {min-height:900px} and it will expand as the content expands, the problem though comes in with IE. If you use the min-height rule you will have to make an IE specific rule saying {height:900px} IE will interpret this the same way as a min-height rule. IE doesn't recognize the min height rule so it will ignore it.


The problem with not using it is that if there's a small page, everything ends early, and the right blocks seem to just float in midair, for example the background image doesn't repeat itself down to the bottom of the page

It might be simpler to not have a height specified at all and in that case you might have to use a clearfix (http://www.positioniseverything.net/easyclearing.html) to make it all work and expand down as more content is added.


for example the background image doesn't repeat itself down to the bottom of the page

If you want it to always fill to the bottom of the page then, hmmmm, {height: 100%;} just guessing here, otherwise it won't look the same on all windows. Some will have the window short, some tall, some high resolution, some low resolution, so if you specify a height then its not necessarily a guarantee that it will look right on every browser widow.