How to create MENU list item height of 100% with a background color?

HTML & CSS
1

As my topic says i am trying to accomplish a effect when creating SOCIAL URL links in CSS to add a background color for each different social icon, but the HEIGHT is not working on 100% any suggestions?

Those boxes on the pictures need to be same height inside the yellow section… but for some reason when i add padding to the item… its only making the YELLOW bigger.

See photo:

1600×104 8.24 KB

2

I can’t incorporate this into your code since you didn’t give any, but height:100% only works in a few key instances. A couple off the top of my head is positioned elements (absolute/fixed etc), table cells, and elements that have direct parents with a fixed height.

With this in mind, you should do the display:table/table-cell route. Table cells base their height off one another so getting equal height will be easy. Think of how you’d do this with <table> and <td>. Now instead of using those elements, use display:table/table-cell in its place for the appropriate elements.

3

Hi Ryan,

Thanks again. So Table-cell for the YELLOW section where those BOXES are inside of the element?

4

I’m guessing here since I only have an image (thus I can only guess your structure) but if the yellow element is the PARENT, then give that display:table-cell.

The boxes INSIDE the yellow section (parent) will be display:table-cell. Again, purely a guess based on your structure and what I gathered from the image.

5

…nah

6

This topic is now unlisted. It will no longer be displayed in any topic lists. The only way to access this topic is via direct link.

@Galanthus Please flag a thread if you have a problem with it, rather than just emasculating the opening post. :wink:

1 Like
7

This topic is now listed. It will be displayed in topic lists.

8

Hi,

You could do something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
img{vertical-align:middle}
.social-bar {
    background:#fbcb1d;
    display:table;
    width:100%;
    max-width:980px;
    padding:0 50px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:auto;
    height:1px;/* stretch effect base */
}
.tc {
    display:table-cell;
    vertical-align:middle;
}
.social-bar a {
    padding:10px;
    text-decoration:none;
    color:#000;
}
.more-info{
    font-size:90%;
    color:#fff;
    font-weight:bold;
}
.more{width:1px;padding:0 10px;}
.icon {width:60px;text-align:center;}
.icon1{background:red;}
.icon2{background:blue;}
.icon3{background:green}
.icon:hover{background:#000;color:#fff;}
</style>
</head>

<body>
<nav class="social-bar"> 
    <span class="tc more"><a href="#"><img src="http://placehold.it/20x40" alt="more"></a></span> 
    <span class="tc more-info">More Information?<br> Tel:012 345 6780</span> 
    <a class="tc icon icon1" href="#"><img src="http://placehold.it/30x20" alt="social-icon"></a>
    <a class="tc icon icon2" href="#"><img src="http://placehold.it/15x30" alt="social-icon"></a>
    <a class="tc icon icon3" href="#"><img src="http://placehold.it/25x25" alt="social-icon"></a>
</nav>
</body>
</html>
9

Hi paul,

http://dev.alveos.nl/onderneem-online/

Take a look… for smoe reason it still not 100% height of the container… Can you take a look at it?

Thanks!

10

Perhaps you can post an annotated screen shot showing the problem. (Annotated means draw an arrow on the image that points to the problem and describe how it should look.)
I will be glad to help you understand how CSS properties behave.

11

If we are still talking about the same thing (the height of the yellow bar and the content within) then you need to use the structure that I gave in my example for the whole bar. There needs to be a structural relationship between the bar and its content other than parent and child. They need to be adjoining cells so that content will fill the parent and align vertically correctly.

If you look at my example you will see that it works for the whole bar and its contents and all will maintain size with each other.

Once you float something then you effectively remove it from the flow and lose the relationship between that and any other elements. You cannot automatically align one float with another. The method in my example does not use floats but display:table and table-cell which means that you get automatic 100% height on each cell as well as the ability to vertically align content to the middle.

Therefore you need to think of that yellow bar as a display:table element and the content in the bar as cells (display:table-cell). You can still push content to the side as shown in my demo by setting the widths on the right cells as required.

If you use floats as in your method then your only option would be to give the yellow bar a fixed height and then set all the children to that same height (or height:100%). The display table-cell method avoids the need for any heights and will shrink and grow as required.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.