css layout

[Loccie]

Everyone says tables are bad so I think I'll try css. I know how to do this when it is positioned left but is there a way to center a css layout? In other words to count the pixels from the center instead of side.

[Zach]

At 11/1/06 02:59 AM, Loccie wrote: Everyone says tables are bad so I think I'll try css. I know how to do this when it is positioned left but is there a way to center a css layout? In other words to count the pixels from the center instead of side.

You just need to wrap the site in <div align="center>Your website goes here</div>.

[Loccie]

At 11/1/06 03:27 AM, Zach wrote:

At 11/1/06 02:59 AM, Loccie wrote: Everyone says tables are bad so I think I'll try css. I know how to do this when it is positioned left but is there a way to center a css layout? In other words to count the pixels from the center instead of side.

You just need to wrap the site in <div align="center>Your website goes here</div>.

maybe I should give an example:

#header
{
position:absolute;
top:150px
}

<div id="header" align="center">
text
</div>

It's a simple example and it does not work. Also when I have an image that I want to be 50px away from the center of the screen, how would I do that?

[Zach]

<style type="text/css">
:#header
{
:position:absolute;
top:150px
}
</style>
<div align="center">
<div id="header">Text</div>
</div>

That should work, the first div shouldn't have any style other than align="center".

[Loccie]

At 11/1/06 04:45 AM, Zach wrote: <style type="text/css">

#header

{

position:absolute;

top:150px
}
</style>
<div align="center">
<div id="header">Text</div>
</div>

That should work, the first div shouldn't have any style other than align="center".

Thanks but I found out align is no longer valid so can I use style="" instead? And what do I need to put in it, I tried some css but it did not work.

[Zach]

At 11/1/06 05:13 AM, Loccie wrote: Thanks but I found out align is no longer valid so can I use style="" instead? And what do I need to put in it, I tried some css but it did not work.

If you validate it XHTML transitional there is, otherwise I can only suggest having a set width for your site and have 50% margin on the left and right.

[PONGpaddle]

You can do

<div style="width: 700px; left: 50%; margin-left: -350px">
The rest of your page here
</div>

margin-left has to be negative half of width. E.g., if width was 800px, then margin-left would be -400px.

[Bizarro]

I would go with this to center you layout, its a very clean way to do it that doesn't use align or negative widths and percents.
body{
text-align:center;
}
div{
text-align:left;
}
#container{
position:relative;
margin-left:auto;
margin-right:auto;
}
container would of course be your container div, the div that contains the rest of the site sometimes called the wrapper div

[Loccie]

At 11/1/06 06:58 AM, Bizarro wrote: I would go with this to center you layout, its a very clean way to do it that doesn't use align or negative widths and percents.
body{
text-align:center;
}
div{
text-align:left;
}
#container{
position:relative;
margin-left:auto;
margin-right:auto;
}
container would of course be your container div, the div that contains the rest of the site sometimes called the wrapper div

This one does not work for some reason. The other ones work on both IE and FF but for some reason Opera shows the div on the left side of the screen. I hate these new W3 rules but I want a good site.

[Bizarro]

the code I gave you should work perfectly would you mind linking to your page or posting you code so I can see if you did anything wrong?

[Loccie]

At 11/1/06 09:40 AM, Bizarro wrote: the code I gave you should work perfectly would you mind linking to your page or posting you code so I can see if you did anything wrong?

Sure thing here is the page:

http://loccie.freehostia.com/index.php

And the stylesheet:

http://loccie.freeho..a.com/layout/css.css

Firefox shows it correct, Opera does not want to center it or show no white space between the images and on IE it's completely fucked up. Please say what to change it to because I never had to deal with this kind of css. (I know the image looks fucked up on IE, I'm working on it.)

[Jessii]

I would never use a negative margin because they don't normally work. div align=center or style=center doesn't work either because it ends up messing up the whole thing. I found that relative positioning works if you have the patience so that they "float" and if someone minimizes the browser window, it floats to the proper position but it's a royal pain to position it (using margin: 0 auto auto 10px; - top, right, bottom, left, no need to put margin-top:, margin-right: etc. separately).

[Bizarro]

