WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] My style.css must be retarded (or I am) (78 posts)

  1. Goodvalley
    Member
    Posted 6 months ago #

    Ok, I'm done with a pretty decent 1.0 version of what I need.

    DMBarber, when I put the code like this

    #content .entry #my-header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    it works perfectly. But as I said, the menu is to the left. But the rest of it is perfectly aligned, the submenus and everything.

    Buy if I try to center the menu putting the code you just told me

    #content .entry #my-header ul {
    list-style: none;
    }
    
    #content .entry #my-header ul.my-menu {
    padding: 0;
    margin: 0 auto;
    display: block;
    width: 80%;
    }

    it goes centered but loses the alignment. You can see how it gets if you go to http://www.drumscult.com/es/sin_categoria/menu-drummers/

    I can't find where's the problem

    Sorry for so many questions, I really appreciate your help

  2. DMBarber
    Member
    Posted 6 months ago #

    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...

  3. Goodvalley
    Member
    Posted 6 months ago #

    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.

  4. Goodvalley
    Member
    Posted 6 months ago #

    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;
    }*/
  5. Goodvalley
    Member
    Posted 6 months ago #

    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.

  6. Goodvalley
    Member
    Posted 6 months ago #

    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?

  7. DMBarber
    Member
    Posted 6 months ago #

    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%;
    }
  8. Goodvalley
    Member
    Posted 6 months ago #

    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?

  9. DMBarber
    Member
    Posted 6 months ago #

    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; }

  10. Goodvalley
    Member
    Posted 6 months ago #

    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...

  11. DMBarber
    Member
    Posted 6 months ago #

    Glad to help. All the best!

  12. Goodvalley
    Member
    Posted 6 months ago #

    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?

  13. Goodvalley
    Member
    Posted 6 months ago #

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

  14. DMBarber
    Member
    Posted 6 months ago #

    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.

  15. Goodvalley
    Member
    Posted 6 months ago #

    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...

  16. DMBarber
    Member
    Posted 6 months ago #

    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.

  17. Goodvalley
    Member
    Posted 6 months ago #

    Nice explanation, I knew a little about that, but not the whole thing.

    But in the code:

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

    according to your former explanation, when you only have 2 of the 4 possible numbers, it should be TOP and RIGHT. Or am I missing something?

  18. DMBarber
    Member
    Posted 6 months ago #

    Good point. Absolute positioning does not follow the same pattern. With that kind of placement only two coordinates are necessary. So, the url ...96% 50%... is a shortcut for left and top (the defaults). And I forgot to mention the full shortcut for the margin, padding, border, etc (things with 4 sides, not just 2 coordinates); the shortest is not designation, and this means all four sides. Hence:

    padding: 20px;

    adds 20 pixels of padding to all four sides.

    Hope that helps.

  19. DMBarber
    Member
    Posted 6 months ago #

    So, changing .my-menu li > a to padding-left is why it now looks all cramped together, and leaves not "space" for the arrow...

  20. Goodvalley
    Member
    Posted 6 months ago #

    Ok, I've adjusted the width to 100% and this in the .my-menu li:

    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    padding-bottom:10px;

    which is perfect, but now the arrow is a problem. Almost finishing, almost...

  21. DMBarber
    Member
    Posted 6 months ago #

    padding: 8px 18px 8px 6px;

    should look good.

  22. DMBarber
    Member
    Posted 6 months ago #

    Or:

    padding-left: 6px;
    padding-right: 18px;
    padding-top: 8px;
    padding-bottom: 8px;

    if you prefer

  23. Goodvalley
    Member
    Posted 6 months ago #

    We were writting at the same time...

    I don't understand what to do with the arrow and why it doesn't fit. I thoght it would adapt, but no...

  24. Goodvalley
    Member
    Posted 6 months ago #

    Aaaah,

    of course, you have to count the distance INCLUDING the arrow!

    Right, right, I didn't get it...

    Thanks so so much DMBarber, you saved my entire week. Before I asked here, it was a nightmare, I didn't know why it didn't work from that problem in the style.css and now we've done it!

    Thank you thank you thank you!

  25. DMBarber
    Member
    Posted 6 months ago #

    The arrow has an absolute position. In other words:

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

    means: use image arrow_right.png, do not repeat it, place it 96% away from the left side and 50% down from the top (using the center point of the image). Here is some easy math example. Say your li is 100px in width. Your 96% placement means 96 pixels (i.e. 1px per 1%).

    Because it is placed 'absolute'ly, it does not adapt.

  26. DMBarber
    Member
    Posted 6 months ago #

    My pleasure. All the best!

  27. Goodvalley
    Member
    Posted 6 months ago #

    Just one last (really, this is the last) question.

    In some blocks I will put a long title. Is it possible for the width of a block to adapt to this lenght without affecting the others?

    It think I'm reaching the limits of coding here... and your patience

  28. Goodvalley
    Member
    Posted 6 months ago #

    Oh, nevermind, I see the text goes splits in two lines if necessary. That should be enough.

    Thanks for all the effort in helping me out!

  29. Goodvalley
    Member
    Posted 6 months ago #

    Finally, the code goes like this:

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

    There's just one more thing missing. I would like the blocks of the entire menu to have this background image:

    background:#f6f6f6 url("images/nav-bg.png") repeat-x 0 0;

    but whenever I try to put it in several different places in the code, the images of the arrows dissapear, or the blocks get transparent or it simply doesn't work.

    Anyone has any idea?

    Thanks in advance.

  30. DMBarber
    Member
    Posted 6 months ago #

    I can no longer see your post (the menu drummer you made public yesterday). Can you show that again, please?

Reply »

You must log in to post.

About this Topic