login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Css menu naar het midden (Opgelost)

Offline Slumpy - 30/07/2007 00:24
Avatar van SlumpyNieuw lid Hallo ,

Ik ben me onlangs wat gaan verdiepen in css , als test wou ik voor een vriend een site maken .
Mijn probleem is nu dat ik de dropdown menu niet mooi in het midden van de div krijg .( menu gevonden bij solardreamstudios )
Ik ben nieuw wat forums betreft , dus wou ik jullie vragen even te kijken op http://users.edpnet.be/danny/ .
Mag ik bij een eventuele oplossing ook een woordje uitleg a.u.b. , ik kan alleen maar bijleren , kon iemand mij het gehele css geval verduidelijken was dit natuurlijk perfect , maar alle beetjes helpen natuurlijk.

Alvast dank

6 antwoorden

Gesponsorde links
Offline vinTage - 30/07/2007 00:45 (laatste wijziging 30/07/2007 00:53)
Avatar van vinTage Nieuw lid offtopic, en na 2 pm's naar verschillende admins, staat de trailing slash nog steeds niet bij de <a href  

(en ja, ik vertik het om dat mantis ding te gebruiken) 


ontopic:
bedoel je dit ?
css code - Bekijk de code zonder highlighting - Klap code in 
  1. ul#navmenu {
  2. border:0pt none;
  3. height:24px;
  4. list-style-image:none;
  5. list-style-position:outside;
  6. list-style-type:none;
  7. margin:auto; /* dittuh of dittuh "margin-left:250px;"*/ 
  8. padding:0pt;
  9. width:500px;
  10. }
Offline Slumpy - 30/07/2007 12:11
Avatar van Slumpy Nieuw lid Hallo vinTage , dank voor uw reaktie , jammer genoeg blijkt dit niet te lukken .
Voor alle duidelijkheid hier de listing ,


