hover codes

Question

Mindy Sue 0 Newbie Poster

14 Years Ago

I am trying to put hover codes in - I want 3 different sizes. Can anyone help me?

Also, besides here - can anyone recommend a good website for beginners to learn CSS or any good beginner books?

web-design

5 Contributors
12 Replies
139 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by rajendra.parmar

All 12 Replies

opsryushi 2 Light Poster

14 Years Ago

Mindy,

If you could elaborate on what you mean by "hover codes" it would be much easier for us to help you.

Check out http://www.w3schools.com for a lot of great tutorials on HTML, CSS, JavaScript, and virtually any other topic related to web development.

opsryushi 2 Light Poster

14 Years Ago

Can you include your code? That will make it much easier for us to see what we can do.

macneato 29 Posting Pro in Training

14 Years Ago

The reason why this is happening is because you got font-sizes specified in your a:hover selectors. Rule of thumb. Classes with font-size already specified when hovered keep original font-size.

Try this

* {
	margin: 0;
	padding: 0;
	outline-color: #4E677D;
	border-top-color: #4E677D;
	border-right-color: #4E677D;
	border-bottom-color: #4E677D;
	border-left-color: #4E677D;
}

body {
	background: #fff url(images/bg.jpg) repeat-y top center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 17px;
	color: #222;
	font-weight: normal;
}

a {
text-decoration: none;
color: #336699;
}
a:hover {
	text-decoration: underline;
	color: #111;
	text-align: center;
	font-weight: bold;
}

/* This is not vaild, remove it
a:hover18 {
	text-decoration: underline;
	color: #111;
	font-size: 18px;
	text-align: center;
	font-weight: bold;
}
*/

#wrap {
margin: 0 auto;
width: 800px;
}

#header {
	height: 160px;
	background: #fff url(images/headerplay2.jpg) no-repeat;

}
#header h1 { 
font-size: 25px;
letter-spacing: -1px;
padding: 25px 0 0 20px;
color: #fff;
}
#header h1 a { 
color: #fff;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover {
	color: #111;
	font-family: Arial, Helvetica, sans-serif;
}
#header h2 {
	font-size: 18px;
	color: #336699;
	padding: 3px 0 0 20px;
	letter-spacing: -1px;
	font-weight: 100;
	font-family: Arial, Helvetica, sans-serif;
}

#menu {
	height: 30px;
	line-height: 30px;
	background: #fff url(images/menu.jpg) no-repeat;
}
#menu ul {
list-style-type: none;
padding-left: 30px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 600;
font-size: 14px;
color: #333;
}
#menu ul li a:hover {
color: #aaa;
text-decoration: none;
}

#menubottom { 
background: #fff url(images/menubottom.jpg) no-repeat;
padding: 5px 0;
}

#content {
padding: 0 20px;
}

.right {
	float: right;
	width: 570px;
	text-align: left;
	padding-top: 20px;
	font-size: 12px;
	letter-spacing: normal;
	word-spacing: normal;
}
.right h2 {
font-size: 18px;
font-weight: 100;
padding-left: 10px;
height: 26px;
line-height: 26px;
background: #B9B9B9;
}
.right h2 a {
text-decoration: none;
color: #fff;
}
.right h2 a:hover {
color: #111;
}

.left {
float: left;
width: 180px;
padding-top: 10px;
}
.left h2 {
margin: 10px 0 0 0;
padding-left: 10px;
height: 26px;
line-height: 26px;
background: #B9B9B9;
color: #fff;
font-size: 13px;
}
.left ul {
padding: 10px 0 15px 20px;
color: #336699;
}
.left ul li a {
text-decoration: none;
font-weight: 600;
}
.left ul li a:hover {

}
.articles {
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	font-size: 14px;
	text-align: left;
	font-weight: normal;
	
}

