djeric
Gebruiker
- Lid geworden
- 22 nov 2006
- Berichten
- 955
al eerder problemen gehad met een top menu, en nu eindelijk zelf het logo erop kunnen krijgen dat mee verkleint. maar...
nu weer t zelfde probleem maar nu met het verticale menu.
Ik heb enkel een menu gemaakt met mouseover effect.
heb geen sub menu nodig.
Maar het loopt totaal niet lekker meer met de horizontale menu.
de uitlijning van boven en onder is niet in t midden.
ik heb een margin toegevoegd, en padding-top en staat redelijk op zijn plaats, maar bij kleine schermen en tablet + mobiele versie is t totaal niet goed meer. alles wordt een beetje een puinhoop om te lezen.
De waarde padding-top heb ik toevoegd, om minimaal onder het horizontaal menu te blijven, hierdoor staat dus de vertikale menu niet meer in t midden aan de linker kant.
mijn opmaak van het vertikale menu:
mijn volledige opmaak van de website welke ik nu hebt:
en de bijbehorende css:
ik blijf altijd maar in de knoei met uitlijnen, ben al blij dat de logo me zelf wel is gelukt. die staat er zelf wel mooi op lijkt me.
nu weer t zelfde probleem maar nu met het verticale menu.
Ik heb enkel een menu gemaakt met mouseover effect.
heb geen sub menu nodig.
Maar het loopt totaal niet lekker meer met de horizontale menu.
de uitlijning van boven en onder is niet in t midden.
ik heb een margin toegevoegd, en padding-top en staat redelijk op zijn plaats, maar bij kleine schermen en tablet + mobiele versie is t totaal niet goed meer. alles wordt een beetje een puinhoop om te lezen.
De waarde padding-top heb ik toevoegd, om minimaal onder het horizontaal menu te blijven, hierdoor staat dus de vertikale menu niet meer in t midden aan de linker kant.
mijn opmaak van het vertikale menu:
HTML:
<div id="menu">
<ul>
<li><a href="index.html">Chatbox</a></li>
<li><a href="index.html">Hit van de maand</a></li>
<li><a href="index.html">Live meekijken</a></li>
<li><a href="index.html">Mixcloud</a></li>
<li><a href="index.html">Verjaardag</a></li>
<li><a href="index.html">Verzoekplaat</a></li>
<li><a href="index.html">Youtube</a></li>
</ul>
</div>
Code:
#menu{
margin: 10px;
padding-top: 55px;
}
#menu ul {
list-style-type: none;
width: 175px; /* Nieuw */
}
#menu ul li {
margin: 0 0 1px 0;
}
#menu ul li a {
text-decoration: none;
display: block;
padding: 15px;
background-color: #0099cc;
font: normal 15px "helvetica", arial, sans-serif;
color: white;
}
#menu ul li a:hover {
background-color: #19c589;
}mijn volledige opmaak van de website welke ik nu hebt:
HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<title>Hitdance radio</title>
<link href="hitdance.css" rel="stylesheet">
</head>
<body>
<div id="sitewrap">
<div id="header">
<img class="autoresize" src="images/logo.png" title="Hitdance Radio" alt="hitdance logo">
</div><!-- /headerwrap -->
</div>
<nav class="mobnav">
<label for="mobnavbtn">Toon Menu</label>
<input type="checkbox" id="mobnavbtn">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="javascript:void(0);">Nieuws & Info</a>
<ul>
<li><a href="index.html">Informatie</a></li>
<li><a href="index.html">Biografie</a></li>
<li><a href="index.html">Nieuws</a></li>
<li><a href="index.html">Weer</a></li>
<li><a href="index.html">Verkeer</a></li>
<li><a href="index.html">Recente plaat</a></li>
<li><a href="index.html">Playlist</a></li>
<li><a href="index.html">Storingen</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Dj & Programma</a>
<ul>
<li><a href="index.html">Programma</a></li>
<li><a href="index.html">Ons dj team</a></li>
<li><a href="index.html">Live mix dj</a></li>
<li><a href="index.html">Dj smurf</a></li>
<li><a href="index.html">Apresski</a></li>
<li><a href="index.html">Nederlands</a></li>
<li><a href="index.html">Dance</a></li>
<li><a href="index.html">Top 40</a></li>
<li><a href="index.html">House</a></li>
<li><a href="index.html">Hardstyle</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Win & Foto's</a>
<ul>
<li><a href="index.html">Raad de stem</a></li>
<li><a href="index.html">Foto wedstrijd</a></li>
<li><a href="index.html">Selfie's</a></li>
<li><a href="index.html">Dj studio</a></li>
<li><a href="index.html">Dj gallery</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Link & Partners</a>
<ul>
<li><a href="index.html">Live stream</a></li>
<li><a href="index.html">Mobiel stream</a></li>
<li><a href="index.html">Streampagina</a></li>
<li><a href="index.html">Startpagina</a></li>
<li><a href="index.html">Partners</a></li>
<li><a href="index.html">Link's</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Contact & Faq</a>
<ul>
<li><a href="index.html">Nieuws brief</a></li>
<li><a href="index.html">Mail uw dj</a></li>
<li><a href="index.html">Mail redactie</a></li>
<li><a href="index.html">Dropbox</a></li>
<li><a href="index.html">Boekingen</a></li>
<li><a href="index.html">Verzoekplaat</a></li>
<li><a href="index.html">Chatbox</a></li>
<li><a href="index.html">Dj gezocht</a></li>
<li><a href="index.html">Gastenboek</a></li>
<li><a href="index.html">Facebook</a></li>
<li><a href="index.html">Twitter</a></li>
<li><a href="faq.html">Faq</a></li>
</ul>
</li>
</ul>
</nav>
<div id="menu">
<ul>
<li><a href="index.html">Chatbox</a></li>
<li><a href="index.html">Hit van de maand</a></li>
<li><a href="index.html">Live meekijken</a></li>
<li><a href="index.html">Mixcloud</a></li>
<li><a href="index.html">Verjaardag</a></li>
<li><a href="index.html">Verzoekplaat</a></li>
<li><a href="index.html">Youtube</a></li>
</ul>
</div>
</body>
</html>en de bijbehorende css:
Code:
/* reset */
html, body, div, ul, li, a, p, img, span, iframe, h1, h2, h3, h4 {
margin: 0; padding: 0; border: 0; outline: 0;
font-size: 100%; vertical-align: baseline; background: transparent;
}
body {background: url(images/bg-dark.jpg) fixed; color: #FFFFFF; font: normal 1em arial, helvetica, sans-serif;} /* verander kleur van de p atribuut */
/* header */
#header {text-align: center; width: 100%;}
/* logo past zich automatisch aan aan de breedte van #header */
img.autoresize {
height: auto;
max-width: 100%;
width: auto; /* ie8 */
}
.mobnav ul, .mobnav li, .mobnav a, .mobnav label, .mobnav input {
margin: 0; padding: 0; border: 0; box-sizing: border-box; }
.mobnav {
display: block; position: relative; }
.mobnav ul {
list-style-type: none; position: absolute; }
.mobnav li {
display: inline-block; float: left; }
.mobnav li a {
display: block; text-decoration: none; }
.mobnav li ul {
display: none; }
.mobnav li ul li {
display: block; float: none; }
.mobnav li ul li a {
width: auto; }
.mobnav ul li a:hover + ul,
.mobnav ul li:hover + ul,
.mobnav ul li ul:hover {
display: block; }
.mobnav label {
text-decoration: none; display: none; }
.mobnav input[type=checkbox] {
display: none; -webkit-appearance: none; }
.mobnav input[type=checkbox]:checked ~ ul {
display: block; }
.mobnav { /* wrapper */
width: 763px; /* 6x knop + 5x tussenruimte */
margin: 30px auto 0 auto;
}
.mobnav li { /* ruimte links van knop */
margin-left: 11px;
}
.mobnav li:first-child { /* geen ruimte links van 1e knop */
margin: 0;
}
.mobnav li a { /* top & submenu */
width: 118px;
height: 50px;
line-height: 50px;
padding-top: 15px;
text-align: center;
font: normal 15px "helvetica", arial, sans-serif;
color: #fff;
background: #0099cc;
}
.mobnav li ul li { /* submenu */
margin: 0; /* geen ruimte links in submenu */
}
.mobnav li ul li a { /* submenu */
min-width: 118px;
padding: 0 10px;
text-align: left;
}
/* mouseover topmenu */
.mobnav li:hover a {
background: #19c589;
}
/* knop submenu */
.mobnav li:hover ul a {
height: 40px;
line-height: 40px;
color: #2f3036;
background: #ffffcc;
}
/* mouseover knop submenu */
.mobnav li:hover ul a:hover {
color: #003333;
background: #ff0066;
}
/* mobile button */
.mobnav label {
padding: 10px 0;
text-align: center;
font: normal 14px "helvetica", arial, sans-serif;
color: #fff;
background: #19c589;
}
/* responsive @media */
@media screen and (max-width: 768px) {
.mobnav {
width: 100%; }
.mobnav ul {
position: static; display: none; }
.mobnav li { /* wat ruimte onder knop */
margin: 0 0 1px 0; }
.mobnav li, .mobnav a, .mobnav li ul li, .mobnav li ul li a {
min-width: 100%; }
.mobnav label {
display: block; }
}
#menu{
margin: 10px;
padding-top: 55px;
}
#menu ul {
list-style-type: none;
width: 175px; /* Nieuw */
}
#menu ul li {
margin: 0 0 1px 0;
}
#menu ul li a {
text-decoration: none;
display: block;
padding: 15px;
background-color: #0099cc;
font: normal 15px "helvetica", arial, sans-serif;
color: white;
}
#menu ul li a:hover {
background-color: #19c589;
}
