CSS and HTML Links -- Need Advice

LSWV · Nov 26, 2003

I have just begun to dabble with CSS, ASP, and PHP and have already came upon what is probably an easy fix.

My site has 2 CSS sections. In #1 I have text, and I would like to make a link in #1 from the text to #2 thereby changing the content of #2.

In other words... Link in one style sheet to change the content in another.

How do I do this?

Thanks and sorry for such a remedial question

cian · Nov 27, 2003

Not sure what you require but do you mean something like this??

http://www.qiksearch.com/javascripts/dynamic-content20.htm

<!--#sig value=''É'' url=''

http://www.ssi-developer.net''

-->

LSWV · Nov 27, 2003

I dont think that this is what I am needing....

Lets say this is tha page:

CSS #1 and it content

then

CSS #2 and its content

All on the same page.

There are links in #1 and I am wanting it to target to #2...

I have no idea how to ask this question...

Thanks for the help thought....the little java script will be helpful in another area of the site.

LSWV · Nov 27, 2003

Maybe this will help more.....Here is what I have now...And I am wanting to avaoid frames but use the nav links at the top to change the content of the bottom css without haveing to change the links in every page...If that makes any since....

There may be a much easier way to do this...in other words I am wanting updating the site to be extremely fast and easy without have to modify links on every page if something changes but I don't want to use tables or frames.

1st is the html and then I have the seperate .css at the bottom also.


<html>

<head>
<title>LSWV</title>
<meta name="generator" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">

</style>

<link rel="stylesheet" type="text/css" title="Body" href="main.css"/>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000080" vlink="#000080" alink="#FF0000">
<center>

<div class="topper" id="top">
<img src="Mainlogo.gif" width="202" height="102" alt="" border="0" align="">
<div align="right"><font size="1" face="Arial" color="#000080">.:: home ::. .:: general ::. .:: forums ::. .:: mail ::. .:: articles ::. .:: candidate center ::. .:: resources ::. </font></div>
</div>

<div class="body" id="content">
<font size="3" face="Arial"> <b>Welcome:</b></font>
<br>
<font size="1" face="Arial">We have changed our look to provide a more efficient flow of navigation. Please be patient while we continue to get all of our features back up and running. </font>
<br><br>
<font size="3" face="Arial"> <b>New:</b></font>
<br>
<font size="1" face="Arial">
Forums: A complete message community featuring private massaging, threaded discussions, and more.
<br>
Resources: Useful links, forms, information, and services pertaining to the Libertarian Party.
<br>
Candidate Center: A variety of information on party candidates and information for future elections.
<br><br>
<font size="3" face="Arial"> <b>Messages:</b></font>
<br>
<font size="1" face="Arial">Simon McClure is running for Governor of WV in 2004 elections. We will keep you posted on the campaign.
<br>
Appalachian School of Law now has a Libertarian Party Student organization, the LSASL. </font>
<br><br>
<font size="3" face="Arial"> <b>Technical:</b></font>
<br>
<font size="1" face="Arial">Site is best viewed at 1024X768 Screen Resolution
<br>
Site is utilizing CSS, PHP, and HTML - Please update browser if needed to versions exceeding IE4 and NS4. </font>

</font></div>

</td>
</tr>

</table></center>

</body>
</html>

<--end HTML-->


@media screen, print, projection
{

.topper {border : 0px darkBlue solid;}

#top { position : left;
width:750px;
height:102px;
margin:0px auto;
text-align:left;
padding:0px;
background-color:#eee;
z-index : 1;
}

#top {background-color:rgb(255,255,255);
color:rgb(0,0,0);}

.body {border : 1px darkBlue solid;}

#content { position : ;
width:750px;
margin:0px auto;
text-align:left;
padding:15px;
background-color:#eee;
z-index : 2;
}

#content {background-color:rgb(255,255,255);
color:rgb(0,0,0);}

}

philote · Nov 28, 2003

I think you may be misunderstanding stylesheets, or I'm misunderstanding your question. Your css contains how the content of your page is displayed and laid out. Normally, you'd put all the layout in an external stylesheet, like your .css file. You however have some style information in the stylesheet and some as a style tag in the html, which is also fine but not as easy to maintain. However, you also have some html attributes that could be put into the style sheet, like the background, text, and link colors in your body tag. Since you've already defined some styles for the links in your style tag, you should put the colors for links also in the style tag. And better yet, put everything in you style tag in the external .css file. That way, when you need to change the colors of your links you can just edit the .css file and leave your html alone. Also, you have some redundancy in your .css file. Here's how I propose your code should look:

Code:

<!--HTML STUFF-->
<html>

<head>
  <title>LSWV</title>
  <meta name=&quot;generator&quot; content=&quot;&quot;>
  <meta name=&quot;description&quot; content=&quot;&quot;>
  <meta name=&quot;keywords&quot; content=&quot;&quot;>

<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; title=&quot;Body&quot; href=&quot;main.css&quot;/>
</head>
<body>
<center>

<div class=&quot;topper&quot; id=&quot;top&quot;>
<img src=&quot;Mainlogo.gif&quot; id=&quot;top-img&quot; alt=&quot;&quot;>
<div id=&quot;navbar&quot;>.:: home ::. .:: general ::. .:: forums ::. .:: mail ::. .:: articles ::. .:: candidate center ::. .:: resources ::. </div>
</div>

    
<div class=&quot;body&quot; id=&quot;content&quot;>
<h3> <b>Welcome:</b></h3>
<br>
We have changed our look to provide a more efficient flow of navigation.  Please be patient while we continue to get all of our features back up and running.
<br><br>
<h3> <b>New:</b></h3>
<br>
Forums:  A complete message community featuring private massaging, threaded discussions, and more.
<br>
Resources: Useful links, forms, information, and services pertaining to the Libertarian Party.
<br>
Candidate Center: A variety of information on party candidates and information for future elections.
<br><br>
<h3> <b>Messages:</b></h3>
<br>
Simon McClure is running for Governor of WV in 2004 elections.  We will keep you posted on the campaign.
<br>
Appalachian School of Law now has a Libertarian Party Student organization, the LSASL.
<br><br>
<h3> <b>Technical:</b></h3>
<br>
Site is best viewed at 1024X768 Screen Resolution
<br>
Site is utilizing CSS, PHP, and HTML - Please update browser if needed to versions exceeding IE4 and NS4.
</div>
    </td>
  </tr>

