[css-d] navigation bar

[karuna sagar k]

Hi list,

I am facing problem in creating a page with a
navigation bar -

MARKUP:


 
  some content here
 


STYLE:

.nav_bar
{
margin: 1%;
width: 15%;
background-color: grey;
height: 98%; // i tried 98% thinking 1%+1% margin
(top and bottom) accounted (also, is there a way to
have comments in CSS?)
}

.main_container
{
border: 1px solid black;
width: 100%;
height: 100%
}

Now, when this is rendered, the nav_bar shoots-out of
the containing div. So, what I noticed here is that
the properties "width" and "height" refer to the
content box of the element and calculated as x% of
width of parent element (is that right?).

So, is there a way for me to specify the values for
the above properties relatively (as percent) and keep
the nav_bar inside the containing div? - i.e. I want
the nav_bar to occupy whole left portion of the
screen, with a white space between the border of the
containing div.

Thanks for the replies,
Karuna


  Try the revolutionary next-gen Yahoo! Mail. Go to 
http://mrd.mail.yahoo.com/dc/landing
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation bar

[Alan K Baker]

Hi all.

I'm in the process of converting an old frames/tables/JavaScript site to all 
CSS. It can be found at: http://www.webbwize.co.uk/Test_Area/TEP/index.html

I am looking for a slightly more 'elegant' way of vertically centering text 
depending on whether there are one or two lines.

I've included the appropriate part of the stylesheet and the HTML below, to 
save you wading through the dreaded frames maze. At present my text is centered 
by [ .oneline a ] and [ .twolines a ] (below).

I've also just noticed a problem in all browsers except IE7. What I want to 
happen is for the currently selected item to show a different background and to 
change text color, as in [ #navbar a:active ] (below) and for this state to 
remain until another selection is made. IE7 does what I want, but other 
browsers are inconsistent. Some will show the correct state whilst the mouse 
button is down and it's possible in at least one other to select an item and 
drag the pointer away from the item whilst holding the button down and the 
active state will remain. It's late at night and I've probably missed something 
obvious!!

Help would be much appreciated.

Regards, 
 
Alan.
 
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
www.webbwize.co.uk
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Flatulus Antiquitus



/* Main navigation menu */

/* Define vertical outer box with borders/bevels */
#navbar {
background-image:url(../images/logos/logo.gif);
background-repeat:no-repeat;
background-position:top;
position:absolute;
top:0;
left:0;
width:125px;
height:auto;
margin:0;
padding:0;
border-top:5px solid #dcf6ff;
border-right:5px solid #999;
border-bottom:5px solid #999;
border-left:5px solid #dcf6ff;
}

/* Limit list size and set margin to clear navbar logo */
#navbar ul {
font:9px Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
list-style-type:none;
margin:68px 0 0 0;
padding:0;
}

/* Single line of text */
.oneline a {
height:14px;
padding:8px 0 8px 3px;
}

/* Two lines of text */
.twolines a {
height:26px;
padding:2px 0 2px 3px;
}

/* Style & set background for active list items */
#navbar a {
background-image:url(../images/buttons/navstd1x30.gif);
background-repeat:repeat;
text-decoration:none;
text-transform:uppercase; /*All capitals for consistency */
color:black;
display:block;
border-bottom:5px solid #cce6ff;
}

/* Set new background position for rollover */
#navbar a:hover {
background-image:url(../images/buttons/navhover1x30.gif);
background-repeat:repeat;
}

/* Set background for current item */
#navbar a:active {
background-image:url(../images/buttons/navactive1x30.gif);
background-repeat:repeat;
color:white;
}




 
  
  HOME PAGE
  THOSE 
VARIETY DAYS
  LIBERACELIVE FROM LAS VEGAS
  MAGIC AND THEMUSICALS
  ERIC 
DELANEYSWING CRAZY
  PALLADIUM 
MEMORIES
  JIMMY 
CRICKET'SMATINEE MADNESS
  MUSIC MUSIC 
MUSIC
  PANTOMIME
  ABRACADABRA!
  PROFESSOR 
NUTTY
  SUMMER 
SHOWS
  THE MAGICOF CHRISTMAS
  SHOW DATES
  ABOUT US
  CONTACT 
DETAILS
  
 



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation bar quirks

[Jeff Cortez]

Hi all,

