2017-07-05 3 views
-1

Ich lerne über Freecodecamp, eine unserer Aufgaben war es, ein Portfolio zu erstellen, aber ich kann nicht die Unterstreichlinks in meinem navbar und footnote loswerden.So entfernen Sie unterstrichene Links

Text-decoration: none; hilft nicht, irgendwelche anderen Ideen?

body { 
 
    max-width: 100%; 
 
    position: relative; 
 
    overflow-x: hidden; 
 
} 
 

 
.container { 
 
    z-index: 5; 
 
    background-color: #8f8a01; 
 
    position: fixed; 
 
    top: 0; 
 
    margin: auto; 
 
    width: 100%; 
 
    box-shadow: 2px 2px 2px #888; 
 
    padding-bottom: 5px; 
 
    text-decoration: none; 
 
} 
 

 
button { 
 
    margin: 15px 0px 0px 15px; 
 
    box-shadow: 2px 2px 2px #888; 
 
    background-color: #ece2b4; 
 
    font-family: 'Rajdhani', sans-serif; 
 
    font-size: 17px; 
 
    font-weight: 800; 
 
    color: #8f8a01; 
 
} 
 

 
button:hover { 
 
    background-color: #edce00; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.about { 
 
    min-height: 380px; 
 
    margin: auto; 
 
    width: 100%; 
 
    padding: 50px 220px 70px 200px; 
 
    background-color: #ece2b4; 
 
    line-height: 50px; 
 
    text-align: left; 
 
    overflow: auto; 
 
} 
 

 
p { 
 
    padding-left: 150px; 
 
} 
 

 
.photo { 
 
    width: 200px; 
 
    heihgt: 200px; 
 
    float: right; 
 
    margin-right: 0px; 
 
    margin-left: 0px; 
 
    border-radius: 120px; 
 
    box-shadow: 2px 2px 2px #888; 
 
} 
 

 
#port { 
 
    background-color: #bdb817; 
 
    padding: 10px 10px 19px 10px; 
 
    margin: auto; 
 
    width: 100%; 
 
} 
 

 
.left-link { 
 
    margin: 25px; 
 
    padding: 5px 30px 15px 5px; 
 
} 
 

 
.right-link { 
 
    margin: 25px; 
 
    padding: 5px 30px 15px 5px; 
 
} 
 

 
#port { 
 
    align: center; 
 
} 
 

 
img:hover { 
 
    background-color: #edce00; 
 
} 
 

 
.small-img { 
 
    padding: 5px; 
 
    border: 1px solid gray; 
 
    height: 250px; 
 
    width: 300px; 
 
    max-height: 350px; 
 
    max-width: 400px; 
 
    border-radius: 15px; 
 
    box-shadow: 2px 2px 2px #888; 
 
} 
 

 
input { 
 
    text-align: center; 
 
} 
 

 
.send-btn { 
 
    margin: 10px 10px 50px 10px; 
 
} 
 

 
.ctcMe { 
 
    z-index: 1; 
 
    background-color: #ece2b4; 
 
    line-height: 30px; 
 
    margin: auto; 
 
    width: 100%; 
 
    padding-top: 2px; 
 
} 
 

 
input { 
 
    border-radius: 0px; 
 
    border-top: none; 
 
    border-left: none; 
 
    width: 200px; 
 
} 
 

 
textarea { 
 
    border-radius: 0px; 
 
    border-top: none; 
 
    border-left: none; 
 
    width: 200px; 
 
} 
 

 
.contact { 
 
    text-align: center; 
 
} 
 

 
.send-btn { 
 
    margin-left: 0%; 
 
} 
 

 
.web { 
 
    background-color: #bdb817; 
 
    padding-top: 15px; 
 
    padding-bottom: 5px; 
 
    margin: auto; 
 
    width: 100%; 
 
} 
 

 
.fc { 
 
    width: 30px; 
 
    height: 30px; 
 
} 
 

 
.coded { 
 
    background-color: #edce00; 
 
    padding-top: 15px; 
 
    padding-bottom: 5px; 
 
    margin: auto; 
 
    width: 100%; 
 
}
<body> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-2"> 
 
     <a href="#aboutbtn"> 
 
      <button class="btn btn-block"> 
 
      About</button> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <a href="#portbtn"> 
 
      <button class="btn btn-block">Portfolio</button></a> 
 
     </div> 
 

 
     <div class="col-xs-2"> 
 
     <a href="#contactbtn"> 
 
      <button class="btn btn-block">Contact</button> 
 
     </div> 
 
    </div> 
 
    <!-- close ROW --> 
 
    </div> 
 
    <!-- close HEAD --> 
 

 
    <div class="about"> 
 
    <h2 style="text-align: center"> 
 
     <a name="aboutbtn"> 
 
     ABOUT </h2></a> 
 

 
     <img src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAzEAAAAJDkwZTM5NmY4LWYwMzQtNDhmOS1hYzExLTM4YWI5NTZmMGI5ZA.jpg" alt="picture of me" class="img-responsive photo"> 
 
     <center> 
 
     <p> I am a book-lover translator, and an excellent-organised personal assistant. 
 
      <br> I help my team daily to get through the week from chaos to clarity, 
 
      <br> and I provide my colleagues with comprehensive translations and proofreading. 
 
      <br> Recently I am also a coding hobbyist and a Front-End Developer wannabe. 
 
     </p> 
 
     </center> 
 
    </div> 
 

 
    <div id="port"> 
 
    <h2 style="text-align: center"><a name="portbtn"> PORTFOLIO</a></h2> 
 
    <br> 
 
    <div class="row img-center"> 
 
     <div class="col-xs-offset-2"> 
 
     <a target="_blank" class="left-link" href "#"><img class="small-img" src="http://www.drodd.com/images15/1-12.jpg"></a> 
 
     <a target="_blank" class="left-link" href "#"><img class="small-img" src="http://www.edu.xunta.gal/centros/ceipramoncajal/?q=system/files/u2/globo2fantasia.jpg"></a> 
 
     <a target="_blank" class="left-link" href "#"><img class="small-img" src="https://rfclipart.com/image/big/67-84-40/strawberry-style-font-number-3-Download-Royalty-free-Vector-File-EPS-71206.jpg"></a> 
 
     </div> 
 
     <!-- close COL --> 
 
    </div> 
 
    <!--- close ROW --> 
 
    <br> 
 
    <div class="row img-center"> 
 
     <div class="col-xs-offset-2"> 
 

 
     <a target="_blank" class="right-link" href "#"><img class="small-img" src="http://3.bp.blogspot.com/-9cSZuRMO65M/UOYn20oxGUI/AAAAAAAALgg/zTyw-uLPkO8/s1600/number4.jpg"></a> 
 
     <a target="_blank" class="right-link" href "#"><img class="small-img" src="https://thebitterlemon.files.wordpress.com/2016/09/5.jpg?w=400"></a> 
 
     <a target="_blank" class="right-link" href "#"><img class="small-img" src="https://thumbs.dreamstime.com/z/liczby-kresk%C3%B3wki-%C5%9Bmieszny-r%C3%B3%C5%BCowy-flaming-31350873.jpg"></a> 
 
     </div> 
 
     <!--close COL --> 
 
    </div> 
 
    <!--close ROW --> 
 
    </div> 
 
    <!-- close PORT --> 
 
    <div class="ctcMe"> 
 
    <h2 style="text-align: center"> 
 
     <a name="contactbtn"> 
 
    CONTACT ME</h2></a> 
 
     <br> 
 
     <div class="row" style="margin-top: 10px;"> 
 
     <div class="col-xs-7"> 
 
      <p class="contact">If you have any requests or questions<br>I am very eager to answer them :) </p> 
 
     </div> 
 
     <!-- close COL --> 
 

 
     <div class="col-xs-2"> 
 
      <form><input type="text" placeholder="name"> 
 
      <input type="text" placeholder="e-mail addres"> 
 
      <input type="text" placeholder="phone number"> 
 
      <textarea style="text-align: center" type="text" placeholder="message"> 
 
     </textarea> 
 
      </form> 
 
      <form><button class="btn send-btn" type="mailo">SEND</button></form> 
 
      </form> 
 
     </div> 
 
     <!-- close COL --> 
 
     </div> 
 
     <!-- close ROW --> 
 

 
    </div> 
 
    <!-- close CtcMe --> 
 

 

 

 
    <div class="web"> 
 
    <center> 
 
     <p class="footnote"> 
 
     Around the web: 
 
     <br> 
 
     <a href="https://www.freecodecamp.com/broccolina"><img class="fc" src="https://yt3.ggpht.com/-bWUaHwGz7To/AAAAAAAAAAI/AAAAAAAAAAA/xEUD6X5iT2Y/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></a> 
 
     <a href="https://www.linkedin.com/in/agnieszka-kozub-209a4495/"><img class="fc" src="http://www.blitzcleaned.com/wp-content/uploads/2014/07/LI-Logo-1.png"></a> 
 
     <a href="https://github.com/Broccolina"><img class="fc" src="http://www.freeiconspng.com/uploads/github-logo-icon-0.png"></a> 
 
     <a href="https://codepen.io/Broccolina/"><img class="fc" src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Large.png"></a> 
 
     </p> 
 
    </center> 
 
    </div> 
 

 
    <div class="coded"> 
 
    <center> 
 
     <p class="footnote"> 
 
     Written and coded by 
 
     <a href="https://www.facebook.com/broccolina19"> Agnieszka Kozub </a> 
 
     </p> 
 
    </center> 
 
    </div> 
 
</body>

Antwort

0

AFAK sogar a:link { text-decoration: none } sollte genügen. Oder sogar a { text-decoration: none }. Aber in diesem letzten Fall sind sogar Anker (anders als href, z.B. <a name='bla'>Bla</a>) betroffen.

+0

Vielen Dank! – Broccolina

2

Fügen Sie folgendes zu Ihrem CSS:

a:link, a:hover { text-decoration: none; } 

Sie können es aus der Klasse entfernen .container

0

von Standard-Browser-Stil a Tag-Text unterstrichen,

wählen Sie dieses Element zu entfernen und text-decoration-line: none;

a { 
    text-decoration-line: none !important; 
} 

besten Weg ist, zu tun, fügen Sie nicht !important, zu verwenden, um einen Klassennamen zu, dass a Tags hinzufügen z.B. wie Noline

a.noline { 
    text-decoration-line: none; 
} 

edited your code