Your page is very messy and you are absolutely positioning things that don't need it. Here is how you should structure your page(im not sure what your header fixes are but I assume they are supposed to appear under the header)
container
header
headerfix1
headerfix2
since all these elements are the same width and do not need to be next to each other you dont really need any css for them because the images will cause them to stretch the width of the container and they will automatically stack up. The only css you need currently is for the container where you should specify the width and get your centering done.

[Loccie]

I've changed it a bid and now it looks like this:

http://loccie.freehostia.com/index.php

And the stylesheet:

http://loccie.freeho..a.com/layout/css.css

It does not work correctly yet, I've tried the relative positioning and I think it's better now but I think that the header div is still incorrect. To let you know it works perfect in IE and in FF and Opera it looks the same.

[Loccie]

At 11/1/06 12:09 PM, Bizarro wrote: Your page is very messy and you are absolutely positioning things that don't need it. Here is how you should structure your page(im not sure what your header fixes are but I assume they are supposed to appear under the header)
container
header
headerfix1
headerfix2
since all these elements are the same width and do not need to be next to each other you dont really need any css for them because the images will cause them to stretch the width of the container and they will automatically stack up. The only css you need currently is for the container where you should specify the width and get your centering done.

Well the fixes prevent (or should prevent) whitespace appearing between the images and I think that the header div is the container in this case. Also here is the real code (might explain some things):

<div id="header">
<?php require(dirname(__FILE__)."/layout/header2 .html"); ?>
</div>

header2.html

<div id="headerfix2"><img src="/layout/header_top.png" border="0" /></div>
<div id="headerfix"><img src="/layout/header_buttom.png" border="0" /></div>

[smulse]

add this
text-align: center;
to the
body { }
section of your css to centre your layout

[Loccie]

At 11/1/06 01:11 PM, Smulse wrote: add this
text-align: center;
to the
body { }
section of your css to centre your layout

I already tried that but thanks.

[bob]

use:

margin: 0 auto;

[PONGpaddle]

At 11/1/06 11:08 AM, Jessii wrote: I would never use a negative margin because they don't normally work.

It's always worked for me. In what way doesn't it work? Does it just not align correctly, or is part of the element cut off in IE?

As far as I know, none of the browsers have implemented auto margins correctly. The only certain way I know of to center an element is with negative margins.

[smulse]

i dont see why it's so complicated for you to centre your layout
your code is really messy as well
i dont know, try writing from scratch?

[Loccie]

I changed it a bid and for some odd reason it shows the images correctly in all 3 browsers. O yea also on Netscape :p. Thanks everyone.

[Bizarro]

At 11/1/06 02:04 PM, Loccie wrote: I changed it a bid and for some odd reason it shows the images correctly in all 3 browsers. O yea also on Netscape :p. Thanks everyone.

great, but its way too much extra work and code, this is what your css should look like(somewhat I left out your links and input for the sake of saving space)
body
{
margin-top: 2;
margin-bottom: 5;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;

font-family: Verdana;
color: #003300;
font-size: 12pt;
text-align:center;
}
div{
text-align:left;
}
#header
{
position:relative;
margin: 0 auto;
width:800px;
}

#headerfix
{
width: 800px;
height: 223px;
}

#headerfix2
{
width: 800px;
height: 153px;
}
the first thing you'll notice is that I reordered it and put body first, this is just personal preference and I think it makes the css look more structured. Next thing is the appearance of text-align:center; this is used for the centering of your page in conjunction with other things I added. After that you'll notice a div element with text-align:left, this left aligns the text in divs so the text wont show up centered. After that I took the negative margin off of your #header and applied the other way of centering which is position:relative; and the auto margins. lastly i took the redundant code from your headerfix and headerfix2 in which you were centering them after they had already been centered.
NOTE: The only reason the centering centers your page now is because it is all contained in the #header div tag, which is now acting as your container. If you intend to add to your page later you will have to add it within the #header div, or make an actual container div to contain the whole page.
And TheDrunkMonkey Your negative margin thing isn't really good to use because its not really necessary when there is a better known way such as the auto margins. Also I'm not positive but negative margins act up sometimes in IE and I think there are some inconsistencies from FF to IE