css code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2. background-color: #000000;
  3. text-align: center;
  4. margin: 0;
  5. padding: 0;
  6. width: 100%;
  7. height: 100%;
  8. }
  9.  
  10. .container {
  11. background-color: #202020;
  12.  
  13. margin:0px auto;
  14. text-align: center; 
  15. margin-top: 10px;
  16. width: 760px;
  17. height: 580px;
  18. }
  19.  
  20. .header{
  21. background-color: #ff7f2a;
  22. background-image: url("HeaderBeeld.JPG");
  23. text-align: center;
  24. margin: 0 auto;
  25. width: 750px;
  26. height:120px;
  27. }
  28.  
  29. .menuheader{
  30. background-color: #878787;
  31. text-align: center;
  32. margin: 2px auto;
  33. width: 750px;
  34. height:25px;
  35. }
  36.  
  37. .madeby{
  38. background-color: #fd8127;
  39. font-family: verdana, arial, helvetica, sans-serif;
  40. font-size: 60%;
  41. text-align: right;
  42. margin: 0 auto;
  43. width: 760px;
  44. height: 12px;
  45. }
  46.  
  47. h1 {
  48. font: bold 16px Arial, Helvetica, sans-serif;
  49. }
  50.  
  51. p {
  52. font: 11px Arial, Helvetica, sans-serif;
  53. }
  54.  
  55. a {
  56. color: #900;
  57. text-decoration: none;
  58. }
  59.  
  60. a:hover {
  61. background: #900;
  62. color: #FFF;
  63. }
  64.  
  65.  
  66. /* Root = Horizontal, Secondary = Vertical */
  67. ul#navmenu {
  68.   margin: 0
  69.   border: 0 none;
  70.   padding: 0;
  71.   width: 500px; /*For KHTML*/
  72.   list-style: none;
  73.   height: 24px;
  74. }
  75.  
  76. ul#navmenu li {
  77.   margin: 0:
  78.   border: 0 none;
  79.   padding: 0;
  80.   float: center; /*For Gecko*/
  81.   display: inline;
  82.   list-style: none;
  83.   position: relative;
  84.   height: 24px;
  85. }
  86.  
  87. ul#navmenu ul {
  88.   margin: 0;
  89.   border: 0 none;
  90.   text-align: left;
  91.   padding: 0;
  92.   width: 160px;
  93.   list-style: none;
  94.   display: none;
  95.   position: absolute;
  96.   top: 24px;
  97.   left: 0;
  98. }
  99.  
  100. ul#navmenu ul:after /*From IE 7 lack of compliance*/{
  101.   clear: both;
  102.   display: block;
  103.   font: 1px/0px serif;
  104.   content: ".";
  105.   height: 0;
  106.   visibility: hidden;
  107. }
  108.  
  109. ul#navmenu ul li {
  110.   width: 160px;
  111.   float: left; /*For IE 7 lack of compliance*/
  112.   display: block !important;
  113.   display: inline; /*For IE*/
  114. }
  115.  
  116. /* Root Menu */
  117. ul#navmenu a {
  118.   border: 1px solid #FFF;
  119.   border-right-color: #CCC;
  120.   border-bottom-color: #CCC;
  121.   text-align: left;
  122.   padding: 0 6px;
  123.   float: none !important; /*For Opera*/
  124.   float: center; /*For IE*/
  125.   display: block;
  126.   background: #EEE;
  127.   color: #666;
  128.   font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  129.   text-decoration: none;
  130.   height: auto !important;
  131.   width: 0px auto;
  132.   height: 1%; /*For IE*/
  133. }
  134.  
  135. /* Root = Horizontal, Secondary = Vertical */
  136. ul#navmenu {
  137.   margin: 0;
  138.   border: 0 none;
  139.   padding: 0;
  140.   width: 500px; /*For KHTML*/
  141.   list-style: none;
  142.   height: 24px;
  143. }
  144.  
  145. ul#navmenu li {
  146.   margin: 0;
  147.   border: 0 none;
  148.   padding: 0;
  149.   float: left; /*For Gecko*/
  150.   display: inline;
  151.   list-style: none;
  152.   position: relative;
  153.   height: 24px;
  154. }
  155.  
  156. ul#navmenu ul {
  157.   margin: 0;
  158.   border: 0 none;
  159.   padding: 0;
  160.   width: 160px;
  161.   list-style: none;
  162.   display: none;
  163.   position: absolute;
  164.   top: 24px;
  165.   left: 0;
  166. }
  167.  
  168. ul#navmenu ul:after /*From IE 7 lack of compliance*/{
  169.   clear: both;
  170.   display: block;
  171.   font: 1px/0px serif;
  172.   content: ".";
  173.   height: 0;
  174.   visibility: hidden;
  175. }
  176.  
  177. ul#navmenu ul li {
  178.   width: 160px;
  179.   float: left; /*For IE 7 lack of compliance*/
  180.   display: block !important;
  181.   display: inline; /*For IE*/
  182. }
  183.  
  184. /* Root Menu */
  185. ul#navmenu a {
  186.   border: 1px solid #FFF;
  187.   border-right-color: #CCC;
  188.   border-bottom-color: #CCC;
  189.   padding: 0 6px;
  190.   float: none !important; /*For Opera*/
  191.   float: left; /*For IE*/
  192.   display: block;
  193.   background: #EEE;
  194.   color: #666;
  195.   font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  196.   text-decoration: none;
  197.   height: auto !important;
  198.   height: 1%; /*For IE*/
  199. }
  200.  
  201. /* Root Menu Hover Persistence */
  202. ul#navmenu a:hover,
  203. ul#navmenu li:hover a,
  204. ul#navmenu li.iehover a {
  205.   background: #CCC;
  206.   color: #FFF;
  207. }
  208.  
  209. /* 2nd Menu */
  210. ul#navmenu li:hover li a,
  211. ul#navmenu li.iehover li a {
  212.   float: none;
  213.   background: #EEE;
  214.   color: #666;
  215. }
  216.  
  217. /* 2nd Menu Hover Persistence */
  218. ul#navmenu li:hover li a:hover,
  219. ul#navmenu li:hover li:hover a,
  220. ul#navmenu li.iehover li a:hover,
  221. ul#navmenu li.iehover li.iehover a {
  222.   background: #CCC;
  223.   color: #FFF;
  224. }
  225.  
  226. /* 3rd Menu */
  227. ul#navmenu li:hover li:hover li a,
  228. ul#navmenu li.iehover li.iehover li a {
  229.   background: #EEE;
  230.   color: #666;
  231. }
  232.  
  233. /* 3rd Menu Hover Persistence */
  234. ul#navmenu li:hover li:hover li a:hover,
  235. ul#navmenu li:hover li:hover li:hover a,
  236. ul#navmenu li.iehover li.iehover li a:hover,
  237. ul#navmenu li.iehover li.iehover li.iehover a {
  238.   background: #CCC;
  239.   color: #FFF;
  240. }
  241.  
  242. /* 4th Menu */
  243. ul#navmenu li:hover li:hover li:hover li a,
  244. ul#navmenu li.iehover li.iehover li.iehover li a {
  245.   background: #EEE;
  246.   color: #666;
  247. }
  248.  
  249. /* 4th Menu Hover */
  250. ul#navmenu li:hover li:hover li:hover li a:hover,
  251. ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  252.   background: #CCC;
  253.   color: #FFF;
  254. }
  255.  
  256. ul#navmenu ul ul,
  257. ul#navmenu ul ul ul {
  258.   display: none;
  259.   position: absolute;
  260.   top: 0;
  261.   left: 160px;
  262. }
  263.  
  264.   ul#navmenu {
  265.   border:0pt none;
  266.   height:24px;
  267.   list-style-image:none;
  268.   list-style-position:outside;
  269.   list-style-type:none;
  270.   margin:auto; /* dittuh of dittuh "margin-left:250px;"*/
  271.   padding:0pt;
  272.   width:500px;
  273.   }
  274.  
  275. /* Do Not Move - Must Come Before display:block for Gecko */
  276. ul#navmenu li:hover ul ul,
  277. ul#navmenu li:hover ul ul ul,
  278. ul#navmenu li.iehover ul ul,
  279. ul#navmenu li.iehover ul ul ul {
  280.   display: none;
  281. }
  282.  
  283. ul#navmenu li:hover ul,
  284. ul#navmenu ul li:hover ul,
  285. ul#navmenu ul ul li:hover ul,
  286. ul#navmenu li.iehover ul,
  287. ul#navmenu ul li.iehover ul,
  288. ul#navmenu ul ul li.iehover ul {
  289.   display: block;
  290. }


