OutFront Forums
     Home    Register     Search      Help      Login    

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

 

<div align=" center" > replacement

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> <div align=" center" > replacement
Page: [1]
 
Professional Website Management
sljsh

 

Posts: 76
Joined: 1/30/2002
Status: offline

 
<div align=" center" > replacement - 9/15/2002 19:04:24   
Hi, all. If the align=" center" for the div tag has been deprecated, what would be the alternative the center the div on a page?

Lisa
www.bio-ox.com
puiwaihin

 

Posts: 1378
From: Taiwan
Status: offline

 
RE: <div align=" center" > replacement - 9/15/2002 19:50:10   
I believe the way they would suggest doing it would be by defining the div tag in your stylesheet and use the style attribute to specify varying styles.

_____________________________

" Things are always darkest, just before it goes totally black."
-Hannibal Smith

(in reply to sljsh)
sljsh

 

Posts: 76
Joined: 1/30/2002
Status: offline

 
RE: <div align=" center" > replacement - 9/15/2002 20:32:31   
I tried using

div {align: center}

but that didn' t work. Is there another way?

Lisa
www.bio-ox.com

(in reply to sljsh)
Doug G

 

Posts: 1197
Joined: 12/29/2001
From: SoCal
Status: offline

 
RE: <div align=" center" > replacement - 9/15/2002 20:48:47   
Well, you could define a css class that' s centered, and then use <div class=" myclass" >


_____________________________

======
Doug G
======

(in reply to sljsh)
pageoneresults

 

Posts: 1001
From: Orange, CA USA
Status: offline

 
RE: <div align=" center" > replacement - 9/16/2002 0:49:26   
Sorry, I gave the advice for <div align=" center" >. The thing is, even though the attribute is deprecated, it is still widely supported. Probably even more so than the css equivalent which would be...

div{margin-right:auto;margin-left:auto;width:740px;}


or the shorthand version...

div{margin:0 auto;width:740px;}


Either or should do the trick for most CSS compliant browsers. I didn' t realize you were ready to take that deep of a plunge. Even though using deprecated tags is not recommended, there are some instances where you may have to bite the bullet for a while and use those tags until you understand CSS.

Good luck!

_____________________________

SEO Consultants Directory
Find Search Engine Marketing Companies

(in reply to sljsh)
pageoneresults

 

Posts: 1001
From: Orange, CA USA
Status: offline

 
RE: <div align=" center" > replacement - 9/16/2002 0:51:59   
FYI...

To center content within a div...

div{text-align:center;}


_____________________________

SEO Consultants Directory
Find Search Engine Marketing Companies

(in reply to sljsh)
sljsh

 

Posts: 76
Joined: 1/30/2002
Status: offline

 
RE: <div align=" center" > replacement - 9/16/2002 8:11:11   
Thanks for the input. The div {text-align: center;} doesn' t seem to work as well in all browsers as (div align=" center" }.

My main concern was getting my pages to look usable in Mac IE.

I' ve been trying to get a grasp on this tutorial http://webreference.com/authoring/style/sheets/layout/advanced/ but it' s overwhelming!

Thanks,

Lisa
www.bio-ox.com

(in reply to sljsh)
pageoneresults

 

Posts: 1001
From: Orange, CA USA
Status: offline

 
RE: <div align=" center" > replacement - 9/16/2002 11:32:07   
> The div {text-align: center;} doesn' t seem to work as well in all browsers as (div align=" center" }.

These are two different things. The text-align: center is used to center the content within the div. It would be the same as p align=" center" .

The div align=" center" is used to center the entire block element that it is assigned to. It would be the same as table align=" center" .

_____________________________

SEO Consultants Directory
Find Search Engine Marketing Companies

(in reply to sljsh)
sljsh

 

Posts: 76
Joined: 1/30/2002
Status: offline

 
RE: <div align=" center" > replacement - 9/18/2002 13:25:06   
My problem now lies in my shopping cart area (I use Miva Merchant). In IE, the shopping cart pages are centered. In N7, they are aligned to the left. When I added div{margin-right:auto;margin-left:auto;width:750px;} to the shopping cart style sheet, the IE then aligned to the left and the N7 pages were centered.

