How to Centre these tables better

For another topic, if interested.
It appears that the default font in my browser is a tad larger/wider than the assigned/allowed fixed width so the last item wraps.

That’s close to what I see. There must be a way to have the container get taller to hold the wrap, or wider so it doesn’t need to wrap, no?

This page is one of my modified ones http://www.c5d.co.uk/18511c.php

Does that one wrap? It doesn’t on my screen

Yes, it wraps in Firefox like the screenshot that I posted.

In the body element, you have used double-quote marks on two font-family names, Times and serif, unnecessarily (or failed to open and close them properly) so they are not taking affect in all browsers. Can you see the difference in these two lines? The first line uses the quote marks improperly.

font-family: "New Century Schoolbook","Times, serif";
font-family: "New Century Schoolbook", Times, serif;

I could get it to look like this by removing the height: 45px from #navcontainer

I thought I might like the look better if I could get it to go wider and not wrap to a new line unless it needed to, but could not find a way to. (CSS is not one of my strengths)

OK, I have adjusted that font issue

This is how it looks on my screen

Yes, but you probably don’t have your browsers minimum font size set to 18.

That would be a good idea for Antony to heed. I truly believe that many readers will be Zooming the text larger so they can read the small characters, or will have their browser set to a larger than default font size because of vision problems. When they do, the menu will wrap again. The fixed height prevents the container from growing taller. Better still, would be to prevent the menu from wrapping, but that’s for another topic, too.

1 Like

Antony,

I have some modifications to your CSS for you to try on the css for the page in the link in post #1, if you have time. These mods should allow the menu to adapt to larger font-sizes and extend the menu to prevent it from wrapping under normal conditions although it can wrap if the viewport is small enough or the font-size becomes large enough. It will also center the data table, if possible.

These changes can be added as temporary changes at the end of the stylesheets and if you don’t like them, just delete them. If for some reason they don’t work for you, I’d be grateful if you could leave them in place long enough for us to see what went wrong.

Thanks

ADD the first rule to newcensusstyle.css

#header img {   /* "c5dbackground.png"  alt="c5dlogo" */
    display: block;
    margin: 0 auto;
}

 
newcensusstyle.css (line 4)

div.container {
    display: table;  /* ADD */
    margin: 0 auto;
/*    width: 950px;  /* DELETE, comment out, or change to {width:auto;} */
}

 
newcensusstyle.css (line 15)

div#navcontainer {
    background: #000 none repeat scroll 0 0;
    border-radius: 5px;
    display: block;
/*    height: 45px;  /* DELETE, comment out, or change to {height:auto;} */
}

 
newcensusstyle.css (line 926)

.table1939 {
/*    width: 100%;  /* DELETE, comment out, or change to {width:auto;} */
}

 
c5ddropdownmenu.css (line 101)

ul#nav {
    clear: both;
    display: block;
    font-size: 12px;
    margin: 0 auto;
    overflow: hidden;
/*    width: 950px;  /* DELETE, comment out, or change to {width:auto;} */
}

 
newcensusstyle.css (line 28) (if desired)

.copy {
    width:950px;
    text-align:center;
    padding:.5em 0;
    margin:0 auto;
}

 
newcensusstyle.css (line 33) (if desired)

.holder {
    width:950px;
    text-align:center;
    padding-top:80px;
    margin:0 auto;
}

 
It looks like you still need to fix the quote marks in the font-family, too.

1 Like

Ok; I’ll try and do this p.m.

newcensusstyle.css is only a test in any event, so it won’t matter too much.

That’s why the fonts hadn’t been adjusted

1 Like

Thank you, Antony.

I have done that now

Sir Antony, The important part of this experiment is your feedback! What do you think about the way the page behaves at different viewport widths and when the font size is larger than normal? The menu stretches as the text size increases; the text does not wrap as long as the viewport is wider than the menu. It will wrap if it must and the black background grows taller with the menu as @Mittineague recommended. The dropdown menus are controlled by JS. They do not recognize an increase in font size until the page is reloaded, then they are the proper size. Does the overall page work for you or not? and in what ways. (pro and con). Slice and dice with gusto.

Thanks for that. I shall play around as you suggest. I am also now trying to merge all my CSS sheets into one.

Which is a bit of a task.

I used Code Beautifier to amalgamate four sheets and on the whole it has worked fine. The only thing I’m not took keen on is that when the table is quite wide, the image above the drop down menu remains at the left hand side. Is is possible for the image to remain central The first page below looks odd. The second just about OK. I know it’s to do with the width of the both bottom table but can the image be “fixed”

See http://www.c5d.co.uk/description1911sbed16.php
http://www.c5d.co.uk/description1911ed6.php

Yes. Try this:

#header img {
    display:block;
    margin:0 auto;
}

(that is the first rule in post #30)

Great; that works fine thanks

It doesn’t sound like you have played around with your test page with my changes. Let me urge you to take 10 minutes NOW to play around with your test page. It behaves differently.

How many of your pages have wide content, wider than 950px?

How many of your pages have content that should be 950px or less wide?

1 Like

That’s beacuse it’s 8 30 am over here and I’m just off to work!

It gets in the way of everything

2 Likes

Can you respond to post #38 please?