How to make 2 styles for href links on 1 html page

Saber · 10-03-2012, 05:55 PM

So i made links in a menu going vertical like this:

Link 1
Link 2
Link 3

This is the code for it:

Code:

  <link rel="stylesheet" href="new.css">

<style type="text/css">
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:270px;
}
</style>
</head>

</body>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li class="classname"><a href="site.html">beg</a><br>
  <li class="classname"><a href="random10.html">beg1</a><br>
  <li class="classname"><a href="random10.html"><small>beg2</small></a>
</ul>

And i have put this style in new.css and this style makes the links of the menu go down.. and makes blue box for them also and it forms my site.. basicaly..

Code:

body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
          Times, serif;
    color: black; }
ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 7em;
    left: 1em;
    width: 9em }



a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#0099FF;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#5FFB17;
}

So now how to exclude this code from the first style in new.css, cuz i want to use this as Page links at the bottom of the page, so that you can change pages of couse..

Code:


	Code:
	<a href="random10.html">1</a> <a href="random10.html">2</a> <a href="random10.html">3</a>

And also i would like to ask you, if you can tell me how to add new style to the page links, but to be similar to the style code of the menus:
1. The numbers 1 | 2 | 3 |4 etc to have blue backgrounds
2. The numbers to be colored with white but if you are on number 3 , the number 3 to be colored with black on blue background instead white on blue background so that you can make difference on which page you are.

jamaks · 10-03-2012, 06:48 PM

Hi, easiest way to change link properties is to assign them according to the division that they will be used in. For instance if your divisions were called nav and footer

Code:

#nav a:link{rules;}
#nav a:visited{rules;}
#nav a:hover{rules;}
#footer a:link{new:}
#footer a:visited{new;}
#footer a:hover{new;}

One question, in your example why are you closing the body tag and then trying to re-open it?

Code:

</style>
</head>

</body>

<body>

You have to include your visible page coding within the opening and closing body tags. Jim

Saber · 10-03-2012, 08:22 PM

I'm sorry i don't undarstand i'm not advanced as you.. In my case how can footer or nav help me.. can you please give me example with the code i have given.

Xherdas · 10-03-2012, 08:33 PM

Unfortunately I do not have time to write it all down for you, I am leaving the office.
You need to read about CSS id and class.
http://www.w3schools.com/css/css_id_class.asp

Let us know if you havee trouble understanding the concept of id's and classes.

Good luck!

jamaks · 10-03-2012, 10:48 PM

Hi, a simple web page would consist of several divisions and for an example

Code:

<html>
<head>
<title>My First Web Page</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<div id="container">
		<div id="header">
			<h1>First Web Page</h1>
		</div>
		<div id="holder">
			<div id="content">
				<p>My first paragraph.</p>
				<p>My second paragraph.</p>
				<p>Okay, You get the idea.</p>
			</div>
			<div id="navigation">
				<a href="#">Link One</a>
			</div>
		</div>
		<div id="footer"
			<p>&copy; 2012 My first website</p>
		</div>
	</div>
</body>
</html>

Note how your document has a head section. This is where you give instruction to the browser regarding the type of coding used and links to an external style sheet. After the head comes the body section and all of the content you wish to display comes between the <body> opening tag and the </body> closing tag. The code is for a two column layout with header and footer.
The div named container holds all the page structure starting with the header and working down see how each section is opened and then closed when it has done it's task. If you follow each opening tag vertically down the page you can determine when it opens what it contains and when it closes. Not the best explanation but you can see how the page is structured.
If you wish you can copy the code given above and the code below and if you place them within the same folder so the html links to the stylesheet you should gain a clearer understanding. Name the html test.html and the css style.css

Code:

body{font-family:Georgia, "Times New Roman", Times, serif;text-align:center;}
*{margin:0;padding:0;border:0;}
#container{width:800px;margin:auto;}
#header{width:100%;}
h1{font-size:32px;line-height:80px;}
#holder{width:100%;}
#content{float:right;width:639px;}
#content p{text-align:left;font-size:1em;line-height:1.5em;margin:1em;}
#navigation{float:left;width:160px;}
#navigation a{text-align:left;display:block;margin:1em;}
#navigation a:link{color:#0000FF;}
#navigation a:hover{color:#800080;}
#navigation a:hover{color:#FF0000;}
#footer{width:100%;}

Hope this points you in the right direction. When you see how this works you could then replace the code with your own. Jim

Saber · 10-03-2012, 11:40 PM

Quote:

Originally Posted by Xherdas

Unfortunately I do not have time to write it all down for you, I am leaving the office.
You need to read about CSS id and class.
http://www.w3schools.com/css/css_id_class.asp

Let us know if you havee trouble understanding the concept of id's and classes.

Good luck!

