PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, November 8, 2022

[FIXED] How can I design the HTML CSS image?

 November 08, 2022     css, html     No comments   

Issue

I'm trying to make this design:

enter image description here

What I do is this:

enter image description here

I couldn't do the round icon in the right corner of Latest and the color change from Premium to Free. Can you help me?

.body-bottom>.filter-menu>ul li {
    display: inline;
}

.body-bottom>.filter-menu>ul li a {
    padding: 15px;
    text-decoration: none;
    color: #222429;
}

.body-bottom>.filter-menu>ul li a:nth-child(2) { /* try */
    color: red;
}
<div class="body-bottom">
    <div class="filter-menu">
           <ul>
               <li><a href="">Latest</a></li>
               <li><a href="">Popular</a></li>
               <li>|</li>
               <li><a href="">Premium</a></li>
               <li><a href="">Free</a></li>
           </ul>
     </div>
</div>


Solution

.body-bottom>.filter-menu>ul li {
    display: inline;
}

.body-bottom>.filter-menu>ul li a {
    padding: 15px;
    text-decoration: none;
    color: #222429;
  position:relative;
}

.body-bottom>.filter-menu>ul li:nth-of-type(1) a::after{ /* try */
    content:'';
    width:8px;
    height:8px;
  background-color:red;
  position:absolute;
  top:12px;
  right:4px;
  border-radius:50%;
}


.body-bottom>.filter-menu>ul li:nth-of-type(4) a{ /* try */
    color: orange;
}

.body-bottom>.filter-menu>ul li:nth-of-type(5) a{ /* try */
    color: blue;
}

nth-of-type pseudo-class should be added to the <li> element since you have them listed as siblings. It won't work when you apply it to the children in this situation. I created the dot as ::after pseudo-class, so there is no additional HTML. It has position:absolute to position it according to the link (position:relative). Let me know if there is something you don't understand.



Answered By - Astw41
Answer Checked By - Marie Seifert (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing