Cannot modify nav bar [Archive] - Dynamic Drive Forums

View Full Version : Cannot modify nav bar

esm

12-07-2020, 04:19 PM

Hi Guys,
I have downloaded and installed the indent style sheet below:

<style type="text/css">

.indentmenu{
font: bold 15px Verdana;
width: 100%; /*leave this value as is in most cases*/
overflow: hidden;
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 100%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(navbar/indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url(navbar/indentbg2.gif) center center repeat-x;
}

</style>

and I have some questions.

1. I cannot modify the font. No matter which font I enter, the font on the nav bar is always Times Roman.
2. When I center the nav bar, the height of it goes down significantly.
Can someone help here?
Thanks,
Ed

coothead

12-07-2020, 09:58 PM

Hi there esm,

perhaps these modifications, may help you on your way...

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>



<style media="screen">
body {
font: normal 1em / 1.62em sans-serif;
}

.indentmenu {
text-align: center;
}

.indentmenu ul {
display: inline-block;
margin: 0;
padding: 0;
border: 1px solid #f0f; /* #564c66 dark purple border */
background: #000 url(navbar/indentbg.gif) center center repeat-x;
box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
}

.indentmenu ul li {
display: inline-block;
vertical-align:middle;
}

.indentmenu ul li a {
display: block;
padding: 0.32em 0.69em;
border-right: 1px solid #f0f; /* #564c66 dark purple divider between menu items */
font: bold 1em Verdana sans-serif;
text-decoration: none;
color: #fff; /*text color*/
}

.indentmenu ul li:last-of-type a {
border-right: 0;
}

.indentmenu ul li a:visited {
color: #fff;
}

.indentmenu ul li a:hover,
.indentmenu ul li a:active,
.indentmenu ul li .current {
padding-top: 0.36em; /*shift text down 1px for selected and active item*/
padding-bottom: 0.28em; /*shift text down 1px for selected and active item*/
background: #000 url(navbar/indentbg2.gif) center center repeat-x;
color: #f0f; /*text color of selected and active item*/
}

</style>

</head>
<body>

<div class="indentmenu">
<ul>
<li>
<a href="#">link one</a>
</li><li>
<a href="#">link two</a>
</li><li>
<a href="#">link three</a>
</li><li>
<a href="#">link four</a>
</li>
</ul>
</div>

</body>
</html>

coothead

esm

12-07-2020, 10:21 PM

Thanks for the quick response.
The nav bar centers nicely but the font is still Times Roman.

coothead

12-07-2020, 10:54 PM

Hi there esm,

there is nothing in the code I gave you that
would display it as Times New Roman. :confused:

Can you post a link to your site that displays
it as that font?

coothead

esm

12-08-2020, 01:38 AM

Coothead,
I know that there is nothing in your code re Times New Roman.
The website is not finished yet, in fact I have just started. But I have attached a screen shot how the nav bar looks.
Thanks again,
Ed

coothead

12-08-2020, 11:58 AM

Hi there esm,

without seeing the complete HTML and CSS that you
are using it is difficult to see the cause of your problem.

You have not said whether the "Times New Roman"
is effecting the whole page or just the a elements in
the menu.

One possible cause could be something like this in your
CSS code...

* {
font-family:'times new roman'!important;
}

...which would effect the whole page, or this...

a {
font-family:'times new roman'!important;
}

...which would only effect a elements

coothead

esm

12-08-2020, 04:51 PM

What I submitted in my original post IS the complete css, except that the verdana was arial.
I downloaded it from this website, assuming it was a correct working code.
The times roman font does not affect the entire website, just the nav bar.

coothead

12-08-2020, 05:03 PM

Hi there esm,

unless I can replicate your problem, I can see
no possible way that I can help you.

Put your page on line so that I may see it.

coothead

esm

12-08-2020, 05:21 PM

OK, thanks a lot for all your help.
Ed

esm

12-08-2020, 08:52 PM

Coothead,
I've finally figured it out. I have modified this (took the sans serif out):
.indentmenu ul li a {
display: block;
padding: 0.32em 0.69em;
border-right: 2px solid #FFFFFF; /* white divider between menu items */
font: 1.25em Verdana;
text-decoration: none;
color: #fff; /*text color*/
}

Thanks again for helping me out.
Cheers,
Ed

coothead

12-08-2020, 09:19 PM

Hi there ems,

I am pleased that you have managed to resolve your problem. :rolleyes:

coothead

esm

12-08-2020, 09:40 PM

The only thing that doesn't work anymore is the 1px shift down when hovering. But that's OK.

coothead

12-08-2020, 09:47 PM

Hi there ems

post your full HTML and CSS code for me to test.

coothead

esm

12-08-2020, 09:59 PM

Here it is:

/<style media="screen">
body {
font: normal 1em / 1.62em sans-serif;
}

.indentmenu {
text-align: center;
}

.indentmenu ul {
display: inline-block;
margin: 0;
padding: 0;
border: 1px solid #38571A; /* dark green border */
background: #000 url(navbar/indentgreen.gif) center center repeat-x;
box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
}

.indentmenu ul li {
display: inline-block;
vertical-align:middle;
}

.indentmenu ul li a {
display: block;
padding: 0.32em 0.69em;
border-right: 2px solid #FFFFFF; /* white divider between menu items */
font: 1.25em Verdana;
text-decoration: none;
color: #fff; /*text color*/
}

.indentmenu ul li:last-of-type a {
border-right: 0;
}

.indentmenu ul li a:visited {
color: #fff;
}

.indentmenu ul li a:hover,
.indentmenu ul li a:active,
.indentmenu ul li .current {
padding-top: 0.36em; /*shift text down 1px for selected and active item*/
padding-bottom: 0.28em; /*shift text down 1px for selected and active item*/
background: #000 url(navbar/indentgreen2.gif) center center repeat-x;
color: #fff; /*text color of selected and active item*/
}

</style>

</head>
<body>

<div class="indentmenu">
<ul>
<li>
<a href="#">link one</a>
</li><li>
<a href="#">link two</a>
</li><li>
<a href="#">link three</a>
</li><li>
<a href="#">link four</a>
</li>
</ul>
</div>

</body>
</html>

<div class="indentmenu">
<ul>
<li><a href="index.html" class="current">About Us</a></li>
<li><a href="meeting.htm">Meeting Dates & Topics</a></li>
<li><a href="members.htm">Members-Only Info</a></li>
<li><a href="garden.htm">Garden</a></li>
</ul>
</div>

coothead

12-08-2020, 11:13 PM

Hi there ems,

the hover effect works OK on these...

Meeting Dates & Topics
Members-Only Info
Garden

You will find that this...

.indentmenu ul li a:hover,
.indentmenu ul li a:active,
.indentmenu ul li .current {
padding-top: 0.36em; /*shift text down 1px for selected and active item*/
padding-bottom: 0.28em; /*shift text down 1px for selected and active item*/
background: #000 url(navbar/indentgreen2.gif) center center repeat-x;
color: #fff; /*text color of selected and active item*/
}
...is moving About Us down 1px without hover.

See image:-

6411

coothead

esm

12-09-2020, 08:13 PM

I was not talking about the hover effect, that works just fine.
I'm talking about the 1px shift down when hovering. It shifts with your original code when I see Times Roman.
However, when I take out the "sans serif" part and I see Verdana, the 1px shift when hovering does not happen.

coothead

12-09-2020, 08:53 PM

Hi there esm,

I am sorry but I cannot replicate any of the
problems that you state that you are having. :confused:

I use Firefox and Google Chrome to test
my code, which browser(s) are you using
to test yours?

coothead

esm

12-09-2020, 09:05 PM

OK, we're closing in.
I normally use Opera (shift down does not work) but I just tested it with Firefox and it does work there.
So, just on Opera problem. Thanks for the help.
Cheers,
Ed

esm

12-10-2020, 07:23 PM

coothead,
I just noticed another thing: to the left of each tab there seems to be what looks like a 5px gap that does not change when hovering.
Is there any way to get rid of that gap?
Thanks,
Ed

coothead

12-10-2020, 09:49 PM

Hi there esm,

I am not sure what you mean. :confused:

At present the a elements have this padding...

normal state:-

padding: 0.32em 0.69em;
hover state:-

padding: 0.36em 0.69em 0.28em;

So what do you actually require?

coothead

esm

12-10-2020, 10:40 PM

I have attached an enlarged pic of one of the tabs.
Left of the "M" at the left end of the tab there is a gap that shows on all tabs when hovering, except the most-left "Home" tab.

coothead

12-10-2020, 11:18 PM

Hi there esm.

let's use CSS flex instead...

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>



<style media="screen">
body {
font: normal 1em / 1.62em sans-serif;
}

.indentmenu {
display: flex;
justify-content: center;
}

.indentmenu ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #38571A; /* dark green border */
background: #000 url(navbar/indentgreen.gif) center center repeat-x;
box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
}

