Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1433 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Centering in CSS

Thread title: Centering in CSS
Closed Thread  
Page 1 of 2 1 2 >
    Thread tools Search this thread Display Modes  
08-16-2004, 04:29 AM
#1
Jon-Kyle is offline Jon-Kyle
Status: Member
Join date: Jul 2004
Location: Nashville, TN
Expertise:
Software:
 
Posts: 181
iTrader: 0 / 0%
 

Jon-Kyle is on a distinguished road

  Old  Centering in CSS

I'm trying to center a <DIV> tag for a header I'm making. Here is the code that I have now:

Code:
.header {
	margin: 10px;
	padding: 10px;
	background-color: #FFFFFF;
	width: 500px;
	border: 1px solid #999999;
	left: 50%;
	right: 50%;
}
For some reason it will not lign up in the center of my browser window. It just stays off to the left.

08-16-2004, 05:59 AM
#2
stenson is offline stenson
stenson's Avatar
Status: Member
Join date: Aug 2004
Location: Sacramento, CA
Expertise:
Software:
 
Posts: 275
iTrader: 1 / 100%
 

stenson is on a distinguished road

Send a message via AIM to stenson Send a message via MSN to stenson

  Old

Shouldn't you just have the header in a container?

Code:
body {
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: Trebuchet MS;
	font-size: 12pt;
	color: #556A87;
	}

#container {
	width: 500px;
	background-color: #fff;
	background-repeat:repeat-y;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	}

#header {
	margin: 10px;
	padding: 10px;
	background-color: #FFFFFF;
	width: 500px;
	border: 1px solid #999999;
        float: left;
}
That should do it, I usually use that for layouts that need to be centered.

08-17-2004, 01:44 PM
#3
Evo is offline Evo
Status: Junior Member
Join date: Aug 2004
Location:
Expertise:
Software:
 
Posts: 39
iTrader: 0 / 0%
 

Evo is on a distinguished road

Send a message via MSN to Evo

  Old

if you do what stenson says, it will work out fine.

08-17-2004, 04:08 PM
#4
Jon-Kyle is offline Jon-Kyle
Status: Member
Join date: Jul 2004
Location: Nashville, TN
Expertise:
Software:
 
Posts: 181
iTrader: 0 / 0%
 

Jon-Kyle is on a distinguished road

  Old

stenson, forgot to put it all in a container. I'm rather new at this . I tried the code you gave me. It works in IE, but not mozzila. Odd, heh. I'm starting to appreciate <table align="center"> a bit more now :P

08-18-2004, 12:46 AM
#5
flez is offline flez
Status: I love this place
Join date: Jul 2004
Location: Montreal
Expertise:
Software:
 
Posts: 540
iTrader: 0 / 0%
 

flez is on a distinguished road

  Old

Originally Posted by MeltedPixel
I'm trying to center a <DIV> tag for a header I'm making. Here is the code that I have now:

Code:
.header {
	margin: 10px;
	padding: 10px;
	background-color: #FFFFFF;
	width: 500px;
	border: 1px solid #999999;
	left: 50%;
	right: 50%;
}
For some reason it will not lign up in the center of my browser window. It just stays off to the left.
Try just adding position:absolute; to that...

08-18-2004, 07:03 AM
#6
Travis is offline Travis
Status: Member
Join date: Jul 2004
Location:
Expertise:
Software:
 
Posts: 445
iTrader: 0 / 0%
 

Travis is on a distinguished road

  Old

By adding position: absolute; it will still not be in the center as you have left: 50%; so the most left side of the start will start in the center the actual site wont be centered. You could possibly think well if its a screen width of say 800px without the scroll bar, the site is 500px Therefore 62.5% of the screen is taken up by the site, then there should be 18.75% on the left. However this will only be centered in one resolution any way so its a waste of time.

I agree with the others to use a container to to center the div tag however I am guessing if your heading is centered the rest of the site will be as well. Therefore there is no need for another div as a container, the body tag can be the container and you can set the css property text-align: center; to the body tag and then the heading and all other tags for your content, footer and whatever else will be centered.

08-18-2004, 07:05 AM
#7
Travis is offline Travis
Status: Member
Join date: Jul 2004
Location:
Expertise:
Software:
 
Posts: 445
iTrader: 0 / 0%
 

Travis is on a distinguished road

  Old

This is probably more the code you would want:

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

.header {
padding: 10px;
background-color: #FFFFFF;
width: 500px;
border: 1px solid #999999;
}

Also why did you have margin: 10px; in the heading?

08-18-2004, 02:41 PM
#8
Salathe is offline Salathe
Salathe's Avatar
Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP
 
Posts: 3,820
iTrader: 25 / 100%
 

Salathe will become famous soon enough

Send a message via MSN to Salathe

  Old

MP I made a quick page on my site for this... Click me for a working method

- Salathe

08-19-2004, 05:45 AM
#9
Travis is offline Travis
Status: Member
Join date: Jul 2004
Location:
Expertise:
Software:
 
Posts: 445
iTrader: 0 / 0%
 

Travis is on a distinguished road

  Old

Salathe method explains it perfectly

08-19-2004, 02:43 PM
#10
biniar is offline biniar
biniar's Avatar
Status: I'm new around here
Join date: Aug 2004
Location: Michigan
Expertise:
Software:
 
Posts: 5
iTrader: 0 / 0%
 

biniar is on a distinguished road

Send a message via ICQ to biniar Send a message via AIM to biniar Send a message via MSN to biniar Send a message via Yahoo to biniar Send a message via Skype™ to biniar

  Old

There is also the same type of method explained on: www.bluerobot.com


Method #1 http://bluerobot.com/web/css/center1.html
Method #2 http://bluerobot.com/web/css/center2.html

Closed Thread  
Page 1 of 2 1 2 >


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed