0

Long story short I was trying to create a navigation bar but it doesn't quite seem to work as I would like it to. The problem is that if I was to add an image, for example a logo, to my ultimately astonishing navigation bar, the height and position of the anchor would slightly alter. The anchors with text only are of one size, the ones with images are a bit different. I have tried to set the height for the anchor but that doesn't seem to help.

If I have confused you too much, here is the code:

<head>
    <title></title>
    
    <style type="text/css">
        body {
            margin: 0 auto;
            font-family: Helvetica, Arial, sans-serif;
        }
        
        #topbar-navigation {
            width: 60%;
            margin: 0 auto;
            height: 40px;
        }
        
        #topbar-navigation ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        #topbar-navigation li {
            float: left;
        }
        
        #topbar-navigation li a {
            display: block;
            text-align: center;
            padding: 14px 14px;
            text-decoration: none;
            margin: 10px;

            background-color: #BFCDE3;

        }
        
        .topbar-border {
            float: left;
            border-left: 1px #CCCCCC solid;
            height: auto;
            margin: 0;
        }
        
        .topbar-text {
            font-weight: bold;
            font-size: 93%;
            position: relative;
            top: -2px;
        }
        
        #topbar-logo {
            float: left;
            height: 40px;
        }
        
        #logo {
            height: 32px;
            top: -7px;
            position: relative;
        }
        
        #signin-img {
            height: 25px;
            margin-right: 10px;
            margin-top: -5px;
        }
        
        #signin-span {
            position: relative;
            top: -7px;
            margin-right: 15px;
            font-weight: bold;
            font-size: 93%;
        }
        
        #bell-img {
            height: 25px;
            top: -5px;
            position: relative;
        }
        
        #more-span {
            position: relative;
            top: -5px;
            font-weight: bold;
            font-size: 93%;
            height: 40px;
        }
        
        #arrow-down-img {
            margin-left: 5px;       
            top: 10px;
            position: absolute;
            max-width: .9%;
            opacity: .6;
        }
    
    </style>
</head>

<body>
    <div id="topbar-navigation"> 
        <ul>
            <li id="topbar-logo"><a href=""><img id="logo" src="img/logo.png" alt=""></img></a></li>
            <li class="topbar-border" ><a href=""><img id="signin-img" src="img/signin.png" alt=""></img><span id="signin-span">Sign in</span></a></li>
            <li class="topbar-border"><a href=""><img id="bell-img" src="img/bell.png"></img></a></li>
            <li class="topbar-border topbar-text"><a href="">News</a></li>
            <li class="topbar-border topbar-text"><a href="">Sport</a></li>
            <li class="topbar-border topbar-text"><a href="">Weather</a></li>
            <li class="topbar-border topbar-text"><a href="">iPlayer</a></li>
            <li class="topbar-border topbar-text"><a href="">TV</a></li>
            <li class="topbar-border topbar-text"><a href="">Radio</a></li>
            <li class="topbar-border"><a href=""><span id="more-span">More</span><img  id="arrow-down-img" src="img/arrow-down.png" alt=""></img></a></li>
        </ul>
        
    </div>
    
</body>
GucciBananaKing99
  • 1,473
  • 1
  • 11
  • 31
Ciobanu Dumitru
  • 1
  • height property on inline elements like anchor or span, will not work, you need to make it inline-block or block if you want to apply the height property. – Atul Rajput Apr 28 '21 at 14:31
  • yes, I've done that. #topbar-navigation li a { display: block; – Ciobanu Dumitru Apr 28 '21 at 14:46
  • Being the beginner you seem to be, I would advise to stay as much as possible away from floats. https://stackoverflow.com/questions/9776840/are-floats-bad-what-should-be-used-in-its-place . I'm old enough that I had to use them in the past because there was nothing better. Many years have passed, please enjoy the wonders of modern web! – Laurent S. Apr 28 '21 at 23:20
  • Interesting read. Thank you, Sir! – Ciobanu Dumitru Apr 30 '21 at 20:44

1 Answers1

1

if you want all your items to take the same height, then get rid of floats and height in your code, and apply flex to the ul.

#topbar-navigation ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex; //add this to take them in single line
        flex-wrap: wrap; //add this to wrap the items to next line when  space not available 
    }

if you need something else, feel free to comment.

body {
            margin: 0 auto;
            font-family: Helvetica, Arial, sans-serif;
        }
        
        #topbar-navigation {
            width: 60%;
            margin: 0 auto;
        }
        
        #topbar-navigation ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
        }
#topbar-navigation ul li {display: flex;}
        

        #topbar-navigation li a {
            display: block;
            text-align: center;
            padding: 14px 14px;
            text-decoration: none;
            margin: 10px;

            background-color: #BFCDE3;

        }
        
        .topbar-border {
            border-left: 1px #CCCCCC solid;
            margin: 0;
        }
        
        .topbar-text {
            font-weight: bold;
            font-size: 93%;
            position: relative;
        }
        
        #topbar-logo {
            float: left;
        }
        
        #logo {

        }
        
        #signin-img {

        }
        
        #signin-span {
            position: relative;
            margin-right: 15px;
            font-weight: bold;
            font-size: 93%;
        }
        
        #bell-img {

            position: relative;
        }
        
        #more-span {
            position: relative;

            font-weight: bold;
            font-size: 93%;
        }
        
        #arrow-down-img {
            margin-left: 5px;       
            top: 10px;
            position: absolute;
            max-width: .9%;
            opacity: .6;
        }
<head>
    <title></title>
</head>

<body>
    <div id="topbar-navigation"> 
        <ul>
            <li id="topbar-logo"><a href=""><img id="logo" src="img/logo.png" alt=""></img></a></li>
            <li class="topbar-border" ><a href=""><img id="signin-img" src="img/signin.png" alt=""></img><span id="signin-span">Sign in</span></a></li>
            <li class="topbar-border"><a href=""><img id="bell-img" src="img/bell.png"></img></a></li>
            <li class="topbar-border topbar-text"><a href="">News</a></li>
            <li class="topbar-border topbar-text"><a href="">Sport</a></li>
            <li class="topbar-border topbar-text"><a href="">Weather</a></li>
            <li class="topbar-border topbar-text"><a href="">iPlayer</a></li>
            <li class="topbar-border topbar-text"><a href="">TV</a></li>
            <li class="topbar-border topbar-text"><a href="">Radio</a></li>
            <li class="topbar-border"><a href=""><span id="more-span">More</span><img  id="arrow-down-img" src="img/arrow-down.png" alt=""></img></a></li>
        </ul>
        
    </div>
    
</body>
Atul Rajput
  • 4,073
  • 2
  • 12
  • 24