.indentmenu ul li a {
display: block;
padding: 0.32em 0.69em;
border-right: 2px solid #fff;/* white divider between menu items */
font: 1.25em Verdana;
text-decoration: none;
color: #fff; /*text color*/
}

.indentmenu ul li:last-of-type a {
border-right: 0;
}

.indentmenu ul li a:visited {
color: #fff;
}

.indentmenu ul li a:hover,
.indentmenu ul li a:active,
.indentmenu ul li .current {
padding-top: 0.36em; /*shift text down 1px for selected and active item*/
padding-bottom: 0.28em; /*shift text down 1px for selected and active item*/
background: #000 url(navbar/indentgreen2.gif) center center repeat-x;
color: #fff; /*text color of selected and active item*/
}
</style>

</head>
<body>

<div class="indentmenu">
<ul>
<li><a href="index.html" class="current">About Us</a></li>
<li><a href="meeting.htm">Meeting Dates & Topics</a></li>
<li><a href="members.htm">Members-Only Info</a></li>
<li><a href="garden.htm">Garden</a></li>
</ul>
</div>

</body>
</html>

coothead

esm

12-11-2020, 08:56 PM

Works like a charm, thanks again.
Cheers,
Ed

coothead

12-11-2020, 09:15 PM

Hi there esm,

by changing display: inline-block to display:flex it removed
the 3px right and bottom margins that inline elements have.

coothead

esm

12-12-2020, 04:26 PM

OK.
My CSS knowledge doesn't go that far. :confused: