0

I'm trying to build a new Homepage... but i got Problems with the Padding of the Navigationbar. Here is my Navigationbar:

CodePen

body {
 background: black;
 font-family: Oswald;
 font-size: 20px;
 font-weight: normal;
 line-height: 1;
 margin: 0;
 min-width: 960px;
 padding: 0;
}
a {
 text-decoration: none;
 outline: none;
}
a:active {
 background: none;
}
img {
 border: none;
}
/*-------------------------------------------Header-------------------------------------------*/
p {
 color: #252525;
 line-height: 20px;
 margin: 0;
 padding: 0;
}
p a {
 color: #252525;
 text-decoration: underline;
}
.border-right { 
    border-right: 5px solid #A40900; 
    
}
.border-left {
    border-left: 5px solid #A40900;
}
#header {
 margin: 0 auto;
 padding: 4px 0 0px;
 text-align: center;
 width: 960px;
}
#header a.logo {
 display: block;
 margin: 0 auto;
 padding: 0;
 width: 540px;
}
#header a.logo img {
 border: 0;
 display: block;
 margin: 0;
 padding: 0;
    width: 100%;
}
#header ul {
 margin: 0;
 padding: 0;
    background-color: white;
    height: 35px;
    padding-top: 2%;
    border-top: 5px solid #A40900;
    border-bottom: 5px solid #A40900;
}
#header ul li {
 display: inline-block;
 list-style: none;
 margin: 0px;
 padding: 0;
    text-align: center;
}
#header ul li a {
 color: #000;
 font-family: Oswald ExtraLight;
 font-size: 20px;
 font-weight: normal;
 margin: 0;
 padding: 0;
 text-decoration: none;
 text-transform: uppercase;
}
#header ul li a:hover, #header ul li.selected a {
 color: #0ba39c;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Willkommen beim Phönix-Brandschutz</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/mobile.css">
    <script src="js/mobile.js" type="text/javascript"></script>
</head>
<body>
 <div id="header">
        <a href="index.html" class="logo"><img src="images/logo.png" alt=""></a>
  <ul id="navigation">
            <span id="mobile-navigation">&nbsp;</span>
   <li class="selected border-right">
    <a href="index.html">Startseite</a>
   </li>
   <li class="border-right">
    <a href="about.html">Über uns</a>
   </li>
   <li class="border-right">
    <a href="anfahrt.html">Anfahrt</a>
   </li>
            <li class="border-right">
                <a href="leistungen.html">Leistungen</a>
            </li>
            <li class="border-right">
                <a href="anfrage.html">Kontaktanfrage</a>
            </li>
            <li>
                <a href="allgemein.html">Allgemeine Informationen</a>
            </li >
            <li class="border-left">
                <a href="impressum.html">Impressum</a>
            </li>
  </ul>
 </div>
</body>
</html>

But it should look like : Screendesign Navbar

Could you help me with my padding issue ?

CalvT
  • 3,123
  • 6
  • 37
  • 54
ChiroX
  • 7
  • 5
  • 2
    Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved or if the site you're linking to is inaccessible. Posting a [Minimal, Complete, and Verifiable example (MCVE)](http://stackoverflow.com/help/mcve) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/) Thanks! – j08691 Jun 15 '16 at 16:25
  • add `padding: 0 10px;` to your li elements. – Yasin Yaqoobi Jun 15 '16 at 16:28
  • Sorry, i entered the Code but it failed. I edited the Code again :) Thanks ! – ChiroX Jun 15 '16 at 17:06

3 Answers3

0

Find the following block in your CSS:

#header ul li {
    display: inline-block;
    list-style: none;
    margin: 0px;
    padding: 0;
    text-align: center;
}

And change the padding: 0; to padding: 0 5px;

Adjust the 5px to whatever value you want, bigger or smaller. Bigger values will mean bigger gaps, and smaller values smaller gaps.

So you end up with:

#header ul li {
        display: inline-block;
        list-style: none;
        margin: 0px;
        padding: 0 5px;
        text-align: center;
    }

And it will look like your screenshot

Below is the code from your codepen, with the CSS edit. Next time remember to include the code in you question

