Jump to content

Border around link?

eduard

By eduard
in CSS

 Share

Recommended Posts

eduard Devoted Member

eduard

Posted
  • Author
Posted (edited)
How do I add a border to a link? (I've tried many times!)Just: #'link' {border:}
I got the borders, but NOT in the color as I want (solid grey)? When I hover them it works fine, but not when you see for the first time my website (www.website2013.site.net)? <!DOCTYPE html><html><head><!-- saved from url=(0022)http://internet.e-mail --><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Eduard Lid</title> <link rel="stylesheet" type="text/css" href="ex1.css"><link rel="stylesheet" href="panning-slideshow.css"><link rel="stylesheet" href="bsa.css" type="text/css" media="screen"><script src="jquery-latest.js"></script><script src="jquery_002.js"></script><script src="jquery.js"></script><script src="image-rotator.js"></script><script src="bsa.js" async="" type="text/javascript"></script><script async="async" src="s_3a3793f622db4a9dea3bfa355c5b2441.js" id="_bsap_js_3a3793f622db4a9dea3bfa355c5b2441" type="text/javascript"></script><style id="bsa_css" type="text/css">.one{position:relative}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative}.one .bsa_it_ad a{text-decoration:none}.one .bsa_it_ad a:hover{text-decoration:none}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic}.style1{color: #00FF00;}.style2{text-align: center;}.style3{color: #000000;font-size: large;}.style4{color: #1E90FF;font-size: xx-large;}</style></head> <body> <div id="container"> <div class="style2"> <br class="style1"><br class="style1"><h1> <span class="style4" lang="en-gb">EduardLid Web Design</span></h1><br class="style1"> <br></div><div id="window"><ul style="top: -350px; left: -960px;" id="slideshow"><li class="box1"><img src="tiger.jpg" alt="Tiger"></li><li class="box2"><img src="macaw.jpg" alt="Macaw"></li><li class="box3"><img src="bald-eagle.jpg" alt="Bald Eagle"></li><li class="box4"><img src="panda.jpg" alt="Panda"></li></ul></div> <div id="bottom"> <ul class="links"><li><a href="american.html">More</a></li><li><a href="spanish.html">Más</a></li><li><a href="portfolio.html">Portfolio</a></li></ul> <p id="copyright">Copyright © 2013</p> <a href="http://ar.linkedin.com/in/eduardlid"><img id="rot" src="http://www.linkedin.com/img/webpromo/btn_viewmy_120x33_es_ES.png?locale=" width="120" height="33" border="0" alt="Ver el perfil de Eduard Lid en LinkedIn"</image>* </a> </div> </div> </body></html> * { margin:0; padding:0; list-style-type:none;} body{ font: bold 15px arial,geneva,SunSans-Regular,sans-serif; background-color:#000000;} #container {width:1000px;margin-left:auto;margin-right:auto;} .links a:link{display:block;border:2px solid blue;font-weight:bold;color:#000000;width:120px;text-align:center;padding:4px;text-decoration:none;background-color:#1E90FF;;}.links a:hover{display:block;font-weight:bold;color:#FFFFFF;width:120px;text-align:center;padding:4px;text-decoration:none;background-color:#87CEEB;} #copyright { top:40px; float:right; font-size:10px; color:#6495ED;} #rot {margin-top:5%;transform:rotate(-30deg);-ms-transform:rotate(-30deg); /* IE 9 */-moz-transform:rotate(-30deg); /* Firefox */-webkit-transform:rotate(-30deg); /* Safari and Chrome */-o-transform:rotate(-30deg); /* Opera */} Edited by eduardlid
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
So you looked up the tutorial and they say to just add a border you just use border: ? really? it said that! nothing about width, color, type of border., really, i think not, look it up properly and stop wasting our time.
Stop wasting MY time by those RIDICULOUS answers please?
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
I got the borders, but NOT in the color as I want (solid grey)? When I hover them it works fine, but not when you see for the first time my website (www.website2013.site.net)? <!DOCTYPE html><html><head><!-- saved from url=(0022)http://internet.e-mail --><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Eduard Lid</title> <link rel="stylesheet" type="text/css" href="ex1.css"><link rel="stylesheet" href="panning-slideshow.css"><link rel="stylesheet" href="bsa.css" type="text/css" media="screen"><script src="jquery-latest.js"></script><script src="jquery_002.js"></script><script src="jquery.js"></script><script src="image-rotator.js"></script><script src="bsa.js" async="" type="text/javascript"></script><script async="async" src="s_3a3793f622db4a9dea3bfa355c5b2441.js" id="_bsap_js_3a3793f622db4a9dea3bfa355c5b2441" type="text/javascript"></script><style id="bsa_css" type="text/css">.one{position:relative}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative}.one .bsa_it_ad a{text-decoration:none}.one .bsa_it_ad a:hover{text-decoration:none}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic}.style1{color: #00FF00;}.style2{text-align: center;}.style3{color: #000000;font-size: large;}.style4{color: #1E90FF;font-size: xx-large;}</style></head> <body> <div id="container"> <div class="style2"> <br class="style1"><br class="style1"><h1> <span class="style4" lang="en-gb">EduardLid Web Design</span></h1><br class="style1"> <br></div><div id="window"><ul style="top: -350px; left: -960px;" id="slideshow"><li class="box1"><img src="tiger.jpg" alt="Tiger"></li><li class="box2"><img src="macaw.jpg" alt="Macaw"></li><li class="box3"><img src="bald-eagle.jpg" alt="Bald Eagle"></li><li class="box4"><img src="panda.jpg" alt="Panda"></li></ul></div> <div id="bottom"> <ul class="links"><li><a href="american.html">More</a></li><li><a href="spanish.html">Más</a></li><li><a href="portfolio.html">Portfolio</a></li></ul> <p id="copyright">Copyright © 2013</p> <a href="http://ar.linkedin.com/in/eduardlid"><img id="rot" src="http://www.linkedin.com/img/webpromo/btn_viewmy_120x33_es_ES.png?locale=" width="120" height="33" border="0" alt="Ver el perfil de Eduard Lid en LinkedIn"</image>* </a> </div> </div> </body></html> * { margin:0; padding:0; list-style-type:none;} body{ font: bold 15px arial,geneva,SunSans-Regular,sans-serif; background-color:#000000;} #container {width:1000px;margin-left:auto;margin-right:auto;} .links a:link{display:block;border:2px solid blue;font-weight:bold;color:#000000;width:120px;text-align:center;padding:4px;text-decoration:none;background-color:#1E90FF;;}.links a:hover{display:block;font-weight:bold;color:#FFFFFF;width:120px;text-align:center;padding:4px;text-decoration:none;background-color:#87CEEB;} #copyright { top:40px; float:right; font-size:10px; color:#6495ED;} #rot {margin-top:5%;transform:rotate(-30deg);-ms-transform:rotate(-30deg); /* IE 9 */-moz-transform:rotate(-30deg); /* Firefox */-webkit-transform:rotate(-30deg); /* Safari and Chrome */-o-transform:rotate(-30deg); /* Opera */}
Is it possible that the css is 'overruled' by the html?
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Stop wasting OUR time, by posting such simple styling that you should easily be able to pick up from the tutorials. THIS Just: #'link' {border:} IS nothing like what is used to apply to any styling to you page, you should be embarrassed by even posting such a code, it does not relate to class, or pseudo class so as to apply styling, the declaration is totally wrong as mentioned, it just shows you have not trying, and gone for easy fix once again, so you can copy and paste again without doing anything, or learning anything. P.S you again messed up the css again, so once again if we did provide solution it probably won't work anyway. VALIDATION RING A BELL! AGAIN.

Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
Stop wasting OUR time, by posting such simple styling that you should easily be able to pick up from the tutorials. THIS Just: #'link' {border:} IS nothing like what is used to apply to any styling to you page, you should be embarrassed by even posting such a code, it does not relate to class, or pseudo class so as to apply styling, the declaration is totally wrong as mentioned, it just shows you have not trying, and gone for easy fix once again, so you can copy and paste again without doing anything, or learning anything. P.S you again messed up the css again, so once again if we did provide solution it probably won't work anyway. VALIDATION RING A BELL! AGAIN.
For you SIMPLE, for me NOT! May I?
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
Stop wasting OUR time, by posting such simple styling that you should easily be able to pick up from the tutorials. THIS Just: #'link' {border:} IS nothing like what is used to apply to any styling to you page, you should be embarrassed by even posting such a code, it does not relate to class, or pseudo class so as to apply styling, the declaration is totally wrong as mentioned, it just shows you have not trying, and gone for easy fix once again, so you can copy and paste again without doing anything, or learning anything. P.S you again messed up the css again, so once again if we did provide solution it probably won't work anyway. VALIDATION RING A BELL! AGAIN.
Put the copy and paste in your ######!
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted

How is that possible? (after validating!)My html doc has errors, but not related to my links!My css file has no errors?

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted
Put the copy and paste in your ######!
Sorry! it already has residence on your site, or should i say w3schools forums site, since that where most of is copied from.
My css file has no errors?
Well the code you posted is not the same, as theres definitly an error, so again, how can we help if you give incorrect code to work with, all the time.
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
Sorry! it already has residence on your site, or should i say w3schools forums site, since that where most of is copied from. Well the code you posted is not the same, as theres definitly an error, so again, how can we help if you give incorrect code to work with, all the time.
If I should send you the right code why should I send you a question?How do I obtain the right code?Answer: by trying (copy and paste not possible!) P. s. I use this correct code, problem remains!
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

You are trying to tell me that you actually got of your arse, read the tutorials, expeimented and got it work yourself! bloody amazing, and yes it wouldn't be that simple if you did not actually do any of those things yourself in the first place, instead of just posting and then copy and pasting the corrected code all the time.

Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
You are trying to tell me that you actually got of your arse, read the tutorials, expeimented and got it work yourself! bloody amazing, and yes it wouldn't be that simple if you did not actually do any of those things yourself in the first place, instead of just posting and then copy and pasting the corrected code all the time.
I already wrote my reply above!
Link to comment
Share on other sites
callumacrae Newbie

callumacrae

Posted
Posted (edited)
How do I add a border to a link? (I've tried many times!)Just: #'link' {border:}
You have written: 
border:2px solid blue;

It should be:

border:2px blue solid;

What??? stop talking double dutch. numpty.
Either help, or don't. You're making a fool of yourself. Edited by callumacrae
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

First offYou have written: 

border:2px solid blue;

It should be:

border:2px blue solid;

WRONG! If you want to help, try to get your facts straight otherwise your making a fool of your self arsehole. And i'm sorry but you seem to have the impression that i really care what you think, i can tell you that i don't!.

Edited by Ingolme
Disrespect towards other members
Link to comment
Share on other sites
callumacrae Newbie

callumacrae

Posted
Posted
First offYou have written: 
border:2px solid blue;

It should be:

border:2px blue solid;

WRONG! If you want to help, try to get your facts straight otherwise your making a fool of your self arsehole. And i'm sorry but you seem to have the impression that i really care what you think, i can tell you that i don't!.

Ah, my bad. I didn't test whether the first code sample actually worked, so I assumed that it must be the other way round and tested that. They both work for me. OP: What specifically isn't working, and in what browser? It's working for me.
Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...