Solved

position:absolute vertical centering with background that changes width

Posted on 2014-10-10
16
95 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
  • 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
 

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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now