That's great! I've made some changes and I think this design is almost
there.
But I can't seem to adjust the height of that top navigation bar. Does
anyone know why there seems to be so much extra height? I even tried
specifying 20 px in the #navigation, but that didn't budge it.
Thanks!
Chris Rahe
Executive Director of Marketing and Development
1020 High Road - P. O. Box 8
Bremen, IN 46506
Telephone 574.546.8011
Facsimile 574.546.4312
Email - [EMAIL PROTECTED]
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Stuart Foulstone
Sent: Sunday, April 01, 2007 4:42 AM
To: [email protected]
Subject: RE: [WSG] Need help with CSS breadcrumbs and navigation
Hi Chris,
This problem also seems to go away if you move the "mainNav" div to
immediately before the "content" div, e.g.
<div id="mainNav">
<img src="images/home_surgery.jpg" alt="Outpatient Surgery Photo"
width="150" />
</div>
<div id="content"> ...
So its looks like the problem lies with div positioning and/or floats.
It might be best to rethink your implementation of the content bit of the
website, from the beginning.
Yours,
Stuart
On Fri, March 30, 2007 1:54 pm, Chris Rahe wrote:
> Thanks so much Tee, and everyone else who offered suggestions. Some of the
> flaws that turned up were my misguided efforts to compensate for the weird
> behavior.
>
> The new breadcrumbs look much better, but I'm noticing an odd behavior in
> IE7. When I mouse over the breadcrumbs the footer suddenly shifts up and
> over the body text. Then shifts back down when I mouse over the navigation
> menu.
>
> What's up with that?
>
.
.
.
> Chris Rahe
> Executive Director of Marketing and Development
> 1020 High Road - P. O. Box 8
> Bremen, IN 46506
> Telephone 574.546.8011
> Facsimile 574.546.4312
> Email - [EMAIL PROTECTED]
>
>
>
>
> -----Original Message-----
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
> Behalf Of Tee G. Peng
> Sent: Friday, March 30, 2007 5:13 AM
> To: [email protected]
> Subject: Re: [WSG] Need help with CSS breadcrumbs and navigation
>
>
> On Mar 30, 2007, at 12:53 AM, Stuart Foulstone wrote:
>
>> Hi,
>>
>> I would suggest you use a line-height greater than 2pt in #breadcrumb.
>>
>> Stuart
>>
> Hi Chris,
>
> Stuart's suggestion is good, however I do think there are more
> underlying problem in your code that needs to fix.
>
> To begin with, you may want to add this rule in your CSS.
> * {margin:0; padding:0}
>
> Because headings and other html tags have their default top/bottom
> margins and paddings, by using an universal declaration, you are
> removing the default margins/paddings. You then adding your desired
> paddings/margins in the id and classes selectors directly.
>
> Be aware that the universal declaration is a double-edged sword,
> somewhere down the road when you are more comfortable doing CSS and
> code for more complex CSS layout, you may find it not so good but
> getting into your way all the time, but for now... I think it's good
> for your layout.
>
> Your breadcrumb declaration is a bit heavy and some are unnecessary:
> #breadcrumb {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 10pt;
> color: #FFFFFF;
> background-color: #666600;
> width: 100%;
> height: auto;
> position: relative;
> list-style: none;
> float: left;
> line-height: 2pt;
> }
> #breadcrumb ul {
> list-style-type: none;
> }
> #breadcrumb li {
> float: left;
> margin-right: 1em;
> padding-bottom: 10px;
> }
>
>
> I will slim it down to this:
>
> #breadcrumb {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 10pt;
> color: #FFFFFF;
> background-color: #666600;
> width: 100%;
> }
>
>
> You don't need the last 5 declarations in the #breadcrumb. Only
> declare 'list-style' in the 'ul' and 'ol', as for float, there is no
> point for it when you have only one column of content to go in a
> block. 'position' here will require 10 pages of A4 paper for me to
> explain, even if I bother to do so, you will end up more confusing,
> so I will skip it :) Declare line-height in the 'li' instead.
>
>
> #breadcrumb ul {
> list-style-type: none;
> margin:0; padding:0 /* if you don't want universal declaration, then
>
> you must zero out paddings and margins here */
>
> }
> #breadcrumb li {
> display: inline; /* here you can choose to use display: inline or
> float: left - personally I favor inline because the breadcrumb is
> just a run-in text to me */
> padding: 0 20px; /* note that when display:inline is used, the top
>
> and bottom padding won't work because now your breadcrumb is "inline"
> element. Our list dad Russ wrote an excellent article about it:
> http://maxdesign.com.au/presentation/inline */
> line-height: 30px /* 30px pleases my eyes, but it's fine with me if
> you want something higher or lower */
> }
>
> Also, the position of your drop-down navigation behaves erracticlly:
> in Safari. It shifted to the left, about 80px nears the menu before
> it, for example, I hover on 'Hospital Services", the zero position of
> the X axis of drop-down starst somewhere between Home and Emergency;
> in Firefox, it starts from the 'p' word in 'HosPital'.
>
>
> Another thing, you may like to pick up CSS shorthand to slim down
> your style sheet, the obvious example is you can use this in the
> #breadcrumb
>
> #breadcrumb {
> font: 10pt Arial, Helvetica, sans-serif;
> color: #FFFFFF;
> background-color: #666600;
> width: 100%;
> }
>
> Hope this helps a bit
>
> tee
>
>
>
> *******************************************************************
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> *******************************************************************
>
>
>
> *******************************************************************
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> *******************************************************************
>
>
--
Stuart Foulstone.
http://www.bigeasyweb.co.uk
BigEasy Web Design
69 Flockton Court
Rockingham Street
Sheffield
S1 4EB
Tel. 07751 413451
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
