CSS - MODX - NAVIGATION HELP $$REWARD$$

  • cerebralailment
  • Newbie
  • Newbie
  • cerebralailment
  • Posts: 9

Post 3+ Months Ago

Greetings, I'm trying to do something new - using modx to do a website. I'm using the Wayfinder snippet to dynamically create my navigation bar.

But I feel I have destroyed my CSS or something not right is going on. I've been trying different things for the last 3 hours and I'm sure its something super simple!

Here is the URL to the site http://www.worldwideeasy.com/levassociation/

As you can see, the menu is all messed up. What I want to happen is for the menu to be all the way across to the black edges (54px in from each side of the div) and have the drop downs lined up correctly. But for some reason I can't do anything!

Here is a copy of my source:

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>[(site_name)] | [*pagetitle*]</title>
    <meta name="[*description*]" content="Joomla Website">
    <meta name="copyright" content="Copyright (c) 2009 Light Electric Vehicle Association">
    <meta name="author" content="WorldWideEasy">
    <style type="text/css">
   
    body,
    html {
        margin:0;
        padding:0;
        color:#000;
        background:#FFFFFF;
    }
    #wrap {
        width:750px;
        margin:0 auto;
        background-image:url(assets/templates/Lev_Templates/images/layout_trial_1-step3_03.gif)
    }
    #header {
        height:194px;
        overflow:hidden;
        padding:50px 54px 2px 54px;
        background-image:url(assets/templates/Lev_Templates/images/layout_trial_1-step3_01.gif)
    }
    h1 {
        margin:0;
    }
    #main {
        float:right;
        width:426px;
        padding:10px;
        margin-right: 54px;
        background:none;
    }
    h2 {
        margin:0 0 1em;
    }
    #sidebar {
        float:left;
        width:176px;
        padding:10px;
        margin-left: 54px;
        background:none;
    }
    #footer {
        height:136px;
        clear: both;
        padding:12px 54px 10px 54px;
        background-image:url(assets/templates/Lev_Templates/images/layout_trial_1-step3_06.gif);
   
    }
    #footer p {
        margin:0;
    }
    * html #footer {
        height:136px;
    }
    img.floatLeft {
    float: left;
    margin: 4px;
}
.style6 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
#nav {
background: none;
}
#nav ul li{
list-style: none;
margin: 0;
padding: 0;
width: auto;
float: left;
}
#nav a, #nav h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
 
#nav h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
 
ul.navigation a {
color: #000;
background: #efefef;
text-decoration: none;
}
 
ul.subnav a:hover {
color: #FFFFFF;
background: #000000;
}
#nav li {position: relative;}
 
ul.subnav ul ul {
position: absolute;
z-index: 500;
}
ul.subnav  {
top: 0;
left: 100%;
}
div#nav ul ul,
div#nav ul li:hover ul ul,
div#nav ul ul li:hover ul ul
{display: none;}
 
#nav ul li:hover ul,
#nav ul ul li:hover ul,
#nav ul ul ul li:hover ul
{display: block;}
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
 
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
 
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
 
</head>
<body>
<div id="wrap">
  <div id="header">
  </div>
  <div id="nav">
[[Wayfinder? &startId=`0` &outerTpl=`menuContainer` &outerClass=`navigation` &rowTpl=`menuRows` &innerTpl=`innerContainer` &innerClass=`subnav` &innerRowTpl=`submenuRows` &rowClass=`navitems` &level=`2` &hideSubMenus=`TRUE`]]
  </div>
    <div id="main">
        <p>[*content*]
          </p>
    </div>
    <div id="sidebar">
        <h2>Recent News</h2>
        <p>[!ListIndexer?LIn_root=0!]
    </div>
 
  <div id="footer">
    <p>&nbsp;</p>
</p>
  </div>
 
