css assistance required..

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I'm developing a test site as a proposal to rewrite a web site for a
local community organization..

their original site is here:


my proposal site is here:


I've been trying to deal with the lack of transparency of pngs in IE and
I finally gave up and put a matching background on the logo file..

however, I have one thing I can't sort in my css..

I've been reading lots of css sites and using bit and pieces from here
and there..  I'm using one of the posted templates for a flowing
multi-column layout, and some material to help even out the differences
between browsers..

I have a left nav coloum..  a div with an id tag...
the column contains a logo image and then a list for my navigation menu..

I want the list to be left aligned.. and for the image to be centred
above it..  do I have to put the image in another child div to make that
happen..  I cant' figure out the best way to do this??

here is my css so far..

    v2.1, by Faruk Ates - www.kurafire.net
    Addendum by Robert Nyman - www.robertnyman.com */

/* Neutralize styling:
    Elements we want to clean out entirely: */
html, body, form, fieldset
         margin: 0;
         padding: 0;
         font: 100% Verdana, Arial, Helvetica, sans-serif;

/* Neutralize styling:
    Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address
         margin: 1em 0;
         padding: 0;

/* Apply left margin:
    Only to the few elements that need it: */
li, dd, blockquote
         margin-left: 1em;

/* Miscellaneous conveniences: */
form label
         cursor: pointer;
    border: none;

input, select, textarea
         font-size: 100%;

/* flowing multi-column layout */
    width: 96%;
    margin: 10px auto;
    background-color: #fff8d3;
    color: #000;
    border: 1px solid;
    border-color: #903;
    line-height: 130%;

    padding: .5em;
    background-color: #903;
    border-bottom: 1px solid;
    border-color: #903;
    text-align: center;
    font: script;

#top h1
    background-color: #903;
    color: #fff;

    float: left;
    width: 190px;
    margin: 0;

    margin-left: 200px;
    border-left: 1px solid;
    border-color: #903;
    padding: 1em;
    max-width: 48em;

    clear: both;
    margin: 0;
    padding: .5em;
    text-align: centre;
    color: #fff;
    background-color: #903;
    border-top: 1px solid;
    border-color: #903;


#content h2 { margin: 0 0 .5em 0; }

     list-style-type: none;

a:link {
        color: #000;     /*black*/
        background-color: #fff8d3;
        font-weight: bold;

a:visited {
           color: #787878;  /*Gray*/
           background-color: #fff8d3;

a:hover  {
          color: #9E004a;
          background-color: #fff8d3;
          hover: #903;

Re: css assistance required..

Helen Martin wrote:
Quoted text here. Click to load it

(but redirects to http://2006.ncmusic.com /)

Quoted text here. Click to load it

What a complete difference! Quite an improvement, but also a stark
change of image, and "feel".

Quoted text here. Click to load it

Before we get going, may I point out that it's on the left *now*, but
you *could* want it elsewhere in the future. Better to name it something
like "nav" than "leftnav". Part of making use of the power of CSS. But
let's go on.

Quoted text here. Click to load it

Since you gave us the URL, Helen (which was the right thing to do), we
don't need you to post all of the CSS. We can see it just as well, in
fact, better, in our chosen browsers.

And since you're asking about CSS you can post to the newsgroup
comp.infosystems.www.authoring.stylesheets rather than a.w.w. But you're
here now, so let's see what we can learn.

As I think you've already understood, you could add an enveloping <div
align="center"> </div> to the logo img, just like you already have on
newlooknet3.jpg. Finished, basta, end-of-post, ta-da!

But since you asked, and since you especially asked about CSS, let's
look at your code. You aren't really using CSS to its full advantage.
You're also over-specifying things.

Look for example at the code snippet
<div id="content">
  <div align="center">
   <img src="newlooknet3.jpg" alt="Building Concept graphic" border="0"
  <p>The Nanaimo Conservatory of Music ...etc.

Here's a div to contain (well, really, only to center) the img, and a p
to hold a paragraph (one of several) all inside another div. Watch what
happens when you move the align="center" from the inner div to the outer
div. The image stays centered, and the inner div becomes superfluous.
Delete the inner div. Meanwhile, the text has become centered (depending
on the browser, possibly), which is not what you want, but you can fix
that in several ways, e.g. by specifying text-align:left on the p rule
in your CSS.

But perhaps better yet, if you can define the width of the image, you
can let CSS center the img, and not use align="center" at all, so you
don't have to hack in the text-align:left, which ought to be the default

Try this changed HTML:

<div id="content">
  <img id="building" src="newlooknet3.jpg" alt="Building Concept
graphic" width=368" height="118">
  <p>The Nanaimo Conservatory of Music ...etc.

And in the CSS:
#building { display:block; width:368px; height:118px;
             margin:5px auto;}

I have not tested this thoroughly, and not at all on IE, but try it
yourself and see if it works for you. In the above, I've asked for the
img to be display:block (it's usually inline) so that the width is
recognized; I've specified the width so that the margins can be
calculated; and the margins are auto so that they come out equal on the
left and right (same technique as already in your #container).

You can likewise do:
<img id="logo" src="newlogobeigesm.png" alt="NCM Logo">   and
#logo { display:block; width:121px; height:90px; margin:5px auto; }
and while you're in there, throw out the <br/>, because you can adjust
space above the logo with its top margin.

Correct "text-align: centre" to "text-align: center" in the footer rule,
and you can delete the inner div in the footer's HTML. In fact, add the
id to the footer's <h4>, as in <h4 id="footer">, and you can delete the
outer <div> too, tweaking the padding for #footer as you wish (.5em to
1em, maybe?). I'm not sure you need a border on #footer either, BTW.

The above approach ought to likewise work on your header (#top). Avoid
adding extra, semantically meaningless elements when you don't need to.
You've already got an <h1> at the top and an <h4> at the bottom, so just
style them. Less work, less confusion, cleaner code.

Your code is HTML, not XHTML, so search and replace all " />" with ">".

In your CSS you repeatedly combine two border properties into
border-bottom, but then you leave border-color separate. Put them all
together as border-bottom:1px solid #903;.

I also recommend these mods:
#leftnav  {width: 14em;       /* was 190px*/   }

#content  {margin-left: 15em;  /* was 200px */  }

This lets text-size vary in old IE, and when it does vary (in IE or
otherwise), the texts don't overflow the areas you've given them.

And finally, be aware of the validators, to help catch things like
non-USian spellings of center and the non-existent hover: #903;
property. See http://validator.w3.org/ for checking HTML and
http://jigsaw.w3.org/css-validator/ for the CSS.

I hope this is helpful to you Helen, although I've written so much more
than you expected you probably think I'm beating on you. May my words be
useful. GL.

Re: css assistance required..

Quoted text here. Click to load it
Before you even think about your CSS, you need to  make sure that your
HTML validates. Fix the errors here:
http://validator.w3.org/check?uri=http%3A%2F%2Fmembers.shaw.ca%2Fsharethemusic%2Findex.htm&amp ;ss=1&amp;outline=1
You should get rid of all the deprecated mark-up in your HTML.
Regards Chad. http://freewebdesign.cjb.cc

Site Timeline