473,320 Members | 2,110 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Text moves with a Horizontal UL Menu Link

A CSS newbie here:
I've been learning CSS as I go along developing a web page. I am
trying to make a horizontal menu link for a footer. On 'hover', I want
the linked text to have a 'bold' font for easier readability. With my
current code, the linked text moves on the hover state. If I remove
the CSS code so that the hover state text is normal and not bold, the
text does not move.

I've searched the Web and cannot find a solution, only advice not to
create bold text upon hover. That is not what I want. My CSS code is
as follows:

..footer{
float: left;
background-color: #483303;
height: 20px;
width: 731px;
}

..footer ul {
margin: 0px;
padding: 2px 0px;
list-style-type: none;
text-align: center;
}

..footer ul li {
display: inline;
}

..footer ul li a {
text-decoration: none;
padding: .05em 4em;
color: #FFFFFF;
background-color: #483303;
font-size: .75em;
}

..footer ul li a:hover {
background-color: #D79F1A;
color: #483303;
font-weight: bold;
}

HTML Code is very simple:

<div class="footer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>

Thanks in advance for any tips.
Jun 27 '08 #1
3 5064

stevedude wrote:
>
On 'hover', I want
the linked text to have a 'bold' font for easier readability. With my
current code, the linked text moves on the hover state. If I remove
the CSS code so that the hover state text is normal and not bold, the
text does not move.

I've searched the Web and cannot find a solution,
Because there is none.
only advice not to
create bold text upon hover.
That is the best way to handle it.
That is not what I want.
It's not about you, but your visitors and what *they* want. I bet they
don't want jumping text. ;)

--
Berg
Jun 27 '08 #2
On May 2, 5:49 pm, Bergamot <berga...@visi.comwrote:
stevedude wrote:
On 'hover', I want
the linked text to have a 'bold' font for easier readability. With my
current code, the linked text moves on the hover state. If I remove
the CSS code so that the hover state text is normal and not bold, the
text does not move.
I've searched the Web and cannot find a solution,

Because there is none.
only advice not to
create bold text upon hover.

That is the best way to handle it.
That is not what I want.

It's not about you, but your visitors and what *they* want. I bet they
don't want jumping text. ;)

--
Berg
Thanks Berg. With the coloring theme for the site, I was hoping to
make the hover effect stand-out better. I appreciate you taking the
time to help.

Stevedude
Jun 27 '08 #3
In article
<15**********************************@y38g2000hsy. googlegroups.com>,
stevedude <st*********@gmail.comwrote:
On May 2, 5:49 pm, Bergamot <berga...@visi.comwrote:
stevedude wrote:
On 'hover', I want
the linked text to have a 'bold' font for easier readability. With my
current code, the linked text moves on the hover state. If I remove
the CSS code so that the hover state text is normal and not bold, the
text does not move.
I've searched the Web and cannot find a solution,
Because there is none.
only advice not to
create bold text upon hover.
That is the best way to handle it.
That is not what I want.
It's not about you, but your visitors and what *they* want. I bet they
don't want jumping text. ;)

--
Berg

Thanks Berg. With the coloring theme for the site, I was hoping to
make the hover effect stand-out better. I appreciate you taking the
time to help.
The best way to do that is with careful choice of colours. The
scheme I use (adapted from Ruthsarian Menus) is to have dark text
on a light background switch to white text on a dark background.

The important thing is to have a clear contrast between the text
and the background, and then invert the sense of that on hover.

>
Stevedude
Jun 27 '08 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Ansgar Hein | last post by:
I have been playing around with several different versions for a horizontal menu, but I haven't been able to build a horizontal navigation based on the vertical one featured on www.alistapart.com...
0
by: Pierre Jelenc | last post by:
I have a blog script that is a customized version of Word Press (wordpress.org) at http://www.web-ho.com/blog/ Because of the way it evolved, some of the CSS may not be the best, I have tended...
15
by: theo | last post by:
Hi, I'm working on a horizontal row menu, to use like folder tabs. Does anyone know what the CSS style "cursor" is supposed to produce? Any working samples? I put it in the code, but can't see...
9
by: Verona Busch | last post by:
Hi everybody, I am very happy to find this group. I am searching for a solution to make a horizontal list menu with submenu on hover. I found a lot of examples for horizontal lists which open...
2
by: Sergio E. | last post by:
Hi group, I write this post with the following question: How can I to build an absolutely horizontal menu?, This is because I can't find how can I configure the menu component of asp.net 2.0...
12
by: tim | last post by:
I am using foldoutmenu 3 and am having problems with viewing my menus in firefox. On my sub3 menus i have more than one line of text in some places. firefox does not recognise that there is more...
1
by: Steve Richter | last post by:
I am using <div align=centerto center a horizontal menu on the page. Problem is the center align of the div is rippling down to the menu items and causing the text of the dynamic popup sub menu...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.