Can't center website

RWB · November 2003

Now usually, there are other methods of doing this whichI would use, but this is for a project and I have to use LAYERS.

So I get the layers setup, took FOREVER to do... but I got them finnally. But I want the site CENTERED in the middle of the browser, I can't seem to figureo ut what I need to do. Can't find it in the book either.

I did it in dreamweaver btw... so it ain't clean yet cause I haven't gone through it by hand yet.

http://fusion-dm.net/Untitled-1.htm
If you don't see images, it is cuase they may still be loading... either way, I want to CENTER it, currently every layer(every image basically) is set to it's own area in space.

Gobbles · November 2003

as I dont do web programming but have you tried to use the center tag on the body...

like
<body>
<center>
layers....
</center>
</body>

like I said im not a web coder..

gobbles..

a2jfreak · November 2003

Mozilla (and that horrible crappy excuse for a browser IE) load it in the center (or what appears to be the center).

Gobbles · November 2003

but reduce the size of the browser window.. It centers only in a maximized window...

Gobbles

Gobbles · November 2003

Im sure you know... but here...

a2jfreak · November 2003

Yeah.

Well, then I'm just guessing here but perhaps RWB should put it inside a single-cell table that is centered and then align the stuff w/in the cell.

astroworp · November 2003

yeah, i have a hard time seeing any relationship between layers and centering the page... i'd just < center > the whole thing after the < body > tag.

haha, and get rid of that rogue < /td > tag at the bottom, dude

Enverex · November 2003

Centered on my machine..........

NS

croc_ · November 2003

Most of the sites I have coded recently have used "layers". One of them I tried to get centered, but its a PAIN in the ass. Are you using layer visibility swapping?

I'm currently working on this site <a href="http://www.racetech-na.com">HERE</a> using "layers" and a JS to swap the visible/invisible.

Kwitko · November 2003

RWB, you're using absolute positioning, so the positioning is always going to be the same distance from the left side of the screen. What you need to do is encase all of your layers inside of a centering DIV that's positioned relative the the edge. The left edges of your images would then be positioned absolutely with the centering DIV as your left edge, not the browser's. This way, if the browser window is a different size, the contents will always be centered- asbsolute to the centering DIV's position, and the centering DIV relative to the browser's edge.

body {
  margin:0px; padding:0px;
  text-align:center;
  }

#Content {
  width: (this is going to be the total width of your images);
  margin:0px auto;
  text-align:left; /* Special IE5/6 workaround */
  }

Then encase all your DIVs inside <div id="Content">

Straight_Man · November 2003

Ok, there are three things to take into account:

Folks with older computers see a slightly smaller than 580x480 (expressed as X by Y) view area(remember side bars in browsers), they have about the 1\4 to 1\3 top of the screen with browser buttons and top window moving bar, etc. and they somewhat need to have the center centered.

Those with modern computers can see a bigger area, they have 1024x768 monitors instead of 800x600 on average for older computers. They see about 780x 580. Essentially you then know you cannot use absolute positioning and absolute width or absolute height. Esentially, if you center a div that is horizontal center, and if you then stick a table in that is a single cell that is height and width expressed as a percentage of screen you get a result that will give a small outside border and the browser will try to SCALE the site presentation. Then you can stick text in it, or layers in subcells if you want to force overall columns. Tables can be 0 border width, by the way, and this is what is wanted unless you want vertical or horzontal divisions. Then run your layers in divs inside the cells as 99% width and height and then you can do layer on layer within a cell if wanted if they are percentage postioned and you CAN use tables within tables if needed to make things align if you use zero border width and zero change in border color. Some browsers force a minimum border of one pixel, this is why you use percentages and base tables and then layers. doing this will let you see how to position layers to offset, and if while working you impose a 1-2 pixel border on each cell you can get positioning relative as to each layer's preset postion left, right, up and down. Most folks float only vertical and those with computers that are needing smaller res displays show pages as too wide and way too tall-- people look at narrow columns and have to use the vertical scroll bar a huge amount and most miss what is three vertical screens down. Play with tables first, change you monitor to 800x600 and 1024x768 and look at what you see, with and without a sidebar. Not all browsers support middle right, either, which is your vertical center code.

