Menu Centreren

sjoerdd87 · Post by **sjoerdd87** » Mon Sep 05, 2016 10:26 am

Hallo allemaal,

Hoe kan ik mijn menu centreren? ik geeft hem nu een left mee van 9% en dan staat het menu in het midden op mijn scherm.
Maar dit werkt niet voor andere computers.

De CSS die ik gebruik is:

Code: Select all

/* GRID 1200 v2.2.3 (by PMKMedia.nl/grid) */

/* menu css */

#menu {
	font-size: 30px;
        font-family: 'Patrick Hand SC', cursive;
        font-weight: normal;
        position: relative;
        top: -10px; /* Positie vanaf de bovenkant */
        right: 9%;/* Positie vanaf de rechterkant */
        left: 9%; /* Positie vanaf de linkerkant */
}

#menu, #menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#menu li {
	float: left;
	position: relative;
}

#menu li ul {
	position: absolute;
	margin-top: 0.5%;
	margin-left: 10%;
	display: none;
}

#menu ul li ul,
#menu ul ul li ul {
	margin-top: -20%;
	margin-left: 60%;
}

/* show submenu 1 */

#menu li:hover ul {
	display: block;
        
}

#menu li:hover ul ul {
	display: none;
}

/* show submenu 2 */

#menu ul li:hover ul {
	display: block;
	}

#menu ul li:hover ul ul {
	display: none;
}

/* show submenu 3 */

#menu ul ul li:hover ul {
	display: block;
}

/* menu link css */

#menu a {
	display: block;
	background: #none; /* Achtergrond kleur niet active */
	color: #6b5f53; /* font lettertype kleur */
	text-decoration: none;
	padding: 5px 10px 10px 10px; /*De ruimte rond het menu */
        margin-top: 0px;
        margin-left: 25px; /*De ruimte tussen de menus */
        border-radius: 0px 0px 0px 0px;
        -moz-border-radius: 0px 0px 0px 0px;
        -webkit-border-radius: 0px 0px 0px 0px;
}

#menu a:hover {
	background: #none; /* Achtergrond kleur hover */
	color: #3d9be9; /* font lettertype kleur hover */
}

#menu ul {
	background: #3d9be9;
	border: 0px solid #999;
	width: 155px;
}

#menu ul a {
	background: #3d3d3f;
	color: #ffffff;
	font-size: 16px;
	width: 155px;
	padding: 15px;
        margin-left: 3%; /*De ruimte tussen de dropdown menus */
}

.currentpage {
	background: #none !important; /* Achtergrond kleur active current */ 
	color: #3d9be9 !important; /* Lettertype font kleur active current */
}

/* menu z-index */

#menu {
	z-index: 1000;
}

#menu ul {
	z-index: 2000;
}

#menu ul ul {
	z-index: 3000;
}

#menu ul ul ul {
	z-index: 4000;
}

@media screen and (max-width: 980px) {	

	/* menu link css */

	#menu a {
		padding: 10px 10px;
	}

}

@media screen and (max-width: 800px) {	

	/* mobile menu css */
	
	#nav-mobile {

		background: #84ff00;
		font-size: 13px;
		color: #FFF;
		padding: 18px;
		border-radius: 0px;
                margin-top: 20px;
	}
	
	#nav-mobile:before {
        content: "\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0  MENU";
	font-size: 16px;
        font-weight: bold;
        font-family: Arial;
        background: url('http://www.dekkertuinprojecten.nl/uploads/images/arrow.png') no-repeat left;
        background-size: 40px auto;
        -moz-background-size: 40px auto;
        -webkit-background-size: 40px auto;
    }


	
	#menu {
		float: none;
		font-size: 13px;
		display: none;
		border: none;
        border-radius: 0px 0px 0px 0px;
        -moz-border-radius: 0px 0px 0px 0px;
        -webkit-border-radius: 0px 0px 0px 0px;
left: 0px;
top: -7px;
	
    }
    
    
    

