asked on

Aligning multi line links vertically centred on background so same height as next link with one line

Hi,

I have a set of links with backgrounds on them. When the screen is smaller, one of the links drops onto 2 lines. Currently the links are set up using padding to create the size of the background boxes. Obviously, when the one drops to 2 lines of text, the box becomes deeper than all the others.

Is there a way to style these links so they sit vertically centred in the background box no matter if they have 1 or 2 lines of text and that the boxes remain the same height. So the one with 2 lines of text would have less space above and below within its background box?

Screenshot below shows how it does look on the top and how it should look (rough copy and paste job) on the bottom.

Please can anyone advise?

Thanks!
Screen-Shot-2014-09-10-at-14.47.54.png

Kyle Hamilton

There are a number of ways for doing it. The 'best' way will depend on which browsers you want to support. So, which browsers do you want to support (or to put it more succinctly, how far back in IE do you want to go) ?

igloobob

ASKER

I only need to go back to IE 9, earlier versions I am serving an upgrade page.

Plus all the other usual browsers.

Kyle Hamilton

oh, goodie :)

I can't take credit for this one, so here is the link:

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

If you need help implementing, let us know.

igloobob

ASKER

look sinteresting thanks I'll take a look at that this evening and report back

Kyle Hamilton

actually, I was playing around with it, and it falls apart if you add borders, or if you float the elements, which is what you would do in your case where the elements are menu items.

sigh, so promising...

so here is my own solution, which is not as "simple", but works. with constraints. you have to know the height of the elements, which looks like you would, so should work for you:

CSS:

.header{
                height:60px;
                border:1px solid blue;
                
            }
            .header h2{
                float: left;
                width: 50px;
                margin: auto 10px; /* customize, or use padding */
                line-height: 60px;
                height:100%;
                border: 1px solid grey;
            }
            .header span{
                display: inline-block;
                line-height: 20px;
                vertical-align: middle;
                background-color: yellow;
            }

Open in new window

HTML:

<div class="header">
                <h2><span>one</span></h2>
                <h2><span>one two</span></h2>
                <h2><span>one two three</span></h2>
                <h2><span>one</span></h2>
            </div>

Open in new window

demo:
http://candpgeneration.com/EE/vertical-align.html

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

Kyle Hamilton

yup, you can do that ^^ :)

[ though I'm pretty sure there are people out there who would start a whole table debate over that... don't let them bring you down - lol - haters will hate ]

Gary

In this case using a table styling is not the end of the world and is commonly used for this, if your whole website was one big table that would be a different matter

igloobob

ASKER

Screw the haters! Whatever works, works (within reason of course).

I'll have a look at both those options later and report back.

Thanks guys!

igloobob

ASKER

Ok just having a quick look before I leave work, trying Gary's suggestion first...

My links are actually an unordered list generated by wordpress (a custom menu).

I've tried to add the code into the li and the li a but struggling, I assume it should be on the li not the li a as the li is the container? You'll see I have padding on the li a which has got me to where I am at, I would assume to remove this but when I do the text sits at the top of the box not in the middle (see screenshot), even with the table-cell bits added on the li as shown below.

The background image is on the li a as there are hover and active states.

Will these methods work when the links are structured as a list like I have?

.menu-info-menu-container ul li
{
display:table-cell;
    vertical-align:middle;
    height:80px;
    
    
width: 18.72%;
display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
	padding-left: 0!important;
background-image: none;

}



.menu-info-menu-container ul li a
{
width: 100%;
height:80px;
list-style: none;
display: block;
padding: 30px 10px;
background:url('images/link_background.jpg') repeat #3f8594;
background-position: 0 0;
font-family: "proxima-nova",sans-serif;
	font-style: normal;
	font-weight: 400;
	color:#fff!important;
	text-transform: uppercase;
	text-align:center;
	text-decoration:none;
	 position:relative;
    display:inline-block;
    border: 1px solid #fff;
    font-size: 16px!important;

}





.menu-info-menu-container ul li:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

Open in new window

Gary

I'm leaving for a while

http://jsfiddle.net/h4pw4oeo/1/

igloobob

ASKER

Oh cool cheers Gary, that works sweet, I'll get it in mine and have a play, must be some other style in mine that's messing it up.