John-- who sees the site right shifted in Opera 7.21 and the blue navmenu text as too dark for the words but not the button borders (text should jump out from button).

RWB · November 2003

Well, I think Ageek needs to start simplifying his posts, cuase I can't ever seem to understand it too well. Took me 3 times as long to read his one post than this whole thread put together

TD-Isles, I tried what you said, and it just ain't working. I took out the position:absolute tages, that made the whole site become ONE long continuous page of pictures along the middle. Took out the positions, same thing. I am lost

BTW for those who say it's already centered, it is not, it is POSITIONED, I thought that would lower the confusion

Enverex · November 2003

RWB had this to say
BTW for those who say it's already centered, it is not, it is POSITIONED, I thought that would lower the confusion

Yeah, I noticed that not long after I posted, I decided to resize the window and noticed it wasnt moving at all.

Why dont you just set top, bottom, left and right margins and put a < center > tag around the whole thing?

NS

RWB · November 2003

NightShade737 had this to say

RWB had this to say
BTW for those who say it's already centered, it is not, it is POSITIONED, I thought that would lower the confusion

Yeah, I noticed that not long after I posted, I decided to resize the window and noticed it wasnt moving at all.

Why dont you just set top, bottom, left and right margins and put a < center > tag around the whole thing?

NS

Yeah I have tried this, either I am doing it wrong(which I have tried looking through to see if I am and can't find jack) or it just ain't working. I haven't worked with "Layers" before either... :shakehead

Kwitko · November 2003

RWB had this to say

TD-Isles, I tried what you said, and it just ain't working. I took out the position:absolute tages, that made the whole site become ONE long continuous page of pictures along the middle. Took out the positions, same thing. I am lost

Sorry, forgot one teeny little part. You need to encase a "container" div inside your centering div. I've done an example using the top row of your interface so you can see how it's done. You can take a look at it here. As you resize the browser window you can see that it remains centered.

Gobbles · November 2003

as not knowing jack about web coding...

but have you tried to just center the page, the main body.

I may be miss understanding but it seems that centering the page itself would fix the issue but i am sure that I am over simplifing things...

Gobbles..

a2jfreak · November 2003

TD: Your link doesn't center for me.

Kwitko · November 2003

For some reason it doesn't want to center in Mozilla but works in IE. My index page uses the same method and works in Mozilla so I'm not sure why it's not working.

RWB · November 2003

Sorry been busy with other things, but we found this to work so far....

#centerMe {
     position:absolute;
     width:X;
     height:Y;
     left:50%;
     margin-left:-Z;
 }

Hope it came out right, but here is how it works; you use the "centerMe" ID for a div tag closing around the layers that needs to be centered. X being the width total, Y being the height total, and Z being HALF of X. That centers it, horizontaly and I am only guessing ATM that it works the same way with verticle center. But I changed my site to be a bit different, I just don't have the time for the next couple days to really test things.

But you can see what I did so far at My Site

I know it ain't purty, but it meets the requirements for the grade. I have a CG class I am working my ASS off trying to get anything done with, they really should have made CG one of the classes that was alone, instead of dual classes like this, my ass has been stressed out! Well not that bad haha, but it ain't been too easy, which I like to keep busy, but... ehh forget it I hate going off topic and trying to explain myself... it NEVER works out for me and you start thinking the wrong thing... and then POOF I am off

WTF am I talking about????

MadKowDZs · November 2003

In Dreamweaver just make Layout tables and center the main one using the code panel on the right side.
Then when finished creating the webpage convert to layers.
I don't know but is that considered cheating?

Can't center website

Comments