Weird.

Lisa
www.bio-ox.com

(in reply to sljsh)
jbrandt04330

 

Posts: 35
Joined: 2/18/2002
From: Augusta ME USA
Status: offline

 
RE: <div align=" center" > replacement - 9/20/2002 14:12:38   
I may be wrong, but I do not think the <div align=" center" > is deprecated. You may be confused with the HTML code <center></center> which IS deprecated. Unfortunately, FP2K still adds both to the code when you add the centering element around tables.

If you try to validate to HTML 4.01, the <center> with be in error, the <div align=" center" > will be fine. You need to go in HTML view and manually delete the <center> coding.

jeb



_____________________________

john e brandt
jebswebs.com

(in reply to sljsh)
bobby

 

Posts: 11904
Joined: 8/15/1969
From: Seattle WA USA
Status: offline

 
RE: <div align=" center" > replacement - 9/21/2002 0:13:12   
I' d say that if your biggest cross-browser problem is that one shows the page centered and one aligns it left... then you' re doing a great job :)

I wish I was that skilled [:p]

_____________________________

Talk to your kittens about catnip, or someone else will.


:)

(in reply to sljsh)
sljsh

 

Posts: 76
Joined: 1/30/2002
Status: offline

 
RE: <div align=" center" > replacement - 9/21/2002 0:23:50   
Thanks, Bobby, but unfortunately it' s not. I' ve just been trying to tackle one problem at a time. I figured it out. Instead of putting the info in the div, I put it in the body tag and it seems to be working now - centered in IE and N7. I' ve given up on N6. IMO, anyone using N6 should upgrade to N7 immediately.

My bigger problem is that I' ve been told that my site in unusable using Mac IE, Though it seems to be fine in Mac AOL. Go figure. I don' t know the first thing about programming for a Mac. I wonder how many customers I' m losing.

Lisa
www.bio-ox.com

(in reply to sljsh)
lyberty

 

Posts: 1
Joined: 11/4/2005
Status: offline

 
RE: <div align=" center" > replacement - 11/4/2005 17:39:46   
Simple, straightforward, useful:
    <center>
     . . . 
     . . .
     </center>

An unnecessary addition, but still simple and useful:
    <div align="center">
     ...
     ...
     </div>

An idiodic "improvement" (now with 500% more code!):
    <style>
     center{margin-right:auto;margin-left:auto;width:740px;}
     </style>
     <div class="center">
     ...
     ...
     </div>


This is progress?!?!?



By the way, just use
body { text-align: center;} 

to center the whole page.

(in reply to pageoneresults)
Tailslide

 

Posts: 6709
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: <div align=" center" > replacement - 11/5/2005 3:56:40   
The progress comes from defining the position of items in an external stylesheet so that if you want to change the position of the central box on every page of your site you change it in the stylesheet and it changes globally thougout the site without having to go in and change <align="center"> on every single page. Using inline CSS as per your example may be more "valid" if you're using the strictest criteria but doesn't help at all for reducing page bloat or time spent on editing. External stylesheets are the way to go.

I'm repeating some of what's been said so far - but my technique for centering a div is to include the following in an external stylesheet:

#centralbox {margin: 0 auto; text-align:center;}
#centralbox p {text-align:left;}

In case you're wondering, the text-align:center is because the margin:0 auto bit doesn't work too well on IE - you need the center bit. Normalise the text by putting text-align:left (assuming you want the text within the div left-aligned) in the rule governing what's actually inside the div (in this case paragraphs).

IE 5.2 mac is a real pain - it's buggy and thankfully not used alot any more - here's a page on some IE 5.2 bugs which hopefully might help: http://www.l-c-n.com/IE5tests/float2misc/

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to lyberty)
coreymanshack

 

Posts: 1
Joined: 11/20/2005
Status: offline

 
RE: <div align=" center" > replacement - 11/20/2005 16:09:13   
hey all! i am currently running IE6 and none of the concepts listed above worked for me!
Although after looking at some of the examples you all provided a came up with a solution.

