My style.css must be retarded (or I am)

I’ve started to put the menu in some posts.

It is aligned to the right, I would like it to be more centered.

This can be seen at: https://www.drumscult.com/other_products/thomas-lang-signature-sticks/

If I put this:

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

it goes all to the left, but if I change the “0” to another value, it goes again back to the right.

No, I simply cannot solve the two issues with the background image in the blocks that I mentioned before nor the issue with the alingment of the entire menu.

It would be great if anybody can help, I’ve been trying for hours now…

To center your ul, you have to remember to be specific. As soon as your css is not, or can not be, interpreted properly, it will default to what is recognized. In your case, it defaults back to a selector on line 731:

#content .entry ul {
list-style-type: square;
margin: 5px 10px 10px 40px;
}

To avoid this, add #content .entry #drummers-header ul, to your list of list selectors so the whole thing looks like (found on or around line 1537 – emphasis added for clarity):

<strong>#content .entry #drummers-header ul,</strong>
#content .entry #drummers-header ul ul,
#content .entry #drummers-header ul ul ul {
padding: 0;
margin: 0;
}

Now to center it, reduce the width to 94% (found under #drummers-head on line 1526).

The ‘a’ element sits ‘on top’ of your ‘li’ element. So, if the ‘a’ elelment is colored, you will not see any color/image on your li elemnt. To see the li background you want you have to remove the #fcfcfc from the .drummers-menu li > a and .drummers-menu li ul li > a and add a line:

#content .entry #drummers-header li {
background: url(images/nav-bg.png) repeat-x top left;
}

So, here is your css in its entirety with all the changes you are looking for (feel free to copy and paste):

/*----------------------------------
		Menu DRUMMERS
------------------------------------*/

#drummers-header {
	margin:auto;
	width:94%;
	font-family: 'Droid Sans', sans-serif;
	font-size: 14px;
	font-weight: bold;
}

#content .entry #drummers-header ul {
	list-style: none;
}

#content .entry #drummers-header li {
	background: url(images/nav-bg.png) repeat-x top left;
}

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

.drummers-menu li a {
	/*background-color:#fcfcfc;*/
	color:#184c76;
	text-decoration:none;
	padding-left: 7px;
	padding-right: 18px;
	padding-top: 8px;
	padding-bottom: 8px;
	display:block;
	border: 1px solid #c9c9c9;
}

.drummers-menu li a:hover {
	background-color:#cccccc;
	color:#000000;
}

.drummers-menu > li {
	float:left;
}

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

.drummers-menu li ul {
	display:none;
	position:absolute;
	min-width:140px;
}

.drummers-menu li:hover > ul {
	display:block;
}

.drummers-menu li ul li  {
	position:relative;
}

.drummers-menu li ul li ul {
	min-width:260px;
}

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

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

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

Hi DMBarber,

let me digest what you just said, I want to understand it well, not just copy/paste it. Give me a little while…

I have to admit I’m still struggling to understand all the exact points you just described.

As far as I understand, when it previously “sees” #content .entry ul, it obbeys that no matter what you do. So you have to specify one exact ul for it to do what you want. Then you tell it to obbey the orders under the specific .entry #drummers-header ul. Is that right?

Believe it or not, I DID see:

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

and I wondered why there wasn’t a sentence with just one “ul”, but I simply didn’t try it. I would have solved it myself, but better to get an explanation of what actually happens. I didn’t know about the previous sentence that was dominant.

What I don’t understand is the “94%”. I mean, I thought there has to be a code to center the menu and then give it a % of measure in relation the space available. But what I understand is that we have first put it to the left and then make a trick to “short it”, instead of telling it just to center itself. Sorry for my bad understanding.

This seems to be a neverending game: now I have (thanks to you) the exact menu that I wanted, which mimics the original menu from my theme. BUT there is a big problem: now my homepage shows the list in the excerpts. I didn’t count on that until I saw it an hour ago.

So I did some research and I found some code that filters the shortcodes, divs, class and so on, but I don’t know how it is to be written or exactly where. Can you do a last effort to help me?

This is getting ridiculous… We have solved the issue with the background image, but of course… yet another problem!

When having a text that exceeds the width, it splits in two lines, which is perfect. But since we have a background image that has a short height, the block gets broken. Wonderful!

When will this end??????

Regarding the excerpts issue, I found this: https://www.ads-software.com/support/topic/hiding-a-div-from-an-excerpt?replies=8

but I don’t know how to implement it.

Ok, so when you decide to quit banging those drums and go into web design full time (just kidding) here is, hopefully, a better explanation. Really, this is incase you want to style anything else, you can understand better what you are doing.

As far as I understand, when it previously “sees” #content .entry ul, it obbeys that no matter what you do.

