Beantwoorden
toontje
Experienced Meerweter
Berichten: 95
Full speed writing! Warming up? De vlam zit erin. Goed bezig!

Weergave menu op website

Ik heb een probleem met de weergave van het hamburger-menu op de smartphone.

 

De drie streepjes staan links en de tekst 'menu' staat dus rechts.

Het is de bedoeling om tussen die twee wat ruimte te laten maar dat lukt me niet.
De streepjes en 'menu' staan eigenlijk tegen elkaar.

 

Wat doe ik fout?

 

(Een deel van) de gebruikte code ziet er zo uit:

 

#menuknop {
    display: none;
}
@media screen and (max-width: 800px) {
#menuknop {
    border-bottom: 0px solid white;
    color: white;
    display: block;
    height: 16px;
    font-weight: 400;
    padding: 9px 0.3em 9px 0.3em;
    text-align: center;
    text-decoration: none;
}
}
#menu-icoon {
    display: inline-block;
    width: 22px;
    padding: 0 0.2em 0 0.2;
    position: relative;
}
#menu-icoon span {
    background-color: white;
    border: .5px solid white;
    height: 2px;
    margin-top: 3px;
    width: 100%;
    display: block;
}

 

 

Dank voor het mee denken.

 

Titel gewijzigd door RaL (mod) | Vorige titel: website
Tags (1)
0 Likes
12 reacties
igvfer
Professional Superweter
Berichten: 7734
Dat verdient een trofee! PhD in problem solving! Organisatietalent! Topic held(in)!

Weergave menu op website

@toontje  Vandaag te moe na een ganse dag op stap. Ik bekijk het morgen nog eens. Ik veronderstel dat dit de betreffende CSS is.



  Ignace (igvfer) | Krak
  Niets is mooi of lelijk, het is enkel wij die het mooi of lelijk vinden.
  Vergeet niet om likes te geven en/of als oplossing te markeren.
0 Likes
stefangroenen
Professional Meerweter
Berichten: 146
It's your ninth party! Even demarreren... Een bus vol! Warming up?

Weergave menu op website

Heb je al eens bootstrap geprobeerd, deze heeft dit volledig ingebouwd. Weet niet wat je gebruikt ASP of PHP, maar voor beide is bootstrap ter beschikking. Gewoon even downloaden en bij je site toevoegen. De uitleg en handleiding is ook te vinden. Daar kan je ook je probleem gemakkelijk in oplossen

Stefan Groenen
0 Likes
igvfer
Professional Superweter
Berichten: 7734
Dat verdient een trofee! PhD in problem solving! Organisatietalent! Topic held(in)!

Weergave menu op website

@toontjeJe gebruikt  id in plaats van class. id moet uit 1 woord bestaan doe daarom eens de spatie weg tussen #menu-icoon en span, dus zoiets: #menu-icoon-span {



  Ignace (igvfer) | Krak
  Niets is mooi of lelijk, het is enkel wij die het mooi of lelijk vinden.
  Vergeet niet om likes te geven en/of als oplossing te markeren.
0 Likes
toontje
Experienced Meerweter
Berichten: 95
Full speed writing! Warming up? De vlam zit erin. Goed bezig!

Weergave menu op website

Vooreerst dank voor je reactie.

 

Helaas is het probleem niet opgelost want de drie streepjes zijn nu helemaal verdwenen.

Welk ander deel van de code zou de oorzaak kunnen zijn?

0 Likes
igvfer
Professional Superweter
Berichten: 7734
Dat verdient een trofee! PhD in problem solving! Organisatietalent! Topic held(in)!

Weergave menu op website

@toontje  Ik ben verkeerd met mijn uitleg hier. Toon ons anders eens de html code waaruit je menu bestaat.



  Ignace (igvfer) | Krak
  Niets is mooi of lelijk, het is enkel wij die het mooi of lelijk vinden.
  Vergeet niet om likes te geven en/of als oplossing te markeren.
0 Likes
toontje
Experienced Meerweter
Berichten: 95
Full speed writing! Warming up? De vlam zit erin. Goed bezig!

Weergave menu op website

Bij deze de code van alles wat enigszins met 'menu' te maken heeft:

 

