By stevex33 on

Hi Guys,
I'm trying to display a gradient image to the li of the #navbar using a zen sub theme, but it's not working.
I know in terms of css it's spot on and should be working fine, but it doesn't seem to be working correctly in the theme:

http://www.makeagreatsite.com/drupal

I'm using a png at
http://www.makeagreatsite.com/drupal/images/blue-menu-gradient.png
that I want to repeat-x

Here's the code I've got:

#navbar li
{
float: left;
padding: 0 10px 0 10px;
background-image:images/blue-menu-gradient.png;
background-repeat:repeat-x;
}

If anyone can offer any advice I'd appreciate it.

Thanks.

Kind regards
Steve

⋅ Categories: Drupal 6.x

Comments

stevex33’s picture

stevex33 commented

has anyone got any suggestions?

pbarnett’s picture

pbarnett commented

I used Firebug to examine the CSS, and there's no reference to the background image - see screenshot at http://mongolia.charityrallies.org/sites/all/files/Screenshot-makeagreat...

Pete.

stevex33’s picture

stevex33 commented

I'm also using firebug.
I know for certain that the background image is in the code.
For example I have changed the code to the following so you can see I'm making adjustments in the right place:

#navbar li /* A simple method to get navbar links to appear in one line. */
{
float: left;
padding: 0 10px 0 10px;
background-color:#FF33CC;
/*background-image:images/blue-menu-gradient.png;
background-repeat:repeat-x;*/
}

#navbar li:hover
{
background-color:#00FF00;
}

As you'll see when you go there, the background is pink.
I've commented out the background image part just to demonstrate this.
I would expect the background image to then be visible, but it's not.

Any advice would be very much appreciated.

pbarnett’s picture

pbarnett commented

Your syntax is wrong!

What you want for the image is - 

background: #ff33cc url(images/blue-menu-gradient.png) no-repeat;

Pete.

stevex33’s picture

stevex33 commented

I've used your code exactly, as follows:

#navbar li /* A simple method to get navbar links to appear in one line. */
{
float: left;
padding: 0 10px 0 10px;
background: #ff33cc url(images/blue-menu-gradient.png) no-repeat;
}

#navbar li:hover
{
background-color:#00FF00;
}

However the background image only appears when I hover over it, whereas I would expect to see it without hovering over and and NOT at all when I hover over it.

I want the 1 px image to be repeated horizontally so it fills the entire li, but it doesn't seem to be working.

pbarnett’s picture

pbarnett commented

Sorry Steve!

The code should have read -

background: #ff33cc url(images/blue-menu-gradient.png) repeat-x;

For the hover CSS, add background-image: none; if you don't want it visible on hover.
Pete.

stevex33’s picture

stevex33 commented

It's still not working.

Here's what I've got now:

#navbar li /* A simple method to get navbar links to appear in one line. */
{
float: left;
padding: 0 10px 0 10px;
background: url(images/blue-menu-gradient.png) repeat-x;
}

#navbar li:hover
{
/*background-color:#00FF00;*/
background-image: none;
}

I've removed the pink colour that we originally gave it (As I only put it there to prove I was editing the correct area).

I can just see a white background. The 1px image is not even visible strangely.

pbarnett’s picture

pbarnett commented

Missing the 'a's - try

 #navbar li /* A simple method to get navbar links to appear in one line. */
{
float: left;
padding: 0 10px 0 10px;
}

#navbar li a
{
/*background-color:#00FF00;*/
background: transparent url(images/blue-menu-gradient.png) repeat-x;
}

#navbar li a:hover
{
background-image: none;
}

I'm not sure that the path for the image is right - see screenshot at http://mongolia.charityrallies.org/sites/all/files/MagsScreenshot.png

Could you turn off the CSS aggregation so we can see which file(s) the CSS is coming from?

This is difficult via posts on d.o :-)

Pete.

Pete.

Hueij’s picture

Hueij commented

The path to your images is wrong. In your stylesheet (in Firebug) it says

   background:transparent url(/drupal/sites/all/themes/mags/images/blue-menu-gradient.png) repeat-x scroll 0 0;

When I changed it in Firebug to

  background:transparent url(/drupal/images/blue-menu-gradient.png) repeat-x scroll 0 0;

it showed up just fine.

I suggest you move your image directory from the root of the site to the sites/all/themes/yourtheme directory.

www.opstijgendenevel.nl

pbarnett’s picture

pbarnett commented

You spotted that too! :-)

Pete.

stevex33’s picture

stevex33 commented

great.
Thanks for that.
I'd rather keep the image directory where it is though, rather having it on a theme specific level.
How can I achieve this?