#menu a {
        border-radius: 0px 0px 0px 0px;
        -moz-border-radius: 0px 0px 0px 0px;
        -webkit-border-radius: 0px 0px 0px 0px;
        margin-left: 0px;
}





	
	#menu-mobile:hover #menu {
		display: block;
		


	}



	/* menu css */



	#menu li {
		float: none;

	}
	
	#menu li ul,
	#menu ul li ul,
	#menu ul ul li ul {
		position: relative;
		margin-top: 0px;
		margin-left: 0;
		display: block;
	}
	
	#menu li:hover ul ul,
	#menu ul li:hover ul ul {
		display: block;
	}
	
	#menu ul {
		width: 89%;
		border: 0;
	}

	/* menu link css */
	
	#menu li a {
		background: #3d3d3f;
	}
	
	#menu ul a {
		width: 100%;
		padding: 5px 5%;
                font-size: 12px;
	}
	
	#menu ul li ul a {
		width: 100%;
		padding: 15px 15%;
	}
	
	#menu ul li ul ul a {
		width: 100%;
		padding: 15px 20%;
	}

}

Alvast bedankt voor de hulp.

Gr. Sjoerd.

Post by **tristan** » Tue Sep 06, 2016 10:09 am

Wellicht beginnen om het menu uit de two-third-column div te halen en een nieuwe div te maken:

.two-third-column {
float: left;
width: 64.666666%;
margin: 10px 1%;
}

sjoerdd87 · Post by **sjoerdd87** » Mon Sep 12, 2016 8:48 am

Niemand die kan helpen dit menu te centeren?

Post by **tristan** » Mon Sep 12, 2016 8:56 am

sjoerdd87 wrote:Niemand die kan helpen dit menu te centeren?

Mijn reactie niet gelezen?

sjoerdd87 · Post by **sjoerdd87** » Mon Sep 12, 2016 9:00 am

tristan wrote:
sjoerdd87 wrote:Niemand die kan helpen dit menu te centeren?
Mijn reactie niet gelezen?

Jawel, maar kom er ff niet aan uit wat je precies bedoeld, had het ook ff kunnen vragen natuurlijk

sjoerdd87 · Post by **sjoerdd87** » Tue Sep 13, 2016 10:53 am

tristan wrote:Wellicht beginnen om het menu uit de two-third-column div te halen en een nieuwe div te maken:

.two-third-column {
float: left;
width: 64.666666%;
margin: 10px 1%;
}

Zelf maak ik geen gebruik van de two-third-column, ik gebruik alleen het menu van PMKmedia, verder een eigen template.
Het menu staat momenteel in de Header met de volgende opmaak:

Code: Select all

       background: rgba(246, 246, 245, 0.6); 
                width: 100%;
		min-height: 180px;
                max-height: 180px;
                float: left;
                position:fixed;
                z-index:100;
                margin-top: 0px;

Misschien dat iemand mij alsnog kan helpen met het centreren van het menu.
Heb ook verschillende opmaak verwijderd en margin-left/right auto gezet maar dit werkt ook niet.

Alvast bedankt.

pasmaskas · Post by **pasmaskas** » Tue Sep 13, 2016 12:57 pm

Misschien is dit een optie,

Voeg deze regels toe aan je header css

Code: Select all

	display: flex;
	justify-content: center; /* align horizontal */

Alles in de header word dan gecentreerd horizontaal. Je zou er een aparte div voor kunnen maken in de header om te voorkomen dat echt alles gecentreerd. b.v:

Code: Select all

#centermenu {
	display: flex;
	justify-content: center; /* align horizontal */
}

Code: Select all

<div id="centermenu">

<div>menu...</div>

</div>

Geen idee of het dan allemaal goed staat maar is het proberen waard.

Gr Pascal

sjoerdd87 · Post by **sjoerdd87** » Wed Sep 14, 2016 8:40 am

pasmaskas wrote:Misschien is dit een optie,

Voeg deze regels toe aan je header css
Code: Select all
	display: flex;
	justify-content: center; /* align horizontal */
Alles in de header word dan gecentreerd horizontaal. Je zou er een aparte div voor kunnen maken in de header om te voorkomen dat echt alles gecentreerd. b.v:
Code: Select all
#centermenu {
	display: flex;
	justify-content: center; /* align horizontal */
}
Code: Select all
<div id="centermenu">

<div>menu...</div>

</div>
Geen idee of het dan allemaal goed staat maar is het proberen waard.

Gr Pascal

Dit was de oplossing! bedankt voor je hulp!

CMS Made Simple Forums

Menu Centreren

Menu Centreren

Re: Menu Centreren

Re: Menu Centreren

Re: Menu Centreren

Re: Menu Centreren

Re: Menu Centreren

Re: Menu Centreren

Re: Menu Centreren [OPGELOST]