body {
  background: black;
  font-family: Oswald;
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
  margin: 0;
  min-width: 960px;
  padding: 0;
}
a {
  text-decoration: none;
  outline: none;
}
a:active {
  background: none;
}
img {
  border: none;
}
/*-------------------------------------------Header-------------------------------------------*/

p {
  color: #252525;
  line-height: 20px;
  margin: 0;
  padding: 0;
}
p a {
  color: #252525;
  text-decoration: underline;
}
.border-right {
  border-right: 5px solid #A40900;
}
.border-left {
  border-left: 5px solid #A40900;
}
#header {
  margin: 0 auto;
  padding: 4px 0 0px;
  text-align: center;
  width: 960px;
}
#header a.logo {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 540px;
}
#header a.logo img {
  border: 0;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}
#header ul {
  margin: 0;
  padding: 0;
  background-color: white;
  height: 35px;
  padding-top: 2%;
  border-top: 5px solid #A40900;
  border-bottom: 5px solid #A40900;
}
#header ul li {
  display: inline-block;
  list-style: none;
  margin: 0px;
  padding: 0 5px;
  text-align: center;
}
#header ul li a {
  color: #000;
  font-family: Oswald ExtraLight;
  font-size: 20px;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-decoration: none;
  text-transform: uppercase;
}
#header ul li a:hover,
#header ul li.selected a {
  color: #0ba39c;
}
<div id="header">
  <a href="index.html" class="logo">
    <img src="images/logo.png" alt="">
  </a>
  <ul id="navigation">
    <span id="mobile-navigation">&nbsp;</span>
    <li class="selected border-right">
      <a href="index.html">Startseite</a>
    </li>
    <li class="border-right">
      <a href="about.html">Über uns</a>
    </li>
    <li class="border-right">
      <a href="anfahrt.html">Anfahrt</a>
    </li>
    <li class="border-right">
      <a href="leistungen.html">Leistungen</a>
    </li>
    <li class="border-right">
      <a href="anfrage.html">Kontaktanfrage</a>
    </li>
    <li>
      <a href="allgemein.html">Allgemeine Informationen</a>
    </li>
    <li class="border-left">
      <a href="impressum.html">Impressum</a>
    </li>
  </ul>
</div>
CalvT
  • 3,123
  • 6
  • 37
  • 54
0

When you use percentage values for vertical padding or margin, it uses the width to calculate it.

https://www.w3.org/TR/CSS2/box.html#padding-properties

You may here, instead, use line-height to use some percentage value in regards to the height you want to give to your element.

Example: line-height:35px; will give for one line an height of 35px to the container.

Your screen shows an height at average 60px. You may use (without height) :

line-height:60px;

or (DEMO)

font-size:20px;
line-height:300%;

line-height:200%; is equal to line-height:2em; twice the font-size .

Why line-height would be a good idea ?

because static height is not needed, if the menu breaks into many lines (font-family not loaded,visitor zooming, ...) , it will not be messy and will expand without overflowing on next content, ...

body {
  background: black;
  font-family: Oswald;
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
  margin: 0;
  min-width: 960px;
  padding: 0;
}

a {
  text-decoration: none;
  outline: none;
}

a:active {
  background: none;
}

img {
  border: none;
}


/*-------------------------------------------Header-------------------------------------------*/

p {
  color: #252525;
  line-height: 20px;
  margin: 0;
  padding: 0;
}

p a {
  color: #252525;
  text-decoration: underline;
}

.border-right {
  border-right: 5px solid #A40900;
}

.border-left {
  border-left: 5px solid #A40900;
}

#header {
  margin: 0 auto;
  padding: 4px 0 0px;
  text-align: center;
  width: 960px;
}

#header a.logo {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 540px;
}

#header a.logo img {
  border: 0;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}

#header ul {
  font-family: 'Open Sans Condensed', sans-serif;
  margin: 0;
  padding: 0;
  background-color: white;
  line-height: 60px;/* will size height and also center text/inline boxes on this value */
  border-top: 5px solid #A40900;
  border-bottom: 5px solid #A40900;
}

#header ul li {
  display: inline-block;
  list-style: none;
  margin: 0px;
  padding: 0;
  line-height: 100%;/*reset to normal*/
  text-align: center;
}

#header ul li a {
  color: #000;
font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 20px;
  font-weight: normal;
  margin: 0;
  padding: 0 1em;
  text-decoration: none;
  text-transform: uppercase;
}