I've tested this page on most browsers and they all seem to have certain
quirks.  I can live with most of them, except for IE 5.5/Mac which stacks
the navigation bar vertically instead of horizontally.  Also, on Safari and
IE/Win 6, the horizontal menu is about 1px short, which you can see when you
rollover the items. I tried to emulate the style from McCombs School of
Business at Univ. of Texas (i.e.
http://www.mccombs.utexas.edu/resources/templates/howto/instructions.asp)

Any suggestions, help would be appreciated...

HTML:
http://jeffcortez.com/test/site.html

CSS:
http://jeffcortez.com/test/gen.css
http://jeffcortez.com/test/inc.css

The pages validate for XHTML and CSS.  I pulled the HTML from my development
server, so some of the images and backgrounds may not show up since the
links are all absolute.

Thanks in advance.


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation bar

[Bill Brown]

[snip]
> I am looking for a slightly more 'elegant' way of vertically
> centering text depending on whether there are one or two lines.
[snip]
> I've also just noticed a problem in all browsers except IE7. What I
> want to happen is for the currently selected item to show a different
> background and to change text color, as in [ #navbar a:active ]
> (below) and for this state to remain until another selection is made.
> IE7 does what I want, but other browsers are inconsistent. Some will
> show the correct state whilst the mouse button is down and it's
> possible in at least one other to select an item and drag the pointer
> away from the item whilst holding the button down and the active
> state will remain. It's late at night and I've probably missed
> something obvious!!
[snip]
> /* Set background for current item */ #navbar a:active { 
> background-image:url(../images/buttons/navactive1x30.gif); 
> background-repeat:repeat; color:white; }
[snip]

Hi Alan.

I think other browsers are either shifting the focus or not recognizing 
the :active state on your link. Try adding the :focus state into that 
rule as well, like this:

/* Set background for current item */
#navbar a:active,
#navbar a:focus{
   background-image:  url(../images/buttons/navactive1x30.gif);
   background-repeat: repeat;
   color: white;}

It's difficult to fully test that on my local machine because of the 
frames (as you mentioned), but I think that should at least get you 
closer to a solution.

In terms of vertical centering, one solution is just to use padding and 
not rely on pre-determined heights for the links. This also creates an 
accessibility issue (overlapping the text when people [like me] have the 
font size set too high for your site's setup).

If you create a background image which fades to a specific color, you 
can just set the background of the link to that color, center the fade 
gif/png/jpg and let any overflow in odd situations show up as a solid color.

Here's a basic ascii'd example:

solid white link background peaking through
white->blue->white vertical fade [one or two lines here]
solid white link background peaking through again

Throw a little padding in there, use a "best guess" measurement and 
it'll look great on 80% of browsers, be accessible on all browsers, and 
still look decent on the remaining 20% browsers with configurations 
which differ from your local system.

Let me know how it all works out for ya.

Bill Brown
TheHolierGrail.com
MacNimble.com


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation bar

[Alan Gresley]

Alan K Baker wrote:
> Hi all.
> 
> I'm in the process of converting an old frames/tables/JavaScript site to all 
> CSS.


There many billions of pages needing the same treatment. Please take a 
look at this screen shot.



The forth line down run 5 times a wide as my screen. For me to reply to 
you I first have to edit you message but not the simple way. My email 
client will wrap my replies at 72 characters length automatically. 
Discussion about Email clients are off-topic on this list but since your 
messages are very hard to reply to I have to mentioned them. Here is a 
good one to use.




> It can be found at: http://www.webbwize.co.uk/Test_Area/TEP/index.html
> 
> I am looking for a slightly more 'elegant' way of vertically centering text


Is this the fixed navigation where the lower parts are hidden outside 
the viewpoint. My screen is on 800px high. Is this navigation within frames?


> [snip] to save you wading through the dreaded frames maze.


Remove the frames as it make it near impossible for anyone to help.


> At present my text is centered by [ .oneline a ] and [ .twolines a ].


OK, where do you mention that .oneline and .towlines is part of the 
navigation. Some on this list are good detectives since. We have to use 
our web developers toolbar [1] "outline current element" feature to 
locate these classes.


> I've also just noticed a problem in all browsers except IE7.


That make sense. :-)


 > I've probably missed something obvious!!


Yes. When I check you source code all I see is.








If you are reading this text, your browser is frames challenged.
More up to date browsers are readily available.



The good browsers are not framed challenged. They just don't use MS 
propriety garbage code.


> Help would be much appreciated.
> 
> Regards, 
>  
> Alan.
>  
> www.theatreorgans.co.uk


So you have to make it easy. :-)

Sometimes it is easier just to have un-style text to begin with.


[1] 


Alan

http://css-class.com/


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation bar

[Andrew Doades]

Hello all...

I could not help picking up o a bit about IE7, I recently attempted a 
sidebar for my website, and all now works (to some extent) but for IE7.

I was just wondering what is with IE7, IE6 used to be fine, it always 
worked, same with FF but why is 7 casing so many problems?

Andrew

Alan Gresley wrote:
> Alan K Baker wrote:
>   
>> Hi all.
>>
>> I'm in the process of converting an old frames/tables/JavaScript site to all 
>> CSS.
>> 
>
>
> There many billions of pages needing the same treatment. Please take a 
> look at this screen shot.
>
> 
>
> The forth line down run 5 times a wide as my screen. For me to reply to 
> you I first have to edit you message but not the simple way. My email 
> client will wrap my replies at 72 characters length automatically. 
> Discussion about Email clients are off-topic on this list but since your 
> messages are very hard to reply to I have to mentioned them. Here is a 
> good one to use.
>
> 
>
>
>   
>> It can be found at: http://www.webbwize.co.uk/Test_Area/TEP/index.html
>>
>> I am looking for a slightly more 'elegant' way of vertically centering text
>> 
>
>
> Is this the fixed navigation where the lower parts are hidden outside 
> the viewpoint. My screen is on 800px high. Is this navigation within frames?
>
>
>   
>> [snip] to save you wading through the dreaded frames maze.
>> 
>
>
> Remove the frames as it make it near impossible for anyone to help.
>
>
>   
>> At present my text is centered by [ .oneline a ] and [ .twolines a ].
>> 
>
>
> OK, where do you mention that .oneline and .towlines is part of the 
> navigation. Some on this list are good detectives since. We have to use 
> our web developers toolbar [1] "outline current element" feature to 
> locate these classes.
>
>
>   
>> I've also just noticed a problem in all browsers except IE7.
>> 
>
>
> That make sense. :-)
>
>
>  > I've probably missed something obvious!!
>
>
> Yes. When I check you source code all I see is.
>
> 
>   
>   
> 
> 
>
> 
> If you are reading this text, your browser is frames challenged.
> More up to date browsers are readily available.
> 
>
>
> The good browsers are not framed challenged. They just don't use MS 
> propriety garbage code.
>
>
>   
>> Help would be much appreciated.
>>
>> Regards, 
>>  
>> Alan.
>>  
>> www.theatreorgans.co.uk
>> 
>
>
> So you have to make it easy. :-)
>
> Sometimes it is easier just to have un-style text to begin with.
>
>
> [1] 
>
>
> Alan
>
> http://css-class.com/
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation bar

[Alan K Baker]

Andrew.

In the case of my [ :active ] problem, I believe that none of the browsers is 
actually at fault, and IE7 does actually do what I want and behaves in a way 
I'd logically expect, which is probably quite unusual for IE7. :-)
It's simply a minor discrepancy in implementation between browsers - no big 
deal.

I have far more problems with IE6 than all the other browsers! IE7 is a pussy 
cat, compared to IE6. 

In the case of my vertical spacing on text, this is just my wish to improve my 
code. It's not a browser fault at all.

Regards, 
 
Alan.
 
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus


  - Original Message - 
  From: Andrew Doades 
  To: Alan Gresley 
  Cc: Alan K Baker ; css-d 
  Sent: Saturday, April 12, 2008 11:48 AM
  Subject: Re: [css-d] Navigation bar


  Hello all...

  I could not help picking up on a bit about IE7, I recently attempted a 
  sidebar for my website, and all now works (to some extent) but for IE7.

  I was just wondering what is with IE7, IE6 used to be fine, it always 
  worked, same with FF but why is 7 casing so many problems?

  Andrew

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation bar

[Andrew Doades]

I do see what you are saying, but since I went to IE7 I have had no end 
of problem why trying to develop, also a pain was moving to IE7 from IE6 
when developing :)

But why do IE and FF seem to have a constant fighting battle for developers?
This is what I can't get, I can develop something that looks grate in FF 
but  in IE, or vice versa.

But some good points in your email :)

Andrew

Alan K Baker wrote:
> Andrew.
>
> In the case of my [ :active ] problem, I believe that none of the browsers is 
> actually at fault, and IE7 does actually do what I want and behaves in a way 
> I'd logically expect, which is probably quite unusual for IE7. :-)
> It's simply a minor discrepancy in implementation between browsers - no big 
> deal.
>
> I have far more problems with IE6 than all the other browsers! IE7 is a pussy 
> cat, compared to IE6. 
>
> In the case of my vertical spacing on text, this is just my wish to improve 
> my code. It's not a browser fault at all.
>
> Regards, 
>  
> Alan.
>  
> www.theatreorgans.co.uk
> www.virtualtheatreorgans.com
> Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
> Shopsmith 520 + bits
> Flatulus Antiquitus
>
>
>   - Original Message - 
>   From: Andrew Doades 
>   To: Alan Gresley 
>   Cc: Alan K Baker ; css-d 
>   Sent: Saturday, April 12, 2008 11:48 AM
>   Subject: Re: [css-d] Navigation bar
>
>
>   Hello all...
>
>   I could not help picking up on a bit about IE7, I recently attempted a 
>   sidebar for my website, and all now works (to some extent) but for IE7.
>
>   I was just wondering what is with IE7, IE6 used to be fine, it always 
>   worked, same with FF but why is 7 casing so many problems?
>
>   Andrew
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation bar