steve

pbarnett’s picture

pbarnett commented

with an absolute path (relative to the site root) - hence the leading slash. Without that, the code will look in the images directory of your theme (that's where I always put my theme-specific stuff).

change the code to

 background:transparent url(/drupal/images/blue-menu-gradient.png) repeat-x;

like the man says :-)

Pete.

greenskunk’s picture

greenskunk
Location Great Valley, NY
commented

+1 when creating themes use relative positioning

"It is a damn poor day when you don't learn something!" - Mr. Jones, teacher

stevex33’s picture

stevex33 commented

I think I may have initially misunderstood what you said.
I thought you meant ALL images will have to go there, if it's just theme related images it's no big deal, but I was worried that any images I use would have to go there, for example images within content.

The reason that confused me with regard to the image path being incorrect, was that I couldn't understand (And still don't understand really) how I couldn't see the background image until I hovered over it, it doesn't make a great deal of sense really.

Well at least I've learned that with regards to images within a theme, they need to go in the themes folder (Probably very obvious to you pro drupal themers, but not so obvious to me).

I thought a relative path would always be relative to the drupal route, now I know it's not the case :)

I've got a bit of an issue though.
Although the background image appears correctly, on hover, it doesn't disappear as I'd expect.
Here's what I've got below:

#navbar li /* A simple method to get navbar links to appear in one line. */
{
float: left;
padding: 0 10px 0 10px;
background: url(images/blue-menu-gradient.png) repeat-x;
}

#navbar li:hover
{
background-image:none;
}

Any advice would be appreciated.

Hueij’s picture

Hueij commented

First off, most people in this thread are not pro Drupal themers :) I know I'm not. I'm just a guy who knows his way around (X)HTML and CSS, and I learned by reading a lot and asking a lot of questions, just like you are asking now. So don't worry about it.

Looking at your site with Firebug (do you have your CSS aggregated? If so, turn that off while you are still developing your site) I see that your li:hover declaration is empty.

www.opstijgendenevel.nl

stevex33’s picture

stevex33 commented

I know my way around xhtml and css pretty well, it's combining that with drupal (and deciphering the php) that I'm pretty newbish to :)
I've un-aggregated css

I'm not sure where you're seeing that my li:hover declaration is empty as I copied and pasted it in an earlier post directly from my css file :(

I'm looking in firebug and can see that the li:hover is empty, but it's definately in the css file, I don't understand why it's empty in firebug (And yes I remembered to upload the file :P )

Jeff Burnz’s picture

Jeff Burnz commented

The only li:hover declaration is in layout.css and its empty.

You should use mag.css for styles, not layout.css, that is going to cause BIG problems when you come to upgrade Zen later on.

Just be aware that li:hover don't work in IE, you need to wrap the anchors in span tags to get the same effect, see my article here: http://adaptivethemes.com/add-span-tags-to-primary-links-for-sliding-doo...

While the article is for sliding door tabs, the same holds true for just a simple hover.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
stevex33’s picture

stevex33 commented

I can say with absolute certainty that layout does NOT contain an empty li hover.

It says it's on line 229 in firebug right?
Here's what's on line 229 in my layout.css file:
#navbar li:hover
{
background-image:none;
}

Can you please explain why I shouldn't use layout.css for styles?
Sub themeing is new to me, I assumed that as long as it's in the css it should be fine.

"mags" is the name of the theme by the way, if it makes a difference.

The css files that I was given by zenophile (the module) are:

  • layout.css
  • mags.css
  • mags-fresh.css(which is completely empty)
  • layout-liquid.css
  • starter.css
  • print.css

What I was planning on doing was creating the layout.css for the placement of the divs and all colouring and sizing etc to go in the mags.css

I briefly tried to move the li hover into mags to see if it would make a difference, it didn't so I moved it back.

pbarnett’s picture

pbarnett commented

Hi again!

Any chance of zipping up the theme and emailing it to me?

I could probably fix it in a few minutes (with a bit of luck!) and tell you what was wrong...

Pete.

pbarnett’s picture

pbarnett commented

Check out the navbar at http://mongolia.charityrallies.org/ for an example of 'hover' working in FireFox and IE

Pete.

stevex33’s picture

stevex33 commented

pbarnett, I have zipped up the theme and have uploaded it to:
www.makeagreatsite.com/mags.zip

Thank you for your offer of support, it would be nice for someone to take a look at the whole thing offline and show me the error of my ways :)

Jeff Burnz’s picture

Jeff Burnz commented

1) Look again, see this screen shot.

2) I already did, because when you come to upgrade you will need to overwrite layout.css with the later version (things could change and often do).

@pbarnett - your hover effect is applied to the anchor with a single 299px wide image, that is different, the OP is trying to add hover to the li which does not work in IE. The primary reason to do this is for sliding door tabs, which I might assume the OP is trying to achieve.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
pbarnett’s picture

pbarnett commented

Who was shouting? I was just getting around to addressing the IE issue, and I do have a vague idea of how to do sliding doors :-)

Pete.

Jeff Burnz’s picture

Jeff Burnz commented

Well you may be familiar with sliding doors but not threaded forums, my reply was not at you ;)

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
stevex33’s picture

stevex33 commented

My appologies if you thought I was shouting, I was mergely trying to convey that I definately didn't have an empty li:hover

I'm unfamiliar with the term"sliding doors", but after a quick google, if you mean using a 1px image to repeat horizontally rather than using a fixed width image, yes, that's what I'm trying to do.

If I need to use an upgraded version of the zen layout.css, would that mean that I'd constantly have to re-do the actual new layout that I've put in there in terms of structure and region placement? I do intend of using layout just for the placement of regions and mags for all other styling, but are you saying that I shouldn't be making any adjustments at all for the layout.css file?

Incase it makes a difference, this is a subtheme for zen and I'm not overwriting the zen core files.

So to get this sliding door effect to work in IE, what do you suggest I do? I believe you said something about span tags, but where do I put this markup?
I intend on using jquery and have heard that it's probably easier.

pbarnett’s picture

pbarnett commented

Best bet is to modify your subtheme's template.php to include your layout -

// Then add styles for this sub-theme.
drupal_add_css(path_to_subtheme() .'/magslayout.css', 'theme', 'all');

To get the 1-pixel image to repeat just use 'repeat-x' as previously mentioned.

Pete.

stevex33’s picture

stevex33 commented

Just to clarify pbarnett, are you saying that I should leave layout.css exactly as it is when I first created the default zen subtheme from zenophile and place all my layout styles in a file called magslayout.css?

Can't I just stick everything in mags.css?

What I'm concerned about is that what I'm trying to do should really be working, I don't believe I'm doing anything wrong.
Forget the issues with IE for now, I'm using firefox, I just want to get something working correctly.

Is there anything you can see in the zip that I uploaded for you that gives you a clue as to why the background images aren't displaying properly. As you can see from looking at the layout.css I've set everything up properly (As far as I can tell).

As you can see from the site, I've had no problem setting the background image to repeat for the standard background, it's for the li:hover that I'm confused about, I've set the background-image to none, so it should disappear on rollover.

Why is it that in firebug it's an empty declaration, but in the actual file it's clearly there?

pbarnett’s picture

pbarnett commented

I don't seem to have the zipfile... did you send it via my contact page?

Pete.

stevex33’s picture

stevex33 commented

No, I couldn't see an area that would allow me to send it as an attachment.
I Uploaded it to my site at www.makeagreatsite.com/mags.zip

pbarnett’s picture

pbarnett commented

OK, got it. More later...

Pete.

Jeff Burnz’s picture

Jeff Burnz commented

Look at the site pbarnett linked to, while its using a single large image you can just tile one, and put it on the anchor, not the li, just like the site he linked to.

No, tiling an image is not sliding doors, but rather when you use 2 images that overlap to form a single "tab" that can stretch and compress depending on the length of the link text, such as on my site: http://adaptivethemes.com/

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
dman’s picture

dman commented

As a general rule, many headaches will be avoided if you Validate your code before trying to (or asking others to) debug it.
There are a few 'Doh' moments in there right now, and any one of them could make any browser just give up and produce odd results.

Fix the code first.

.dan. is the New Zealand Drupal Developer working on Government Web Standards

stevex33’s picture

stevex33 commented

Are you sure these would result in the problems I'm experiencing?
I thought that if I declared something but left it blank, it would simply be ignored?

The other error:
"Property word-wrap doesn't exist : break-word "

Is there from the zen theme itself, that's not something I inserted. Apparently it's something to do with css3 so I don't really want to touch it unless it really is causing a problem of some kind.

I know I should validate my code, but I'm confident that these problems I'm experiencing are nothing to do with invalid code.

dman’s picture

dman commented

If you are ignoring these documented syntax errors in your code, then all bets are off about whether any browser will work as expected.
Maybe it will, maybe not, but it's not expected or required to.
Most often I've seen bad CSS result in everything after that point get ignored by the parser. This trick was even abused in early browser-detection tricks.

.dan. is the New Zealand Drupal Developer working on Government Web Standards

pbarnett’s picture

pbarnett commented

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri...

Pete :-)

