CODEWITHSUNDEEP
htmlcss
Paludis
Paludis

Reputation: 69

make header elements use the whole space

I got the four header elements home, about, portfolio and kontakt. Now, I would like these to span over the whole nav bar each using 25% of the bar. How can i do that? Also, I defined that home is always shown red, but as you can see it is wider than the navigation bar itself and i would like to fix this also.

Code:

body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('tape-measure.jpg');
    background-size: cover;
    height: 1000px;
    color: #000305;
    font-size: 100%;
    font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
    line-height: 1.5;
}

a {
    text-decoration: none;
}

a:link, a:visited {
    color: #CF5C3F;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
}

.mainHeader {
    width: 90%;
    margin: 0 auto;
}


.mainHeader img.Logo {
    position: absolute;
    right: 5%;
    top: 54%;
    width: 20%;
    height: auto;
}

.mainHeader img.Margrit {
    position: absolute;
    right: 5%;
    top: 25%;
    width: 20%;
    height: auto;
}


.mainHeader nav {
    width: 100%;
    background-color: #9cb34f;
    height: 20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none;
}

.mainHeader nav ul li {
    text-align: center;
    display: inline-block;
    
}


.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    
    
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, mainHeader nav .active a:visited {
    background-color: #CF5C3F;
    text-shadow: none;
    
}


.mainHeader nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    
    
}


.mainHeader p {
    
}


.mainHeader p.inBearbeitung {
    position: absolute;
    top: 45%;
    left: 5%;
    font-size: 150%;
}



.mainFooter {
    position: absolute;
    bottom: 3%;
    width: 90%;
    left: 5%;
    right: 5%;
    height: 20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #9cb34f;
	display: table;

}


.mainFooter p {
    
    color: #fff;
    display: table-cell;
    vertical-align: middle;
}
<!DOCTYPE html>
<html lang="de">
    <head>
		<title>Couture Anni</title>
		<meta charset="utf-8">
		
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
		<header class="mainHeader">
			<img class="Logo" src="Content_variation_800_e.png" alt="Logo">
			<img class="Margrit" src="IMG_5347_small.jpg" alt="Annamaria Hofstetter">
			
			<nav>
				
				<ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
				
		    </nav>
			
			
			<p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
		</header>
		
		
        
        <footer class="mainFooter">
  			
    		<p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>
  			
		</footer>
        
    </body>


</html>

This is how it looks like now:

enter image description here

Upvotes: 0

Views: 410

Answers (2)

Amit Kumar Singh
Amit Kumar Singh

Reputation: 4475

Have done following changes in the css below. You can change these more to set required header width and color scheme on link.

  1. Changed the width of .mainHeader to 100%.

    .mainHeader { width: 100%; margin: 0 auto; }

  2. Changed the width to 23%. As suggested in answer by @Gabriel also, this 22% or 23% comes due to margin or padding getting applied to these links, and so, at 25% width, they move on to next line.

    .mainHeader nav ul li { text-align: center; display: inline-block; width:23%; }

  3. Changed below code snippet

    .mainHeader nav a:hover, .mainHeader nav a:active, 
.mainHeader nav .active a:link, mainHeader nav .active a:visited 
{
  background-color: #CF5C3F;
  text-shadow: none;
}

to remove the default red box display over active link.

.mainHeader nav a:hover, mainHeader nav .active a:visited {
  background-color: #CF5C3F;
  text-shadow: none;
 }

EDIT : To make all 4 elements centered together, you need to do this. 

.mainHeader nav ul {
    list-style: none;text-align: center;
}

.mainHeader nav ul li {

    display: inline-block;
    width:12%;
}


body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('tape-measure.jpg');
    background-size: cover;
    height: 1000px;
    color: #000305;
    font-size: 100%;
    font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
    line-height: 1.5;
}

a {
    text-decoration: none;
}

a:link, a:visited {
    color: #CF5C3F;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
}

.mainHeader {
    width: 100%;
    margin: 0 auto;
}


.mainHeader img.Logo {
    position: absolute;
    right: 5%;
    top: 54%;
    width: 20%;
    height: auto;
}

.mainHeader img.Margrit {
    position: absolute;
    right: 5%;
    top: 25%;
    width: 20%;
    height: auto;
}


.mainHeader nav {
    width: 100%;
    background-color: #9cb34f;
    height: 20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none;
}

.mainHeader nav ul li {
    text-align: center;
    display: inline-block;
    border:1px solid red;
    width:23%;
}


.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    
    
}

.mainHeader nav a:hover, mainHeader nav .active a:visited {
    background-color: #CF5C3F;
    text-shadow: none;
    
}


.mainHeader nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    
    
}


.mainHeader p {
    
}


.mainHeader p.inBearbeitung {
    position: absolute;
    top: 45%;
    left: 5%;
    font-size: 150%;
}



.mainFooter {
    position: absolute;
    bottom: 3%;
    width: 90%;
    left: 5%;
    right: 5%;
    height: 20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #9cb34f;
	display: table;

}


.mainFooter p {
    
    color: #fff;
    display: table-cell;
    vertical-align: middle;
}
<!DOCTYPE html>
<html lang="de">
    <head>
		<title>Couture Anni</title>
		<meta charset="utf-8">
		
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
		<header class="mainHeader">
			<img class="Logo" src="Content_variation_800_e.png" alt="Logo">
			<img class="Margrit" src="IMG_5347_small.jpg" alt="Annamaria Hofstetter">
			
			<nav>
				
				<ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
				
		    </nav>
			
			
			<p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
		</header>
		
		
        
        <footer class="mainFooter">
  			
    		<p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>
  			
		</footer>
        
    </body>


</html>

enter image description here

Upvotes: 1

Gabriel Avellaneda
Gabriel Avellaneda

Reputation: 742

This will point you to the right direction:

.mainHeader nav ul li {
  width: 25%;
}

.mainHeader nav ul li a {
  display: block;
}

NOTE: You will also need to work out the spacing between the menu items or set maybe a 22% percentage so everything is on the same line.

Hope this helps!

Upvotes: 1

Related Questions