problemen met css navbar

Status
Niet open voor verdere reacties.
G

gast30

Gebruiker
Lid geworden
19 mei 2019
Berichten
113
Hoi, ik ben nieuw hier....
Ik zocht een simpele navigatie menu voor mijn site maar deze werkt niet naar behoren...
Ik vroeg mij af of iemand mij hiermee kan helpen?

HTML: 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="zoeken.html">Zoeken</a></li>
  <li><a href="nieuws.html">Nieuws</a></li>
  <li><a href="tables.html">Tables</a></li>
 <li><a href="logo.html">Logo</a></li>
 <li><a href="link.html">Links</a></li>

</ul>

<div style="margin-left:1%;padding:1px px;height:1000px;">
  <h2>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>

</body>

Zo moet, als je over de menulinks scrolt het groene mee scrollen, en ik wil dat de tekst in de div komt....

nu zie ik de helft van de tekst niet?
Met iframes doe je target maar met div heb ik hier geen ervaring mee...

ook heb ik een vraag over class maar daar moet ik denk ik een nieuw topic voor aanmaken?

Wie kan mij helpen
 
Kan je het eens in JSfiddle.com aamaken?
Dan kunnen we makkelijker kijken.

Maar is het niet makkelijker om de Bootstrap 4 library te gebruiken? Die heeft standaard een navbar, die eenvoudig in te bouwen is, en kan een site goed herschalen tussen desktop en mobieltjes.
 
Laatst bewerkt:
@gast30. Welkom op het Helpmij forum :thumb:

Je bent er bijna, het belangrijkste is de padding van de div die niet goed staat.
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>
<style>
...
</style>
</head>
<body>
<ul>
  ....
</ul>
<div id="content">
  ....
</div>
</body>
</html>

en de style
Code: 
* {
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}
body {
  margin: 0;
  font: normal 16px/1.5 sans-serif;
}
ul {
  position: fixed;
  width: 25%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: #f1f1f1;
  overflow: auto;
}
li a {
  display: block;
  padding: 8px 16px;
  color: #000;
  text-decoration: none;
}
li a.active {
  background-color: #4caf50;
  color: white;
}
li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
/* Rechts 2% witruimte. Links menubreedte + 2% witruimte. */
#content {
  padding-right: 2%;
  padding-left: 27%;
}

Tip: zet de style in een apart .css bestand die je met <link ...> koppelt aan de html.
 
Laatst bewerkt:
Beste beheerder

Hartelijk dank voor uw advies !
Ik heb gedaan wat u stelde en een .cc bestand gemaakt van de <style></style>.
Nu heb ik een compleet lege pagina....
Er zit dus nog ergens een foutje....
HTML: 
<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="theme.css">
<meta charset="utf-8">
<title>Menu</title>
<style>
...
</style>
</head>
<body>
<ul>
  ....
</ul>
<div id="content">
  ....
</div>
</body>
</html>

HTML: 
<html>

<head>
* {
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}
body {
  margin: 0;
  font: normal 16px/1.5 sans-serif;
}
ul {
  position: fixed;
  width: 25%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: #f1f1f1;
  overflow: auto;
}
li a {
  display: block;
  padding: 8px 16px;
  color: #000;
  text-decoration: none;
}
li a.active {
  background-color: #4caf50;
  color: white;
}
li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
/* Rechts 2% witruimte. Links menubreedte + 2% witruimte. */
#content {
  padding-right: 2%;
  padding-left: 27%;
}
<title>(Type a title for your page here)</title>
</head>

<body>



</body>

</html>

Persoonlijk ben ik geen fan van externe .cc hoewel ik weet dat het enorm veel voordelen heeft bij grote websites om zo in 1 keer de layout aan te passen

Nogmaals hartelijk dank voor uw hulp !
Met vriendelijke groet Gast30
 
Wat is de reden dat je geen externe stylesheets gebruikt?
Want het maakt je site juist sneller doordat het gecached wordt.

Wat staat die inhoud uit je tweede blok? Want HTML hoort niet in een css-bestand.
 
Laatst bewerkt:
Wat is de reden dat je geen externe stylesheets gebruikt?
Want het maakt je site juist sneller doordat het gecached wordt.
Klik om te vergroten...
Als er weinig opmaak is ben ik het helemaal met je eens!

In de code is te zien dat de TS in het begin van de leercurve zit, daar zijn we allemaal begonnen.
Om het "goed te leren" gaf ik de tip. Performance is een volgende stap in het optimaliseren van pagina's :)

Als je html (structuur & content) en css (opmaak) gescheiden houdt dan zou het zo eruit zien
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
hier komt het menu en de tekst
</body>
</html>

Een apart bestand heet style.css met daarin
Code: 
* {
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}
body {
  margin: 0;
  font: normal 16px/1.5 sans-serif;
}
ul {
  position: fixed;
  width: 25%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: #f1f1f1;
  overflow: auto;
}
li a {
  display: block;
  padding: 8px 16px;
  color: #000;
  text-decoration: none;
}
li a.active {
  background-color: #4caf50;
  color: white;
}
li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
/* Rechts 2% witruimte. Links menubreedte + 2% witruimte. */
#content {
  padding-right: 2%;
  padding-left: 27%;
}

In het html bestand koppel je met <link .....> het style.css bestand.
Je ziet dat in een .css bestand geen html mag staan.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan