14 replies [Last post]
canadianpixie
Offline
Regular
Last seen: 13 years 4 weeks ago
Joined: 2008-08-27
Posts: 16
Points: 0

Hi all,

First of all the sample page is here:

http://www.catchthisdesign.ca/PROOFING/CSI/csi/blank.htm

The challenge of the day is that I would like to vertically center the main nav items and am not having much luck. Having looked around, I see that the method that is generally recommended involves setting the margin-top to half the height of the container, thereby giving a vertical center.

In this case though, that's not going to work as that is going to push the dividing images down also.

Anyone able to give me a heads up on how best to accomplish the effect I'm after?

AND while I'm at it, the other thing I've been attempting without much luck us to have the dividing blue line where it is but not to fully extend to the top and bottom of the block it's in. I'd like it to stop about 15 px shy on both ends. Is this possible?

Thanks in advance!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 12 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

List

pixie, why dont you make your navigation ares into unordered lists? You will have greater control over these areas as lists.

instead of using images that are 1px in width for borders, why not use css borders? I think you need to rethink how you have your XHTML constructed.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The first step is to

The first step is to refactor the menu as well structured, semantic html. A menu is, by definition, a list. Those divider images belong in the background. If you're worried about accessibility, correctly marking up the menu as a list will take care of that.

Then, see vertical centering of inline elements

A start:

<body>
 
<!--OPENING DIV FOR PAGE CONTAINER--><div id="page-container">
<span style="color:red">the comment is redundant</span>
<div id="header"></div>
<span style="color:red">an empty div is always a Bad ThingĀ®.  Put the bg image on #page-container and give that div some top padding</span>
 
<ul id="main-nav">
  <li><a href="index.php" class="first-child">HOME</a></li>
  <li><a href="about_csi.php" class="mnnav">ABOUT CSI</a></li>
  <li><a href="patients.php">PATIENTS</a></li>
  <li><a href="health_professionals.php">HEALTH PROFSSIONALS</a></li>
  <li><a href="medical_legal_insurance">MEDICAL, LEGAL &amp; INSURANCE</a></li>
  <li><a href="executive_industry_hr.php">EXECUTIVE, INDUSTRY &amp; HR</a></li>
  <li><a href="contact.php">CONTACT</a></li>
</ul>
 
...
 
</div> 
<!--CLOSING DIV FOR PAGE CONTAINER-->
<span style="color:red">this comment is OK because it clarifies</span>

Modified to support IE:

