6

I am trying to build my website. 1. I am trying to create link in vertical direction in middle of my page; A,B,C,D however it is not working as a link, it works like a paragraph.

  1. I want to make A,B,C,D to have spaces in between them.

  2. Is there a way to make A,B,C,D links covered in circle?

/* navigation */
.navig {
    float: left;
    margin-top: 150px;
}
.navig a{
    text-decoration: none;
    color:black;
}
.navig a:hover{
    
}

.navig li{
    list-style-type: none;
    position: fixed;
    padding-top: 50x;
    line-height: 40px;
}
   
  <div class="container">
    <nav class="navig">
      <ul>
        <li><a href="http://google.com">A</a></li>
        <li><a href="http://google.com">B</a></li>
        <li><a href="http://google.com">C</a></li>
        <li><a href="http://google.com">D</a></li>
      </ul>
    </nav>
    
    

4 Answers 4

2

I think this is what you are looking for -> (View snippet behind)

  • If you want to move A,B,C,D around and create spaces in between them the best option is to use flexbox properties.
  • The links A,B,C,D were not displayed properly because you were using position:fixed on the li tags, placing them all in the same tiny space.
  • If you want to put the links inside a circle you just have to add a border and border-radius to the A tags.
  • [EDIT] display:flex on the anchor tag is setting the A,B,C,D letters perfectly in the center of the circle. I think this method is more reliable than others to achieve it.
  • [EDIT] If you would like to move the whole list around instead of having it on the leftside remember you can just apply display: flex to the .navig class and play with the justify-content and align-items properties.

CCS and HTML (HTML remained untouched)

.navig li {
    list-style-type: none;
    margin: 30px 0;
}
.navig a {
    display: flex; 
    justify-content: center; /*flex property to center horizontally*/
    align-items: center; /*flex property to center vertically*/
    width: 50px;
    height: 50px;
    border: 1px solid black;
    border-radius: 50%;
    text-decoration: none;
    color: black;
}
ul, li, a {
    margin: 0;
    padding: 0;
}
<div class="container">
    <nav class="navig">
        <ul>
            <li>
                <a href="http://google.com">
                    A
                </a>
            </li>
            <li>
                <a href="http://google.com">
                    B
                </a>
            </li>
            <li>
                <a href="http://google.com">
                    C
                </a>
            </li>
            <li>
                <a href="http://google.com">
                    D
                </a>
            </li>
        </ul>
    </nav>
</div>

3
  • Thanks!! How come my link isn't on the left side of the page?? Also why do we need to make 3 flex box? can't I just make one at .nav and work with that?
    – haneulkim
    Feb 15, 2019 at 20:37
  • Oh I can do .navig{ justify-content:left;} but how to set it relative to my main paragraph?
    – haneulkim
    Feb 15, 2019 at 20:40
  • Alright, I updated my answer and the snippet. Take a look at it. I have made it simpler this time. You indeed don't need more than 1 flex to achieve the result you are looking for. (If you ever need it you could later add more flex properties to other containers). Let me know if this is what you wanted. Feb 15, 2019 at 22:07
1

You could do something like this:

.link {
    height: 35px;
    width: 35px;
    background-color: #FFFFFF;
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    list-style-type: none;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
    display: flex;           /* establish flex container */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
}

.navig a {
    text-decoration: none;
    color: black;
}
<form>

 <div class="container">
    <nav class="navig">
      <ul>
        <div class=link>
           <li><a href="http://google.com">A</a></li>
        </div>
        <div class=link>
           <li><a href="http://google.com">B</a></li>
        </div>
        <div class=link>
           <li><a href="http://google.com">C</a></li>
        </div>
        <div class=link>
          <li><a href="http://google.com">D</a></li>
        </div>
      </ul>
    </nav>
 </div>
  
</form>

Edit: I do agree with Adrian that using Flexbox is better than just aligning items by using {text-align: center} and {vertical-align: middle}, and I have modified my answer accordingly.

0

If I understood your question correctly, you are looking to make ABCD appear as one link and also make them readable. Try this to make it appear as one link. Note: space between letters will also be clickable.

<div class="container">
    <a href="http://google.com">
        <nav class="navig">
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
            </ul>
        </nav>
    </a>
</div>

To fix your spacing issue, remove position: fixed from your .navig li group of your css. I think this is causing them to all appear in the same spot instead of give space relative to one another. Hope this helps!

0

navig is more likely a block element, so it takes up the whole width because of the list so I suggest you give it a width that corresponds to what you want or make it an inline element better still use flexbox or a grid

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.