.footer {
margin-top: 30px;
text-align: center;
font-size: 11px;
color: #aaa;
border-top: 1px dotted #aaa;
}
.footer a { color: #aaa; }
.footer a:hover { color: #111; }
#wrap #content .right .articles p strong {
	font-size: 18px;
}
#wrap #content .right .articles p strong {
	color: #000;
	font-size: 24px;
}
#wrap #content .right .articles p strong {
	font-size: 18px;
	font-weight: bold;
	text-align: left;
}
#wrap #content .right .articles p {
	text-align: center; /*justify*/
	font-size: 12px;
	color: #000;
	font-weight: normal;
}
address {
	font-weight: bold;
}
#content .right .articles p {
	font-weight: bold;
}
#wrap #content .right .articles table caption {
	color: #336699;
}
#wrap #content .right .articles div table tr th {
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
}
#wrap #content .right .articles p {
	font-size: 12px;
}
.descriptionsize18 {
	font-size: 18px;
}
.descriptionsize14 {
	font-size: 16px;
	text-align: center;
}
.textjustify {
	text-align: justify;
}
.textcenter {
	text-align: center;
}
.addressbar {
	font-size: 10px;
}
.descriptionsize9 {
	font-size: 9px;
}
#wrap #content .right .articles table tr td {
	font-size: 12px;
}
table {
	width:auto; /*(or 563%?)(570)*/
	text-align:center;
}
#table100 {
	font-size: 12px;
}
.tablesize100 {
	font-size: 12px;
	font-style: normal;
	position: absolute;
	left: 585px;
	top: 852px;
	width: 4px;
}
.tablesize100 {
	font-size: 12px;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}
#content .right .tablesize300 br {
}

table.shortwidth {
width: 200px;
border: 0px solid #000
}
 
table.standard {
width: 560px;
border: 0px solid #000
}
p {font-size:12px;}
}
/* You have already defined this - Remove it
a:hover {
	text-decoration: underline;
	color: #111;
	font-size: 18px;
	text-align: center;
	font-weight: normal;
/*
	}

Mindy Sue commented: Extremely helpful and nice! +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Mindy Sue 0 Newbie Poster · Answer 1 · 2010-02-17T02:55:08+00:00

I have the following words that need to navigate to other pages, and are different sizes. I need them to stay the same font size.

YOGA (font size 14)

PILATES (font size 14)

Print Current Class Schedule (font size 12 )

Contact Us (font size 9)

Mindy Sue 0 Newbie Poster · Answer 2 · 2010-02-17T04:36:58+00:00

I am VERY new to all of this so please be gentle... also, my page "jumps" a little when I click on the links at the very bottom - how can I stop that?

* {
	margin: 0;
	padding: 0;
	outline-color: #4E677D;
	border-top-color: #4E677D;
	border-right-color: #4E677D;
	border-bottom-color: #4E677D;
	border-left-color: #4E677D;
}

body {
	background: #fff url(images/bg.jpg) repeat-y top center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 17px;
	color: #222;
	font-weight: normal;
}

a {
text-decoration: none;
color: #336699;
}
a:hover {
	text-decoration: underline;
	color: #111;
	font-size: 14px;
	text-align: center;
	font-weight: bold;
}
a:hover18 {
	text-decoration: underline;
	color: #111;
	font-size: 18px;
	text-align: center;
	font-weight: bold;
}

#wrap {
margin: 0 auto;
width: 800px;
}

#header {
	height: 160px;
	background: #fff url(images/headerplay2.jpg) no-repeat;

}
#header h1 { 
font-size: 25px;
letter-spacing: -1px;
padding: 25px 0 0 20px;
color: #fff;
}
#header h1 a { 
color: #fff;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover {
	color: #111;
	font-family: Arial, Helvetica, sans-serif;
}
#header h2 {
	font-size: 18px;
	color: #336699;
	padding: 3px 0 0 20px;
	letter-spacing: -1px;
	font-weight: 100;
	font-family: Arial, Helvetica, sans-serif;
}

#menu {
	height: 30px;
	line-height: 30px;
	background: #fff url(images/menu.jpg) no-repeat;
}
#menu ul {
list-style-type: none;
padding-left: 30px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 600;
font-size: 14px;
color: #333;
}
#menu ul li a:hover {
color: #aaa;
text-decoration: none;
}

#menubottom { 
background: #fff url(images/menubottom.jpg) no-repeat;
padding: 5px 0;
}

#content {
padding: 0 20px;
}

.right {
	float: right;
	width: 570px;
	text-align: left;
	padding-top: 20px;
	font-size: 12px;
	letter-spacing: normal;
	word-spacing: normal;
}
.right h2 {
font-size: 18px;
font-weight: 100;
padding-left: 10px;
height: 26px;
line-height: 26px;
background: #B9B9B9;
}
.right h2 a {
text-decoration: none;
color: #fff;
}
.right h2 a:hover {
color: #111;
}

.left {
float: left;
width: 180px;
padding-top: 10px;
}
.left h2 {
margin: 10px 0 0 0;
padding-left: 10px;
height: 26px;
line-height: 26px;
background: #B9B9B9;
color: #fff;
font-size: 13px;
}
.left ul {
padding: 10px 0 15px 20px;
color: #336699;
}
.left ul li a {
text-decoration: none;
font-weight: 600;
}
.left ul li a:hover {

}
.articles {
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	font-size: 14px;
	text-align: left;
	font-weight: normal;
	
}

.footer {
margin-top: 30px;
text-align: center;
font-size: 11px;
color: #aaa;
border-top: 1px dotted #aaa;
}
.footer a { color: #aaa; }
.footer a:hover { color: #111; }
#wrap #content .right .articles p strong {
	font-size: 18px;
}
#wrap #content .right .articles p strong {
	color: #000;
	font-size: 24px;
}
#wrap #content .right .articles p strong {
	font-size: 18px;
	font-weight: bold;
	text-align: left;
}
#wrap #content .right .articles p {
	text-align: center; /*justify*/
	font-size: 12px;
	color: #000;
	font-weight: normal;
}
address {
	font-weight: bold;
}
#content .right .articles p {
	font-weight: bold;
}
#wrap #content .right .articles table caption {
	color: #336699;
}
#wrap #content .right .articles div table tr th {
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
}
#wrap #content .right .articles p {
	font-size: 12px;
}
.descriptionsize18 {
	font-size: 18px;
}
.descriptionsize14 {
	font-size: 16px;
	text-align: center;
}
.textjustify {
	text-align: justify;
}
.textcenter {
	text-align: center;
}
.addressbar {
	font-size: 10px;
}
.descriptionsize9 {
	font-size: 9px;
}
#wrap #content .right .articles table tr td {
	font-size: 12px;
}
table {
	width:auto; /*(or 563%?)(570)*/
	text-align:center;
}
#table100 {
	font-size: 12px;
}
.tablesize100 {
	font-size: 12px;
	font-style: normal;
	position: absolute;
	left: 585px;
	top: 852px;
	width: 4px;
}
.tablesize100 {
	font-size: 12px;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}
