0

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?

5
Contributors
12
Replies
14
Views
8 Years
Discussion Span
Last Post by rajendra.parmar
Featured Replies
  • 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 [CODE=CSS] * { margin: 0; padding: 0; outline-color: #4E677D; border-top-color: #4E677D; border-right-color: #4E677D; border-bottom-color: #4E677D; border-left-color: #4E677D; } body … Read More

0

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.

0

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)

0

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;
0

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.

0

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.

0

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>
2

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;
/*
	}
Votes + Comments
Extremely helpful and nice!
0

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

0

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?

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.