Solved

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

Posted on 2014-09-10
22
123 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
[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
  • 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
Technology Partners: 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: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

Technology Partners: 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!

Question has a verified solution.

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

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!
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.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

717 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