</table></center>




</body>
</html>

<--end HTML-->

<!--Start CSS-->
@media screen, print, projection
{

.topper {border : 0px darkBlue solid;}

body{
    background-color= #FFFFFF; 
    color: #000000;
    font-family: Arial;
    font-size: small;}

A:link {text-decoration: none; color: #000080;}
A:visited {text-decoration: none; color: #000080;}
A:hover {text-decoration: none; color:#FF0000}

#top{    
    position  : left;
    width:750px;
    height:102px;
    margin:0px auto;
    text-align:left;
    padding:0px;
    background-color:#eee;
    z-index  : 1;
    color:rgb(0,0,0);
}
#top-img{
    width: 202px; 
    height; 102px;
    border: 0px;
}

.body {border : 1px darkBlue solid;}

#content {
    position: ??you need something here??;
    width:750px;
    margin:0px auto;
    text-align:left;
    padding:15px;
    background-color:#eee;
    z-index: 2;
    background-color:rgb(255,255,255);
    color:rgb(0,0,0);}
}

#navbar{
    text-align: right;
    color: #000080;
}

h3{font-size: large;}

Now, it's not perfect, but I hope it gets the idea across. Notice how I took out all the <font> tags since you can specify those in the style sheet. Pretty much the only style information I left in the html is the <b> tags, which could probably also be taken out. Also, if you haven't yet, find a good css reference and look through a tutorial (

http://www.w3schools.com/css/css_intro.asp

is decent).

Kevin
A+, Network+, MCP

LSWV · Nov 28, 2003

That help, plus gave me alot more understanding on the use of CSS...

One more question, how can I add scrolling into the CSS so only the content inside the CSS scrolls and not the whole page?

Thanks again.

philote · Nov 28, 2003

First off, there's no "content inside the CSS", just style information. If you need a portion of the page to scroll, like text in a div, then give that div an id or a class, like so:

Code:

<div class=&quot;scroll&quot;>...</div>

And in the style sheet you'd have:

Code:

div.scroll{overflow: scroll;}

Kevin
A+, Network+, MCP

Foamcow · Dec 1, 2003

Style sheets define the way your CONTENT is STYLED.

They do not contain any content themselves, but are a set of instructions to the browser on how to display things.

By keeping your content and your styling instructions seperated in this way, you can easily change the look of a site without having to alter it's content.

An example might be the use of 1 set of content and 2 stylesheets:
Stylesheet 1 : a styleshet to format the content on screen,
Stylesheet 2: a stylesheet for formatting for a printer.

It is perfectly fine to include css data information within the same document as the content. However, if you are styling more than 1 document it is more practicle to create an external stylesheet. This method means that any changes will only need to be made in 1 place to apply across the whole site.

philote · Dec 1, 2003

Oh, and regarding my last post, you may also have to specify the height and width of the div to get it to scroll and not resize.

Kevin
A+, Network+, MCP

DHays · Dec 1, 2003

You can have your links be any color or style and, in fact, have 2 different links on the same page be different styles is you use pseudo-classes.

You'll need to define your links like this:

.style1 {
background-color: transparent;
color: #000;
font-size: 100%;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

a.style1:link {
background-color: transparent;
color: #00f;
font-weight: bold;
text-decoration: underline;
}
a.style1.visited {
background-color: transparent;
color: #800080;
font-weight: bold;
text-decoration: underline;
}
a.style1:hover {
background-color: transparent;
color: #f0f;
font-weight: bold;
text-decoration: underline;
}
a.style1:active {
background-color: transparent;
color: #f00;
font-weight: bold;
text-decoration: underline overline;
}

Then use div tags to enclose the text housing your links:

<div class="style1"><a href="

http://www.yaddayadda.com"

class="style1">Your text here</a>

Create a whole new set, like the above, but substitute another name for "style1". Change the link colors in the styles:

.style2 {
background-color: transparent;
color: #000;
font-size: 100%;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

a.style2:link {
background-color: transparent;
color: #900;
font-weight: bold;
text-decoration: underline;
}
a.style1.visited {
background-color: transparent;
color: #900;
font-weight: bold;
text-decoration: underline;
}
a.style1:hover {
background-color: transparent;
color: #00f;
font-weight: bold;
text-decoration: underline;
}
a.style1:active {
background-color: transparent;
color: #ffc;
font-weight: bold;
text-decoration: underline overline;
}

And, of couse, create a new link using this style:

<div class="style2"><a href="

http://www.yaddayadda.com"

class="style2">Your text here</a>

...and you have two links on the same page with different styles. HTH

Dennis

--
Dennis Hays\HaysDesign

http://www.haysdesign.com

Dennis Hays, Publisher

http://www.DigitalSauces.com

http://www.haysdesign.com

mailto:dhays@haysdesign.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS and HTML Links -- Need Advice

LSWV

Technical User

cian

Technical User

LSWV

Technical User

LSWV

Technical User

philote

MIS

LSWV

Technical User

philote

MIS

Foamcow

Programmer

philote

MIS

DHays

Technical User

Similar threads

Part and Inventory Search

Sponsor