[Alan K Baker]

Alan.

As there are a few issues here and interaction will be improved (IMO) I am 
replying to your message, by interspersing my replies within yours.

Regards, 
 
Alan.
 
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus


- Original Message - 
From: Alan Gresley 
To: Alan K Baker 
Cc: css-d 
Sent: Saturday, April 12, 2008 10:09 AM
Subject: Re: [css-d] Navigation bar

> There many billions of pages needing the same treatment. Please take a look 
> at this screen shot.

Answered privately.

> Is this the fixed navigation where the lower parts are hidden outside the 
> viewpoint. My screen is on 800px high. Is this navigation within frames?

No, it's apparent on any button that's clicked. They all behave in the same way.

> Remove the frames as it make it near impossible for anyone to help.

The frames will be removed, but the site is presented 'as-is' to allow you guys 
to see the problem, not for you to attempt to retrieve code from it. That's why 
I posted the relevant code in my message.

> OK, where do you mention that .oneline and .twolines is part of the 
> navigation. Some on this list are good detectives since. We have to use our 
> web developers toolbar [1] "outline current element" feature to locate these 
> classes.

It's mentioned in the line "I've included the appropriate part of the 
stylesheet and the HTML below, to save you wading through the dreaded frames 
maze. At present my text is centered by [ .oneline a ] and [ .twolines a ] 
(below).", which you've edited out. :-)

> > I've probably missed something obvious!!

> Yes. When I check you source code all I see is.

>   
>   
>   
>   
>   

>   

>   >If you are reading this text, your browser is frames challenged.
> More up to date browsers are readily available.
>   

> The good browsers are not framed challenged. They just don't use MS propriety 
> garbage code.

'Fraid I disagree. Frames have been around for a long time, along with all 
their faults. None of today's reasonably up-to-date browsers has a problem with 
the site as it is/was.
M$ "proprietary code" is here to stay and the greater majority of browser 
public are using it, unfortunately for us, especially in the case of browsers 
below IE7, which itself is far from perfect.
Not to labor a point, as we're getting off topic, but the frames will be 
removed soon and the problem will cease to exist. :-)

> So you have to make it easy. :-)

> Sometimes it is easier just to have un-style text to begin with.

The only way I could make it any easier (as you say) is to remove the frames, 
but really this is totally unnecessary. I've already posted the relevant code 
in my message, for inspection. There's nothing 'hidden' on the live site that 
would affect it. I dumped the site to a test area, merely as an illustration 
for this forum, so that the effects can be seen.

Hell, being a USA originated forum, I even spelled my message in 'American' and 
ignored the protests of my UK spell-checker. 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Navigation Bar in IE 6 Not Matching IE7 and Firefox

[Alix Estrada]

Hello. I'm having three problems with this page in IE6 that I am not
having in IE 7 and Firefox. I've spent hours trying ot figure out what
is wrong. I would appreciate any help!

1. My navigation bar is perfectly placed in IE 7 and Firefox, however is
IE 6 it is wy over to the right. 
2. I also noticed that my page is not centered in IE 6, when it is in IE
7 and Firefox.
3. At the bottom of the page, in IE 7 and Firefox, the bottom orange
line sits right under the two images above the footer, as it should.
However in IE 6 there is a gap of about 3 pixels.

http://itroundtable.premerabc.com/index1.html 

Thank you so much for any help,

ALIX ESTRADA
Web Usability & User Interface Designer
Premera Blue Cross


 



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation Bar in IE 6 Not Matching IE7 and Firefox

[Gunlaug Sørtun]

Alix Estrada wrote:

> 1. My navigation bar is perfectly placed in IE 7 and Firefox, however
> is IE 6 it is wy over to the right.

Add...

#tabsJ {display: inline;}

...to kill the "margin-doubling on floats" bug in IE6.

> 2. I also noticed that my page is not centered in IE 6, when it is in
> IE 7 and Firefox.

Caused by bug 1, and gets corrected by the fix.

> 3. At the bottom of the page, in IE 7 and Firefox, the bottom orange 
> line sits right under the two images above the footer, as it should. 
> However in IE 6 there is a gap of about 3 pixels.

IE6 doesn't respect declared dimensions when content is too large, and
it is.

The addition of...

* html #contentBottom {
  overflow: hidden;
}

...will correct that bug in old IE, but I do not recommend using it.

> http://itroundtable.premerabc.com/index1.html

Aside: your page triggers the "em font-resizing bug in IE5 - IE7"[1],
but is otherwise so easily broken by any amount of font-resizing in any
browser that it doesn't really matter.

regards
Georg

[1]http://www.gunlaug.no/contents/wd_additions_13.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/