would like to know how to position list with links next to images with html and css

Asked

Viewed 37 times

-1

body{
    background-image:url("backgorund.png");
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-size: 800px;
    position:middle;
}

#nome{
    font-size:35px;
    left:60px;
    top:10px;
    position:relative;
}


.imagens{
    list-style-type: none;
    width: 100px;
    height: 100px;
    display: inline-block;
    position: relative;
    position: middle; 
}


.links{
    color: black;
    width: 100px;
    height: 100px;
    display: inline-block;
    list-style: none;
    position: relative;
    position: middle;
    left: 80px;
}
<doctype>
    <html>
        <head>
            <title>Cartão visitas gabriel</title>
            <meta charset="utf8">
                
          <link rel="stylesheet" href="cartão.css">
        </head>    
        
        <body>
         <div id="nome">marcos gabriel</div> 
      
      

      <div class="imagens" align='middle'> 
          <li><img src="insta.png" alt="instagram" height="70"></li>
          <li><img src="Twitter.png" alt="facebook" height="70"></li>
          <li><img src="Youtube.png" alt="Youtube" height="70"></li>
       </div>

        <div class="link">
           <ul align='middle'>
                <li><a href="https://www.instagram.com/gabrioso__/">@gabrioso__</a></li>
                <li><a href="https://www.facebook.com/profile.php?id=100013408385228">Marcos Gabriel</a></li>
                <li><a href="https://www.youtube.com/channel/UC3k8K1m5UsAn4lGLg6fppfw">gabrioso memes</a></li>
            </ul>
        </div>

        </body>
    </html>

html css ui

  • your question is not very clear, could give us more information on how you want the links to appear on your page?

1 answer

1


Your question was not very clear, but I think you want to leave the social network links horizontal along with your name and each respective link.

Your Html

<ul class="links">
  <li>
    <a href="https://www.instagram.com/gabrioso__/">
      <img src="https://img.icons8.com/color/48/000000/youtube--v1.png"/>
      <span>@gabrioso__</span>
    </a>
  </li>
  <li>
    <a href="https://www.facebook.com/profile.php?id=100013408385228">
      <img src="https://img.icons8.com/color/50/000000/facebook.png"/>
      <span>Marcos Gabriel</span>
    </a>
 </li>
  <li>
    <a href="https://www.youtube.com/channel/UC3k8K1m5UsAn4lGLg6fppfw">
      <img src="https://img.icons8.com/fluent/48/000000/instagram-new.png"/>
      <span>gabrioso memes</span>
    </a>
  </li>
</ul>

Your CSS

.links {
  list-style-type: none;
  flex: grid;
  display: flex;
}

a {
  text-decoration: none;
  font-family: 'Arial';
  font-size: 10px;
}

Follow the example of the above working code: link

  • 1

    young man, thank you very much :)

Browser other questions tagged html css ui

You are not signed in. Login or sign up in order to post.