igloobob

ASKER

so it seems display:block is what messes it up...

igloobob

ASKER

Ok got it working mostly, I had to have the same width on both li and li a but it does go a bit off on smaller screens I need to look at, but this is getting there now..

Originally the li was width: 18.72%; and the li a was 100% and display:block to fill it but this doesn't work obviously with the need for the display:table-cell.

.menu-info-menu-container ul li
{
width: 18.72%;
height:80px;
float:left;
list-style:none;
margin: 1% 0 1% 1.6%;
padding-left: 0!important;
}



.menu-info-menu-container ul li a
{
display:table-cell;
vertical-align:middle;
width: 18.72%;
height:80px;
background:url('images/link_background.jpg') repeat #3f8594;
background-position: 0 0;
font-family: "proxima-nova",sans-serif;
font-style: normal;
font-weight: 400;
text-align:center;
padding-left:10px;
padding-right:10px;
text-transform: uppercase;
color:#fff!important;
position:relative;
font-size: 16px!important;

}

Open in new window

Gary

Use a box-sizing:border-box style on all elements e.g.

*{
box-sizing:border-box
}

Open in new window

This will ensure any borders etc are included as part of the LI width and not added onto the width
This is a standard reset style used by most people.

igloobob

ASKER

Hi Gary, I've already got that in place so it's not that that's causing the issue. Getting 2 of the items (FAQ + NEWS) not the full width they should be as shown in the screenshot.
Screen-Shot-2014-09-11-at-14.11.36.png

Gary

Post the (rendered) HTML and CSS

igloobob

ASKER

Here is the HTML of the menu

<div class="section group content_area"><!--LINKS -->	
	
	
		<div class="col span_5_of_5">
		<div class="menu-info-menu-container"><ul id="menu-info-menu" class="menu"><li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="http://site.com/rates-reservations/">Rates &#038; Reservations</a></li>
<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"><a href="http://site.com/gallery/">Gallery</a></li>
<li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a href="http://site.com/faqs/">FAQs</a></li>
<li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://site.com/news/">News</a></li>
<li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"><a href="http://site.com/contact/">Contact</a></li>
</ul></div>		</div>
		
		
	
	
		
			
	</div>	<!--section group LINKS -->

Open in new window

And CSS

.menu-info-menu-container ul li
{
width: 18.72%;
height:80px;
float:left;
list-style:none;
margin: 1% 0 1% 1.6%;
padding-left: 0!important;
}



.menu-info-menu-container ul li a
{
display:table-cell;
vertical-align:middle;
width: 18.72%;
height:80px;
background:url('images/link_background.jpg') repeat #3f8594;
background-position: 0 0;
font-family: "proxima-nova",sans-serif;
font-style: normal;
font-weight: 400;
text-align:center;
padding-left:10px;
padding-right:10px;
text-transform: uppercase;
color:#fff!important;
position:relative;
font-size: 16px!important;

}





.menu-info-menu-container ul li:first-child { margin-left: 0; } /* all browsers except IE6 and lower */





.menu-info-menu-container ul li a:hover{
   background:url('images/link_background_hover.jpg') repeat #3f8594;
	text-decoration:none;
	font-style: normal;
	font-weight: 400;
	color:#fff!important;
	text-transform: uppercase;

} 


.menu-info-menu-container ul li a:active{
   background:url('images/link_background_hover.jpg') repeat #3f8594;
	text-decoration:none;
	font-style: normal;
	font-weight: 400;
	color:#fff!important;
	text-transform: uppercase;

} 




@media only screen and (max-width: 800px) {
.menu-info-menu-container ul li
{

width: 49.2%;
height:80px;
float:left;
list-style:none;
margin: 1% 0 1% 1.6%;
padding-left: 0!important;


}
.menu-info-menu-container ul li:nth-child(odd) { margin-left: 0; } /* all browsers except IE6 and lower */
}

Open in new window

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

igloobob

ASKER

wow thanks Gary, changing the width on the ul li a to 1% worked!

Why is that do you know? Seems weird.

Gary

It allows the element to be full width using table display.

igloobob

ASKER

OK cool, thanks for the help to get this sorted :)