#menu {
    background-color: #0033CC;
    width: 100%;
}
#menu:after {
    clear: both;
    content: " ";
    display: table;
}
#menuknop {
    display: none;
}
@media screen and (max-width: 800px) {
#menuknop {
    border-bottom: 0px solid white;
    color: white;
    display: block;
    height: 16px;
    font-weight: 400;
    padding: 9px 0.3em 9px 0.3em;
    text-align: center;
    text-decoration: none;
}
}
#menu-icoon {
    display: inline-block;
    width: 22px;
    padding: 0 0.2em 0 0.2;
    position: relative;
}
#menu-icoon span {
    background-color: white;
    border: .5px solid white;
    height: 2px;
    margin-top: 3px;
    width: 100%;
    display: block;
}
#menu ul {
    list-style-type: none;
    margin: 0.0em auto;
    max-width: 1000px;
    width: 80%;
}
#hoofdmenu {
    display: none;
}
@media screen and (min-width: 801px) {
#hoofdmenu {
    display: block !important;
}
}
@media screen and (max-width: 800px) {
#menu ul {
    width: 100%;
}
}
#hoofdmenu > li {
    float: left;
    position: relative;
}
@media screen and (max-width: 800px) {
#hoofdmenu > li {
    float: none;
}
}
#hoofdmenu > li > a {
    background-color: #0033CC;
    color: white;
    display: block;
    font-size: 1em;
    font-weight: bold;
    padding: 1em 1em 1em 1em;
    text-align: left;
    text-decoration: none;
}
@media screen and (max-width: 800px) {
#hoofdmenu > li > a {
    border-bottom: 1px solid white;
	font-weight: normal;
	padding: 0.6em 0.8em;
}
}
#hoofdmenu > li > a:hover {
    background-color: #1C4F8D;
}
#hoofdmenu > li:hover ul {
    display: block;
    position: absolute;
    top: 99%;
    z-index: 2;
}
@media screen and (max-width: 800px) {
#hoofdmenu > li:hover ul {
    position: absolute;
    top: -1px;
    left: 8em;
}
}
.submenu > ul {
    display: none;
}
.submenu > ul > li > a {
    background-color: cornflowerblue;
    border-top: 1px solid white;
    color: white;
    display: block;
    padding: 1em 0.75em 1em 0.5em;
    text-decoration: none;
    width: 7em;
}
@media screen and (max-width: 800px) {
.submenu > ul > li > a {
    background-color: white;
    border-bottom: 1px solid cornflowerblue;
    border-top: 0 none transparent;
    color: dimgrey;
	padding: 0.6em 0.8em;
}
}
.submenu > ul > li > a:hover {
    background-color: black;
}
@media screen and (max-width: 800px) {
.submenu > ul > li > a:hover {
    background-color: dimgrey;
    color: white;
}
}

Kan je een foutje vinden?

 

0 Likes
igvfer
Professional Superweter
Berichten: 7734
Dat verdient een trofee! PhD in problem solving! Organisatietalent! Topic held(in)!

Weergave menu op website

@toontjeEn als je dit nu zo verandert:

#menu-icoon span {
    background-color: white;
    border: .5px solid white;
    height: 2px;
    margin: 3 0 0 1;
    width: 100%;
    display: block;

Dus margin 3 pixels boven en 1 pixel links.



  Ignace (igvfer) | Krak
  Niets is mooi of lelijk, het is enkel wij die het mooi of lelijk vinden.
  Vergeet niet om likes te geven en/of als oplossing te markeren.
0 Likes
toontje
Experienced Meerweter
Berichten: 95
Full speed writing! Warming up? De vlam zit erin. Goed bezig!

Weergave menu op website

Helaas, ook die aanpassing lijkt niet te werken.

Op naar de volgende maar welke???

 

 

 

0 Likes
igvfer
Professional Superweter
Berichten: 7734
Dat verdient een trofee! PhD in problem solving! Organisatietalent! Topic held(in)!

Weergave menu op website

@toontje  Stuur mij anders de code eens van de HTML of PHP pagina. Liefst in PB. Want dit zijn nu de style elementen van de CSS. Dit kan helpen om het zelf ens te testen.

 



  Ignace (igvfer) | Krak
  Niets is mooi of lelijk, het is enkel wij die het mooi of lelijk vinden.
  Vergeet niet om likes te geven en/of als oplossing te markeren.
0 Likes
igvfer
Professional Superweter
Berichten: 7734
Dat verdient een trofee! PhD in problem solving! Organisatietalent! Topic held(in)!

Weergave menu op website

@toontje  Misschien zit er hier een foutje:

#menu-icoon {
    display: inline-block;
    width: 22px;
    padding: 0 0.2em 0 0.2;
    position: relative;

padding: 0 0.2em 0 0.2em; Maat vergeten in te geven? Nu staat er gewoon 0.2 zonder eenheid. En als het pixels zijn kan je normaal alleen met gehele getallen werken.

 

Laat ons weten als je eruit bent.

Een goede plaats om je css te valideren: http://jigsaw.w3.org/css-validator/#validate_by_input 

Je kan ook html en php code valideren, eventjes zoeken op html of php validation.



  Ignace (igvfer) | Krak
  Niets is mooi of lelijk, het is enkel wij die het mooi of lelijk vinden.
  Vergeet niet om likes te geven en/of als oplossing te markeren.
toontje
Experienced Meerweter
Berichten: 95
Full speed writing! Warming up? De vlam zit erin. Goed bezig!

Weergave menu op website

Het niet vermelden van de eenheid 'em' was dus het probleem.
Zaak opgelost.

Dank voor alle hulp.

igvfer
Professional Superweter
Berichten: 7734
Dat verdient een trofee! PhD in problem solving! Organisatietalent! Topic held(in)!

Weergave menu op website


@toontje  schreef:

Het niet vermelden van de eenheid 'em' was dus het probleem.
Zaak opgelost.

Dank voor alle hulp.


Een klein foutje kan soms grote gevolgen hebben. Maar dat foutje vinden.... daar kan je je op blindstaren.

Blij dat het opgelost is.

 



  Ignace (igvfer) | Krak
  Niets is mooi of lelijk, het is enkel wij die het mooi of lelijk vinden.
  Vergeet niet om likes te geven en/of als oplossing te markeren.
0 Likes