[PONGpaddle]

At 11/1/06 02:34 PM, Bizarro wrote: And TheDrunkMonkey Your negative margin thing isn't really good to use because its not really necessary when there is a better known way such as the auto margins. Also I'm not positive but negative margins act up sometimes in IE and I think there are some inconsistencies from FF to IE

In my experience auto margins usually don't work, and is not always the best option anyway. Negative margins is an appropriate solution to alignment which always works. Yes, there is a problem with IE (what's new), but it is uncommon for it to happen, and can be fixed easily.

[Jessii]

At 11/1/06 01:52 PM, TheDrunkMonkey wrote: It's always worked for me. In what way doesn't it work? Does it just not align correctly, or is part of the element cut off in IE?

It throws it all over to the right so that it runs off of the page. I'm on IE right now at work *rolls eyes*. But that's usually the case if I try using a negative margin.

[Bizarro]

At 11/1/06 04:07 PM, TheDrunkMonkey wrote: In my experience auto margins usually don't work, and is not always the best option anyway. Negative margins is an appropriate solution to alignment which always works. Yes, there is a problem with IE (what's new), but it is uncommon for it to happen, and can be fixed easily.

The only known errors with the auto margin techniques that I posted before is that it doesn't work in IE5/Win without the text-align:center which is the reason why in all other browsers it works without text-align:center. Other than that I have never had or heard of complications with it. If negative margins works as well as you say(ive never used them so I dunno) then the only difference is that the auto margins would work if someone wanted to have a dynamic width (which is uncommon but could happen)

[PONGpaddle]

At 11/1/06 04:27 PM, Jessii wrote:

At 11/1/06 01:52 PM, TheDrunkMonkey wrote: It's always worked for me. In what way doesn't it work? Does it just not align correctly, or is part of the element cut off in IE?

It throws it all over to the right so that it runs off of the page. I'm on IE right now at work *rolls eyes*. But that's usually the case if I try using a negative margin.

Sounds like the bug I found. The link in my post describes how I got around it, although it's a bit verbose now that I look back on it. Basically, you add an extra element in. For example, say this doesn't work:

<div class="centered">
Your content goes here.
</div>

You could add in another div:

<div class="centered">
<div>
Your content goes here.
</div>
</div>

Which should fix the problem.

At 11/1/06 06:14 PM, Bizarro wrote: The only known errors with the auto margin techniques that I posted before is that it doesn't work in IE5/Win without the text-align:center which is the reason why in all other browsers it works without text-align:center.

The text-align and auto margin methods are two different ways of centering. The browsers are probably using text-align to center the page, not margins.

[Bizarro]

At 11/1/06 06:37 PM, TheDrunkMonkey wrote: The text-align and auto margin methods are two different ways of centering. The browsers are probably using text-align to center the page, not margins.

nope, setting the margins to auto will center the page but not in IE5 as I said before, but text-align:center alone will do nothing but center the text

[Loccie]

Okay, I'm almost there I just have one question remaining. (I hope...) I have a div layer called content and this is the css for it:

#content
{
position:relative;
width: 754px;
left: 50%;
margin-left: -377px;
}

Don't get me wrong this works perfectly, the problem is I can't position my text in it like I want. I tried and example (you can see it on a link a few posts back) and if you look on your browser you will see the text aligned to the left when a part of it should be aligned to the right. Is there a problem with this? Do I have to use the negative margins here to?

[Jessii]

At 11/2/06 12:42 AM, Loccie wrote: #content
{
position:relative;
width: 754px;
left: 50%;
margin-left: -377px;
}

text-align: left; text-align: right; float: left; float: right;

Play with those and see which one works to get what you want.

[Loccie]

At 11/2/06 07:28 AM, Jessii wrote:
text-align: left; text-align: right; float: left; float: right;

Play with those and see which one works to get what you want.

Thanks but most of them don't seem to do anything and float: right; moves the text about 5px to the right but that's all. Look at the link to see what it does with the text: "eeee...". There must be a small error or something in the code but everything works just a minor glitch in IE that will be fixed asap. (I hope)