Jump to content

Centering page with CSS

AbbyShotDev

By AbbyShotDev
in CSS Help

 Share

Recommended Posts

AbbyShotDev Newbie

AbbyShotDev

Posted
Posted

I was wondering if someone could take a quick look at my css and code for the page www.abbyshot.com/index.php

 

trying to get this page centered with the margin-left 10% and margin-rigth 10%

but this doesn't seem to do it right.. I need to make this site look better with different resolutions... any quick tips?  here is a quick look at the css:

 

html, body {
margin:0; 
padding:0;
width:100%; 
height:100%; 
    text-align:left;
}

#background{
position:fixed; 
z-index:1; 
width:100%; 
background-attachment:fixed;
    background-position:center;
height:100%;
overflow:inherit;
}

#scroller {
position:absolute; width:100%; height:100%; top:0; left:0; margin-left:11%; margin-right:10%; overflow:visible; z-index:1; width:50em; text-align:left;
} 
#content {
/* padding:5px 300px 20px 200px; */

}
#fixed {
position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;
}
#header {

width:990px;


/*padding-left:20px;*/
}
#header table {
padding-left:15px;
background-image:url("furniture/topBlack.jpg");
width:100%;
}
#header table td {
padding:3px;
}
#headerNav {
float:right;
text-align:right;
width:716px;
margin-right:40px;
margin-top:16px;
border:1px solid white;
}
#headerSearchForm {

width:260px;
height:40px;
float:right;
}
#header form {
background-image:url("furniture/bg_searchBox.gif");
height:40px;
width:260px;
}
#header form select {
margin-top:7px;
margin-right:10px;
width:230px;
/* margin-right:58px; */
}
#header form input {
margin-top:7px;
margin-right:58px;
}
#mainContent {
width:990px;
height:275px;
/*background-image:url(furniture/mainbg_homePicture.jpg);*/
background-image:url(furniture/homepics/Squall_model.jpg);
/*padding-left:20px;*/
padding-top:20px;
overflow:hidden;
}
#mainContentMenu {
width:138px;
height:165px;
line-height:0;
}
#mainContentMenu2 {
width:138px;
height:139px;
line-height:100%;
visibility:hidden;
}

#mainContentTestSlider {
width:990px;
height:275px;
/*background-image:url(furniture/mainbg_homePicture.jpg);*/
/*padding-left:20px;*/
padding-top:20px;
overflow:hidden;
}
#mainContentMenuTestSlider {
width:138px;
height:165px;
line-height:0;
}

#middleRow {
background-image: url(furniture/bg_silver.jpg);
width:980px;
height:174px;
padding-left:10px;
padding-top:10px;

}

 

Thanks for any help,

 

Bennie

Link to comment
Share on other sites
AbbyShotDev Newbie

AbbyShotDev

Posted
  • Author
Posted

just another note:

 

its been hard to get this page to do what I want.

 

the scroller CSS property seems to really want to add scrollers to the bottom and rgith, but it gives prboelsm with IE, so its setup how it is too look ok.. but I think this scroller is messsing ity up from allowing me to center.

 

Or maybe I should center somehow in the PHP or the parent CSS

 

im not sure..

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

as far as i can see, your page is centered. So that seems the problem is solved. just checked in ie789 and firefox 4.

to center a block. give it a width and use margin:0 auto; on it.

 

although i must say, your mark-up is pretty over complicated. In other words this could be done much easier.

 

First of all, don't use tables for layout purposes, it's chaotic  and redundant.

