Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 114
  • Last Modified:

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

0
phillystyle123
Asked:
phillystyle123
  • 9
  • 7
1 Solution
 
GaryCommented:
Link? Bit of css or an image is no use
0
 
phillystyle123Author Commented:
0
 
GaryCommented:
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;" />
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
phillystyle123Author Commented:
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.
0
 
GaryCommented:
Looks fine to me. Both arrows are in the same place. (and that is CSS)
0
 
phillystyle123Author Commented:
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)
0
 
GaryCommented:
Is this your own code or a plugin?
0
 
phillystyle123Author Commented:
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.
0
 
GaryCommented:
The easiest way is to just hide the hover element - html is too messed up to try and line them up cross browser

.current-menu-item a span img {
    display: none;
}

Open in new window

0
 
phillystyle123Author Commented:
hmm - there has to be a workable solution to this. I'm guessing the down arrows CAN be perfectly centered.
0
 
GaryCommented:
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.
0
 
phillystyle123Author Commented:
Yes-I'm going to lose the plugin -I need the arrow to be centered -there should be a pure CSS solution
0
 
GaryCommented:
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.
0
 
phillystyle123Author Commented:
To clarify-I'm not going to use a plugin, just CSS.  Thanks for the help.
0
 
phillystyle123Author Commented:
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.
0
 
phillystyle123Author Commented:
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

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now