Kind of. It is more that this rule is “found” first. And, when interpreted, the browser looks for an item with id content AND class entry that is a unordered list. So ANY item with those parameters, in that EXACT order, will be styled that way. To overcome this, another rule must be written that either looks for the same exact parameters, or more narrowly focuses the search. This rule #content .entry #drummers-header ul ul looks for an item with id content AND class entry AND id drummers-header (in that EXACT order) it then continues to search for an unordered list that is inside an unorderer list. I simply forgot to say include an unordered list by itself.

Styling ALWAYS defaults to the left, in left to right oriented languages. Top and left are the default “start” point. Since I forgot to specifically state that #content .entry #drummers-header ul should not have a margin or padding, #content .entry ul was used, which does have a margin. That being said:

What I don’t understand is the “94%”. I mean, I thought there has to be a code to center the menu and then give it a % of measure in relation the space available. But what I understand is that we have first put it to the left and then make a trick to “short it”, instead of telling it just to center itself.

Is kind of right. However, it automatically starts to the left, we do not have to “put it left” and, sadly, there is no code to “auto center” this kind of item. But for anything to be “centered” it MUST be shorter than its container (yes, whatever is holding it: div, paragraph, the whole body of the page, etc.) AND have a defined width. Otherwise, how can it be “centered”? So we, must make sure the ul is shorter than the div containing it. Hence the 94%. And then we “trick” it to center by adding an “auto” margin to the left and right (tell the browser to figure out how much space is left over and split the difference on either side).

This seems to be a neverending game

Yes, at best, it is a “guessing game” as to how to make it look the best in all situations (which are limitless…). But at least it is fun ??

When having a text that exceeds the width, it splits in two lines, which is perfect. But since we have a background image that has a short height, the block gets broken. Wonderful!

I am not sure what you mean by “broken.” Since I cannot see this actually happen, could you be more specific please?

The “excerpt” thing will take me a bit… if I can figure that one out…

Wow, great explanation indeed. Tomorrow morning will read it carefully, I want to understand it. You know, it’s 3 am here in Bacelona ??

I made this post public. Just go to the css menu and click on “DVD’s”, you will see what I mean: https://www.drumscult.com/dvd/thomas-lang-creative-control/

Of course, if there’s no solution I will try to shorten the titles or make the blocks longer. Trouble is that then all of them will be too long…

Regarding the excerpt issue, I also found this, not sure if it makes sense: https://www.ads-software.com/support/topic/hiding-list-style-from-excerpts?replies=2

Thanks DMBarber

Hi DMBarber,

Yes, at best, it is a “guessing game” as to how to make it look the best in all situations (which are limitless…). But at least it is fun ??

Man, playing drums is funnier, I tell you…;)

I’ve been searching all day for the excerpt thing and nothing. There seems to be ways of hiding the tags, but not the tags and the text between them.

There should be an easy way of hiding everything within a specific tag like <div> and </div>, for example.

Quite a problem here…

And the background of the blocks when text splits in two lines, I can’t find anything about that either.

I have not been able to find anything about the excerpt either… I will keep looking. I enjoy finding interesting solutions.

To fix your ‘background of the blocks when text splits’ problem, in your style sheet find #content .entry #drummers-header li

and change it to:

#content .entry #drummers-header li {
background-color: #fcfcfc;
background-image: url(images/nav-bg.png);
background-repeat: repeat-x;
background-position: bottom left;
}

By separating the different elements you have greater control over the styling. Shortcuts are limiting…

Could you provide a link to an excerpt so that I can “see” the problem. That will help me. Right now I have to just guess what is going on…

If you go to https://www.drumscult.com, there should be the excerpts for the 2 posts that I left opened to public view. This is the homepage, so you can see the excerpts in the slider.

For a full view of what I’m trying to accomplish, go to https://www.putrumputrum.com/en This is my former site, which I’m migrating to https://www.drumscult.com, my new drumming site. There is a full homepage there with all the excerpts.

Thanks DMBarber, seems that this time I’ve been able to put a real challenge at you… at last! ?? I told you, drumming is funnier!

Ah, I think I get it: with the bottom-left positioning of the repeating image plus the background color for all the block, you ensure the whole block gets fully covered of background.

In fact, I did think of it and was about to suggest it to you, but I thought it was impossible to superpose an image over a background color.

Good bag of tricks you have there…

but I thought it was impossible to superpose an image over a background color

only when using shortcuts… thats why I broke it out into itemized styles.

As far as your excerpt goes, I do not see the menu in the excerpt. In fact, I do not see anything out of the ordinary. Could you be more specific?

And maybe you should start a new post in the ‘How-to and Troubleshooting’ section so that you can mark this one as resolved (since it is about your style sheet and not excerpt functions). That way others experiencing the same problem can see the solution. Otherwise, it will get lost in this very long post…

If you do start another post, just say so in a closing post here and I will come find the other…