Solved

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

Posted on 2014-09-10
22
116 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
ID: 40314884
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
ID: 40314891
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
ID: 40314908
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

Author Comment

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

Expert Comment

by:Kyle Hamilton
ID: 40314996
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
ID: 40315016
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
ID: 40315087
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
ID: 40315153
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
ID: 40315170
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
ID: 40315382
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
ID: 40315399
I'm leaving for a while

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

Author Comment

by:igloobob
ID: 40315405
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
ID: 40315435
so it seems display:block is what messes it up...
0
 

Author Comment

by:igloobob
ID: 40315559
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
ID: 40315605
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
ID: 40316902
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
ID: 40325572
Post the (rendered) HTML and CSS
0
 

Author Comment

by:igloobob
ID: 40325633
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
ID: 40325653
Change 18.72% to 1%
0
 

Author Comment

by:igloobob
ID: 40325907
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
ID: 40325921
It allows the element to be full width using table display.
0
 

Author Comment

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

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

813 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

12 Experts available now in Live!

Get 1:1 Help Now