Solved

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

Posted on 2014-09-10
22
113 Views
Last Modified: 2014-09-16
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
0
Comment
Question by:igloobob
  • 11
  • 7
  • 4
22 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
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) ?
0
 

Author Comment

by:igloobob
Comment Utility
I only need to go back to IE 9, earlier versions I am serving an upgrade page.

Plus all the other usual browsers.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
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.
0
 

Author Comment

by:igloobob
Comment Utility
look sinteresting thanks I'll take a look at that this evening and report back
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
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
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
http://jsfiddle.net/h4pw4oeo/
div {
    border:1px solid blue;
    display:table-cell;
    vertical-align:middle;
    width:100px;
    height:80px
}

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
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 ]
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
0
 

Author Comment

by:igloobob
Comment Utility
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!
0
 

Author Comment

by:igloobob
Comment Utility
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

0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
I'm leaving for a while

http://jsfiddle.net/h4pw4oeo/1/
0
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.

 

Author Comment

by:igloobob
Comment Utility
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.
0
 

Author Comment

by:igloobob
Comment Utility
so it seems display:block is what messes it up...
0
 

Author Comment

by:igloobob
Comment Utility
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

0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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.
0
 

Author Comment

by:igloobob
Comment Utility
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
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Post the (rendered) HTML and CSS
0
 

Author Comment

by:igloobob
Comment Utility
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

0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
Comment Utility
Change 18.72% to 1%
0
 

Author Comment

by:igloobob
Comment Utility
wow thanks Gary, changing the width on the ul li a to 1% worked!

Why is that do you know? Seems weird.
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
It allows the element to be full width using table display.
0
 

Author Comment

by:igloobob
Comment Utility
OK cool, thanks for the help to get this sorted :)
0

Featured Post

What Security Threats Are You Missing?

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article discusses four methods for overlaying images in a container on a web page
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 style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

743 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

15 Experts available now in Live!

Get 1:1 Help Now