Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    36
    Thanks
    10
    Thanked 0 Times in 0 Posts

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

    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.
    Last edited by Saber; 10-03-2012 at 07:12 PM.

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    Scottish Borders
    Posts
    36
    Thanks
    1
    Thanked 9 Times in 9 Posts
    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

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    36
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Apr 2012
    Posts
    44
    Thanks
    0
    Thanked 14 Times in 14 Posts
    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!

  • Users who have thanked Xherdas for this post:

    Saber (10-04-2012)

  • #5
    New Coder
    Join Date
    Sep 2012
    Location
    Scottish Borders
    Posts
    36
    Thanks
    1
    Thanked 9 Times in 9 Posts
    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

  • Users who have thanked jamaks for this post:

    Saber (10-04-2012)

  • #6
    New Coder
    Join Date
    Sep 2012
    Posts
    36
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Xherdas View Post
    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.
    Last edited by Saber; 10-04-2012 at 12:42 AM.

  • #7
    New Coder
    Join Date
    Jan 2012
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Saber View Post
    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.

  • #8
    New Coder
    Join Date
    Sep 2012
    Posts
    36
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Can you give me an example, cuz i tried many ways and non of them worked..

  • #9
    New Coder
    Join Date
    Sep 2012
    Location
    Scottish Borders
    Posts
    36
    Thanks
    1
    Thanked 9 Times in 9 Posts
    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
    Last edited by jamaks; 10-04-2012 at 01:23 PM. Reason: Additional info

  • Users who have thanked jamaks for this post:

    Saber (10-04-2012)

  • #10
    New Coder
    Join Date
    Sep 2012
    Posts
    36
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thanks man !


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •