Extend line under breadcrumbs to menu on the right

afx

Hi,
I currently have the breadcrumbs above the image with a width of 80% and then to the right of it a menu with 20%.
Is there a way to put a line below the menu that looks like an extension of the line below the breadcrumbs?

thx
afx

jwashburn

Like this?

afx

YES!!

Please?

thx
afx

jwashburn

afx wrote: »

YES!!

Please?

thx
afx

This is a problem I have been working on for a while. The problem is the div IDs are generated dynamically with page load. I have been reading up on the YUI format trying to find a solution, maybe Lamah or one of the other guys will jump in with an answer. I am able to get it the way you want it using some developer tools, but not in actual production yet. I just wanted to make sure I understood what you wanted so I can keep working on it

afx

;-(

Guess I'll have to wait and hope then!

thx
afx

Allen

Did you try to add a separator just under the breadcrumb on "all galleries"?
content > design > separator

afx

Well, the breadcrumb already has a line, so adding another one below doesn't really help.

cheers
afx

Allen

Why not remove the breadcrumb line and use the separator?

afx

Yup, that would work, but how can I remove the breadcrumb line?

cheers
afx

Allen

afx wrote: »

Yup, that would work, but how can I remove the breadcrumb line?

cheers
afx

Probably something you added in your CSS.
Found this.

.sm-breadcrumb
{
  border-bottom: 1px solid #595959;
  padding-bottom: 4px;
}

afx

Allen wrote: »

Probably something you added in your CSS.

Of course!
But what?

cheers
afx

Allen

See my last post edit. Look in your entire site or all galleries CSS.
Or may theme CSS. Gota be somewhere.

jwashburn

I think I figured it out.

With your current design, this should add the border

.sm-page-layout-column.yui3-u[data-layout-column="1"] {
border-bottom: 1px solid #595959;
}

then add this to line everything up

.sm-breadcrumb {
border-bottom: 1px solid #595959;
padding-bottom: 9px;
}

afx

Nearly perfect ;-)
But browser specific.
For FF I need a padding of 11, for Chrome it is 9 as shown in your post.

cheers
afx

jwashburn

You can "TRY" this

@-moz-document url-prefix() {
.sm-breadcrumb {
border-bottom: 1px solid #595959;
padding-bottom: 9px;
}
}


This should set the breadcrumb padding on just Firefox

afx

Thanks I'll try with the browser options later.

But why the ?&%$§@ do those content items need specific padding at all.
The text of the breadcrumbs and the menu does not even line up when I set the same margins for both items.

frustrated
afx

jwashburn

afx wrote: »

Thanks I'll try with the browser options later.

But why the ?&%$§@ do those content items need specific padding at all.
The text of the breadcrumbs and the menu does not even line up when I set the same margins for both items.

frustrated
afx

margins and padding work a little differently. One is external to the container, one is internal to the container. It can be frustrating sometimes

afx

jwashburn wrote: »

margins and padding work a little differently. One is external to the container, one is internal to the container.

Sure. That is not the issue.
The issue is SM using different values for different items so aligning them becomes a game of chance and then needs messing with the padding.

I would expect breadcrumbs and menu that are placed next to each other to have the same baseline for the font (assuming both fonts are set to S for example). But they do not match.
If a line is added to both of them they do not match either. That is just totally silly.

EDIT: If those content blocks where aligned, a divider beneath them would work just fine, but currently this is a mess.

cheers
afx