Results 1 to 14 of 14
-
12-02-2006, 11:39 PM #1WHT Addict
- Join Date
- Apr 2001
- Posts
- 172
Center page but keep text left aligned
Hey guys, i got another question about css and html coding. Is there a way to center a page when at the same time keeping the text aligned left.
For example, on this page,
http://services.georgiasouthern.edu/....php#hazardcom
I want the list centered but keep it all left aligned within the center
Hope that makes sense
Thanks for the help
-
12-03-2006, 12:49 AM #2Web Hosting Master
- Join Date
- Mar 2004
- Posts
- 1,016
Everything looks correct to me, text is already left-aligned.
Anyway, you should use "margin: 0 auto;" in body and "text-align:center;" for text to get what you want.
-
12-03-2006, 02:54 AM #3WHT Addict
- Join Date
- Apr 2001
- Posts
- 172
I know but I want it centered in the middle of the page but the text not centered
-
12-03-2006, 10:40 AM #4Newbie
- Join Date
- Jun 2006
- Location
- Scotland
- Posts
- 18
I would just use a wrapper:
Simple example:
HTML:
<head>
<title>Test Page</title>
<style type="text/css">
BODY{
text-align:center;
}
#wrapper{
text-align:left;
width:600px;
}
</style>
</head>
<body>
<div id="wrapper">My Text </div>
</body>
Hope thats not too confusing.
-
12-03-2006, 11:05 AM #5WHT Addict
- Join Date
- Oct 2004
- Posts
- 115
Centering in Firefox might help you somewhat. When I had this issue, I was searching for different scenarios and I came across this one which helped me.
And then you create another divide and align that text to the left.John
-
12-03-2006, 02:32 PM #6Web Hosting Master
- Join Date
- Dec 2003
- Location
- Vancouver BC, eh?
- Posts
- 571
You can create another div that wraps the list, with a smaller width, centered (so its closer in the middle) and make sure the text-align is left for the list items.
-
12-03-2006, 03:33 PM #7WHT Addict
- Join Date
- Apr 2001
- Posts
- 172
I tried this but it didnt seem to work
Code:<style type="text/css"> ul { list-style-image: url('images/arrow2.gif') } body { text-align:center; } #container { text-align:left; margin:0 auto; width:600px;} </style>
Here is the link
-
12-03-2006, 05:53 PM #8Web Hosting Master
- Join Date
- Dec 2003
- Location
- Vancouver BC, eh?
- Posts
- 571
add:
#secondcontainer
{
width: 200px;
}
with all the centering. So this div is inside the container div.
-
12-03-2006, 06:27 PM #9Newbie
- Join Date
- Jun 2006
- Location
- Scotland
- Posts
- 18
Originally Posted by VeritasDavid
-
12-03-2006, 11:50 PM #10WHT Addict
- Join Date
- Apr 2001
- Posts
- 172
hmm are you sure. I see it semi-centered in IE but not at all in FF
Man I thought css was supposed to make things easier not harder
-
12-04-2006, 01:58 PM #11Junior Guru Wannabe
- Join Date
- Aug 2006
- Posts
- 35
You got it already. Just needs a minor adjustment to this div.
#container {
margin: 0 auto;
width:400px;
padding: 0;
}
-
12-04-2006, 04:02 PM #12WHT Addict
- Join Date
- Apr 2001
- Posts
- 172
i got it almost working in IE but not at all in FF. Now how can i make the text left alligned?
-
12-04-2006, 08:57 PM #13Web Hosting Master
- Join Date
- Oct 2006
- Location
- Salt Lake City, UT
- Posts
- 850
Just make a table centered and left align the contents inside..
-
12-05-2006, 12:00 AM #14Junior Guru Wannabe
- Join Date
- Apr 2005
- Posts
- 51
Originally Posted by VeritasDavid
Take a look at this 2 examples:
1. Centering: Auto-width Margins (recommended)
2. Centering: Negative Margin
it certainly work!
If you wanna learn about List:
1. Listamatic (by example, excellent!!)
2. CSS Design: Taming Lists by Mark NewHouse (published on A List Apart)Last edited by xTiNcTion; 12-05-2006 at 12:09 AM. Reason: added List comment
xTiNcTion