asked on

position:absolute vertical centering with background that changes width

I need help with:

mousing over "Patient Stories" and having the down arrow be vertically centered.

Looking at the screengrab, there are 2 down arrows under "Patient Stories." The left arrow is perfectly centered, the right arrow is the arrow that appears on mouseover. I want the right arrow to be positioned where the left arrow is (perfectly centered) on mouseover.

The tricky part: "Patient Stories" is text (not image) and the sea foam background height and width are determined with padding.

This is the css I'm using for the perfectly centered down arrow:

.main-navigation li.current-menu-item {background:url(images/nav-arrow.png) no-repeat center bottom;}

Open in new window

This is the css for the positioning of the mouseover arrow that needs to be vertically centered:

.menu-item a.menu-image-hovered img.hovered-image, .menu-item a.menu-image-hovered:hover img.menu-image{margin:0 auto;
  position: absolute;
   bottom: 0;left: 66%;
  transform: translate(-66%,0);}

Open in new window

Here is the rest of the navigation css:

.main-navigation li {font:16px 'Intro-Bold', Arial, Helvetica, sans-serif; margin:0 0;padding-bottom:10px;}
.main-navigation li.current-menu-item {background:url(images/nav-arrow.png) no-repeat center bottom;}
.main-navigation li a{color:#94b7bb;text-transform:uppercase;text-decoration:none;background:none; color:#fff;padding:6px 19px 12px 26px;}
.main-navigation li a:hover,.main-navigation li.current-menu-item a{background:#94b7bb;}
.menu-item a.menu-image-hovered img.hovered-image, .menu-item a.menu-image-hovered:hover img.menu-image{margin:0 auto;
  position: absolute;
   bottom: 0;/*right:41%;*/left: 66%;
  transform: translate(-66%,0);}

Open in new window

Gary

Link? Bit of css or an image is no use

phillystyle123

ASKER

http://www.medicalwebdevelopers.com/underscore/ee.html

Gary

Change the left margin to -27px

<img width="19" height="10" src="http://www.medicalwebdevelopers.com/underscore/wp-content/uploads/2014/10/nav-arrow.png" class="hovered-image menu-image-title-before" alt="nav-arrow" style="margin-left: -19px;" />

phillystyle123

ASKER

Not doing the trick:

http://www.medicalwebdevelopers.com/underscore/ee.html

<img width="19" height="10" src="http://www.medicalwebdevelopers.com/underscore/wp-content/uploads/2014/10/nav-arrow.png" class="hovered-image menu-image-title-before" alt="nav-arrow" style="margin-left: -27px;" />

The link code is dynamically generated (WordPress) so I'd rather see if I can manage this in the css.

Gary

Looks fine to me. Both arrows are in the same place. (and that is CSS)

phillystyle123

ASKER

Apologies: I need to manage this in the style.css file.

Your solution works in FF (and maybe others), but the arrows are not aligned properly in Safari (5.17/PC)

Gary

Is this your own code or a plugin?

phillystyle123

ASKER

Currently using a plugin to generate the mouseover arrows - it's a plugin that adds image functionality to menus.
I'm styling it though in style.css - so the position of the mouseover is being dictated by this css in style.css:

.menu-item a.menu-image-hovered img.hovered-image, .menu-item a.menu-image-hovered:hover img.menu-image{margin:0 auto;
  position: absolute;
   bottom: 0;/*right:41%;*/left: 66%;
  transform: translate(-66%,0);}

Open in new window

current-menu-item.a is what I'm using to display the down arrows to notate which page we are on:

.main-navigation li.current-menu-item {background:url(images/nav-arrow.png) no-repeat center bottom;}

Open in new window

I was using only css to generate the mouseover arrows with no plugin, but it was buggy - I was using li:hover {background:url(images/nav-arrow.png) no-repeat center bottom;}

If there's a solid way to do the mouseovers w/o the plugin just using css, I'd love to know about it.

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

phillystyle123

ASKER

hmm - there has to be a workable solution to this. I'm guessing the down arrows CAN be perfectly centered.

Gary

Well good luck with that, the HTML of the plugin makes that impossible as it relies an absolute positioning of elements and the way it uses positioning is basically crap to start with
This is a big problem with plugins - they only test them in IE, FF, Chrome on Windows and not cross browser/device
The solution above does what you want with no detrimental affect.

phillystyle123

ASKER

Yes-I'm going to lose the plugin -I need the arrow to be centered -there should be a pure CSS solution

Gary

There is no pure CSS plugin as every browser behaves differently - even fonts are sized differently in the different browsers.
That plugin relies on absolute pixel positioning - that doesn't work cross browser.

If you don't want to use the above simple solution that's fine, but I cannot help you more.

phillystyle123

ASKER

To clarify-I'm not going to use a plugin, just CSS. Thanks for the help.

phillystyle123

ASKER

Thanks Gary. This is a workable solution given the plugin. I'm going to post a separate question about pulling this off with pure css and no plugin.

phillystyle123

ASKER

Here is the pure css option. No plugin needed, just a down arrow image. This code will center a down arrow just below the background color.

css:

.main-navigation li a:hover,.main-navigation li.current-menu-item a{background:red;}
.main-navigation li:hover,.main-navigation li.current-menu-item {background:transparent url(images/nav-arrow.png) no-repeat scroll center bottom;}
.main-navigation li a{color:red;text-transform:uppercase;text-decoration:none;background:none; color:#fff;padding:6px 26px 12px 26px;}

Open in new window

html:

<ul id="menu-top-navigation" class="menu nav-menu"><li id="menu-item-1730" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1706 current_page_item menu-item-1730"><a title="Home" href="#">Home</a></li>
<li id="menu-item-1729" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1729"><a title="Impact" href="#">Impact</a></li>

Open in new window