html4strict code - Bekijk de code zonder highlighting - Klap code in 
  3. <title>E-M & Co. SPRL</title>
  4. <link href="EM.css" rel="stylesheet" type="text/css" />
  5.  
  6. <!--[if gte IE 5.5]>
  7. <script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
  8. <![endif]-->
  9. </head>
  10. <body>
  11.  <div class="container">
  12.  
  13.        <div class="header">
  14. 	   </div>
  15.  
  16. 	   <div class="menuheader">
  17. 	   <ul id="navmenu">
  18.   <li><a href="#">Electric </a></li>
  19.  
  20.   <li><a href="#">Protection </a>
  21.     <ul>
  22.       <li><a href="#">Websites </a>
  23.         <ul>
  24.           <li><a href="#">qrayg</a></li>
  25.           <li><a href="#">qArcade</a></li>
  26.           <li><a href="#">qLoM</a></li>
  27.  
  28.           <li><a href="#">qDT</a></li>
  29.         </ul>
  30.       </li>
  31.       <li><a href="#">Pen and Ink</a></li>
  32.       <li><a href="#">Free Interfaces</a></li>
  33.     </ul>
  34.   </li>
  35.  
  36.   <li><a href="#">Data </a>
  37.     <ul>
  38.       <li><a href="#">Fireworks </a>
  39.         <ul>
  40.           <li><a href="#">aquaButton</a></li>
  41.           <li><a href="#">aquaButton2</a></li>
  42.           <li><a href="#">waterDrop</a></li>
  43.  
  44.           <li><a href="#">lightFX</a></li>
  45.           <li><a href="#">lightFX2</a></li>
  46.         </ul>
  47.       </li>
  48.  
  49.       <li><a href="#">CSS </a>
  50.         <ul>
  51.           <li><a href="#">footerStick</a></li>
  52.  
  53.           <li><a href="#">spriteNav</a></li>
  54.           <li><a href="#">@import</a></li>
  55.         </ul>
  56.       </li>
  57.     </ul>
  58.   </li>
  59.   <li><a href="#">TVnum </a>
  60.     <ul>
  61.       <li><a href="#">Fireworks </a>
  62.         <ul>
  63.           <li><a href="#">aquaButton</a></li>
  64.           <li><a href="#">aquaButton2</a></li>
  65.           <li><a href="#">waterDrop</a></li>
  66.  
  67.           <li><a href="#">lightFX</a></li>
  68.           <li><a href="#">lightFX2</a></li>
  69.         </ul>
  70.       </li>
  71. 	  <li><a href="#">Construction metal </a>
  72.     <ul>
  73.       <li><a href="#">Fireworks </a>
  74.         <ul>
  75.           <li><a href="#">aquaButton</a></li>
  76.           <li><a href="#">aquaButton2</a></li>
  77.           <li><a href="#">waterDrop</a></li>
  78.  
  79.           <li><a href="#">lightFX</a></li>
  80.           <li><a href="#">lightFX2</a></li>
  81.         </ul>
  82.       </li>
  83.  
  84. 	   </div>
  85. 	   </div>
  86. 	   <div class="madeby">
  87. 	   Danny
  88. 	   </div></div>
  89.  
  90. 	   </body>
  91. </html>


