Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old December 13th, 2007, 04:44 PM
Registered User
 
Join Date: Oct 2007
Location: , , .
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default Centering elements in Firefox and IE

Hi,

Probably a familiar issue here, but I've tried applying the solutions I've found by searching, and still nothing.

I want to center elements in a Web page (say, my Header and the following menu bar). I can get it to work easily for IE by using "text-align" in the <div> tags, but then it doesn't work for Firefox. I've tried replacing them with "margin: 0;" and "margin: auto;", as suggested, but it doesn't work. I CAN get it to work if I set the "width" property to 100%, but since I want to surround the content of the header and menu bar with a gray box, I don't want it to stretch all across the screen: so, when I set it to an absolute measurement (say, 1200px), it just aligns left again.


 Suggestions?

Here's my code:

- HTML

<!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" />
<title>Untitled Document</title>
<LINK href="style.css" rel="stylesheet" type="text/css"></LINK>
</head>

<body>

<div class="PageWrapper">
     <div class="ContentWrapper">
         <div class="Header">
            <img src="images/TopBanner7.png" width="1200" height="260" />
        </div>
    </div>
     <div class="ContentWrapper">
        <div class="MenuBar">
         </div>
     </div>
</div>
</body>
</html>

- CSS

.PageWrapper {
    text-align:center;
        - OR -
        margin: auto;
    width:100%;
}

.ContentWrapper {
    width:1200px;
    padding:3px;
    margin:3px;
    border: solid;
    border-width: 2px;
    border-color:#333333;
    background-color:#666666;
    text-align:center;
        - OR -
        margin: auto;
}

.Header {

    text-align:center;
        - OR -
        margin: auto;

    height: 260px;
    width: 1200px;
}
.MenuBar {
    background-image:url(images/ButtonBarBackground.png);
    text-align:center;
        - OR -
        margin: auto;

    height: 60px;
    width: 1200px;
}

Thanks,

Andy
Reply With Quote
  #2 (permalink)  
Old December 19th, 2007, 12:00 AM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

Using both margin:auto; and text-align:center, it seems to be working pretty well. I removed the width 100% or set it to just about anything else. Here's my code.

-HTML
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" />
<title>Untitled Document</title>
<LINK href="style.css" rel="stylesheet" type="text/css"></LINK>
</head>

<body>

<div class="PageWrapper">
     <div class="ContentWrapper">
         <div class="Header">
            <img src="images/TopBanner7.png" width="1200" height="260" />
        </div>
    </div>
     <div class="ContentWrapper">
        <div class="MenuBar">
        Stuff inside the menu bar.
        </div>
     </div>
    <h3>Here's my body content</h3>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

</div>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

</body>
</html>
-CSS
Code:
.PageWrapper {
    text-align:center;
    margin: auto;
}

.ContentWrapper {
    width:1200px;
    padding:3px;
    margin:3px;
    border: solid;
    border-width: 2px;
    border-color:#333333;
    background-color:#666666;
    text-align:center;
    margin: auto;
}

.Header {

    text-align:center;
    margin: auto;
    height: 260px;
    width: 1200px;
}

.MenuBar {
    background-image:url(images/ButtonBarBackground.png);
    text-align:center;
    margin: auto;
    height: 60px;
    width: 1200px;
}

body {
width: 200px;
}
-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
  #3 (permalink)  
Old December 19th, 2007, 12:02 AM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

:( And yes, centering is embarassingly difficult to do in CSS.

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Centering content Europom CSS Cascading Style Sheets 2 February 18th, 2008 06:25 AM
Centering a box Terry Joseph Migliorino CSS Cascading Style Sheets 3 December 28th, 2005 09:22 AM
Not centering tul CSS Cascading Style Sheets 3 September 22nd, 2005 12:16 PM
Centering of Image Within Nav Bar DuncanM CSS Cascading Style Sheets 1 April 26th, 2005 10:29 AM



All times are GMT -4. The time now is 02:05 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.