Carolyn's Paintings

That site is one of the best I've ever seen in Gardens. I'm really impressed. How in the world did you get the navigation items random positions like that? Nice work.

Susan

Thanks Susan!! I used absolute positioning and CSS Combinators to arrange the menu items:

#block-system-main-menu li ~ li ~ li {

position: absolute;

top: 50px;

left: 272px;
}

I also wrote a blog post on who I added a transparent .png overlay to the slideshow. I checked out your site, looks like you are cranking out the DG sites, good work!

Thank you so much Kendall. I'll look over the tutorials. The first one I need to re read. I still don't get how each nav had a different location. Or do they all have 50px and 272px on them.

Thanks for the CSS challege! I can always use one. I'm a hack when it comes to CSS.

Best, Susan

It is a bit of a challege, but with combinators you can style elements that are in a sequence using the "preceded by" rules, like if you want any element that is preceded by A to have a style, you can use:

.A~.B

with that logic, I can style the first menu item with:

#block-system-main-menu li

the second menu item with:

#block-system-main-menu li~li

the third menu item with:

#block-system-main-menu li~li~li

and so on. Tricky, eh?

That is super cool! Thanks for sharing the information. I'll post back if I try it. I'd like to attempt to use different images on each nav item like I attempted here with less ninja skills as you http://www.pibeachcoma.com/ :)

No problem :)

Just fyi, you have a bit of a font issue on that site. The good dog font is not rendering quite right on my Macbook, here's a screenshot: http://twitpic.com/7fvqkj

Maybe you have a broken link to your font API, or maybe its a gardens issue? Just letting you know!

Perhaps its a false alarm.. I have a font on my system called "Good Dog Bones" which looks like those heiroglyphics. Then I have a regular "good dog" font which is what I assume you were going for. 

I think this may actually be a big picture issue we've unearthed. Hey Drupal Gardens admins, you may want to check out a way to bulletproof the extra fonts that are included in Drupal Gardens :)

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

What I meant to link to was a way to prevent local fonts from loading.. I think the bulletproof smiley method does that: http://paulirish.com/2010/font-face-gotchas/#smiley

I agree with Susan, that's the prettiest thing I've seen. Mind you I'm fairly new to the garden. But well done, and I would love to read the blog post, I'll have a look for it. Thanks

Hi, I wanted to follow up on this post. DG added a way to style menu items separately. Kendall, will this make your life much easier?

http://www.drupalgardens.com/content/jan-5th-release-whats-new

I found that really helpful Susan thank you. I noticed it the other day and had a brief look but your reminder was timely. :)

Ah, they added menu classes! Nice!

The only problem with using classes instead of combinators is if you need to rearrange items in a menu like mine. If I moved the first menu item into the last spot within the menu iterface, it wouldn't actually move it at all because the CSS would be targeting that particular menu item, say "Products" with absolute positioning. 

Whereas with my method you can still rearrange items in the drupal menu system, because the first menu item always has particular X&Y coordinates, but not "Products." Make sense?

Of course my scenario is more of a fringe case, and overall this is really good news. :)

Yea! Better navs. Thanks Kendall for your advice.