#header ul li a:hover,
#header ul li.selected a {
  color: #0ba39c;
}
<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'><!-- had to pick up a font close to yours -->
<div id="header">
  <a href="index.html" class="logo"><img src="images/logo.png" alt=""></a>
  <ul id="navigation">
    <span id="mobile-navigation">&nbsp;</span>
    <li class="selected border-right">
      <a href="index.html">Startseite</a>
    </li><!--
    --><li class="border-right">
      <a href="about.html">Über uns</a>
    </li><!--
    --><li class="border-right">
      <a href="anfahrt.html">Anfahrt</a>
    </li><!--
    --><li class="border-right">
      <a href="leistungen.html">Leistungen</a>
    </li><!--
    --><li class="border-right">
      <a href="anfrage.html">Kontaktanfrage</a>
    </li><!--
    --><li>
      <a href="allgemein.html">Allgemeine Informationen</a>
    </li><!--
    --><li class="border-left">
      <a href="impressum.html">Impressum</a>
    </li>
  </ul>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Thanks a lot ! I can see another issue now: The border-right/border-left between the Navigationlinks have a different space. It seems that the left space side of the border is smaller than the right side. how can i fix that ? – ChiroX Jun 15 '16 at 18:07
  • @ChiroX i guess you talk about the white-space and inline-block effect. you can use flex to avoid it or erase white-space from the HTML code itself http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements (example with html comments in snippet updated) Beside, did you understand why your attempt padding-top:2%; did not work as expected ? – G-Cyrillus Jun 15 '16 at 21:08
0

body {
    background: black;
    font-family: Oswald;
    font-size: 20px;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    min-width: 960px;
    padding: 0;
}
ul{
  margin:0;
  padding:0;
}
a {
    text-decoration: none;
    outline: none;
}
a:active {
    background: none;
}
img {
    border: none;
}
/*-------------------------------------------Header-------------------------------------------*/
p {
    color: #252525;
    line-height: 20px;
    margin: 0;
    padding: 0;
}
p a {
    color: #252525;
    text-decoration: underline;
}
.border-right { 
    border-right: 5px solid #A40900; 
    
}
.border-left {
    border-left: 5px solid #A40900;
}
#header {
    margin: 0 auto;
    padding: 4px 0 0px;
    text-align: center;
}
#header a.logo {
    display: block;
    margin: 0 auto;
    padding: 0;
    width: 540px;
}
#header a.logo img {
    border: 0;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}
#header ul {
    margin: 0;
    padding: 0;
    background-color: white;
    border-top: 5px solid #A40900;
    border-bottom: 5px solid #A40900;
    padding: 10px 0;
}
#header ul li {
    display: inline-block;
    list-style: none;
    margin: 0px;
    padding: 0 15px;
    float: left;
    text-align: center;
}
#header ul li a {
    color: #000;
    font-family: Oswald ExtraLight;
    font-size: 20px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
}
#header ul li a:hover, #header ul li.selected a {
    color: #0ba39c;
}
<!DOCTYPE HTML>
<html>

<head>
    <title>XOXO</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="so/sample.css" />
</head>

<body>
    <div id="header">
        <a href="index.html" class="logo"><img src="images/logo.png" alt=""></a>
    <ul id="navigation">
            <span id="mobile-navigation">&nbsp;</span>
      <li class="selected border-right">
        <a href="index.html">Startseite</a>
      </li>
      <li class="border-right">
        <a href="about.html">Über uns</a>
      </li>
      <li class="border-right">
        <a href="anfahrt.html">Anfahrt</a>
      </li>
            <li class="border-right">
                <a href="leistungen.html">Leistungen</a>
            </li>
            <li class="border-right">
                <a href="anfrage.html">Kontaktanfrage</a>
            </li>
            <li>
                <a href="allgemein.html">Allgemeine Informationen</a>
            </li >
            <li class="border-left">
                <a href="impressum.html">Impressum</a>
            </li>
    </ul>
  </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="text/javascript" src="so/sample.js"></script>
</body>

</html>

Please find code here. Check result in full page

Shivani
  • 347
  • 2
  • 6
  • Thanks for helping, but your code has some mistakes. It's going through the whole width and its floating: left – ChiroX Jun 15 '16 at 17:56