Joomla!NL - Menu centreert niet.

Menu centreert niet.

07 feb 2013 17:13

#1

Ik heb een probleem met een horizontaal menu, gemaakt via cssmenumaker.com

Ik heb de menubalk een breedte van 100% gegeven. De content is 1000px. En nu wilde ik eigenlijk de menu items mooi boven de content hebben. Ik heb nu margin-left 131 pixels. Maar dat werkt alleen bij een 1280 X 1024 resolutie.

Html code:

Code:

<div id="cssmenu">
<jdoc:include type="modules" name="topmenu" style=”xhtml” />
</div><!--end cssmenu-->

Css code menu:

Code:

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}

#cssmenu ul {
margin-left: 131px;
}

#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  width: 150px;
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}

Ik hoop dat iemand een oplossing weet.

dieter12
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 71

Menu centreert niet.

07 feb 2013 17:43

#2

Dat gaat zo niet.
Als je een link hebt dan kunnen we meekijken...

Tip: maak gebruik van de Firebug-addon voor Firefox (links naar deze tool hier te vinden addons.mozilla.org/nl/firefox/addon/firebug/?src=search ). Met deze tool kun je o.a. van ieder onderdeel van de site de css definities achterhalen en waar en in welk bestand ze staan. Tevens kun je met deze tool in de betreffende pagina van je site veranderingen aanbrengen in de css definities en meteen zien wat het effect is (later evt. wel zelf de aanpassingen aanbrengen in css bestanden).

groetjes,
Anne

www.numijneigenwebsite.nl + www.nmew.nl - KvK Brabant: 17281897

Wil je Joomla!NL steunen? Dat kan met een donatie.

AnneM
Joomla!NL vriend(in)
Berichten: 1863

Menu centreert niet.

07 feb 2013 18:04

#3

De website: www.echobravo.nl

Firebug-addon, dat is toch net zo iets als wat google chrome heeft ( rechtermuisknop element inspecteren)?

dieter12
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 71

Menu centreert niet.

08 feb 2013 20:43

#4

Er ontbreekt in de styles.css (regel 14) 2 regels voor de breedte en de margin

Code:

#cssmenu { 
background: linear-gradient(to bottom, #32323A 0px, #141414 100%) transparent;
border-bottom: 2px solid #0FA1E0;
border-radius: 5px 5px 0px 0px;
height: 49px;
width: 1000px;  /* toegevoegd */
margin: 0 auto; /* centreert */
}

groetjes,
Anne

www.numijneigenwebsite.nl + www.nmew.nl - KvK Brabant: 17281897

Wil je Joomla!NL steunen? Dat kan met een donatie.

AnneM
Joomla!NL vriend(in)
Berichten: 1863

Menu centreert niet.

08 feb 2013 21:06

#5

Maar dan is het menu 1000px breed i.p.v. 100%

zie www.echobravo.nl

dieter12
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 71

Menu centreert niet.

08 feb 2013 21:18

#6

Net zo breed als de wrapper en de footer want die zijn ook 1000px breed.

De header staat op 100% maar hierin zit een logocontainer die 1000px breed is en daarin zit je logo

Deze constructie heb je niet in cssmenu.
Dus of een extra container inbouwen of de overige elementen aanhouden...

groetjes,
Anne

www.numijneigenwebsite.nl + www.nmew.nl - KvK Brabant: 17281897

Wil je Joomla!NL steunen? Dat kan met een donatie.

AnneM
Joomla!NL vriend(in)
Berichten: 1863

Menu centreert niet.

08 feb 2013 21:21

#7

Hoe kan ik het beste een extra container inbouwen? Ik wil graag dat aleen de menu items gecentreerd worden.

dieter12
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 71

Menu centreert niet.

08 feb 2013 21:44

#8

Misschien kan je een extra module-positie inbouwen in je template?
Daarin je cssmenu-module zetten.

groetjes,
Anne

www.numijneigenwebsite.nl + www.nmew.nl - KvK Brabant: 17281897

Wil je Joomla!NL steunen? Dat kan met een donatie.

AnneM
Joomla!NL vriend(in)
Berichten: 1863

Menu centreert niet.

09 feb 2013 11:42

#9

Het is gelukt. Ik heb een extra container met 100% breedte gemaakt. Bedankt voor de hulp.

dieter12
Heeft onderwerp gestart
Bekend met Joomla!NL
Berichten: 71

Menu centreert niet.

09 feb 2013 11:45

#10

Fijn dat het opgelost is.
Dank je wel voor de terugkoppeling.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37456

Laatste nieuws

Welkom bij Joomla!NL

Menu centreert niet.

Menu centreert niet.

Menu centreert niet.

Menu centreert niet.

Menu centreert niet.

Menu centreert niet.

Menu centreert niet.

Menu centreert niet.

Menu centreert niet.

Menu centreert niet.

Menu centreert niet.

Laatste forumberichten

Wil je Joomla!NL steunen?