Some minor adjustments help

HTML & CSS
1

Hi folks, I’m just hoping for a few adjustments that I can’t figure out:

  1. I’d like to make the links for Home/Mission/Contact to be aligned to the top right of the logo and of smaller font.

  2. When I hover over a link the text darkens and expands, how can I stop that? I like that it turns a darker red though.

  3. On the bottom I’d like the Disclaimer and the Privacy to be aligned to the far right side.

The last point I’d like is that the style type=“text/css” media=“all” is something that was showed to me here, that’s great but then all my books don’t show this style and I’m left with asking for this type of help at a basic level. Is there books or links that can help me follow this style of coding?

Much thanks!!!

The Health and Body Revolution - Health, Training, & Nutrition - A True Lifestyle Change for a Better Life

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />

<title>The Health and Body Revolution - Health, Training, & Nutrition - A True Lifestyle Change
for a Better Life</title>

<meta name="keywords" content="Bootcamp, Personal Training, Health, Training, Nutrition, Kickboxing, Toronto, Muay Thai,  Food, Working Out, Weights, Establishment" />

<meta name="description" content="The Health and Body Revolution is but a small window to a much bigger picture."/>

<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">

<style type="text/css" media="all">
  /*<![CDATA[*/
   a:link, a:visited {color: #83002C}
   a:focus, a:hover, a:active {color: #83002C, text-decoration:none; font-weight:bold}

   body     {font-family: "Times New Roman",Arial,Calibri,"Arial Black",sans-serif; }
   #main    {width:700px; height:200px; margin:0 auto 12px;}
   img      {border: none; }
   li img   {vertical-align: middle;}
   p        {margin:0 auto 14px;width:700px}
   p#logo   {text-align: center;}
   
   table,     
   .navbar  {margin:0 auto;text-align:center}
   .navbar  {background:#cfc none;color:#f00; height:2em; line-height:2em}
   .center  {margin:0 auto; text-align:center}
    
   p, 
   div, 
   img      {outline:dotted 0px #f00}

  /*]]>*/
  </style>
</head>

<body>

  <div id="main" > <!-- start main div  -->

<div id="utilitynav">
    <i><a href="index.html">HOME</a> &bull; <a href="mission.html">MISSION</a> &bull; <a href="mission.html">CONTACT</a></i>
  </div>

    <img src="logo_homepage.jpg" alt="The Health and Body Revolution" width="700" height="200" />

<div class="navbar">
    	<i><a href="bootcamp.html">BOOTCAMP</a> 
		&bull;
	<a href="personal-training.html">PERSONAL TRAINING</a> 
		&bull;
	<a href="profiles.html">PROFILES</a> </i>
  </div>

<br /><br /><br />

<p>
Hello, if you happen to find yourself here at this moment in time, please understand that it is under construction.<br/>
A brief rundown of The Health and Body Revolution is that it is a Health site with strong emphasis on Nutrition and Training tips. Read our <a href="mission.html">MISSION</a> section for a better understanding of our future approach.
<img src="sky.jpg" alt="Sky" width="700" height="100" />
</p>

<br /><br />


<div class="navbar">
    	<i><a href="bootcamp.html">BOOTCAMP</a> 
		&bull;
	<a href="personal-training.html">PERSONAL TRAINING</a> 
		&bull;
	<a href="profiles.html">PROFILES</a> </i>
  </div>

<div id="footernav">

	<a href=" ">Copyright &copy; 2010 Health and Body Revolution</a>
				
			<a href=" ">Disclaimer</a>
				&bull;
			<a href=" ">Privacy</a>
		
	</div>

</div>

</div> <!-- end main div -->

</body>

</html>
2

It’s because of the font-weight:bold here:

a:focus, a:hover, a:active {color: #83002C, text-decoration:none; font-weight:bold}

Bold text takes up more space than regular text.

3

For the things that you want to right-align, just style those divs float:right;

For the text you want slightly smaller, put a <span> around it, and give it a specific font-size.

4

I would do that in the style section?

If I remove the font weight bold, how do I still have it change to the darker red when hovering? That seems to go away too.

Thanks!

5

EarlyOut please understand that I am not familiar with the format of the styles section above and that I initially followed a couple of books I bought, but since getting advice here I’ve followed the coding provided by members however I am lost to doing any revisions to what I currently have because I’ve become clueless.

6

Sorry - I got distracted. Here’s a quick slap-together, without trying to deal with anything else on the page. The link hover is a problem - what you were seeing as “darker” was, in fact, just bold. But bold is bigger. Using a darker color doesn’t work very well, because the text color is already very dark. So, I hunted around for a lighter color, which I think works better.

For your right-justifying, I changed the id’s to classes, and gave them some styling. Quick and dirty.

You still have things like links that don’t go anywhere, but without knowing what you intend, I can’t fix those!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />

<title>The Health and Body Revolution - Health, Training, & Nutrition - A True Lifestyle Change
for a Better Life</title>

<meta name="keywords" content="Bootcamp, Personal Training, Health, Training, Nutrition, Kickboxing, Toronto, Muay Thai,  Food, Working Out, Weights, Establishment" />

<meta name="description" content="The Health and Body Revolution is but a small window to a much bigger picture."/>

<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">

<style type="text/css" media="all">
  /*<![CDATA[*/
   a:link, a:visited {color: #83002C}
   a:focus, a:hover, a:active {color: #e0a9bc;}

   body     {font-family: "Times New Roman",Arial,Calibri,"Arial Black",sans-serif; }
   #main    {width:700px; height:200px; margin:0 auto 12px;}
   img      {border: none; }
   li img   {vertical-align: middle;}
   p        {margin:0 auto 14px;width:700px}
   p#logo   {text-align: center;}
   
   table,     
   .navbar  {margin:0 auto;text-align:center}
   .navbar  {background:#cfc none;color:#f00; height:2em; line-height:2em}
   .center  {margin:0 auto; text-align:center}
    
   p, 
   div, 
   img      {outline:dotted 0px #f00}
   .utilitynav	{float:right; padding-right: 5px; font-size:0.9em;}
   .footernav	{float:right; padding-right: 5px;}

  /*]]>*/
  </style>

</head>

<body>

  <div id="main" > <!-- start main div  -->

<div class="utilitynav">
    <i><a href="index.html">HOME</a> &bull; <a href="mission.html">MISSION</a> &bull; <a href="mission.html">CONTACT</a></i>

  </div>

    <img src="logo_homepage.jpg" alt="The Health and Body Revolution" width="700" height="200" />

<div class="navbar">
    	<i><a href="bootcamp.html">BOOTCAMP</a> 
		&bull;
	<a href="personal-training.html">PERSONAL TRAINING</a> 
		&bull;
	<a href="profiles.html">PROFILES</a> </i>

  </div>

<br /><br /><br />

<p>
Hello, if you happen to find yourself here at this moment in time, please understand that it is under construction.<br/>
A brief rundown of The Health and Body Revolution is that it is a Health site with strong emphasis on Nutrition and Training tips. Read our <a href="mission.html">MISSION</a> section for a better understanding of our future approach.
<img src="sky.jpg" alt="Sky" width="700" height="100" />
</p>

<br /><br />

<div class="navbar">
    	<i><a href="bootcamp.html">BOOTCAMP</a> 
		&bull;
	<a href="personal-training.html">PERSONAL TRAINING</a> 
		&bull;
	<a href="profiles.html">PROFILES</a> </i>
  </div>

<div class="footernav">

	<a href=" ">Copyright &copy; 2010 Health and Body Revolution</a>
				
			<a href=" ">Disclaimer</a>
				&bull;
			<a href=" ">Privacy</a>
		
	</div>

</div>

</div> <!-- end main div -->

</body>

</html>
7

Ah much thanks! I see what you did, thanks!

Yeah things aren’t put together complete yet with the links.

Can the copy right be left aligned?

Do you have links that I can read up on this?

8

To left-align the copyright, you can just create another class, with its own styling:

.cright	{float:left; padding-left: 5px;}

Then just put the copyright in its own div:

<div class="cright"><a href=" ">Copyright &copy; 2010 Health and Body Revolution</a></div>
<div class="footernav"><a href=" ">Disclaimer</a>&bull;<a href=" ">Privacy</a></div>

Perhaps someone else can suggest some good online tutorials - I don’t learn well from manuals, and have picked up just about everything I know by staring at other people’s code. :slight_smile:

9

EarlyOut thank you very much!!!

10

I would have posted most of these questions over in CSS, for future reference : )

The last point I’d like is that the style type=“text/css” media=“all” is something that was showed to me here, that’s great but then all my books don’t show this style and I’m left with asking for this type of help at a basic level. Is there books or links that can help me follow this style of coding?

This is likely because, if you don’t state a “media”, then the default in most user agents is “all” anyway. So, if you want your styles to apply to all media (mobiles, printers, slide projectors, televisions and mom’s fridge) then you can safely leave the media=“all” out entirely.

Most (I think) of the time, people don’t want the styles they write for “screen” (the computer) to apply to printers and handheld devices. So, they write separate stylesheets, but they also set the media attribute for the main stylesheet to “screen” so that the print stylesheet, for example, doesn’t have to “undo” all the screen styles: if you set a style to “screen” and then have a
<link rel=“stylesheet” type=“text/css” href=“print.css” media=“print”>
your print sheet starts at zero (no styles, or default styles of the browser).
I personally find this much easier and makes my print stylesheet much smaller. Ideally, if this page were sent to anything that did not fulfill “screen”, that whole stylesheet would not be even called from my server, which saves bandwidth monies.