<ul id="main-nav">
  <li><a href="index.php" class="first-child">HOME</a>
    <!--[if lte ie 7]><b></b><![endif--></li>
  <li><a href="about_csi.php" class="mnnav">ABOUT CSI</a>
    <!--[if lte ie 7]><b></b><![endif--></li>
  <li><a href="patients.php">PATIENTS</a>
    <!--[if lte ie 7]><b></b><![endif--></li>
  <li><a href="health_professionals.php">HEALTH PROFSSIONALS</a>
    <!--[if lte ie 7]><b></b><![endif--></li>
  <li><a href="medical_legal_insurance">MEDICAL, LEGAL &amp; INSURANCE</a>
    <!--[if lte ie 7]><b></b><![endif--></li>
  <li><a href="executive_industry_hr.php">EXECUTIVE, INDUSTRY &amp; HR</a>
    <!--[if lte ie 7]><b></b><![endif--></li>
  <li><a href="contact.php">CONTACT</a>
    <!--[if lte ie 7]><b></b><![endif--></li>
</ul>

The css:

<style type="text/css">
  body {
    font: 87.5% sans-serif;
    }
 
 ul#main-nav {
    border: 1px solid black; /*added for clarity*/
    border-collapse: collapse;
    display: table;
    height: 61px;
    list-style: none;
    margin: 1.25em 0 0;
    padding: 0;
    text-align: center;
    width: 861px;
    }
 
  #main-nav li {
    background: url(blank-divider.png)left center no-repeat;
    display: table-cell;
    padding: 0 2px 0 8px;
    text-align: center;
    vertical-align: middle;
    }
 
  #main-nav li.first-child {
    background-image: none;
    padding-left: 2px;
    }
 
  #main-nav a {
    text-decoration: none;
    }
</style>
 
<!--[if lte ie 7]>
<style type="text/css">
 
#main-nav li {
  background-image: url(blank-divider.png);
  background-repeat: no-repeat;
  background-position: left center;
  float: left;
  height: 61px;
  width: 112px;
  }
 
#main-nav li a {
  display: inline-block;
  vertical-align: middle;
  }
 
#main-nav b {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  }
</style>
 
<![endif]-->

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.

canadianpixie
Offline
Regular
Last seen: 13 years 4 weeks ago
Joined: 2008-08-27
Posts: 16
Points: 0

Thanks...

Hey thanks very much - of course I should do the nav with a list! That was dumb of me!

I still have the problem of the hanging border on the right side that shouldn't be there. Can that be gotten rid of?

AND the other biggie that's gumming it up...I'd like to break a few of them onto two and three lines.

Example:
Health
Professionals

OR

Medical,
Legal &
Insurance

Is this possible?

OH WAIT...there's more to read on this topic from Gary! Maybe he's covered it there...going to find out.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Modified markup to force

Modified markup to force multiple lines:

  <ul id="main-nav">
    <li class="first-child"><a href="index.php">HOME</a> 
    <!--[if lte ie 7]><b></b><![endif--></li>
 
    <li><a href="about_csi.php"
       class="mnnav">ABOUT CSI</a> 
       <!--[if lte ie 7]><b></b><![endif--></li>
 
    <li><a href="patients.php">PATIENTS</a> 
    <!--[if lte ie 7]><b></b><![endif--></li>
 
    <li><a href="health_professionals.php">HEALTH
    <br />
    PROFSSIONALS</a> <!--[if lte ie 7]><b></b><![endif--></li>
 
    <li><a href="medical_legal_insurance">MEDICAL,
    <br />
    LEGAL &amp;
    <br />
    INSURANCE</a> <!--[if lte ie 7]><b></b><![endif--></li>
 
    <li><a href="executive_industry_hr.php">EXECUTIVE,
    <br />
    INDUSTRY &amp; HR</a> <!--[if lte ie 7]><b></b><![endif--></li>
 
    <li><a href="contact.php">CONTACT</a> 
    <!--[if lte ie 7]><b></b><![endif--></li>
  </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.

canadianpixie
Offline
Regular
Last seen: 13 years 4 weeks ago
Joined: 2008-08-27
Posts: 16
Points: 0

Now that was helpful!

Hi Gary,
Thanks so much for taking the time to give me such a detailed reply - that's awesome and so helpful!

Unfortunately somewhere along the line I've lost my divider image from view and can't get the nav items to stay broken into shorter segments so that the longer nav items view in two and three lines rather spread so far across the nav horizontally...so I'm still working on that but with a little modification to what you gave me, this is starting to look right. Here:

http://www.catchthisdesign.ca/PROOFING/CSI/csi/garysnavblank.htm

That's pretty much where I'll be working on it until I win or it melts my brain. Smile

Thanks again!!!

canadianpixie
Offline
Regular
Last seen: 13 years 4 weeks ago
Joined: 2008-08-27
Posts: 16
Points: 0

Ahhhh, I see...and that is

Ahhhh, I see...and that is why the display as table is so helpful I'm guessing because when I was working with my previous mess of it in a straight div, the break tag wouldn't work the way I was looking for it to. Smile

Gary, I am SO appreciative of your assistance! This is a great learning experience for me. Thank you for taking the time!

canadianpixie
Offline
Regular
Last seen: 13 years 4 weeks ago
Joined: 2008-08-27
Posts: 16
Points: 0

Ahhhh, I see...and that is

Smile

canadianpixie
Offline
Regular
Last seen: 13 years 4 weeks ago
Joined: 2008-08-27
Posts: 16
Points: 0

Back at the horizontal nav

Hi Gary, I'm hoping you can give me a little further assistance.

So I've been working with the nav code you posted to me, and have just been working fitting it into the styling of the site it's in. I've run up against a few problems that I have made myself half bald over, for certain.

The page is here:
http://www.catchthisdesign.ca/PROOFING/CSI/csi/garysnavblank.htm

with css here:

http://www.catchthisdesign.ca/PROOFING/CSI/csi/css/navs.css
http://www.catchthisdesign.ca/PROOFING/CSI/csi/css/garysnav.css

I have much to make sense of where it concerns manipulating lists with css...especially for navs.

Basically the problem I have with this is that the dividers between the nav items have vaporized and my links aren't quite at the vertical middle. I can't see this for all my effort, but then my brain is starting to revolt against the list at the moment. Otherwise it's so close to looking the way it's supposed to. Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Why did you change

Why did you change this?

#main-nav li {    /*garysnav.css (line 31)*/
background:transparent url(images/nav_divider.png) no-repeat scroll left center;
display:table-cell;
padding:0 2px 0 8px;
text-align:center;
<span style="color:red">vertical-align:35px;</span>
}
Vertical-align should be "middle". See css tables.

Check your path on the divider image. I don't see it where you've linked.

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.

canadianpixie
Offline
Regular
Last seen: 13 years 4 weeks ago
Joined: 2008-08-27
Posts: 16
Points: 0

Middle not aligning to middle...

Hi Gary,

Thank you for your reply.

I changed it because it's not aligning to middle. I've put it back to middle and as you will see it's still not right. I really don't know what more to do..

I'm beginning to hate this particular nav with a passion and it's stopping up the whole darn process.

So close, yet so far...

There is something else you may also be able to enlighten me with regard to. Its the dividing blue line in the middle...really that is not supposed to extend the full height. It should be about 90% of the height but I am no able to make that happen either. Right now its set with a value of 500px and of course when I make any change to that it messes up the entire display. This too has me yanking my hair out by the roots and I would be hugely appreciative if you could point me in the right direction with regard to this as well.

Sorry to be such a bloody harpy but I'm on the verge of heaving the whole works off my desk and going back to bed for the day. Unfortunately it'll just be there tomorrow to mock me some more.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Remove the top margin from

Remove the top margin from the ul.

should be float: left. let the two divs inside be natural.

Using a separate div to supply the vertical rule is table thinking. Put a right border on sidenavcontainer, and add some bottom padding to the main container. I'm not sure that's what you want, but it'll be closer to good practice. We can move on from there.

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.

canadianpixie
Offline
Regular
Last seen: 13 years 4 weeks ago
Joined: 2008-08-27
Posts: 16
Points: 0

Getting closer...

Thanks again - I'd be done for without mods like you!

So I've done as you suggested and all is coming together and getting closer step by step. Mind you the border-right on my sidenavcontainer isn't showing up at the moment.

Positioning is looking good though...and you are right about the vertical rule in the separate div being a throw back to my table based thinking. Which I do need to banish!

So I guess the only thing I'm now missing is that vertical rule.

In the meantime I'm going to go into the code and get the side navs into the right list format. Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

See my html & css workshop

See my html & css workshop page for my "vertical rule".

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.

canadianpixie
Offline
Regular
Last seen: 13 years 4 weeks ago
Joined: 2008-08-27
Posts: 16
Points: 0

Thank you for that resource.

Thank you for that resource. I'll check it out. In the meantime it looks like I need to go back to the main nav since it's not even close to displaying correctly in IE and I really can't move on without that.