Thank you, this helped me alot to undarstand my problem, but now i encounter other 2 problems.

So i made my menu like this:

Code:

  <li  id="para1"><a href="site.html" >Begining</a><br>

And the style in new.css to start with this

Code:

#para1

And i made the page links with para2 instead with para1 and it works, my only problem is that i use:

Code:

<p id="para2"><a href="random10.html">441</a>   
<p id="para2"><a href="random10.html">441</a>  
<p id="para2"><a href="random10.html">441</a>

And the problem is that it aligns my pages not in order but in new row every page.. cuz of the <p> - paragraph... What can i use instead of "p" in this combination so that my Page links stay like that:
1 , 2 , 3 , 4 , 5 , 6

and like that cuz of the paragraph

1
2
3
4
etc

Code:

<p id="para2"><a href="random10.html">441</a>   
<p id="para2"><a href="random10.html">441</a>  
<p id="para2"><a href="random10.html">441</a>

And my other problem:
I use this style, cuz it's the style of my site, but it needs remodeling only for the page links and i don't know how to fix it. This is the code now:

Code:

#para2
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#0099FF;
width:15px;
text-align:center;
padding:1px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#5FFB17;
}

And from this i tell how wide should the background blue color be and the problem is that if it's 30px it covers 444 page niceley but if i put the page number 4 it is ugly.. cuz it has too much blue in the back enough to cover 3 digets, and i'm puting only 1 and it's just ugly ... can you give me an exit from this pickle, something like the background to be the size of the digit, or 2 digits or 3 digits, to take it auto i hope you undarstand me.

Code:

width:15px;

@jamaks thanks to you too man, this is also very useful, but to start all over again when i am at 99% done with my site it's not in my power for the moment, although with the way you start it will be better.. but maybe if i start from the scratch some day. 10x anyway.

D34th Maker · 10-04-2012, 01:50 AM

Quote:

Originally Posted by Saber

Thank you, this helped me alot to undarstand my problem, but now i encounter other 2 problems.

So i made my menu like this:

Code:

  <li  id="para1"><a href="site.html" >Begining</a><br>

And the style in new.css to start with this

Code:

#para1

And i made the page links with para2 instead with para1 and it works, my only problem is that i use:

Code:

<p id="para2"><a href="random10.html">441</a>   
<p id="para2"><a href="random10.html">441</a>  
<p id="para2"><a href="random10.html">441</a>

And the problem is that it aligns my pages not in order but in new row every page.. cuz of the <p> - paragraph... What can i use instead of "p" in this combination so that my Page links stay like that:
1 , 2 , 3 , 4 , 5 , 6

and like that cuz of the paragraph

1
2
3
4
etc

Code:

<p id="para2"><a href="random10.html">441</a>   
<p id="para2"><a href="random10.html">441</a>  
<p id="para2"><a href="random10.html">441</a>

And my other problem:
I use this style, cuz it's the style of my site, but it needs remodeling only for the page links and i don't know how to fix it. This is the code now:

Code:

#para2
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#0099FF;
width:15px;
text-align:center;
padding:1px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#5FFB17;
}

And from this i tell how wide should the background blue color be and the problem is that if it's 30px it covers 444 page niceley but if i put the page number 4 it is ugly.. cuz it has too much blue in the back enough to cover 3 digets, and i'm puting only 1 and it's just ugly ... can you give me an exit from this pickle, something like the background to be the size of the digit, or 2 digits or 3 digits, to take it auto i hope you undarstand me.

Code:

width:15px;

@jamaks thanks to you too man, this is also very useful, but to start all over again when i am at 99% done with my site it's not in my power for the moment, although with the way you start it will be better.. but maybe if i start from the scratch some day. 10x anyway.

Well i read some of your post and to fix your problem with 1-4 or so of it showing like this with the <p> tag
1
2
3
4

You'll change the <p> and </p> tags to a <div> and </div> tag i believe that or you probably could just use a table with no border for it.

Saber · 10-04-2012, 02:40 AM

Can you give me an example, cuz i tried many ways and non of them worked..

jamaks · 10-04-2012, 12:13 PM

Hi, try using a single paragraph and remove the display block.

Code:

<html>
<head>
<style type="text/css">
#para2
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#0099FF;
width:15px;
text-align:center;
padding:1px;
text-decoration:none;
}
#para2 a:hover,a:active
{
background-color:#5FFB17;
}
</style>
</head>
<body>
<p id="para2"><a href="random10.html">441</a><a href="random10.html">441</a><a href="random10.html">441</a></p>
</body>
</html>

You do need some additional presentational mark-up but this aligns you in the right direction at least. You also need to tell the a:hover which class it belongs to. Jim

Saber · 10-04-2012, 03:25 PM

Thanks man !