</div>
 
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>[(site_name)] | [*pagetitle*]</title>
  6.     <meta name="[*description*]" content="Joomla Website">
  7.     <meta name="copyright" content="Copyright (c) 2009 Light Electric Vehicle Association">
  8.     <meta name="author" content="WorldWideEasy">
  9.     <style type="text/css">
  10.    
  11.     body,
  12.     html {
  13.         margin:0;
  14.         padding:0;
  15.         color:#000;
  16.         background:#FFFFFF;
  17.     }
  18.     #wrap {
  19.         width:750px;
  20.         margin:0 auto;
  21.         background-image:url(assets/templates/Lev_Templates/images/layout_trial_1-step3_03.gif)
  22.     }
  23.     #header {
  24.         height:194px;
  25.         overflow:hidden;
  26.         padding:50px 54px 2px 54px;
  27.         background-image:url(assets/templates/Lev_Templates/images/layout_trial_1-step3_01.gif)
  28.     }
  29.     h1 {
  30.         margin:0;
  31.     }
  32.     #main {
  33.         float:right;
  34.         width:426px;
  35.         padding:10px;
  36.         margin-right: 54px;
  37.         background:none;
  38.     }
  39.     h2 {
  40.         margin:0 0 1em;
  41.     }
  42.     #sidebar {
  43.         float:left;
  44.         width:176px;
  45.         padding:10px;
  46.         margin-left: 54px;
  47.         background:none;
  48.     }
  49.     #footer {
  50.         height:136px;
  51.         clear: both;
  52.         padding:12px 54px 10px 54px;
  53.         background-image:url(assets/templates/Lev_Templates/images/layout_trial_1-step3_06.gif);
  54.    
  55.     }
  56.     #footer p {
  57.         margin:0;
  58.     }
  59.     * html #footer {
  60.         height:136px;
  61.     }
  62.     img.floatLeft {
  63.     float: left;
  64.     margin: 4px;
  65. }
  66. .style6 {
  67.     font-family: Verdana, Arial, Helvetica, sans-serif;
  68.     font-size: 12px;
  69. }
  70. #nav {
  71. background: none;
  72. }
  73. #nav ul li{
  74. list-style: none;
  75. margin: 0;
  76. padding: 0;
  77. width: auto;
  78. float: left;
  79. }
  80. #nav a, #nav h2 {
  81. font: bold 11px/16px arial, helvetica, sans-serif;
  82. display: block;
  83. border-width: 1px;
  84. border-style: solid;
  85. border-color: #ccc #888 #555 #bbb;
  86. margin: 0;
  87. padding: 2px 3px;
  88. }
  89.  
  90. #nav h2 {
  91. color: #fff;
  92. background: #000;
  93. text-transform: uppercase;
  94. }
  95.  
  96. ul.navigation a {
  97. color: #000;
  98. background: #efefef;
  99. text-decoration: none;
  100. }
  101.  
  102. ul.subnav a:hover {
  103. color: #FFFFFF;
  104. background: #000000;
  105. }
  106. #nav li {position: relative;}
  107.  
  108. ul.subnav ul ul {
  109. position: absolute;
  110. z-index: 500;
  111. }
  112. ul.subnav  {
  113. top: 0;
  114. left: 100%;
  115. }
  116. div#nav ul ul,
  117. div#nav ul li:hover ul ul,
  118. div#nav ul ul li:hover ul ul
  119. {display: none;}
  120.  
  121. #nav ul li:hover ul,
  122. #nav ul ul li:hover ul,
  123. #nav ul ul ul li:hover ul
  124. {display: block;}
  125. <!--[if IE]>
  126. <style type="text/css" media="screen">
  127. body {
  128. behavior: url(csshover.htc);
  129. font-size: 100%;
  130. }
  131.  
  132. #menu ul li {float: left; width: 100%;}
  133. #menu ul li a {height: 1%;}
  134.  
  135. #menu a, #menu h2 {
  136. font: bold 0.7em/1.4em arial, helvetica, sans-serif;
  137. }
  138. </style>
  139. <![endif]-->
  140.  
  141. </head>
  142. <body>
  143. <div id="wrap">
  144.   <div id="header">
  145.   </div>
  146.   <div id="nav">
  147. [[Wayfinder? &startId=`0` &outerTpl=`menuContainer` &outerClass=`navigation` &rowTpl=`menuRows` &innerTpl=`innerContainer` &innerClass=`subnav` &innerRowTpl=`submenuRows` &rowClass=`navitems` &level=`2` &hideSubMenus=`TRUE`]]
  148.   </div>
  149.     <div id="main">
  150.         <p>[*content*]
  151.           </p>
  152.     </div>
  153.     <div id="sidebar">
  154.         <h2>Recent News</h2>
  155.         <p>[!ListIndexer?LIn_root=0!]
  156.     </div>
  157.  
  158.   <div id="footer">
  159.     <p>&nbsp;</p>
  160. </p>
  161.   </div>
  162.  
  163. </div>
  164.  
  165. </body>
  166. </html>
  167.  


If anyone can help get what I want, that would be awsome! Please feel free to IM me on AIM (Juiiiceetiinn) or pm me or post or what ever. I need to get this finished ASAP - I'm even open to phone calls.
  • cerebralailment
  • Newbie
  • Newbie
  • cerebralailment
  • Posts: 9

Post 3+ Months Ago

I'll be sitting on this thread all night. so Feel free to post here if your uncomfortable messaging me.
  • cerebralailment
  • Newbie
  • Newbie
  • cerebralailment
  • Posts: 9

Post 3+ Months Ago

Like Bob Parson says - "Fix your own problems" =D

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 51 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.