Problem with horizontal navigation bar

@MarvinAUTJun 21.2016

At first I just want to have a simple horizontal navigation bar…
I’ve made a file on Pastebin… I must honestly admit that I’ve been working for 2 months on the project “horizontal navigation” bar and I’m really desperate now and want to give up ….
but I try to get my help here, maybe :/
Here’s my Pastepin file, who isn’t pasted in everything! just the important facts about the navigation bar, included the css file, but there’s no javascript file inside, it’s not so important I think:
I don’t get the css properties and I don’t get why there’s a space between the nav elements, and I ALSO DONT GET on which Element of the nav bar I’ve to use the css..
I just want to have a simple navigation bar, width a nav-wrapper of a high width of 1000px (depending on the screen size working with jquery, not important here) in this nav-wrapper should be 5 elements, on which open a div element underneath with a width of 100%, where I could put in for example pictures, also not important (not a submenu, I hope you understand what I mean)
But I don’t know what I have to do to get this element by hovering the list element :/ and is css in this code always right use, I don’t want (how I’ve already descriped) to have space between the elements.. I would be so happy so happy if somebody could help me and write me the right code ? (ps if you change for example a li element to div id=”li” it doesn’t work anymore ?
Here are my codes:
HTML:~~[url]~~http://pastebin.com/S2b9mNcM[/url]
CSS:~~[url]~~http://pastebin.com/KmXrNbWh[/url]
I know it’s much but I really work so long on this I don’t get it :/

to post a comment

CSS

5 Comments(s) _↴

@Kevin2Jun 21.2016 — #Does this help?

[code=html]<!DOCTYPE html>
 <head>
 <meta charset="utf-8">
 <title>"dropdown"</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 
 nav {
 background-color:blue;
 height: 47px;
 text-align:center;
 }
 
 nav ul { list-style-type: none; }
 
 nav ul li {
 display: inline-block;
 width: 180px;
 font-size: 20px;
 height: 45px;
 background-color: #fff;
 margin: 0 -2px 0 -2px;
 border-top: 2px solid #fff;
 }
 
 nav ul li:hover { background-color: blue; }
 
 nav ul li label {
 display: block;
 color: green;
 line-height: 45px;
 cursor: pointer;
 }
 
 main { margin-top: 50px; }
 
 input[name=control], .display { display: none; }
 
 #link1:checked ~ nav #item1, 
 #link2:checked ~ nav #item2, 
 #link3:checked ~ nav #item3, 
 #link4:checked ~ nav #item4, 
 #link5:checked ~ nav #item5 { border-top: 2px solid #000; }
 
 #link1:checked ~ main #dropdown1, 
 #link2:checked ~ main #dropdown2, 
 #link3:checked ~ main #dropdown3, 
 #link4:checked ~ main #dropdown4, 
 #link5:checked ~ main #dropdown5 { display: block; }
 </style>
 </head>
 
 <body>
 <input type="radio" name="control" id="link1" checked>
 <input type="radio" name="control" id="link2">
 <input type="radio" name="control" id="link3">
 <input type="radio" name="control" id="link4">
 <input type="radio" name="control" id="link5">
 <nav>
 <ul>
 <li id="item1">
 <label for="link1">Startseite</label>
 </li>
 
  <li id="item2">
   <label for="link2">laksdfjlas</label>
  </li>
 
  <li id="item3">
   <label for="link3">lsadkfjask</label>
  </li>
 
  <li id="item4">
   <label for="link4">askldfjasd</label>
  </li>
 
  <li id="item5">
   <label for="link5">askldfjasd</label>
  </li> 
  </ul>
 </nav>
 <main>
 <div class="display" id="dropdown1">erste dropdown!</div>
 <div class="display" id="dropdown2">zweites dropdown!</div>
 <div class="display" id="dropdown3">drittes dropdown!</div>
 <div class="display" id="dropdown4">viertes dropdown!</div>
 <div class="display" id="dropdown5">fünftes dropdown!</div>
 </main>
 </body>
 </html>[/code]

@MarvinAUTauthorJun 22.2016 — #First, thanks for your answer ?

I don't know what does the input effect affect but I'll try it..

The problem is, how I've already written, that you can't use a <ul> element as a <div> (for using the css solution with hovering :/ ) But it's really not easy right?

I hope if I ll have question, because for example the code doesn't work, that you'll help me further ?

thanks and greetings

@Kevin2Jun 22.2016 — #1) Learn about the relationship between <label> and <input>.

2) My example code uses a version of the so-called "CSS checkbox hack". Search for it, learn about it.

3) Below is a slightly updated/improved version of what I previously posted. Included are comments which may help explain some of the workings.

[code=html]<!DOCTYPE html>
 <head>
 <meta charset="utf-8">
 <title>"dropdown"</title>
 <style>
 * {	/* a mini reset */
 margin: 0;
 padding: 0;
 }
 
 /* most of the below colors, sizes, etc. come from your CSS code with some consolidation */
 nav {
 background-color: blue;
 height: 47px;	/* 2px was added to this to allow for the top border of the <li> tags */
 text-align: center;	/* centers everything in the <nav> tag including the <ul> and all text */
 }
 
 nav ul { list-style-type: none; }
 
 nav ul li {
 display: inline-block;
 width: 180px;
 font-size: 20px;
 height: 45px;
 background-color: #fff;
 margin: 0 -2px 0 -2px;	/* the negative margins remove the blue lines in your original code */
 border-top: 2px solid #fff;	/* added to allow for the black border of the "active link" */
 color: green;
 }
 
 nav ul li:hover {
 background-color: blue;
 border-top: 2px solid blue;	/* replaces the white border with blue */
 color: #fff;	/* better contrast */
 }
 
 nav ul li label {	/* replaces the <a> styles in your code */
 display: block;
 line-height: 45px;
 cursor: pointer;
 }
 
 main { margin-top: 50px; }	/* provide some separation */
 
 input[name=control], .display { display: none; }	/* hide radio buttons and all <div> elements */
 
 #link1:checked ~ nav #item1, 
 #link2:checked ~ nav #item2, 
 #link3:checked ~ nav #item3, 
 #link4:checked ~ nav #item4, 
 #link5:checked ~ nav #item5 { border-top: 2px solid #000; }	/* adds the black top border to the active "link" */
 
 #link1:checked ~ main #dropdown1, 
 #link2:checked ~ main #dropdown2, 
 #link3:checked ~ main #dropdown3, 
 #link4:checked ~ main #dropdown4, 
 #link5:checked ~ main #dropdown5 { display: block; }	/* displays the appropriate <div> when a radio button is checked via clicking on the corresponding <label> */
 </style>
 </head>
 
 <body>
 <input type="radio" name="control" id="link1" checked>	<!-- "checked" to trigger the CSS for displaying the initial <div> and correct "link" border on page load -->
 <input type="radio" name="control" id="link2">
 <input type="radio" name="control" id="link3">
 <input type="radio" name="control" id="link4">
 <input type="radio" name="control" id="link5">
 <nav>
 <ul>
 <li id="item1">
 <label for="link1">Startseite</label>
 </li>
 
  <li id="item2">
   <label for="link2">laksdfjlas</label>
  </li>
 
  <li id="item3">
   <label for="link3">lsadkfjask</label>
  </li>
 
  <li id="item4">
   <label for="link4">askldfjasd</label>
  </li>
 
  <li id="item5">
   <label for="link5">askldfjasd</label>
  </li> 
  </ul>
 </nav>
 <main>
 <div class="display" id="dropdown1">erste dropdown!</div>
 <div class="display" id="dropdown2">zweites dropdown!</div>
 <div class="display" id="dropdown3">drittes dropdown!</div>
 <div class="display" id="dropdown4">viertes dropdown!</div>
 <div class="display" id="dropdown5">fünftes dropdown!</div>
 </main>
 </body>
 </html>[/code]

@nuclearcrabJun 23.2016 — #This is what i did.

This is in the html file

[code=html]
 <Ul>
 <li><a href="Page link here">Page name here</a></li>
 <li><a href="Page link here">Page name here</a></li>
 <li><a href="Page link here">Page name here</a></li>
 <li><a href="Page link here">Page name here</a></li>
 </ul> 
 [/code]

This is in the css file

[CODE]
 ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #333;
 }
 
 li {
 float: left;
 }
 
 li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 }
 
 /* Change the link color to #111 (black) on hover */
 li a:hover {
 background-color: #111;
 }
 [/CODE]

In order for it to work you have to have the link tag in your li then it will work. it pretty simple and looks good.

@MarvinAUTauthorJul 09.2016 — #Thanks for your answer, I know it's a bit late but I was busy because of school :/

The thing is it's working really well, but if I don't want it to be shown what should I do? It shouldn't be a content, it should be a menu, with some links you know? I don't want it as content, so it should also be unhidden!

Maybe you know what I mean.. if I refresh the page it is shown! but it shouldn't, because if I dont want to look for sth I just want it to be unshown :/

Also in #CSS _↴

IE Prob (of course)different font on mac and pc Vertical-Align: Middle for a Span inside a Div

Success!

Help @MarvinAUT spread the word by sharing this article on Twitter...

Tweet This

Problem with horizontal navigation bar

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Problem with horizontal navigation bar

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