Second, if you would just take a div as wrapper (as a container around all your content and a width of for instance 960px; than use margin:0 auto on it you

 

#wrapper{width:960px; margin:0 auto;}

 

in html

...
<body>
  <div id="wrapper">
     your content inside here.
  </div>
</body>
...

Link to comment
Share on other sites
AbbyShotDev Newbie

AbbyShotDev

Posted
  • Author
Posted

Ok, I am going to try and wrapping my whole page in a new div = wrapper.. I will test this and get back to you

 

 

.. I just need to re-butt your one comment though, the page is not centered.. If you go to 1400x900 res it is off to the left, and if you bring it down to 1074x 798 then it is off to the right.. it doesn't automatically center

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

 

 

.. I just need to re-butt your one comment though, the page is not centered.. If you go to 1400x900 res it is off to the left, and if you bring it down to 1074x 798 then it is off to the right.. it doesn't automatically center

 

That's because your not yet using margin:0 auto; but 10 percent.

 

Note though, you might need to adjust quite some stuff, since you have loads of positionings other than static not to mention quite some extra margin around various elements. SO i recommend you test out the margin: 0 auto (+ a width)  in a sterile environment to see how it works. after that adjust your page. And if i were you, skip the tables, and learn to use floats, and clears.

Link to comment
Share on other sites
AbbyShotDev Newbie

AbbyShotDev

Posted
  • Author
Posted

OK thanks for the advice..

 

I am not trying to use tables really.. but my php does post out a few tables, maybe your talking about the tables I have throughout my page?

 

<div align="center">
<table width="200" border="0" cellpadding="0" cellspacing="0">

 

I dont think this should have much effect on my oversite CSS design? I have heading wrappers..

 

And I have used liquid layouts before.. using div's.. and im not too up on float though...

 

Im sure this is another part of div's ...

 

I have been fooling around with the properties of my style sheet alot.  And i think you are right.. there are alot of overridding properties that are taking away contorl from my page.. I put in margin: 0 auto; under my scroller property and everything went to the left! hahah  I will update u with more.. I am experienminign and it keeps going to the left if I dont use marigin-left margin-right... :P

 

 

of course my style sheet is at www.abbyshot.com/style.css

 

 

and this is the php code that calls it:

 

<body bgcolor="#000000">
<div>
<img id="background" src="images/background3.jpg" alt="" title="" />
</div>
<div id="scroller">
<div id="content">
	<? require ("include/header_display_home.php"); ?>
<div id="mainContent">
	<div id="mainContentMenu">
		<? require ("include/side_nav.php"); ?>
	</div>
		</div>
<div id="middleRow">

	<table style="margin-left:8px"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0">
      <tr>

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

as said, try this out in a sterile environment and not on a redundant page. (not to insult, but this could have been done much smoother, right now you have loads of properties that overwrite each other)

 

not using floats is your choice, i just don't see why someone would not use them.  Can you give 1 valid reason ?

 

Link to comment
Share on other sites
AbbyShotDev Newbie

AbbyShotDev

Posted
  • Author
Posted

I will try and mess around with this in a new project website..

But the project (abbyshot) i am coming into, has this site made by a programmer from 3 years ago.. and they want to me to edit the code, not create much thats new...

again thanks for anyhelp anyone

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

Nope I can't.. just that Im not too familiar on how to position my FLoating boxes?

 

I am not use to floating..

 

So I should be making everything float?

here is a great tutorial: http://css.maxdesign.com.au/floatutorial/

even if you won't use it on this project if your earning your money with this kind of stuff. you need to know this.

 

For now, wrapping it all in a div with a fixed width and set margin to it as stated above. you propapy have tp remove some margin properties you have now. (like the 10% ones)

Link to comment
Share on other sites
AbbyShotDev Newbie

AbbyShotDev

Posted
  • Author
Posted

 

note: the page was originally setup to be align to the left.. I edited the CSS pages and made it jump out from the left and also fixed the background image...

 

But to make it truly center

 

I will learn (from your posts) and experiment some more, then get back to you.. thanks

 

Link to comment
Share on other sites
AbbyShotDev Newbie

AbbyShotDev

Posted
  • Author
Posted

When I put #wrapper{width:960px; margin:0 auto;}

in the CSS and then put a DIV id=wrapper in front of:

 

</head>
<body bgcolor="#000000">
<div>
<img id="background" src="images/background3.jpg" alt="" title="" />
</div>
<div id="scroller">
<div id="content">
	<? require ("include/header_display_home.php"); ?>
<div id="mainContent">
	<div id="mainContentMenu">

 

right here:

body>

</div>

<div =wraspper>

 

all it did was turned off my background on the left and messed up the page a bit lol  this page is a mess, i wish it would just center..  wehn i remove the marin-lefts it goes rigth back to the left side too

Link to comment
Share on other sites
AbbyShotDev Newbie

AbbyShotDev

Posted
  • Author
Posted

Hm.. So can anyone be more specific?

 

What do you guys think I have to remove? To make this page center?

 

Becuause buddy, its alot hard then it seems:

 

CSS:

html, body {
margin:0 auto; 
padding:0;
width:100%; 
height:100%; 
    
}

#background{
position:fixed; 
z-index:1; 
width:100%; 
background-attachment:fixed;
    background-position:center;
height:100%;
overflow:inherit;
}

#wrapper{
    width:990px;
    margin:0 auto;
    }


#scroller {
position:absolute; width:100%; height:100%; top:0; left:0; margin-left:11%; margin-right:10%; overflow:visible; z-index:1; width:50em; text-align:left;
} 
#content {
/* padding:5px 300px 20px 200px; */

}
#fixed {
position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;
}
#header {

width:990px;


/*padding-left:20px;*/
}

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted
Becuause buddy, its alot hard then it seems:

it's not!!

 

If you would have just tested this with the advice given above you would have known.

#scroller{
height: 100%;
    margin-left: auto; /* changed */
    margin-right: auto; /* changed */
    overflow: visible; 
    position: relative; /* changed */
    text-align: left;
    width: 1000px; /* changed */
    z-index: 1;
}

 

 

So to sum it up, to center you need:

a fixed width, margin 0 auto. and that only works when the object is part of the normal flow so that's why we use position relative....

 

And yes, when I remove the margin-left and margin-right and just put margin: 0 Auto;  It just Goes to the LEFT

besides from the use of the capslock to point out you missed something yourself. the element had a position of Absolute. YOU set it to LEFT! So no wonder it moves to the left. Please if you are going to take up in fixing these kind of websites buy a manual for css, look up positioning, floats clears overflow and never use inherit as property.

Link to comment
Share on other sites
crmamx Advanced Member

crmamx

Posted
Posted

in order for margin: 0 auto to work, the width must be specifically set using a unit not a percentage; which is what cssfreakie just did in the above code.

 

But that only works if you live in Cherokee County.... :D

Link to comment
Share on other sites
Zane Prolific Member

Zane

Posted
Posted

I always wondered when I'd run into someone from this shithole.  Yeah, I used to work at Rib Country in '05.

 

.. regardless of it being cool to run into someone so close... within 7 years of phpfreak-ship, this has nothing to do with centering a DIV.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.