Support » Themes and Templates » My style.css must be retarded (or I am)

  • Resolved Goodvalley

    (@goodvalley)


    …it’s likely that I am.

    Ok, I’m trying to build a simple dropdown menu with css, nothing more. So it should be a piece of cake.

    I am using the SilverOrchid theme. It has a menu, but I need to add another menu which will have different links for every post. So I want to build a css menu which will be embedded in posts.

    I’m no expert nor programmer, but it’s not exactly my first day with WordPress either.

    Well, I’m simply not able to make the first sentence of the code in the style.css to work.

    For example, in the “text” screen of a post I put this code:

    <div id="my-header">
    
       <ul class="my-menu">
          <li><a href="">Item 1</a></li>
          <li><a href="">Item 2</a>
             <ul>
                <li><a href="">Item 2-1</a>
                   <ul>
                      <li><a href="">Item 2-1-1</a></li>
                      <li><a href="">Item 2-1-2</a></li>
                      <li><a href="">Item 2-1-3</a></li>
                      <li><a href="">Item 2-1-4</a></li>
                   </ul>
                </li>
                <li><a href="">Item 2-2</a></li>
                <li><a href="">Item 2-3</a></li>
                <li><a href="">Item 2-4</a></li>
                <li><a href="">Item 2-5</a></li>
             </ul>
             </li>
          <li><a href="">Item 3</a></li>
          <li><a href="">Item 4</a></li>
          <li><a href="">Item 5</a></li>
          <li><a href="">Item 6</a></li>
          <li><a href="">Item 7</a></li>
          <li><a href="">Item 8</a></li>
    	</ul>
    </div>

    Then I go to the style.css and add the following:

    .my-menu ul {
    		list-style:none;
    	}

    And it doesn’t work. I’ve changed everything, from “class” to “div”, adding #my-header and so on, and it simply does nothing. Yes, that is a very small piece of code and it should have a lot more. But I can’t solve the issue with the “list-style:none;” in any way.

    Here is the code in the style.css for the menu in my theme:

    #gazpo-nav {
    	background:#f6f6f6 url("images/nav-bg.png") repeat-x 0 0;
    	border-bottom:2px solid #ccc;
    	border-top:1px solid #ececec;
    	display: block;
    	float: left;
    	margin: 0 auto;
    	width: 100%;
    	position:relative;
    	z-index:4;
    }
    
    #gazpo-nav .main-menu ul,
    div.menu ul {
    	list-style: none;
    	margin: 0;
    	padding-left:0;
    	white-space:nowrap;
    }
    
    #gazpo-nav .main-menu li,
    div.menu li {
        float: left;
        position: relative;
    }
    
    #gazpo-nav a {
    	color:#737373;
        display: block;
        font-family: 'Droid Sans', sans-serif;
    	font-weight: bold;
    	text-shadow: 1px 1px 0px #fff;
      	font-size: 16px;
        line-height: 28px;
        margin-top: 1px;
        padding: 6px 20px;
        text-decoration: none;
    }
    #gazpo-nav .menu ul li.hover,
    #gazpo-nav .menu ul li:hover,
    #gazpo-nav ul.menu li.hover,
    #gazpo-nav ul.menu li:hover {
    	position: relative;
    	z-index: 599;
    	cursor: default;
    }
    #gazpo-nav ul ul {
     float: left;
        left: 0;
        position: absolute;
    	display:none;
        top: 40px;
        width: 180px;
    	z-index: 598;
    }
    #gazpo-nav ul ul li {
    	min-width: 180px;
    }
    #gazpo-nav ul ul ul {
    	left: 100%;
    	top: 0;
    	padding-left:2px;
    }
    
    #gazpo-nav ul ul a {
    	line-height: 1em;
        padding: 10px;
    	width: 180px;
    	height: auto;
    	margin-bottom:-1px;
    	font-size: 14px;
    	background: #f9f9f9;
    	border-bottom: 1px solid #ddd;
    	overflow:hidden;
    }
    
    #gazpo-nav ul ul a:hover {
    	color: #373737;
    }
    
    #gazpo-nav li:hover > a,
    #gazpo-nav ul ul :hover > a {
    	color: #373737;
    }
    #gazpo-nav ul li:hover > ul {
    	display: block;
    }
    #gazpo-nav ul li.current_page_item > a,
    #gazpo-nav ul li.current-menu-ancestor > a,
    #gazpo-nav ul li.current-menu-item > a,
    #gazpo-nav ul li.current-menu-parent > a {
    	color: #373737;
    }
    * html #gazpo-nav ul li.current_page_item a,
    * html #gazpo-nav ul li.current-menu-ancestor a,
    * html #gazpo-nav ul li.current-menu-item a,
    * html #gazpo-nav ul li.current-menu-parent a,
    * html #gazpo-nav ul li a:hover {
    	color: #373737;
    }
    
    #gazpo-nav li.submenu>a{
    	background: url(images/arrow_down.png) no-repeat 98% 50%;
    }
    
    #gazpo-nav li ul li.submenu>a{
    	background:#f9f9f9 url(images/arrow_right.png) no-repeat 98% 50%;
    }
    
    #gazpo-nav li ul li.submenu>a:hover{
    	background:#f9f9f9 url(images/arrow_right.png) no-repeat 98% 50%;
    }

    I’ve tried to copy some pieces of the same code above, but nothing works.

    What am I doing wrong?