#content .right .tablesize300 br {
}

table.shortwidth {
width: 200px;
border: 0px solid #000
}
 
table.standard {
width: 560px;
border: 0px solid #000
}
p {font-size:12px;}
}
a:hover {
	text-decoration: underline;
	color: #111;
	font-size: 18px;
	text-align: center;
	font-weight: normal;

Mindy Sue 0 Newbie Poster · Answer 3 · 2010-02-17T07:40:54+00:00

Mindy Sue 0 Newbie Poster

14 Years Ago

navigation codes (not hover)

opsryushi 2 Light Poster · Answer 4 · 2010-02-17T09:05:55+00:00

If I understand what you're trying to do - anywhere it says font-size: __px , change the __ to whichever size you like, and you can make them all the same size.

I'm still not sure what you meant by "hover codes," or if I've even answered your question.

macneato 29 Posting Pro in Training · Answer 5 · 2010-02-17T13:18:06+00:00

Hi Mindy,

It's fine seeing all the classes but if we don't know where you have assigned them, they pretty much useless. Could you please post your HTML source as well.

Mindy Sue 0 Newbie Poster · Answer 6 · 2010-02-17T16:55:24+00:00

sorry...:icon_redface:

I have the following words that need to navigate to other pages, and are different sizes. I need them to stay the same font size when "hovered" over.

YOGA (font size 14)

PILATES (font size 14)

Print Current Class Schedule (font size 12 )

Contact Us (font size 9)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<title>Viking Fitness Center</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<style type="text/css">
/*<![CDATA[*/
<!--
#wrap #content .right .articles p a center {
        font-size: 14px;
}
.monday {
        color: #336699;
}
-->
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
 div.c4 {clear: both;}
 th.c3 {background-color: #CCCCCC}
 td.c2 {background-color: #CCCCCC}
 div.c1 {
	text-align: center;
	font-size: 12px;
}
/*]]>*/
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>&nbsp;</h1>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Classes</a></li>
<li><a href="#">Trainers</a></li>
<li><a href="#">Childcare</a></li>
<li><a href="#">Pools</a></li>
<li><a href="#">Tanning</a></li>
<li><a href="#">Success Stories</a></li>
</ul>
</div>
<div id="content">
  <div class="right">
  <h2><strong>Classes</strong></h2>
  <div class="articles">
<div class="c1">
  <br />
  <br />
<br />
<a href="yoga.html" class="descriptionsize18">YOGA</a><br />
<br />
  <br />
<a href="pilates.html" class="descriptionsize18">PILATES</a><br />
  <br />
  <br />
  <br />
<div class="c1"><a href="Aerobic.rtf">PRINT CURRENT CLASS SCHEDULE</a></div>
  <br/>
<div class="c1"><a href="class_description.html">CLASS DESCRIPTION</a></div>
<div align="center"><br />
  <br />
  <br />
  <table width="394" border="1" cellpadding="3" cellspacing="3">
    <caption class="monday">
    <strong>MONDAY</strong>
    </caption>
    <tr>
      <td width="180" bgcolor="#AEAEAE" class="c2" scope="col">Spin</td>
      <td class="c2" width="84" scope="col">5:15a-6:00a</td>
      <th class="c3" width="108" scope="col">
        <p>Mindy</p>
        </th>
      </tr>
    <tr>
      <td>Firm &amp; Cardio Blast</td>
      <td>9:00a-10:00a</td>
      <td>Carol</td>
      </tr>
    <tr>
      <td bgcolor="#AEAEAE" class="c2">Spin</td>
      <td class="c2">4:00p-4:45p</td>
      <td class="c2">Carol</td>
      </tr>
    <tr>
      <td>Step/Zumba rotating</td>
      <td>5:30p-6:30p</td>
      <td>Mo/Diane</td>
      </tr>
  </table>
  </div>
</div>
  <br />
  <br />
  <br />
<div class="c1">
  <div align="center">
    <table width="394" border="1">
      <caption>
      <strong>TUESDAY</strong>
      </caption>
      <tr>
        <td class="c2" width="180" scope="col">Figures Power Hour</td>
        <td class="c2" width="84" scope="col">8:30a-9:30a</td>
        <td class="c2" width="108" scope="col">
          <p> Deb</p>
          </td>
        </tr>
      <tr>
        <td>Spin</td>
        <td>9:00a-9:45a</td>
        <td>Jackie</td>
        </tr>
      <tr>
        <td class="c2"><p>Firm &amp; Cardio Blast</p>
          <p> Kickboxing rotating</p></td>
        <td class="c2">5:30p-6:30p</td>
        <td class="c2">Chris/Shannon</td>
        </tr>
      <tr>
        <td>Spin</td>
        <td>6:45p-7:30p</td>
        <td>Mindy</td>
        </tr>
    </table>
    </div>
</div>
<div class="c1">
  <div align="center"><br />
  <br />
  <br />
  <table width="394" border="1">
    <caption>
    <strong>WEDNESDAY</strong>
    </caption>
    <tr>
      <td class="c2" width="180" scope="col">
        <p>Firm &amp; Cardio Blast</p>
        <p>FitBall Challenge rotating</p>
        </td>
      <td class="c2" width="84" scope="col">9:00a-10:00a</td>
      <td class="c2" width="108" scope="col">Carol/Deb</td>
      </tr>
    <tr>
      <td>Body Sculpt</td>
      <td>5:30p-6:30p</td>
      <td>Sheryl</td>
      </tr>
  </table>
    </div>
</div>
  <br />
  <br />
  <br />
<div class="c1">
  <div align="center">
    <table width="394" border="1">
      <caption>
      <strong>THURSDAY</strong>
      </caption>
      <tr>
        <td class="c2" width="180" scope="col">Figures Power Hour</td>
        <td class="c2" width="84" scope="col">8:30a-9:30a</td>
        <td class="c2" width="108" scope="col">Deb</td>
        </tr>
      <tr>
        <td>HI-LO TransFIRMation</td>
        <td>9:00a-10:00a</td>
        <td>Lynnette</td>
        </tr>
      <tr>
        <td class="c2">Spin</td>
        <td class="c2">5:30p-6:15p</td>
        <td class="c2">Lesa</td>
        </tr>
    </table>
    </div>
</div>
  <br />
  <br />
  <br />
<div class="c1">
  <div align="center">
    <table width="394" border="1" align="center" cellpadding="2">
      <caption>FRIDAY</caption>
      <tr>
        <td class="c2" width="180" scope="col">Spin</td>
        <td class="c2" width="84" scope="col">5:15a-6:00a</td>
        <td class="c2" width="108" scope="col">Mindy</td>
        </tr>
      <tr>
        <td>Firm &amp; Cardio Blast</td>
        <td>9:00a-10:00a</td>
        <td>Lynnette</td>
        </tr>
    </table>
    </div>
</div>
  <br />
  <br />
  <br />
<div class="c1">
  <div align="center">
    <table width="394" border="1">
      <caption>
      <strong>SATURDAY</strong>
      </caption>
      <tr>
        <td width="180" class="c2" scope="col">Aerobic or Spin</td>
        <td width="84" class="c2" scope="col">9:00a-10:00a</td>
        <td width="108" class="c2" scope="col">Rotating Instructors</td>
        </tr>
    </table>
    </div>
</div>
  <br />
  <br />
  <br />
<div class="c1">
  <div align="center">
    <table width="394" border="1">
      <caption>
      <strong>SUNDAY</strong>
      </caption>
      <tr>
        <td class="c2"width="180"  scope="col">Spin</td>
        <td class="c2" width="84" scope="col">10:30a-11:15a</td>
        <td class="c2" width="108" scope="col">Lesa</td>
        </tr>
    </table>
    </div>
</div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <center>
    <center>
    <span class="descriptionsize9"><a href="index.html"><small style="font-size:7pt;">HOME</small></a></a> <small style="font-size:7pt;">: </small><a href="locations.html"><small style="font-size:7pt;">LOCATIONS</small></a></a> <small style="font-size:7pt;">:</small> <a href="pricing.html"><small style="font-size:7pt;">PRICING</small></a></a> <small style="font-size:7pt;">:</small> <a href="services.html"><small style="font-size:7pt;">SERVICES</small></a></a> <small style="font-size:7pt;">: </small><a href="classes.html"><small style="font-size:7pt;">CLASSES</small></a></a><small style="font-size:7pt;"> :</small> <a href="trainers.html"><small style="font-size:7pt;"><small style="font-size:7pt;">TRAINERS</small></a></a> <small style="font-size:7pt;">:</small> <a href="childcare.html"><small style="font-size:7pt;">CHILDCARE</small></a></a></a> <small style="font-size:7pt;">:</small> <a href="tanning.html"><small style="font-size:7pt;">TANNING</small></a></a></a><small style="font-size:7pt;"> :</small> <a href="success.html"><small style="font-size:7pt;">SUCCESS STORIES</small></a></a>
  <br/>
  <br/>
  
  <a href="mailto:vikingfitnesscenter@gmail.com"><small style="font-size:7pt;">CONTACT US</small></a></span>
  </center>
</div>
<h2> </h2>
<div class="footer">Designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a></div>
</div>
<div class="left">
<h2><small style="font-size:10pt;">What We Offer:</h2>
&nbsp;
<ul>
<li>
3 Convenient Locations
</li>
<li>
24 Hour Access
</li>
<li>
State Of The Art Security
</li>
<li>
Free Weights
</li>
<li>
Stacked Weights
</li>
<li>
Cardio Area with Televisions
</li>
<li>

Certified Instructors &amp; Personal Trainers
</li>
<li>
Classes to include:<br />

Aerobic<br />
Spin<br />
Kickboxing<br />
Sculpt<br />
Zumba<br />
</li>
<li>
Yoga
</li>
<li>
Pilates
</li>
<li>
Figures For Women<br />
(women only area)
</li>
<li>
Tanning Salon
</li>
<li>
Saunas
</li>
<li>Metabolic Testing</li>
<li>
Body Composition Analysis
</li>
<li>
Free Childcare
</li>
<li>
Free Pool Access
</li>
<li>
Free Blood Pressure/Stroke Screening
</li>
<li>
Massage Therapist
</li>
<li>
IPFA Affiliated
</li>
</ul>
</div>
<div class="c3"></div>
</div>
</div>
</body>
</html>

bannala 0 Newbie Poster · Answer 7 · 2010-02-17T19:16:44+00:00

yes u can learn from this site : http://www.w3schools.com/
and give ur reply bye.

Mindy Sue 0 Newbie Poster · Answer 8 · 2010-02-18T06:23:48+00:00

Thank you so much for your help. Now I'm off to look at what I did wrong and you did right.

rajendra.parmar -2 Light Poster · Answer 9 · 2010-02-18T14:14:02+00:00

Dear friend,

As per your Question,

I think you have to create 3 different class in the css. you can get three different size in it.

I am trying to put hover codes in - I want 3 different sizes. Can anyone help me?
Also, besides here - can anyone recommend a good website for beginners to learn CSS or any good beginner books?

hover codes

Recommended Answers Collapse Answers

All 12 Replies

Recommended Answers