By Sunshiney on

Hi ---

First off, I am truly, truly trying to do this without help but boy, I sure do ** greatly** appreciate the help I get from this forum. I'm sitting here 9, 10, 11 hours a day, learning Drupal and it's now month 4 and I still am learning.

Now to my question. If you go to the http://www.uidaho.edu site, look at the horizontal menu at top of page. Note the vertical bar that is to the left of "Home" and the vertical bar to the right of "athletics."

Those borders are created by a blank li that has inline styling. I can't figure out how to recreate that effect in Drupal using the menus administration panel.

I did get the bars and other styling created by dumping a copy of the system menu css into my custom theme, alongside the style.css from the university. Style.css (4399 lines!!) is very complex, with loads of dependencies and inheritances.

Things would have been sweet if I could have just changed the classes/Ids directly in the html. Absent that, the only thing I could figure out was to comment out a few of the style rules in the system menu css. That worked. Sloppy but it worked.

Can anybody lend a tired soul a hand? Any suggestions on how to get those left and right end borders?

Here's the original html 

<div id="globalnav1">
<div id="globalnav2">
<div id="globalnav3">
<ul>
<li style="border: 0pt none ; width: 15px;"/>
<li>
<a title="Home" href="/">Home</a>
</li>
<li>(repeat)
</li>
<li>
<a title="Athletics" href="http://govandals.com/" onclick="pTUA7940151._trackPageview('/exit/govandals.com/');">Athletics</a>
</li>
<li/>
</ul>
</div>
⋅ Categories: Drupal 6.x

Comments

john.kenney’s picture

john.kenney commented

Do you know how to use Firebug in Firefox? If not, probably worth learning.

Once installed, you can find the applicable CSS for any page element by right clicking on it and choosing 'inspect element'.

In this case, it is created by CSS in style sheet called UIstylesHome.css. No idea where that file resides, but that's what's controlling it.

Line 479 which has this:

#globalnav3 ul li {
-x-system-font:none;
border-left:1px solid #CCCCCC;
color:#484848;
float:left;
font-family:verdana,arial,helvetica,sans-serif;
font-size:10px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
height:25px;
line-height:normal;
margin:0;
text-transform:uppercase;
}

Hope that helps.

Sunshiney’s picture

Sunshiney commented

Hi John -- Thanks for helping me. I do use firebug and I'm aware of the globalnav3 ul li id but that's not the problem. The problem is that I can't do inline styling of the first li in the menu list. Because of the styles used in the uistyles.css (which I'm using as styles.css), the only way to get that left border is to create a blank li and style it inline. To get the right border, a blank li is used

No idea how to do that. (Looking at a module right now to see if that will do it.) Open to suggestions! :-)

john.kenney’s picture

john.kenney commented

sorry, still not following you.