stevex33’s picture

stevex33 commented

Sorry, just so I'm clear, you're pointing out errors in the validity of this drupal page that we're typing on now, not anything to do with my site right?

Have you discovered any culprits yet that I need to iron out?

Kind regards
steve

dman’s picture

dman commented

I take it that's pointing out that Drupal.org doesn't strictly validate either :-)
True, but drupal.org is not asking for help learning css either. :-B
Do it right first, then start taking liberties.
There's a huge difference between knowing what you've done wrong, and not knowing there's anything wrong with what you are doing. That's what gave us the first decade of the browser wars.

As it happens, 'property does not exist' (put in there, undoubtedly to appease IE6) is probably treated as a weaker error than actual syntax or structural mistakes like #navbar{background-image:";}.

Still, it turns out this may not have been the problem in this case.
'though I don't know what the problem is any more. The code says

  #navbar li /* A simple method to get navbar links to appear in one line. */
  {
    float: left;
    padding: 0 10px 0 10px;
	background: url(images/blue-menu-gradient.png) repeat-x;
  }

  
  #navbar li:hover
  {

  }

and that's exactly what he's getting!
With absolute certainty :-)

.dan. is the New Zealand Drupal Developer working on Government Web Standards

stevex33’s picture

stevex33 commented

Man this is driving me insane.
I just looked at the layout.css file and you are correct that there is nothing in #navbar li:hover
I removed what was in there to test something last night and just forgot to put it back, but before I removed it I was still having this problem.

In my previous posts I was copying and pasting directly from this layout.css file so I am 100% sure that it wasn't working a few days ago (Or yesterday I think it was).
And now, when I add background-image:none; back in, it's working exactly as expected, I didn't change anything else grrrrrrrrrrr.

So the problem is fixed but I didn't learn anything :( dammit

Well thinking about it, the only thing I changed today was adjusting/removing those css validation errors you pointed out, other than that, I haven't made any toher significant changes.

I don't have time to test it right now, (will probably be able to do it the day after tommorrow), but if it turns out to be css validation errors, I have most definately learned something, and I owe you an appology :)

So why is it that if I declare something and don't put something inside it, it's invalid, surely it should simply be ignored, where's the sense in the parser throwing a tantrum and screwing up webpages? I know it's our responsibility to design our pages with validation in mind, but you'd think such a simple thing would not cause such a massive headache.

dman’s picture

dman commented

So why is it that if I declare something and don't put something inside it, it's invalid, surely it should simply be ignored, where's the sense in the parser throwing a tantrum and screwing up webpages? I know it's our responsibility to design our pages with validation in mind, but you'd think such a simple thing would not cause such a massive headache.

As a veteran of the browser wars, I can only sigh.
The world is a much better place now that browsers are less 'forgiving' of bad code :-)
Many less vectors for errors.

.dan. is the New Zealand Drupal Developer working on Government Web Standards

stevex33’s picture

stevex33 commented

I've removed the errors with the exception of the follow errors:
"Property word-wrap doesn't exist : break-word"
Still no change.

I've never experienced the "everything after that point getting ignored" issue you speak of, I'll keep an eye out for that.

pbarnett’s picture

pbarnett commented

A quick fix - I'm really busy at the moment!

I copied the relevant CSS from zen_classic -

  #primary
  {
    font-size: 85%;
    line-height: normal;
    padding: 0 0 1px 20px;
    border-bottom: 4px solid #2763A5;
  }

  #primary ul
  {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  #primary ul.links li,
  #secondary ul.links li
  {
    display: inline;
    border-left: none;
    margin: 0;
    padding: 0;
  }

  #primary a
  {
    background: #6DA6E2 url(images/tabs.png) repeat-x;
    color: #FFF;
    font-weight: bold;
    display: block;
    float: left;
    padding: 5px 14px 5px 14px;
    margin: 0 1px 0 0;
    border: solid #6191C5 1px;
    border-width: 1px 1px 0 1px;
  }

  #primary a
  {
    background-position: 0% 0;
  }

  #primary a:hover
  {
    background-position: 0% -42px;
    text-decoration: none;
  }

  #primary a.active
  {
    background-position: 0% -84px;
  }

and put it in a separate file called pjb.css, which I added to mags.info as the last CSS file. I created an 'images' directory in the theme folder, and added a 1-pixel wide version of tabs.png (at http://mongolia.charityrallies.org/sites/all/files/tabs.png, if you can manage to hover over the 1-pixel image :-)

Study the CSS - it's by the zen guys, and instructive. Helped me a lot!

Pete.

PS: the layout of the CSS wasn't my doing - honestly!