dimanche 24 février 2019

How do I make my CSS border surround ONLY my link?

I have a CSS border that is around a link but it stretches all the way to left but I want it to surround only the link. My website is http://calvinhaworth.x10host.com/desktophome/. My HTML is

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Calvin Haworths Portfolio (Desktop) </title>
  <style type="text/css">
        div.cntr {
                text-align: center;
        }
        div.linkright {
                text-align: right;
                border: ridge 10px;
        }
        div.linkright:hover {
                border: 10px ridge blue;
        }
  </style>
  </head>
  <body>
        <div class = linkright> 
                <a href = "http://calvinhaworth.x10host.com/teamlife9thdesktop/">Team/Life Activities (9th grade)</a>
        </div>
        <div class = linkright>
                <a href = "http://calvinhaworth.x10host.com/biology9thdesktop/">Biology (9th Grade)</a>
        </div>
        <div class = cntr>
                <img src = "https://res.cloudinary.com/calvinhaworth/image/upload/v1550969360/LogoMakr_3X5LlB.png">
        </div>
        <div class = cntr>
                <h1>Welcome to my portfolio. Click the wrong link? Go to the <a href = "http://www.calvinhaworth.x10host.com">main page</a>. </h1>
        </div>
        <div class = cntr>
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3066.160904221107!2d-104.76233648462336!3d39.78094427944419!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x876c641a5240b78b%3A0x4166849d10c9bfd2!2sDr.+Martin+Luther+King+Jr.+Early+College!5e0!3m2!1sen!2sus!4v1547568093508" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>
  </body>
</html>



Aucun commentaire:

Enregistrer un commentaire