 center alignment DIV tags in CSS, New at it don't know how to do it. |
  |
| s_connors |
 Apr 17 2007, 09:53 AM
Post
#1
|
|
Newbie  Group: Members Posts: 16 Joined: 2-April 07 Member No.: 2,404  |
Hello folks new at css so thanks for putting up with me, I'm just learning how to code in css its fun to learn hard to figure out what I don't know, LOL
what I want to to is align all my content in the center of the screen not really sure how to do that. thanks in advance  Anywho so I have some real basic code:: <html> <head> <title>Test</title> <style type="text/css"> div.content { width:800px ; margin:0px } div.left { width:200px ; float:left ; padding:1em; } div.center { width:200px ; margin-left:200px ; padding:1em; } h1.sand { background-image:url('img/testbg.jpg') ; width: auto ; text-align: center } </style> </head> <body> <div class="content"> <div class="left"> <h1 class="sand">Hello</h1> this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? </div> <div class="center"> <h1 class="sand">Hello</h1> this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? </div> </div> </body> </html> |
  |
 
|
| pandy |
Apr 17 2007, 10:45 AM
Post
#2
|
|
Don't like donuts. Don't do MySpace. Group: WDG Moderators Posts: 7,207 Joined: 9-August 06 Member No.: 6 |
CODE .content { margin-left: auto; margin-right: auto } A block box can be centered by giving it equal left and right margins. If the width of the box is known 'auto' can be used. -------------------- “Never go to excess, but let moderation be your guide.”
– Cicero |
|
|
|
| s_connors |
Apr 17 2007, 11:55 AM
Post
#3
|
|
Newbie Group: Members Posts: 16 Joined: 2-April 07 Member No.: 2,404 |
thank you for your timely response, one more question:::
would there be a reason why that wouldn't work in a IE browser? |
|
|
|
| Darin McGrew |
Apr 17 2007, 12:10 PM
Post
#4
|
|
WDG Member Group: Root Admin Posts: 5,144 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE(s_connors @ Apr 17 2007, 09:55 AM)  would there be a reason why that wouldn't work in a IE browser? IIRC, MSIE supports the necessary CSS only when in "standards mode". When in "quirks mode", MSIE emulates older, even buggier versions of itself. See also Activating the Right Layout Mode Using the Doctype DeclarationAnd here are a couple additional references: Centering things Centring using CSS -------------------- Darin McGrew
WDG Member since 1998 My involvement with the WDG is personal. The views I express here are mine alone and not those of my employer. |
|
|
|
| pandy |
Apr 17 2007, 02:05 PM
Post
#5
|
|
Don't like donuts. Don't do MySpace. Group: WDG Moderators Posts: 7,207 Joined: 9-August 06 Member No.: 6 |
Yes, I should have mentioned that, sorry. If you want it centered in versions of IE older than 6 you need a workaround. The easiest is to use 'text-align: center' on a parent element. IE wrongly lets that affect block level elements.
CODE body { text-align: center; background: white } #box { width: 600px; margin-left: auto; margin-right: auto; text-align: left; / *have to reset it or text will be centered */ background: red } HTML <div id="box"></div> -------------------- “Never go to excess, but let moderation be your guide.”
– Cicero |
|
|
|
| s_connors |
Apr 18 2007, 08:22 AM
Post
#6
|
|
Newbie Group: Members Posts: 16 Joined: 2-April 07 Member No.: 2,404 |
thank you guys, your a life saver
 |
|
|
|
| s_connors |
Apr 18 2007, 09:42 AM
Post
#7
|
|
Newbie Group: Members Posts: 16 Joined: 2-April 07 Member No.: 2,404 |
ok I'm sorry to keep pestering you but I'm stilling have probs
FF and IE are looking different even with the new code, I got things cented now IE the DIV tags aren't lining up. looking for help again, lol. :::IE:::  :::FF:::  CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> <style type="text/css"> body { text-align: center ; background: white } #box { width: 600px ; margin-left: auto ; margin-right: auto ; text-align: left ; / *have to reset it or text will be centered */ background: red } div.content { width: 800 ; height: 100% ; margin-left: auto ; margin-right: auto ; border:1px dotted gray; } div.left { width:200px ; float:left ; padding:1em; } div.center { width:400px ; margin-left:200px ; padding:1em; } h1.sand { background-image:url('http://www.w3schools.com/css/bgdesert.jpg') ; width: auto ; text-align: center } h1.smile { background-image:url('http://www.myspacepicturecodes.com/myspace-graphics/myspace-graphics-backgrounds/myspace-codes-backgrounds-2.gif') ; width: auto ; text-align: center } </style> </head> <body> <div id="box"> <div class="left"> <h1 class="sand">Hello</h1> this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? </div> <div class="center"> <h1 class="smile">Hello</h1> this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? this is some test text, wouldn't it be cool if this works eh? </div> </div> </body> </html> thank you again, I'm just very new at this. |
|
|
|
| john f |
Apr 18 2007, 03:52 PM
Post
#8
|
|
Member Group: Members Posts: 40 Joined: 23-August 06 Member No.: 10 |
div.content
{ width: 800 ;........................} width:800 ??? |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 21st November 2009 - 06:49 AM |
Invision Power Board
© 2009 IPS, Inc.
Licensed to: HTMLHelp.com, LLC