Bollate

HTML

[ANSWERED] html – Navigation Bar Items evenly spread

By

Nov 18, 2022 ,

Solution 1 :

I added display: flex into your ul element, with that, all the elements inside of this ul, will occupy the same space.
About the font size beign small, you are setting in the body font-size: 20px, every element that is inside your body, will inheritance that size, also, in your nav element, again you’re setting 20px, if you want bigger font size, try using a different value other than 20px

Hope it works for you!

body, html {
    width: auto;
    overflow-y: scroll;
    height: 2400px;
    margin: auto;
    padding: 0;
    overflow-x: hidden;
}
  
body{
    font-family: Baskerville, Helvetica, serif;
    font-size: 20px;
    text-align: center;
    letter-spacing: .2em;
    color: #A5A58D;
    background-image: url(file:///Users/alinasprenger/Documents/FH%20St.%20Po%CC%88lten/Interaktive%20Medien/Images/Pottery%20Website%20Background%20Blurred-1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
      
.header1{
    height: 50px;
    padding: 50px 0 5px 0;
    font-size: 41px;
    text-transform:   uppercase;
}

.cf:before,
.cf:after{
  content: "";
  display: table;
}

.cf:after{
  clear:both;
}

.cf{
  zoom:1;
}

nav{
  background: #B7B7A4;
  font-size: 20px;
  height: 42px;
}

ul, li{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;

}

ul{
  background: #B7B7A4;
  height: 42px;
  width: 100%;
}

li a{
  display: block;
  line-height: 42px;
  padding: 0 1em;
  color: #FFF1E6;
}

li a:hover{
  background: #AEAE98;
  height: 42px;
  position: relative;
}

.current, a:hover.current{
  background: #909072;
  color: #FFF1E6;
  position: relative;
  height: 42px;
}

.header2{
    display: flex;
    height: 90px;
    width: 100%;
    padding: 20% 0 0 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 50px;
    background-color: transparent;
    color: #A5A58D;
    flex-wrap: wrap;
    position: fixed;
    bottom: 20%;
}

.header3{
    font-size: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 485px;
    height: 445px;
    background-color: #A5A58D;
    color: #EDDCD2;
    flex-wrap: wrap;
    position: fixed;
    padding: 2em;
    margin-left: 5em;
    text-align: center;
    top: 1544px;
    left: 22%;
}
  
.textparagraphen1{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 485px;
    height: 445px;
    background-color: #A5A58D;
    color: #EDDCD2;
    flex-wrap: wrap;
    position: absolute;
    z-index: 2;
    padding: 15px;
    top: 239px;
    left: 22%;
    font-size: 20px;
    line-height: 23px;
}

a{
    text-decoration: none;
    font-size: 10px;
    color: #EDDCD2;
}


.textparagraphen2{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 485px;
    height: 445px;
    background-color: #A5A58D;
    color: #EDDCD2;
    flex-wrap: wrap;
    position: absolute;
    padding: 15px;
    top: 999px;
    left: 53%;
    font-size: 20px;
    line-height: 23px;
}

.textparagraphen3{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 485px;
    height: 445px;
    background-color: #A5A58D;
    color: #EDDCD2;
    flex-wrap: wrap;
        position: absolute;
        padding: 15px;
        top: 1544px;
        left: 22%;
        font-size: 20px;
        line-height: 23px;
    }

    .textparagraphen4{
        display: flex;
        flex-direction: column; 
        align-items: center;
        justify-content: center;
        width: 68.4%;
        height: 453px;
        background-color: #A5A58D;
        color: #EDDCD2;
        flex-wrap: wrap;
        padding: 15px;
        margin: 0 15% 0 15%;
        top: 255px;
        position: absolute;
        line-height: 23px;
    }

 

    .linksammlung{
        
        text-decoration: underline;
        color: #EDDCD2;
        font-size: 22px;
        text-transform:   uppercase;
        font-weight: bold;
    }


    .abbildung1{
        position: absolute;
        left: 53%;
        top: 239px;
    }
      
    .abbildung2{
        position: absolute;
        left: 10%;
        top: 784px;
    }

    .abbildung3{
        position: absolute;
        left: 53%;
        top: 1544px;
    }

    .abbildung5{
        position: absolute;
        left: 15%;
        top: 1664px;
    }

    .abbildung6{
        position: absolute;
        left: 52.6%;
        top: 1664px;
    }

    .tutorialvideo{
        position: absolute;
        text-align: center;
        width: 100%;
        height: 100%;
        top: 808px;
}

.footerContainer {
    top: 2322px;
    position: absolute;
    text-align: center;
    width: 100%;
}
  
.footer{
    width: 50%;
    margin: 0 auto;
    font-size: 25px;
    color: #A5A58D;
    text-decoration: none;
    border-right: 1px solid #A5A58D;
    padding: 0 20px;
}
  
.footer2{
    font-size: 25px;
    color: #A5A58D;
    text-decoration: none;
    padding: 0 20px;
}
<!DOCTYPE HTML>
<html lang="en"> 


<head>
    
<link rel="stylesheet" href="WS 2020 Screendesign Unterseiten.css">

<title> ALINA'S POTTERY </title>
</head>

<body>

  <div class="header1"> Alina's Pottery </div>
  
  <nav class="cf">
  <ul>
    <li><a href="home.html" title="Home" class="category">Home</a></li>
    <li class="current"><a href="pottery.html" title="Pottery" class="category">Pottery</a>
    <ul class="dropdown">
        <li><a href="general.html" title="General" class="subCategory">General</a></li>
        <li><a href="handbuilding.html" title="Hand-Building" class="subCategory">Hand-Building</a></li>
        <li><a href="potterywheel.html" title="Pottery Wheel" class="subCategory">Pottery Wheel</a></li>
        <li><a href="materials.html" title="Materials" class="subCategory">Materials</a></li>
        <li><a href="temperatures.html" title="Temperatures" class="subCategory">Temperatures</a></li>
    </ul>   
    </li>

    <li><a href="tutorials.html" title="Tutorials" class="category">Tutorials</a>
        <ul class="dropdown">
            <li><a href="viewall.html" title="View All" class="subCategory">View All</a></li>
            <li><a href="getstarted.html" title="Get Started" class="subCategory">Get Started</a></li>
            <li><a href="plates.html" title="Plates" class="subCategory">Plates</a></li>
            <li><a href="mugs.html" title="Mugs" class="subCategory">Mugs</a></li>
            <li><a href="bowls.html" title="Bowls" class="subCategory">Bowls</a></li>
        </ul>   
        </li>
    <li><a href="shop.html" title="Shop" class="category">Shop</a></li>
  </ul>
</nav>

<section class="textparagraphen1">
<div class="text2"> 
    Pottery is the process</br>
    and the products of forming objects</br>
    of desired shape with clay</br>
    and other ceramic materials,</br> 
    which are fired at high temperatures </br>
    (600-1600°C) to give them a hard,</br>
    durable form. </br>
    Major types include earthenware,</br>
    stoneware and porcelain. </br>
</br>
</br>
<a href="https://en.wikipedia.org/wiki/Pottery">https://en.wikipedia.org/wiki/Pottery</a>
</div>

</section>

<section class="textparagraphen2">
    <div class="text4">
        The most common forms of pottery </br>
        are hand-building and</br>
        pottery on a wheel.</br>
        I mainly do hand-building</br>
        with stoneware because</br>
        I love the unique look every</br>
        single piece gets.</br>
        After firing, I glaze my work</br>
        and then fire it again.</br>
        That way, you can even wash</br>
        your ceramics in the dish-washer!</br>
    </div>
</section>

<section class="textparagraphen3">
    <div class="text5">
        The result is incredibly individual</br>
        tableware that will make everybody</br>
        want to know where you got it from.</br>

        The process is not only easy,</br>
        but also so much fun!</br>
        </br>

        #potterylove
    </div>

</section>



<div class="abbildung1">
    <img src="https://images.pexels.com/photos/5567000/pexels-photo-5567000.jpeg?cs=srgb&dl=pexels-anastasia-shuraeva-5567000.jpg&fm=jpg" alt="Pottery Wheel" width="712px" height="660px">
</div>

<div class="abbildung2">
    <img src="" alt="Hand Building" width="712px" height="660px">
</div>


<div class="abbildung3">
    <img src="https://images.pexels.com/photos/5567010/pexels-photo-5567010.jpeg?cs=srgb&dl=pexels-anastasia-shuraeva-5567010.jpg&fm=jpg" alt="Pottery Pieces" width="712px" height="660px">
</div>



<div class="footerContainer">
    <a href="aboutme.html" title="About Me" class="footer">About Me</a>
    <a href="socials.html" title="Socials" class="footer"> Socials</a>
    <a href="imprint.html" title="Imprint" class="footer2">Imprint</a> 
</div>

</div>

</body>

</html>

Problem :

I am very new to html and css and I am currently struggling with my nav bar. The items should all take up the same amount of space (like in this picture screenshot of my screendesign). How do I achieve the position of my nav-bar elements? Also why is my font-size suddenly so small even though I used the same font size as in my screendesign?

body, html {
    width: auto;
    overflow-y: scroll;
    height: 2400px;
    margin: auto;
    padding: 0;
    overflow-x: hidden;
}
  
body{
    font-family: Baskerville, Helvetica, serif;
    font-size: 20px;
    text-align: center;
    letter-spacing: .2em;
    color: #A5A58D;
    background-image: url(file:///Users/alinasprenger/Documents/FH%20St.%20Po%CC%88lten/Interaktive%20Medien/Images/Pottery%20Website%20Background%20Blurred-1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
      
.header1{
    height: 50px;
    padding: 50px 0 5px 0;
    font-size: 41px;
    text-transform:   uppercase;
}

.cf:before,
.cf:after{
  content: "";
  display: table;
}

.cf:after{
  clear:both;
}

.cf{
  zoom:1;
}

nav{
  background: #B7B7A4;
  font-size: 20px;
  height: 42px;
}

ul, li{
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;

}

ul{
  background: #B7B7A4;
  height: 42px;
  width: 100%;
}

li a{
  display: block;
  line-height: 42px;
  padding: 0 1em;
  color: #FFF1E6;
}

li a:hover{
  background: #AEAE98;
  height: 42px;
  position: relative;
}

.current, a:hover.current{
  background: #909072;
  color: #FFF1E6;
  position: relative;
  height: 42px;
}

.header2{
    display: flex;
    height: 90px;
    width: 100%;
    padding: 20% 0 0 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 50px;
    background-color: transparent;
    color: #A5A58D;
    flex-wrap: wrap;
    position: fixed;
    bottom: 20%;
}

.header3{
    font-size: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 485px;
    height: 445px;
    background-color: #A5A58D;
    color: #EDDCD2;
    flex-wrap: wrap;
    position: fixed;
    padding: 2em;
    margin-left: 5em;
    text-align: center;
    top: 1544px;
    left: 22%;
}
  
.textparagraphen1{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 485px;
    height: 445px;
    background-color: #A5A58D;
    color: #EDDCD2;
    flex-wrap: wrap;
    position: absolute;
    z-index: 2;
    padding: 15px;
    top: 239px;
    left: 22%;
    font-size: 20px;
    line-height: 23px;
}

a{
    text-decoration: none;
    font-size: 10px;
    color: #EDDCD2;
}


.textparagraphen2{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 485px;
    height: 445px;
    background-color: #A5A58D;
    color: #EDDCD2;
    flex-wrap: wrap;
    position: absolute;
    padding: 15px;
    top: 999px;
    left: 53%;
    font-size: 20px;
    line-height: 23px;
}

.textparagraphen3{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 485px;
    height: 445px;
    background-color: #A5A58D;
    color: #EDDCD2;
    flex-wrap: wrap;
        position: absolute;
        padding: 15px;
        top: 1544px;
        left: 22%;
        font-size: 20px;
        line-height: 23px;
    }

    .textparagraphen4{
        display: flex;
        flex-direction: column; 
        align-items: center;
        justify-content: center;
        width: 68.4%;
        height: 453px;
        background-color: #A5A58D;
        color: #EDDCD2;
        flex-wrap: wrap;
        padding: 15px;
        margin: 0 15% 0 15%;
        top: 255px;
        position: absolute;
        line-height: 23px;
    }

 

    .linksammlung{
        
        text-decoration: underline;
        color: #EDDCD2;
        font-size: 22px;
        text-transform:   uppercase;
        font-weight: bold;
    }


    .abbildung1{
        position: absolute;
        left: 53%;
        top: 239px;
    }
      
    .abbildung2{
        position: absolute;
        left: 10%;
        top: 784px;
    }

    .abbildung3{
        position: absolute;
        left: 53%;
        top: 1544px;
    }

    .abbildung5{
        position: absolute;
        left: 15%;
        top: 1664px;
    }

    .abbildung6{
        position: absolute;
        left: 52.6%;
        top: 1664px;
    }

    .tutorialvideo{
        position: absolute;
        text-align: center;
        width: 100%;
        height: 100%;
        top: 808px;
}

.footerContainer {
    top: 2322px;
    position: absolute;
    text-align: center;
    width: 100%;
}
  
.footer{
    width: 50%;
    margin: 0 auto;
    font-size: 25px;
    color: #A5A58D;
    text-decoration: none;
    border-right: 1px solid #A5A58D;
    padding: 0 20px;
}
  
.footer2{
    font-size: 25px;
    color: #A5A58D;
    text-decoration: none;
    padding: 0 20px;
}
<!DOCTYPE HTML>
<html lang="en"> 


<head>
    
<link rel="stylesheet" href="WS 2020 Screendesign Unterseiten.css">

<title> ALINA'S POTTERY </title>
</head>

<body>

  <div class="header1"> Alina's Pottery </div>
  
  <nav class="cf">
  <ul>
    <li><a href="home.html" title="Home" class="category">Home</a></li>
    <li class="current"><a href="pottery.html" title="Pottery" class="category">Pottery</a>
    <ul class="dropdown">
        <li><a href="general.html" title="General" class="subCategory">General</a></li>
        <li><a href="handbuilding.html" title="Hand-Building" class="subCategory">Hand-Building</a></li>
        <li><a href="potterywheel.html" title="Pottery Wheel" class="subCategory">Pottery Wheel</a></li>
        <li><a href="materials.html" title="Materials" class="subCategory">Materials</a></li>
        <li><a href="temperatures.html" title="Temperatures" class="subCategory">Temperatures</a></li>
    </ul>   
    </li>

    <li><a href="tutorials.html" title="Tutorials" class="category">Tutorials</a>
        <ul class="dropdown">
            <li><a href="viewall.html" title="View All" class="subCategory">View All</a></li>
            <li><a href="getstarted.html" title="Get Started" class="subCategory">Get Started</a></li>
            <li><a href="plates.html" title="Plates" class="subCategory">Plates</a></li>
            <li><a href="mugs.html" title="Mugs" class="subCategory">Mugs</a></li>
            <li><a href="bowls.html" title="Bowls" class="subCategory">Bowls</a></li>
        </ul>   
        </li>
    <li><a href="shop.html" title="Shop" class="category">Shop</a></li>
  </ul>
</nav>

<section class="textparagraphen1">
<div class="text2"> 
    Pottery is the process</br>
    and the products of forming objects</br>
    of desired shape with clay</br>
    and other ceramic materials,</br> 
    which are fired at high temperatures </br>
    (600-1600°C) to give them a hard,</br>
    durable form. </br>
    Major types include earthenware,</br>
    stoneware and porcelain. </br>
</br>
</br>
<a href="https://en.wikipedia.org/wiki/Pottery">https://en.wikipedia.org/wiki/Pottery</a>
</div>

</section>

<section class="textparagraphen2">
    <div class="text4">
        The most common forms of pottery </br>
        are hand-building and</br>
        pottery on a wheel.</br>
        I mainly do hand-building</br>
        with stoneware because</br>
        I love the unique look every</br>
        single piece gets.</br>
        After firing, I glaze my work</br>
        and then fire it again.</br>
        That way, you can even wash</br>
        your ceramics in the dish-washer!</br>
    </div>
</section>

<section class="textparagraphen3">
    <div class="text5">
        The result is incredibly individual</br>
        tableware that will make everybody</br>
        want to know where you got it from.</br>

        The process is not only easy,</br>
        but also so much fun!</br>
        </br>

        #potterylove
    </div>

</section>



<div class="abbildung1">
    <img src="https://images.pexels.com/photos/5567000/pexels-photo-5567000.jpeg?cs=srgb&dl=pexels-anastasia-shuraeva-5567000.jpg&fm=jpg" alt="Pottery Wheel" width="712px" height="660px">
</div>

<div class="abbildung2">
    <img src="" alt="Hand Building" width="712px" height="660px">
</div>


<div class="abbildung3">
    <img src="https://images.pexels.com/photos/5567010/pexels-photo-5567010.jpeg?cs=srgb&dl=pexels-anastasia-shuraeva-5567010.jpg&fm=jpg" alt="Pottery Pieces" width="712px" height="660px">
</div>



<div class="footerContainer">
    <a href="aboutme.html" title="About Me" class="footer">About Me</a>
    <a href="socials.html" title="Socials" class="footer"> Socials</a>
    <a href="imprint.html" title="Imprint" class="footer2">Imprint</a> 
</div>

</div>

</body>

</html>

By

Related Post

HTML

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022
HTML

[ANSWERED] html – Child div has an offset border

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022