PDA

View Full Version : Multiple Links


ivor1
12-22-2007, 07:21 PM
I am having trouble formatting multiple links on a web page(not uploaded) yet. I have a .vertical li menu in a css file which is unfortunately governing all my other links. Can anyone help?
My html page looks like this-
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Climate Science</title>
<link href="../cf2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>

<link href="../cf4.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="banner"></div>
<div id="left">
<div class="verticalmenu">
<ul>
<li><p><a href="index.html"> Home</a></p>
</li>
<li><p>Climate Science</p></li>
<li><p><a href="mitigation.html">Mitigation</a></p>
</li>
<li><p><a href="economics.html">Economics</a></p>
</li>
<li><p><a href="contact.html">Contact</a></p>
</li>
<li><p><a href="links.html">Links</a></p>
</li>
</ul>
</div>
<div id="logo"></div>
<div id="optim">This site has been optimised for Mozilla Firefox 2.0 and I.E.7. It is best viewed at a resolution of either 1000 x 768 or 800 x 600 pixels. </div>
<div id="validate2"></div>
<div id="validate"></div>
<div id="browsers">Safari 3.0 beta, Opera 9 and Netscape users can also view the site. Users may download pdf&nbsp; &nbsp;&nbsp;and &nbsp;&nbsp;several &nbsp;&nbsp;&nbsp;other<br /><a href="viewers.html">document viewers</a> to peruse articles. </div>
</div>
<div id="space"></div>
<div id="middle">
<div class="menu2">
<h2>Emissions Reductions Targets</h2>
<h3>National Targets</h3>
<h1>The National Targets Summary uses equal per capita shares of the global budget for individual countries. The full document is available as a spreadsheet. The socio-economic effects of these science-based targets are discussed here.</h1><a href="#" title="Heat" target="_blank">Heat</a></h1>
<h3>Global Targets</h3>
<h1>We work out the global emissions reductions needed to keep the temperature rise to 20&deg;c, using IPCC modelling. A previous paper which derived similar global targets using another method, and used in George Monbiot’s book , Heat is also available: Cutting Edge.</h1>

<h2>Factors Not Considered </h2>
<h3>Vegetation Modelling<br />
Fire <br />
Aerosols<br />
Methane<br />
Ozone</h3><br />
<h2>Paleoclimate</h2>
<h3>GMST Projections<br />
Precipitation Projections<br />
Changes in Biomes and Ecosystems<br />
Food Production<br />
Habitable Areas of the Planet </h3>
</div></div>
<div id="right">
<h2>Vulnerabilities in the Earth/Climate System</h2>
<h3>The Arctic<br />
Indonesia<br />
The Amazon<br />
Siberia<br />
Shelf Seas</h3>
<h2>Self-Perpetuating Global Warming</h2>
<h2>Climate Dynamics, Oceans Sink</h2>
</div>


</body>
</html>

This is a non-profit making site which I am doing for free for a climate science body and any help would be muchh appreciated.

Cary
12-22-2007, 08:33 PM
You'll also need to include your two style sheets.

ivor1
12-23-2007, 12:14 PM
Here are the css files. I want <div class="verticalmenu"> to govern the links on the left but want to style all the other links differently. I presume that I would do this in cf2.css.
Thanks for your help.

ivor1
12-25-2007, 07:09 PM
Can anyone help?

Cary
12-26-2007, 03:55 AM
I am having trouble formatting multiple links on a web page(not uploaded) yet. I have a .vertical li menu in a css file which is unfortunately governing all my other links. Can anyone help?

I see div.verticalmenu, but no other links on the page except for "Heat", and it's not being affected by the styling for div.verticalmenu.

ivor1
12-27-2007, 06:55 AM
Thanks for the reply, Cary. I typed "Heat" with the same formatting as the rest of the paragraph (H1 of cf.css) but as soon as I made it into a link, the word took on the same font size as the vertical menu links. No matter how I try to change the linking format for Heat, it seems to stay formatted like the vert. links bar their rollover image.
Can you get the Heat link to change? Preferably to the same 10pt grey text as the para before?

Cary
12-28-2007, 10:25 PM
Look for this selector group in cf4.css:

.verticalmenu li, a:link, .verticalmenu a:visited, .verticalmenu a:hover

Your a:link also needs the .verticalmenu class so you'll have this:

.verticalmenu li, .verticalmenu a:link, .verticalmenu a:visited

Notice, you should drop the "verticalmenu a:hover" at the end because that's being ignored anyway due to it's appearance later in the style sheet.

In cf2.css you have this (I changed its color to the gray you wanted):

.menu2 li, a:link, .verticalmenu a:visited, .verticalmenu a:hover {
color: #666666; /* to give the gray color you want */
text-decoration: none;
font-family: "Trebuchet MS";
font-size: 8pt;
font-weight: bold;
}

I'm guessing you wanted this?

.menu2 li, .menu2 a:link, .menu2 a:visited, .menu2 a:hover

If so, then all you need is this:

.menu2 li, .menu2 a:link, .menu2 a:visited

The hover part is handled by the following selector in that style sheet.

Finally, in your html you have this:

...discussed here.</h1><a href="#" title="Heat" target="_blank">Heat</a></h1>

You're missing an opening h1 tag before the link.

Cary
12-28-2007, 10:28 PM
Oh, and change the styling of the selectors in cf2.css from 8pt to 10pt.

ivor1
12-28-2007, 11:04 PM
Thanks for replying, Cary. I did as you suggested and I can now style links the way I want, but-
if you hover the cursor next to the link, you can see the link takes up a whole line. So if the word I want to make into a link happens to be in a sentence or para, once made into a link, all the other words are pushed out so the link always takes up a line of space for itself (obviously not what I want). It's as if the link still wants the same space reserved for the vert. menu rollover. Any ideas?

Cary
12-28-2007, 11:14 PM
I suspect "display: block" is being applied to the link in question. You want it to be "display: inline", but the .verticalmenu links are the only ones with display:block in the code you've provided.

ivor1
12-31-2007, 06:27 PM
Thanks Cary. The change to inline seems to have worked except, now the "quill" part of the rollover gets cut off?

Cary
12-31-2007, 06:35 PM
Can you post your updated css again. It sounds like the selectors still aren't correct. The links for .verticalmenu need to be display:block. If the selectors are set up correctly that styling won't affect any other links on the page.

ivor1
01-01-2008, 06:07 PM
Firstly, I would like to thank you for your help. It is greatly appreciated.
I have attached the relevant cf.css and cf2.css files in text form.
Again, many thanks and a happy New Year!

Cary
01-01-2008, 07:54 PM
You missed fixing the selectors in cf4.css. The "a:link" by itself is what's causing the problem. Happy New Year!

You have this:
.verticalmenu li, a:link, .verticalmenu a:visited, .verticalmenu a:hover {
display: inline;
color: #000000;
text-decoration: none;
width: 300px;
height: 25px;
list-style-image: none;
text-align: left; /*background: url('menuhover.gif') no-repeat;*/
list-style-type: none;
font: bold 14pt "Trebuchet MS";
}

You need this:
.verticalmenu li, .verticalmenu a:link, .verticalmenu a:visited {
display: block;
color: #000000;
text-decoration: none;
width: 300px;
height: 25px;
list-style-image: none;
text-align: left; /*background: url('menuhover.gif') no-repeat;*/
list-style-type: none;
font: bold 14pt "Trebuchet MS";
}

ivor1
01-01-2008, 08:16 PM
Sorted. Many thanks.