<html>
<head>
<title>
DEMA.COM
</title>
<style>
body {
background-color:black;
font-family:terminal;
color:#2D5B89;
text-align: center;
}
#page {
width:750px;
height:400px;
text-align: left;
}
</style>
</head>
<body>

<div id="page">

<img src="menubar.gif" border="0"/>
This is the page contents.

</div>
</body>
</html>

I put text align center in the body section in css to center everything in the page. then i put text align is left for the div page in the css. I just thought u all should know this because I was frustrated after going to several websites and none of the examples working!

(in reply to sljsh)
memphisink

 

Posts: 7
Joined: 6/22/2008
Status: offline

 
RE: <div align=" center" > replacement - 6/22/2008 22:46:59   
:) Can i use the div tags to align my list to: right center and left with out over lapping the current text in my side bar please look at it veiw the source code and play around with if you will thanks

http://www.memphisink.bravehost.com:)

(in reply to sljsh)
Tailslide

 

Posts: 6709
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: <div align=" center" > replacement - 6/23/2008 2:08:41   
You don't need a div around the list - just float the lists left. Remember to assign them a width though.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to memphisink)
memphisink

 

Posts: 7
Joined: 6/22/2008
Status: offline

 
RE: <div align=" center" > replacement - 6/23/2008 10:23:52   
how i dont know how to do that? tailslide can you help me?

(in reply to sljsh)
Tailslide

 

Posts: 6709
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: <div align=" center" > replacement - 6/23/2008 10:59:52   
Sure give the lists a class - say call it "left" like this:

<ul class="left">
 <li> etc etc </li>
</ul> 

<ul class="left">
 <li> etc etc </li>
</ul> 


then add a rule in the stylesheet:

ul.left {float:left; width:49%;}


Plus any other formatting you want to add.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to memphisink)
memphisink

 

Posts: 7
Joined: 6/22/2008
Status: offline

 
RE: <div align=" center" > replacement - 6/23/2008 16:41:04   
whats:) (float)?

(in reply to sljsh)
memphisink

 

Posts: 7
Joined: 6/22/2008
Status: offline

 
RE: <div align=" center" > replacement - 6/23/2008 16:58:09   
how do i make a style sheet and where do i put it??

(in reply to memphisink)
Tailslide

 

Posts: 6709
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: <div align=" center" > replacement - 6/24/2008 2:17:21   
Oh dear... I think you'd probably do a bit of reading. Have a look here: http://www.htmldog.com/ it's a brilliant tutorial which explains proper use of markup and stylesheets.

In very brief terms, an HTML page should really only include the content itself and the markup that describes it (e.g. headings, paragraphs, lists) but no styling or presentational stuff like font tags or align. All the layout and presentation should be handled by a stylesheet which is a separate sheet linked to in each HTML page. A single stylesheet controls the layout and presentation of the whole site. You can see where that would make life a lot easier.

Have a look at the tutorial and it will explain in much better detail than I could.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to memphisink)
MCD

 

Posts: 774
Joined: 3/19/2002
From: Al USA
Status: offline

 
RE: <div align=" center" > replacement - 6/24/2008 6:25:49   
Have you noticed that when a woman says "oh dear" anything that follows will not be good? (Sorry, back to topic new)

_____________________________

Author of " How To Build A Website With Duct Tape"

(in reply to Tailslide)
Donkey

 

Posts: 4026
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: offline

 
RE: <div align=" center" > replacement - 6/24/2008 8:10:00   
quote:

when a woman says "oh dear" anything that follows will not be good

Surely it depends on the context? I can think of circumstances in which what follows will be very good, but as this is a family forum I won't give details. :)

_____________________________

:)


(in reply to MCD)
digitz

 

Posts: 1
Joined: 4/17/2010
Status: offline

 
RE: <div align=" center" > replacement - 4/17/2010 2:44:34   
Here's the official word on this topic: http://www.w3.org/TR/REC-html40/present/graphics.html

Basically, you must now declare a class and use text-align:center, which also works for images..

(in reply to Donkey)
jaybee

 

Posts: 14523
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

 
RE: <div align=" center" > replacement - 4/17/2010 5:02:08   
quote:

which also works for images.


sometimes.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to digitz)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> <div align=" center" > replacement
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts