Question 240783 in Html Question posted in
Some basic documentation can be found here.

Html – How exactly can we style different <li>elements (within the same ul) separately?

I am trying to clone the apple website using just html and css for practice. I have not learnt any javascript yet. For the navigation bar, there would be mostly text links and one link which would be the apple logo.

Here’s my html code:

<body>
    <nav>  
        <ul>
            <li><a href="#home"><img class="logo" src="homelogo.png" alt=""></a></li>
            <li><a class="navtxt" href="#Store">Store</a></li>
            <li><a class="navtxt" href="#Mac">Mac</a></li>
            <li><a class="navtxt" href="#iPad">iPad</a></li>
            <li><a class="navtxt" href="iPhone">iPhone</a></li>
            <li><a class="navtxt" href="#Watch">Watch</a></li>
            <li><a class="navtxt" href="#Vision">Vision</a></li>
            <li><a class="navtxt" href="#AirPods">AirPods</a></li>
            <li><a class="navtxt" href="#TV & Home">TV & Home</a></li>
            <li><a class="navtxt" href="#Entertainment">Entertainment</a></li>
            <li><a class="navtxt" href="#Accessories">Accessories</a></li>
            <li><a class="navtxt" href="#Support">Support</a></li>
        </ul>
        
    </nav>
    
</body>
</html>

Here’s my CSS code:

*{
    margin: 0;
    padding: 0;
}
body{
    background-color:whitesmoke;
}
nav{
    background-color: white;
    height: 45px;
}
nav ul{
    text-align: center;
}
nav ul li{
    display: inline;
    padding-right: 33px;
}

.navtxt{
    text-decoration: none;
    color: rgb(90, 90, 90);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-top: 2px;
}
.logo{
    height: 26px;
    width: 26px;
    margin-top: 0px;
}

When I try to change the margins/padding (top) of the apple logo image, even the text elements of the list end up moving downwards.

screenshot of the nav bar created

When I increase the top margin for the image, even the text moves downwards:
screenshot after increasing margin-top to 12px

How can I style the image and text elements within the same list separately?

Tags:

2

Answers


  1. 0

    You can apply styles to the first <li> like this:

    nav>ul>li:first-child {...}

    Or you can apply styles to any image in the list like this. I’d suggest that what you really need is to align the image with the centre line (middle) of the text, rather than the text baseline (the default).

    nav>ul>li>img {
  vertical-align: middle;
}
    Login or Signup to reply.
  2. 0

    There are many solutions to your problem. For example you could try to use Flexbox for aligning the nav content.

    In the following snippet i set your nav ul to display flex, let Flexbox handle the alignment with align-items and justify-content and applied your 45px nav height here to give Flexbox enough space to do its thing. I also deleted some unnecessary styles.

    (I used a font icon in the example, but it should work with your image the same way.)

    * {
  margin: 0;
  padding: 0;
}

body {
  background-color: whitesmoke;
}

nav {
  background-color: white;
}

nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
}

nav ul li {
  display: inline;
  padding-right: 33px;
}

.navtxt {
  text-decoration: none;
  color: rgb(90, 90, 90);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.logo {
  height: 26px;
  width: 26px;
}
    <body>
  <nav>
    <ul>
      <li></li>
      <li><a class="navtxt" href="#Store">Store</a></li>
      <li><a class="navtxt" href="#Mac">Mac</a></li>
      <li><a class="navtxt" href="#iPad">iPad</a></li>
      <li><a class="navtxt" href="iPhone">iPhone</a></li>
      <li><a class="navtxt" href="#Watch">Watch</a></li>
      <li><a class="navtxt" href="#Vision">Vision</a></li>
      <li><a class="navtxt" href="#AirPods">AirPods</a></li>
      <li><a class="navtxt" href="#TV & Home">TV & Home</a></li>
      <li><a class="navtxt" href="#Entertainment">Entertainment</a></li>
      <li><a class="navtxt" href="#Accessories">Accessories</a></li>
      <li><a class="navtxt" href="#Support">Support</a></li>
    </ul>
  </nav>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search