18 replies [Last post]
ratzz
ratzz's picture
Offline
Regular
Last seen: 7 years 29 weeks ago
Joined: 2011-02-06
Posts: 17
Points: 19

Hi All,

I've search the net, and CSSC for this - even used Tony's advice ...

I cannot for the life of me get this menu centred in Firefox - every other browser is fine!

<div class="container">
 
	<div class="centred">
		<a href="#"><img src="images/home_but_out.jpg" border="0" /></a>
    	<a href="#"><img src="images/about_but_out.jpg" border="0" /></a>
    	<a href="#"><img src="images/cupc_but_out.jpg" border="0" /></a>
    	<a href="#"><img src="images/event_but_out.jpg" border="0" /></a>
    	<a href="#"><img src="images/contact_but_out.jpg" border="0" /></a>
	</div>
 
</div>

.container{
  text-align: center;
}
 
.centered{
  width:800px; 
  margin-left:auto; 
  margin-right:auto;
  text-align:left; /* re-align text back to left */
}

Can anyone please help, before I rip the remaining shreads of hair out of my head...

Thanks guys,
Simon Crazy

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Please post all your HTML and

Please post all your HTML and CSS, anything could be interfering with it Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

ratzz
ratzz's picture
Offline
Regular
Last seen: 7 years 29 weeks ago
Joined: 2011-02-06
Posts: 17
Points: 19

Thanks PineApple, see below

Thanks PineApple, see below ...

<!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=utf-8" />
<title>Cupcakes.</title>
<meta name="description" content="description" />
<meta name="author" content="Simon Williams" />
<link rel="stylesheet" type="css" href="stylesheet.css" />
<style type="text/css">
body {
 
	background-repeat:repeat-y;
	background-attachment:fixed;
	background-position:center;
	background-image:url('images/tiled_background.jpg');
}
</style>
</head>
 
<body>
 
<img src="images/header.jpg" width="800" height="227" alt="alt" style="display: block; margin: 0 auto;" />
 
 
 
 
<div class="container">
 
	<div class="centred">
		<a href="#"><img src="images/home_but_out.jpg" border="0" /></a>
    	<a href="#"><img src="images/about_but_out.jpg" border="0" /></a>
    	<a href="#"><img src="images/cupc_but_out.jpg" border="0" /></a>
    	<a href="#"><img src="images/event_but_out.jpg" border="0" /></a>
    	<a href="#"><img src="images/contact_but_out.jpg" border="0" /></a>
	</div>
 
</div>
 
 
</body>
</html>

@charset "utf-8";
/* CSS Document */
 
 
.container{
  text-align: center;
}
 
.centered{
  width:800px; 
  margin-left:auto; 
  margin-right:auto;
  text-align:left; /* re-align text back to left */
}

Thats all of it! Only a header (that will centre!) and a menu so far!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Argh, I need to wear my

Argh, I need to wear my glasses Laughing out loud

Your CSS says:

.centered{

but your HTML says:

<div class="centred">

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

The right way to spell, and the Brit way

Aha! That silly frenchified Brit spelling strikes again. Was it Churchill who said we are two peoples separated by a common language? Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

'frenchified' *cough

'frenchified' Angry *cough splutter* how dare you, our language has been subtly refined from centuries of nicking words from everywhere and pretending they are our own, frenchified! Quelle horreur, my Sang froid is tested to the limit and in usual fashion no doubt I'll suffer L'esprit de l'escalier

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ratzz
ratzz's picture
Offline
Regular
Last seen: 7 years 29 weeks ago
Joined: 2011-02-06
Posts: 17
Points: 19

WOW! Didn't see that! Bloody

WOW!

Didn't see that! Bloody Hell!

Well, even though the spelling mistake was corrected, still no joy!

Any other ideas guys?!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Centering menu items

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <head>
    <title>test document

    <meta http-equiv="content-type" 
          content="text/html; charset=utf-8" />

    <style type="text/css">
      .centered {
        border: 1px dotted black; /*for clarity*/
        margin: 0 auto;
        text-align: center;
        width: 800px;
        }

      .centered li {
        display: inline;
        margin: 0 1.25em;
        }

      a img {
        border: none;
        }
    </style>
  </head>

  <body>
    <div class="container">
      <ul class="centered">
	<li><a href="#" rel="nofollow"><img src="images/home_but_out.jpg" alt="Home" /></a></li>
    	<li><a href="#" rel="nofollow"><img src="images/about_but_out.jpg" /></a></li>
    	<li><a href="#" rel="nofollow"><img src="images/cupc_but_out.jpg" /></a></li>
    	<li><a href="#" rel="nofollow"><img src="images/event_but_out.jpg" alt="Event" /></a></li>
    	<li><a href="#" rel="nofollow"><img src="images/contact_but_out.jpg" alt="Contact" /></a></li>
      </ul>
    </div>
  </body>
</html>

For as much as you've shown, the .container class div serves no purpose. The list of links, a menu, should be marked as a ul.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ratzz
ratzz's picture
Offline
Regular
Last seen: 7 years 29 weeks ago
Joined: 2011-02-06
Posts: 17
Points: 19

Hi Gary, Thanks for that, all

Hi Gary,

Thanks for that, all seems to work ok after a few little adjustments, but its not quite centered.

It is almost there, but the whole menu has been 'bumped' across by about 15px ... so gap on the left edge, and overrun on the right by the same amount...

Here is the slightly changed code I'm using:

.centered {
        margin: 0 auto;
        text-align: center;
        width: 800px;
        }
 
      .centered li {
        display: inline;
 
        }
 
      a img {
        border: none;
        }

<ul class="centered">
 	<li><a href="#"><img src="images/home_but_out.jpg" alt="Home" /></a></li><li><a href="#"><img src="images/about_but_out.jpg" alt="About Us" /></a></li><li><a href="#"><img src="images/cupc_but_out.jpg" alt="Cupcake Gallery" /></a></li><li><a href="#"><img src="images/event_but_out.jpg" alt="Your Events" /></a></li><li><a href="#"><img src="images/contact_but_out.jpg" alt="Contact" /></a></li>
</ul>

Thanks again ...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Where else does yours differ

Where else does yours differ from mine? What I gave you and what you show me should center within a px or two at the most. I'm guessing that there is more than you've shown us. Look especially to containers wider than their own containers, i.e. overflow situations. Elements that have widths set explicitly and also have padding, borders, or margins may cause an unexpected overflow.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ratzz
ratzz's picture
Offline
Regular
Last seen: 7 years 29 weeks ago
Joined: 2011-02-06
Posts: 17
Points: 19

Hi Gary, There is absolutely

Hi Gary,

There is absolutely nothing more to show you - I've got nothing to hide, honest guv!

I have just started the site, and I have a header and menu. I'm just going through the site logically from top to footer, getting each section working before moving on to the next. What you see on this page is my whole site.

My style.css sheet now contains absolutely nothing - it's empty.

I wish there was more, so I could have some hope - it's the same in Chrome and Firefox ... I've attached a screenshot of the menu...

AttachmentSize
scc.jpg 29.71 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

That's 40px offset. My bad.

That's 40px offset. My bad. I forgot to add {padding: 0;} to the ul. There is still the curious issue of the list items not being inside the dotted border of the ul.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ratzz
ratzz's picture
Offline
Regular
Last seen: 7 years 29 weeks ago
Joined: 2011-02-06
Posts: 17
Points: 19

YEY! Thanks Gary ... over the

YEY!

Thanks Gary ... over the past couple of days, I have learn't a lot from you.

Very much appreciated.

Simon

drw285
drw285's picture
Offline
Regular
Orange County, CA
Last seen: 7 years 6 weeks ago
Orange County, CA
Timezone: GMT-7
Joined: 2010-01-21
Posts: 18
Points: 25

Centering is tricky but not mean

Gary:
I know you don't like global resets per our last conversation, but I'm a little confused as to padding and the parent elements. Are they inherited in this case, which screwed up the alignment, so he needed to specify the padding?

drw285
drw285's picture
Offline
Regular
Orange County, CA
Last seen: 7 years 6 weeks ago
Orange County, CA
Timezone: GMT-7
Joined: 2010-01-21
Posts: 18
Points: 25

Please check your spelling

Please check your spelling more carefully (Re: "learn't" a lot), as I almost misread your last comment to state "I haven't learned a lot."
Good luck otherwise!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

All elements have default

All elements have default values. My argument against the global reset is that there is no compelling reason to set those values to zero unless that's what you specifically want, and an awful lot of those resets are made on elements that don't have values to reset, or are just stupidly included (for example setting the vertical-align on sub and sup to baseline). Further, the argument is made that it's to ensure cross-browser equality, though there was only a single difference among browsers that I can recall off hand. That was the method used to indent lists. All browsers indent 40px. Prior to v.7 or 8, IE, and Opera of the same period used the margin property, while Safari/Chrome and Firefox used padding. All use padding now.

So, if you don't want too indent the list, you need to remove the padding.

You may see the current (to your version) Firefox default stylesheet by going to resource://gre-resources/html.css while in Firefox.

cheers,

gary

addendum: If you were referring to my earlier mention of overflow caused by explicit widths plus padding, &c., it was due to my having seen so many people recently setting width to 100%, then adding padding, margins, or borders which pushed the width to exceed 100%. Block elements automagically fill available width, making allowance for the above properties. ~g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ratzz
ratzz's picture
Offline
Regular
Last seen: 7 years 29 weeks ago
Joined: 2011-02-06
Posts: 17
Points: 19

drw285 wrote: Please check

drw285 wrote:

Please check your spelling more carefully (Re: "learn't" a lot), as I almost misread your last comment to state "I haven't learned a lot."
Good luck otherwise!

Erm ... thanks ... I think ...! Puzzled

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Hah!

I made the same reading error. I think it has to do with how we recognize words and phrases as we read quickly. Tongue

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

ratzz wrote:drw285

drw285 wrote:

Please check your spelling more carefully (Re: "learn't" a lot), as I almost misread your last comment to state "I haven't learned a lot."
Good luck otherwise!

I did too, which was weird Smile I had to go back and read it ... and I still read it as "haven't"! Tongue

Verschwindende wrote:
  • CSS doesn't make pies