SitePoint Sponsor |
|
User Tag List
Results 1 to 15 of 15
Thread: CSS centering a page
-
Aug 9, 2007, 21:37 #1
CSS centering a page
Hey everyone,
I'm fairly new to CSS. I really like how sites like apple and blockbuster center their websites. The page will remained centered until the outer edges are no more. Then when only the content exists it collapses as if it were in an absolute position. Does anyone know how to accomplish this or can point me in the right direction?
Thanks
-
Aug 9, 2007, 23:20 #2
- Join Date
- May 2007
- Location
- Croatia/Samobor
- Posts
- 114
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
#
#container {
width:800px; put px of your web site...
margin:auto;
height:auto;
}
-
Aug 9, 2007, 23:43 #3
Thanks Jay-S for your help!
Thats exactly what I wanted, but with only one tiny loop-hole; I'm still left with a few extra pixels on the left when I collapse completely, do you know how I can change that?
-
Aug 10, 2007, 00:44 #4
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Browsers use padding or margins on the body by default so you'll need to set these to 0 like this if you haven't already
Code:body { padding: 0; margin: 0; }
YOu can set all paddings and margins to zero by using the following rule at the beginning of your CSS.
Code:* { padding: 0; margin: 0; }
Hope that solves your problem.
-
Aug 10, 2007, 02:56 #5
Yes it does! Thank you.
p.s. I think these two are gay
what the hell was sitepoint thinking?
-
Aug 10, 2007, 03:09 #6Off Topic:
that's the emote for one of the team leaders on sitepoint, you're in for big trouble now.
-
Aug 10, 2007, 10:27 #7
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Who cares who it belongs to? I'm personally thinking of taking the brothercake smiley and introducing it to the Machine Gun Kelly smiley.
Anyway, as the others have said, put a width on the element, make sure it's set to display: block; (only if an inline element like <span> since block-level elements like H1, H2, P, DIV and so forth don't need it) and then set the margin to 0 auto;
Code:#container { margin: 0 auto; width: 760px; }
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 10, 2007, 12:17 #8
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If you're centering the whole site then I'd tend to apply this to the body
Code:body { margin: 0 auto; width: 760px; }
Code:#container { float: left; width: 760px; }
-
Aug 10, 2007, 15:28 #9
-
Aug 10, 2007, 16:00 #10
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I typically deal with 100% document height models, so I always have a #container ID applied to a DIV that contains everything but the footer.
Force of habit for me.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 20, 2007, 19:48 #11
I know this is an older thread, but it's topic related...
Well, I got my page centered, but I'm have trouble positioning my elements inside the container. I don't know how to control the elements vertically with the exception of the <br /> and have a crappy method of centering my divs. All I want to do is be able to control where I put my div in the container with ease. Any suggestions? Thanks.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <?php //variables //title $title_ = "Title"; ?> <style type="text/css"> *{ padding: 0; margin: 0; } body { margin: 0 auto; margin-left:auto; margin-right:auto; width: 898px; background-color:#CCCC66 } #container { float: left; width: 898px; height: 900px; background-color:#999999; } #link1{ float: left; width: 222px; background-color:#CCCC66; height: 25px; border: solid rgb(250,0,255); border-width: 2px 1px 2px 2px; } #link2{ float: left; height: 25px; top: 90px; width: 222px; background-color:#CCCC66; border: solid rgb(250,0,250); border-width: 2px 1px 2px 1px; } #link3{ float: left; height: 25px; width: 222px; background-color:#CCCC66; border: solid rgb(250,0,250); border-width: 2px 1px 2px 1px; } #link4{ float: left; height: 25px; width: 222px; background-color:#CCCC66; border: solid rgb(250,0,250); border-width: 2px 2px 2px 1px } #box{ float: left; left: 80px; height: 90px; width: 519px; background-color:#999999; border: solid rgb(250,0,250); border-width: 0px 0px 0px 0px; } #innerbox{ top: 700px; float:right; width:136px; height:177px; z-index:1; background: #CCCC66; border: solid rgb(250,0,250); border-width: 2px 2px 2px 2px; } </style> <title><? echo $title_; ?></title> </head> <body> <div id="container"><br /> <h1 id="myh1" class="h1color_"><center><? echo $title_; ?></center></h1> <hr id="myhr" /> <br /> <div id="link1" style="background-color:#CCCC66"><p>link1</p></div> <div id="link2">link2</div> <div id="link3">link3</div> <div id="link4">link4</div> <!--<button onclick="positioning_width_other()">pos other</button>--> <br /> <br /> <br /> <br /> <div id="box"><div id="innerbox"><p align="center">Box</p></div></div> </div> </body> </html>
-
Aug 21, 2007, 01:41 #12
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Without knowing exactly what type of layout you're after it's difficult to advise you other than giving general advice.
Use float's on the elements within your contain to position them next to each other as required, you can then apply paddings and margins to them to space them.
I'd generally wrap specific sections in a div which would give me areas of the page I can work with. header, content, navigation, footer etc might be ID's that I'll apply.
I wrote a tutorial last week for a simple CSS layout which might be useful to explain this http://www.dave-woods.co.uk/?p=73
There's a few other things wrong with your code that I can spot.
1 - Don't use <centre> tags as you can use text-align: center on your h1 within CSS to achieve this.
2 - Use a list to display your menu (again this is explained in my tutorial)
3 - Don't use <br /> for spacing, padding-bottom in the CSS can achieve the same effect.
4 - This is probably personal preference but I'd try not to mix HEX values with RGB. I stick to using HEX values for consistency for all my colour codes.
-
Aug 21, 2007, 01:43 #13
- Join Date
- Feb 2006
- Posts
- 184
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try this article: http://www.jakpsatweb.cz/css/css-ver...-solution.html (for centering virtical content)
If you just want to position it, say 5px down and 5px to the right, just use padding or margins.
-
Aug 21, 2007, 01:52 #14
- Join Date
- Jul 2003
- Location
- Kent
- Posts
- 1,921
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
You are putting all your links in individual divs and then styling each div.
It would be a lot simpler to apply a style to the links directly. Then you'd only need to define it once. And you wouldn't need all that float left, because they are inline elements and will appear in a line. Or you could do what most people do, put the links in as a series of list items and style the list and the links.
Using a separate div for every element you use is called divititis, but it can be cured.Dr John
www.kidneydialysis.org.uk
-
Aug 25, 2007, 05:18 #15
@Dr. John
Divititis indeed. I like using a lot of divisions; they allow maximum control. Are you telling me using a lot will cause rendering problems/slower page loads or do you think it's simpler using different methods?
@wyrd33
Thanks, I definatley got the elements where I wanted, it seems to get a bit sloppy though. Plus I can't overlap elements, do you know a way to do so?
@csswiz
1. Center tag is deprecated, thanks for pointing that out
2. I don't mind using divs unless you can persuade me otherwise
3. Why?
4. I agree; using hex rgb may get confusing, best to stay consistent.
I updated my code and have a few questions (still haven't changed the hex/rgb csswiz).
1. How do I overlap my boxes with one another
2. Why do I have to leave the "padding:" blank for it display propper margins/padding for my main container
Heres my code. Take a peek at it if you want and don't be shy if you think you know a better way of doing it. Thanks.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <?php //variables //title $title_ = "Title"; ?> <style type="text/css"> *{ padding: 0; margin: 0; } #myhr { width: 90%; } body { padding: 15px 0px 15px 0px; margin-left:auto; margin-right:auto; margin-top:auto; margin-bottom:auto; width: 904px; background-color:#CCCC66; } #container { padding: float: left; width: 898px; height: 900px; background-color:#999999; border: solid rgb(250,0,255); border-width: 2px 2px 2px 2px } #link1{ margin: 0px 0px 0px 0px; float: left; width: 222px; background-color:#CCCC66; height: 25px; border: solid rgb(250,0,255); border-width: 2px 1px 2px 1px; z-index:1; } #link2{ float: left; height: 25px; margin: 0px 0px 0px 0px; width: 223px; background-color:#CCCC66; border: solid rgb(250,0,250); border-width: 2px 1px 2px 1px; z-index:1; } #link3{ float: left; margin: 0px 0px 0px 0px; height: 25px; width: 223px; background-color:#CCCC66; border: solid rgb(250,0,250); border-width: 2px 1px 2px 1px; } #link4{ float: left; height: 25px; width: 222px; background-color:#CCCC66; border: solid rgb(250,0,250); border-width: 2px 1px 2px 1px; } #innerbox{ width:136px; height:177px; margin: 0px 0px 0px 68px; z-index:0; background: #CCCC66; border: solid rgb(250,0,250); border-width: 2px 2px 2px 2px; } #innerbox2{ width:136px; height:177px; margin: -182px 0px 0px 275px; z-index:0; background: #CCCC66; border: solid rgb(250,0,250); border-width: 2px 2px 2px 2px; } #innerbox3{ width:136px; height:177px; margin: -182px 0px 0px 482px; z-index:0; background: #CCCC66; border: solid rgb(250,0,250); border-width: 2px 2px 2px 2px; } #innerbox4{ width:136px; height:177px; margin: -182px 0px 0px 689px; z-index:0; background: #CCCC66; border: solid rgb(250,0,250); border-width: 2px 2px 2px 2px; } </style> <title><? echo $title_; ?></title> </head> <body> <div id="container"><br /> <h1 id="myh1" class="h1color_" align="center"><? echo $title_; ?></h1> <div align="center"> <hr align="center" id="myhr" /> </div> <br /> <div id="link1" style="background-color:#CCCC66"><p>link1</p></div> <div id="link2">link2</div> <div id="link3">link3</div> <div id="link4">link4</div> <!--<button onclick="positioning_width_other()">pos other</button>--> <br /> <br /> <br /> <br /> <div id="innerbox"><p align="center">Box</p></div> <div id="innerbox2"><p align="center">Box2</p></div> <div id="innerbox3"><p align="center">Box3</p></div> <div id="innerbox4"><p align="center">Box4</p></div> </div> </body> </html>
Bookmarks