SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 25
-
Mar 16, 2005, 13:28 #1
- Join Date
- Jul 2003
- Location
- Chicago, IL
- Posts
- 302
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Centering a Page with CSS - Problem will Pay $$
Alright, so I've been doing CSS for a while now, but this is really starting to get to me.
I've centered sites before with this method :
http://www.simplebits.com/notebook/2...centering.html
But I can't seem to get my current site to do it. If I have the postion of my boxes set to "absolute" will that not allowing that centering method to work?
Any help would be apreshiated, I can post my code, or you can message me on AIM - I'll pay some $$ paypal if you help me out
AIM: rosemFSU
Thanks,
Mike
-
Mar 16, 2005, 13:44 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Theres a full explantion of centering in the FAQ and also an explanation of how to centre an existing site that was centred already.
It's pretty simple and all you need do is find the width of your existing page and apply a wrapper of that width and use the usual centering methods as in the article and in the FAQ.
The only extra thing you need is to apply position:relative to the surrounding wrapper so that any absolute elements in the page will now take their parent to be this new centred wrapper and not the viewport. This means the absolute elements will stay in relation to the top left corner of the wrapper no matter where it moves as the page is resized.
You shouldn't mention money in this forum as help here is free. If you want paid help you can post in the sitepoint marketplace forums once you have read the guidelines
-
Mar 16, 2005, 13:46 #3
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Absolutely positioned elements are removed from the flow.
If you must use absolute positioning and elements have fixed widths you can set left:50% and then use a negative left margin of half the element's width to center them,We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Mar 16, 2005, 14:01 #4
- Join Date
- Jul 2003
- Location
- Chicago, IL
- Posts
- 302
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Paul,
I did what you said about the wrapper (I named it "container" however) do you care to have a look at my code and see what I'm doing wrong?
That would help me out quite a bit.
Thanks,
Mike
ALSO, Thanks for the fast reply everyone!
-
Mar 16, 2005, 14:37 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Can you post the code or a link and I'll take a look.
Absolutely positioned elements are removed from the flow.
-
Mar 16, 2005, 15:39 #6
- Join Date
- Jul 2003
- Location
- Chicago, IL
- Posts
- 302
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
http://www.rosem.com/work/random/css_test.zip
Have a look, and let me know
Thanks,
Mike
-
Mar 16, 2005, 16:05 #7
- Join Date
- Oct 2004
- Location
- Sendai, Japan
- Posts
- 2,417
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
As Paul said, your container should be position:relative. When you do that, you'll find that your page is not exactly centred but a little to the right of centre. That's due to the numbers you've used for your absolute-positioned divs.
-
Mar 16, 2005, 17:28 #8
- Join Date
- Jul 2003
- Location
- Chicago, IL
- Posts
- 302
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
is there any way to get it right dab in the center?
-
Mar 16, 2005, 17:29 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
As Bon Rouge said you have offset your page by 50px ao that becomes part of the centering. You can change all your left positions by 50px less or you can trick the browsers with a negative position as follows.
Code:#container { margin: 0 auto; width: 710px; text-align: left; position:relative; left:-50px }
-
Mar 16, 2005, 17:32 #10
- Join Date
- Jul 2003
- Location
- Chicago, IL
- Posts
- 302
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
AHHHH.... It all just clicked now
Before you posted that I went back and changed all the position-left's back to 0 instead of 50. So both methods will work...
What one is "better" or more correct. The way I did it, or your way?
-
Mar 16, 2005, 17:53 #11
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Best to have them set to zero as you know where you are now. If you had millions of them in the page then you could have used my method to make life easier
-
Mar 25, 2005, 16:07 #12
- Join Date
- Mar 2005
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Background-color
I am having a similiar situation. I want to set set a background color. So I have my CSS as:
body
{
text-align: center;
background-color:Gray;
}
#container_2
{
margin: 0 auto;
width: 950px;
text-align: left;
}
This is not working. Why?
-
Mar 25, 2005, 16:17 #13
- Join Date
- Oct 2004
- Location
- Sendai, Japan
- Posts
- 2,417
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I don't really see how this is similar, but... maybe it's the capital 'G' you have. CSS properties and values are all lower-case.
-
Mar 25, 2005, 16:25 #14
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try using the hex color.
Code:body { text-align: center; background-color: #808080; } #container_2 { margin: 0 auto; width: 950px; text-align: left; }
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Mar 25, 2005, 16:38 #15
- Join Date
- Mar 2005
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by BonRouge
BTW, I also tried small g, but no luck.Thanks
-
Mar 25, 2005, 16:39 #16
- Join Date
- Mar 2005
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Kravvitz
Even hex color doesn't work.Thanks
-
Mar 25, 2005, 16:47 #17
- Join Date
- Oct 2004
- Location
- Sendai, Japan
- Posts
- 2,417
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry I didn't read your mind and see the tangential relationship between this thread and your background colour.
You 'll have to show us your page - what you have there should work.
-
Mar 25, 2005, 17:24 #18
- Join Date
- Mar 2005
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<html xmlns="http://www.w3.org/1999/xhtml" > <head><link href="../Icons/favicon.ico" rel="SHORTCUT ICON"><link href="PSS.css" rel="stylesheet" type="text/css"><title> </title><link rel="stylesheet" href="../Themes/Basic/CA_StyleSheet.css" type="text/css" /><link rel="stylesheet" href="../Themes/Basic/PSS.css" type="text/css" /><link rel="stylesheet" href="../Themes/Basic/StyleSheet.css" type="text/css" /></head> <body> <div id="container_2"> <form method="post" action="default3.aspx" id="__aspnetForm"> <div> <input type="hidden" name="__VIEWSTATE" value="OwXpEZh1FUntQLKJeH2WtiCnKOGA6JvXXqbtDt3UkNws/lnFl2SqkAEhFatP6P/+" /> </div> <div style="font-size:10pt; font-family:Verdana;"> Welcome to Default3.aspx. To access the application, please <a id="ctl00_ContentPlaceHolder1_HyperLink1" href="Default4.aspx">click here</a>. </div> </form> </div> </body> </html>
Thanks
-
Mar 26, 2005, 11:16 #19
Won't adding background-color:transparent to container_2 solve this?
vinyl digging - on a secondhand vinyl journey
-
Mar 26, 2005, 11:21 #20
- Join Date
- Oct 2004
- Location
- Sendai, Japan
- Posts
- 2,417
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I haven't had time to look at this properly, but I think the form might be more of a problem than the second div. Maybe background:transparent on the form id...
-
Mar 26, 2005, 11:47 #21
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
yaip has 4 CSS files linked there. It seems to me the problem might be that the color is set in one and overridden in another.
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Mar 26, 2005, 11:52 #22
- Join Date
- Oct 2004
- Location
- Sendai, Japan
- Posts
- 2,417
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Didn't spot that (I said I hadn't looked at it properly)...
Yeah, it's probably that, isn't it?
-
Mar 26, 2005, 12:05 #23
- Join Date
- Mar 2005
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I think you are right. I didn't realize that till I did a View->Source in my browser. I am using ASP.NET and was not aware what the server generated.
I fixed this by doing a ! IMPORTANT for the color attribute.Thanks
-
Mar 28, 2005, 10:10 #24
- Join Date
- Mar 2005
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I want to have a 3-D effect for the #container_2 so that it will appear as if it is slightly raised from the background.
How will I accomplish that?Thanks
-
Mar 28, 2005, 17:27 #25
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:border: 2px outset #000;
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
Bookmarks