Hopelijk kan hier iemand iets mee doen , ben namelijk al dagen op zoek naar een oplossing.

Dank
Offline nielsvdwal - 30/07/2007 12:15 (laatste wijziging 30/07/2007 12:16)
Avatar van nielsvdwal PHP gevorderde die lappen code kan je beter even weghalen en alles op pastebin zetten ..

offtopic: uhm.. kan aan mij liggen.. maar de tekst:
Citaat:
Hopelijk kan hier iemand iets mee doen , ben namelijk al dagen op zoek naar een oplossing.Dank
is bij mij geel/oranje .. net zoals in code blok..  

edit: en hij haalt bij die quote de <br>'s eruit ..
Offline Slumpy - 30/07/2007 20:00
Avatar van Slumpy Nieuw lid Dag , nielsvdwal , dank voor de reaktie .

Ik ben nieuw wat forums betreft , dus , wat is pastebin ?

Daar ik ook nieuw ben wat css betrefd , zou het voor mij handig zijn moest er iemand met een beetje tijd , mijn code kunnen aanpassen met een beetje uitleg .
Zo leer ik ook weer iets bij .

Alvast dank
Offline vinTage - 30/07/2007 20:05
Avatar van vinTage Nieuw lid pastebin is een webpagina waar je lange lappen code kan posten zodat dit forum "leesbaar" blijft.
Pastebin is te bereiken door de p button in het reactieveldje, als je je code daar gepost hebt, dan plaats je de url van je dump hier, zodat wij dan "daar" naar je code kunnen kijken.

onTopic, in IE7 staat je nav menu "bijna" in het midden, in FF staat hij links tegen de kant, maar dat is wel op te lossen door mn vorige antwoord.
met die 250px die ik al aangaf komt het behoorlijk in het midden te staan, met die margin:auto; komt hij net zo te staan als in IE.
Ik weet niet hoe het eruit ziet in ie6..
Offline Slumpy - 30/07/2007 21:47 (laatste wijziging 31/07/2007 20:27)
Avatar van Slumpy Nieuw lid Zo , dit zou het moeten zijn , hoop ik !

http://www.plaatscode.be/6149/


Probleem ondertussen opgelost door het volgende gewoon in uw css listing te plaatsen .

css code - Bekijk de code zonder highlighting - Klap code in 
  1. ul#navmenu {
  2.         left: 50%;
  3.         position: absolute;
  4.         width: 225px;
  5.         margin-left: -112


margin-left = de helft van de breedte(with) van uw menu .

Met dank aan iedereen die op deze post reageerde.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.198s