Viewing 15 replies - 31 through 45 (of 77 total)
  • Ok, as previously mentioned, it is important to target selectors specifically. So, add this:

    #content .entry #my-header ul ul,
    #content .entry #my-header ul ul ul {
    padding: 0;
    margin: 0;
    }

    And you will need to remove all the negative margins you added to get all the lists to line up correctly…

    Goodvalley

    (@goodvalley)

    I see…

    But then the 2nd submenu dissapears instead of going popping to the right.

    Also this coding means that one has to be really careful about specifying selectors. I’m finding difficult to get it right.

    Goodvalley

    (@goodvalley)

    This is my entire code for the menu:

    #my-header {
    	margin:auto;
    	width:800px;
    	font-family: 'Droid Sans', sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    }
    
    #content .entry #my-header ul {
    	list-style: none;
    }
    
    #content .entry #my-header ul ul,
    #content .entry #my-header ul ul ul {
    padding: 0;
    margin: 0;
    }
    
    .my-menu li a {
    	background-color:#fcfcfc;
    	color:#184c76;
    	text-decoration:none;
    	padding:10px 15px;
    	display:block;
    	border-left: 1px solid #c9c9c9;
    	border-right: 1px solid #c9c9c9;
    	border-top: 1px solid #c9c9c9;
    	border-bottom: 1px solid #c9c9c9;
    }
    
    .my-menu li a:hover {
    	background-color:#cccccc;
    	color:#000000;
    }
    
    .my-menu > li {
    	float:left;
    }
    
    .my-menu li ul {
    	display:none;
    	position:absolute;
    	min-width:140px;
    }
    
    .my-menu li:hover > ul {
    	display:block;
    }
    
    .my-menu li ul li  {
    	position:relative;
    }
    
    /*.my-menu li ul li ul {
    	right:-140px;
    	top:0px;
    }*/
    Goodvalley

    (@goodvalley)

    I also have another question: I want the same arrow-down image that is in the main menu of the theme. The original code in the style.css was:

    #gazpo-nav li.submenu>a{
    	background: url(images/arrow_down.png) no-repeat 98% 50%;
    }

    so I’ve written:

    #my-menu li > a {
    	background: url(images/arrow_down.png) no-repeat 98% 50%;
    }

    but it doesn’t work.

    Goodvalley

    (@goodvalley)

    Last thing was solved.

    It’s not #my-menu. It’s #my-header or .my-menu 😉

    Is there any way of hiding these arrows IF there is no submenu in any menu block?

    Creating a multi tier css styled navigation menu is complicated. You are doing very well so far.

    You need to add the following to get your 3rd tier to show to the right of your dropdown (the first selector is shown for reference only):

    .my-menu li ul li  {
    	position:relative;
    }
    .my-menu li li ul {
    	position:absolute;
        top:0;
        left:100%;
    }
    Goodvalley

    (@goodvalley)

    It worked perfectly.

    I really thank you for all your help.

    Is there any way of hiding these arrows IF there is no submenu in any menu block?

    For easier read-ability I would suggest adding a white background to your list(s) as such (full selector shown for reference, find add add the background…):

    #content .entry #my-header ul {
    	list-style: none;
    	background-color: #FFF;
    }

    Then to remove the arrows from “childless” li add this to the bottom:

    .my-menu li > a:only-child { background-image: none; }

    Goodvalley

    (@goodvalley)

    Thanks DMBarber,

    While you wrote your last post, I did this:

    .my-menu li > a {
    	background:#fcfcfc url(images/arrow_down.png) no-repeat 98% 50%;
    }
    
    .my-menu li ul li > a {
    	background:#fcfcfc url(images/arrow_right.png) no-repeat 98% 50%;
    }

    which seems to work well.

    You’re coding for the arrows works like a charm too.

    Well, I think I’m done for the 1.0 version of this menu. The only thing left is to adapt some little details from the theme’s original main menu. I will try this tomorrow. Let’s see if I can solve everything by myself.

    DMBarber, I owe you a 6-pack…

    Glad to help. All the best!

    Goodvalley

    (@goodvalley)

    Right, this is the entire code:

    #my-header {
    	margin:auto;
    	width:800px;
    	font-family: 'Droid Sans', sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    }
    
    #content .entry #my-header ul {
    	list-style: none;
    }
    
    #content .entry #my-header ul ul,
    #content .entry #my-header ul ul ul {
    padding: 0;
    margin: 0;
    }
    
    .my-menu li a {
    	background-color:#fcfcfc;
    	color:#184c76;
    	text-decoration:none;
    	padding:10px 15px;
    	display:block;
    	border-left: 1px solid #c9c9c9;
    	border-right: 1px solid #c9c9c9;
    	border-top: 1px solid #c9c9c9;
    	border-bottom: 1px solid #c9c9c9;
    }
    
    .my-menu li a:hover {
    	background-color:#cccccc;
    	color:#000000;
    }
    
    .my-menu > li {
    	float:left;
    }
    
    .my-menu li ul li  {
    	position:relative;
    }
    .my-menu li li ul {
    	position:absolute;
        top:0;
        left:100%;
    }
    
    .my-menu li ul {
    	display:none;
    	position:absolute;
    	min-width:140px;
    }
    
    .my-menu li:hover > ul {
    	display:block;
    }
    
    .my-menu li ul li  {
    	position:relative;
    }
    
    /*.my-menu li ul li ul {
    	right:-140px;
    	top:0px;
    }*/
    
    .my-menu li > a {
    	background:#fcfcfc url(images/arrow_down.png) no-repeat 98% 50%;
    }
    
    .my-menu li ul li > a {
    	background:#fcfcfc url(images/arrow_right.png) no-repeat 98% 50%;
    }
    
    .my-menu li > a:only-child {
    
    	background-image: none;
    }

    But the result isn’t good enough with the alingment, as it can be seen at http://www.drumscult.com/es/sin_categoria/menu-drummers/

    It doesn’t fit well. If I expand the 800px width, it goes off the page, so the menu has to go to the left.

    Also the arrows at the end of the block titles are too close to the titles.

    One last help anybody?

    Goodvalley

    (@goodvalley)

    Ok, I’ve solved the arrows being too close to the titles, but the right-border is now too close to these arrows. Ummm…

    The absolute positioning of your arrows is controlled here:

    url(images/arrow_right.png) no-repeat 96% 50%;

    which translates to:

    url(images/arrow_right.png) no-repeat [DISTANCE FROM LEFT SIDE] [DISTANCE FROM TOP SIDE];

    Adjust accordingly. Also, I do not think this is working for you:

    .my-menu li > a {
    	background:#fcfcfc url(images/arrow_down.png) no-repeat 96% 50% padding:0px 20px;;
    }

    It should be:

    .my-menu li > a {
    background-color:#fcfcfc;
    background: url(images/arrow_down.png) no-repeat 96% 50%;
     padding:0px 20px;
    }

    That is why your arrows have disappeared from your first tier of the menu. Fixing that might have some surprising results. You were placing too many styles in one selector.

    Goodvalley

    (@goodvalley)

    Yes, you were seeing it while I was trying different things.

    Oh, right. I see the surprising results you were talking about. Now I’ll have to play with that…

    So the %-%-%-% means left-top-down-right?

    2.- The width issue. The menu doesn’t fit well. If I expand the 800px width, it goes off the page, so the menu has to go to the left.

    We’re almost done, almost done…

    Your menu is coming along nicely. If I might make a suggestion. And this is just in case you do not already know. If I am telling you something you already know, then just ignore it.

    First some explanation. Any style with a top, right, bottom, left (example: margin, padding, border) can be written using shortcuts in that order. So rather than writing:

    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-left: 10px;

    you can simply write:

    margin: [TOP] [RIGHT] [BOTTOM] [LEFT];

    or

    margin: 0 10px 0 10px;

    or even shorter by combining the top and bottom and right and left (if they are equal):

    margin: 0 10px;

    So, I tell you this, so when you are looking at your code you will understand how to “adjust” the padding, margins, etc.

    To get your menu to fit, first change the width from 800px to 100%. Then under #my-header change the font-size to 12px instead of 14px. Finally, adjust the right and left padding of .my-menu li a to maybe 16px or 18px. That should do the trick.

Viewing 15 replies - 31 through 45 (of 77 total)
  • The topic ‘My style.css must be retarded (or I am)’ is closed to new replies.