you simply want begin and end borders on the

  • so it is all even.

    to do that, i would change the globalnav3 ul li styling to put the line on the right side of the

  • (vs. currently on left).

    then i would apply that same line as the left border of the

      . then adjust padding, margins accordingly to get right amount of indentation.

      is that going in the right direction?

    • john.kenney’s picture

    john.kenney commented

    sorry, still not following you.

    you simply want begin and end borders on the li so it is all even.

    to do that, i would change the globalnav3 ul li styling to put the line on the right side of the li (vs. currently on left).

    then i would apply that same line as the left border of the ul. then adjust padding, margins accordingly to get right amount of indentation.

    is that going in the right direction?

    john.kenney’s picture

    john.kenney commented

    Hmm. Re-reading your note, I guess I don't know what the question is, so my answer is probably not too helpful.

    Sunshiney’s picture

    Sunshiney commented

    Hi John_Kenney

    I must be getting tired! Trying to communicate clearly but I appear to be failing. Pooh. Here goes, again. First, my reworded question is: How can I create the blank 15 px wide li that is to the left of the word "Home" in the menu at uidaho.edu. I'm recreating that menu -- identical -- in Drupal for a university program.

    Off-hand, it appears simple. Ordinarily, I would do just as the university folks have already done: 1) create an empty li as the first li in the list . I would do that to get an empty block that will automatically have a right border because of the CSS you earlier referenced. 2) style that li right within the html, so it's 15 px wide. Here's the inline style that was used by the university: <li style="border: 0pt none ; width: 15px;"/>

    But, I cannot do the same thing, so far. Drupal and the administration menu system doesn't allow me to get at the html to add that identical li style . That's because the html is being generated by php

    I have been able to recreate the rest of the menu, with the exception, also, of the li at the far right of the same menu. Once again, that's a blank li

    Hope that's clearer.

    dnaromance’s picture

    dnaromance commented

    Hi,

    Are you trying to say you want your menu link on top looks like the menu on your top most right corner? First and last without side border?

    I'm not sure you do it HTML way is correct in Drupal, I knew it works. But, it's hardcoded?

    I know you can do it with first and last menu, so you can just set it first menu border-left: 0px; then last menu border-right: 0px;

    Sunshiney’s picture

    Sunshiney commented

    Kailoon --- hi! -- if you go to that link again at uidaho.edu, I'm talking about the vertical bar to the left of the word "home." There's also another one bugging me that is to the right of athletics. I have all the other vertical borders displaying just fine.

    I'm recreating that identical menu system for a UI program, using Drupal.

    Sunshiney’s picture

    Sunshiney commented

    Ok. I installed the module named "Menu Attributes" and yahoo, I was able to create and then add an ID to my last menu item, creating the right vertical border needed to end the menu. Worked like a charm.

    Now I can do the same using this module for the first item in my menu listing. I can add the left vertical border right before the word Home, no problem. Thank the stars for this module. But, I'm still left with one little problem.

    The original design starts the horizontal menu with an empty list item (li) that is 15 px wide and that has a right vertical border. I can now do that border (use the new module to add it to the left of the home menu selection... that first list item ) but am still working on how to get that 15 px of width -- without using an empty list item (li).

    I did try to create an empty list item. I went into the add menu item section of the drupal administration menu. But it won't let me create a blank menu item. Keeps asking me for a url and a menu item name, of course. So, no go.

    Any ideas?

    john.kenney’s picture

    john.kenney commented

    well, i'll try again even though i think i been of no help so far...

    can't you just add left padding and/or left spacing to the 'ul' element surrounding the menu li's?

    john.kenney’s picture

    john.kenney commented

    how bizarre we both answered within 2 minutes of each other.

    anyway, that 'menu attributes' module looks pretty handy.

    i don't quite follow why your existing menu items are lacking any ID/class styling elements, but this module seems to allow you to add them very nicely. good find.

    Sunshiney’s picture

    Sunshiney commented

    John... Please do know that just having someone to talk this Drupal stuff over with is truly helpful. After I've spent four or eight hours trying to figure out how to do something -- and no one around me knows what I'm talking about --- having you take time away from your day to deal with my issues is truly tremendous. I'm so very appreciative!

    I did finally give up and added more px to the ul style. That does solve the spacing problem. But it didn't solve the vertical border problem. I'll see if I can come up with a separate ID for the first LI to give it a vertical border to the left, in addition to the one it already has on the right.

    This was so very simply done with hand-coding. I had previously just dumped that code right into a block and positioned it at the top for my horizontal menu. That worked dandy. Then I decided that if anyone wanted to change the menu, they would need some html skills to do so. That's when I decided to try and put the menu into the primary links system of Drupal. And that's when I realized I would have to over-ride this and that.

    But all's well. What a huge change this is from static pages! Again, thank yourself for me!

    john.kenney’s picture

    john.kenney commented

    glad to be of service.

    the early days learning to style menus in drupal is very painful. wasn't long ago i was doing that myself for my sites. took ages to get them right - and even now i still tweak them from time to time.

    good luck.

    dnaromance’s picture

    dnaromance commented

    Hi,

    Are you trying to say that you would like to have space exactly same width with your menu at beginning of the menu on the left?

    Can you try margin the menu to the right? Maybe margin-left: 15px; ?

    So it actually margin the whole menu to the right, instead of have blank menu item?

    Hope it helps :)

    Sunshiney’s picture

    Sunshiney commented

    Yep, I ended up doing something like that. I wanted to use the method that worked but within Drupal, it was a no-go. Thanks so much for your time and interest. Hope I can be of help to you sometime!