Solved

position:absolute vertical centering with background that changes width

Posted on 2014-10-10
16
103 Views
Last Modified: 2014-10-13

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
Comment
Question by:phillystyle123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 7
16 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40373371
Link? Bit of css or an image is no use
0
 

Author Comment

by:phillystyle123
ID: 40373424
0
 
LVL 58

Expert Comment

by:Gary
ID: 40373449
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
Industry Leaders: 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!

 

Author Comment

by:phillystyle123
ID: 40373499
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
 
LVL 58

Expert Comment

by:Gary
ID: 40373518
Looks fine to me. Both arrows are in the same place. (and that is CSS)
0
 

Author Comment

by:phillystyle123
ID: 40373540
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
 
LVL 58

Expert Comment

by:Gary
ID: 40373623
Is this your own code or a plugin?
0
 

Author Comment

by:phillystyle123
ID: 40373662
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40373694
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
 

Author Comment

by:phillystyle123
ID: 40374341
hmm - there has to be a workable solution to this. I'm guessing the down arrows CAN be perfectly centered.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40374385
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
 

Author Comment

by:phillystyle123
ID: 40374392
Yes-I'm going to lose the plugin -I need the arrow to be centered -there should be a pure CSS solution
0
 
LVL 58

Expert Comment

by:Gary
ID: 40374396
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
 

Author Comment

by:phillystyle123
ID: 40374440
To clarify-I'm not going to use a plugin, just CSS.  Thanks for the help.
0
 

Author Closing Comment

by:phillystyle123
ID: 40377893
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
 

Author Comment

by:phillystyle123
ID: 40378099
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question