I have tried to make a tabbed navigation element, which looks like this in html:
<ul class="nav">
<li class="selected">Selected Tab</li>
<li>Not-selected Tab</li>
<li>Not-selected Tab</li>
</ul>
You can see a stripped-down version of what I've made here.
My question is: why is the ul not big enough to fit all the li elements? It seems to not be influenced by any border or padding added to the li elements.
Instead of
.nav li {
display: inline;
top: 9px;
}
use
.nav li {
display: inline-block;
}
Demo
Don't use inline if they are blocks, because then they don't generate a box block that pushes <ul>'s bottom.
And don't use top: 9px, because that moves <li> downwards, outside <ul>.
the problem is you're putting padding on the li's while they're still inline elements. Additionally you're using top: 8px which is further complicating the problem. There are a few options to fix. 1: You make the li's display: inline-block and remove top: 8px, OR 2. You float the li's (and use a clearfix on the ul). Hope that makes sense.
option 1 demo
option 2 demo
Related
I am trying to solve this issue for a few days now. I am unable to place the Child1, 2 and 3 between the 25px orange spot. The parent and child menu is a CSS based ul - li menu, where I set the <a> as an inline-block and set the width and height but it still ignores those parameters. I am out of ideas on how to solve this matter. Thank you for your help in advance.
Due to the length of the code I decided to upload the "whole" source code:
source.zip
The problem is that your <a> tags on the sub-menu have the padding:15px from the main menu. You will need to set it to 0. You can then set the line-height of the element to match the orange bar's height to center it vertically.
Add this to fix it:
#header .cssMenuA a{
padding:0;
line-height:25px;
}
It looks like the Child 1, 2, 3 a tags have padding applied to them, which is pushing them down past the orange. See screenshot:
Try removing the padding from the a tags (bodystyle.css, line 78), and reapplying it only to the parent menu items.
You have 15px of padding around all of the <a> elements in the nav list (including PARENT), but this also applies to the "Childs." Add the rule:
#header li li a {
padding-top: 0;
}
This may not look exactly like you want because the <a> is set at 25px high, but the font is smaller than that. Also add
#header li li a span {
line-height: 25px;
}
I'm not able to align a menu, contained within a ul, to the horizontal center of its container. how to do that?
See a live demo of the menu on jsFiddle.
<li>AboutUs
<ul class="sub">
<li>About Square Innovations</li>
<li>Our Vision</li>
<li>Our Mission</li>
<li>Trainer Profiles</li>
<li>Fun In Our ClassRooms</li>
</ul>
</li>
You can address the ul element as an inline-level element within the page flow, while retaining its block-level characteristics (using the inline-block display value) — after applying this, it can be simply aligned within its container like any inline-level element, using text-align.
To implement this, add the following rules:
#container {
text-align: center;
}
ul {
display: inline-block;
}
Here's the updated demo.
Reference
display on Mozilla Developer Network
Disclaimer: Support for inline-block is somewhat limited nope! it's actually very wide by now, see the compatibility table on caniuse.com.
There is a very neath, fully cross-browser and dynamic 'trick' to achieve this, as long as the menu stays on one line. It is very well explained here: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
The inline-block often suggested for this problem is not very well supported in legacy browsers in my experience. To be honest, I never use it. I always go for the clever method that Matthew James Taylor describes.
Edit:
As requested I will briefly describe the technique.
Your html should look like a normal list of links, with an extra wrapping div around it. Something like this:
<div class="menu-wrapper">
<ul>
<li><a ...>link</a></li>
<li><a ...>link</a></li>
<li><a ...>link</a></li>
</ul>
</div>
Now the rest is css work. The steps are as follows:
Float the wrapper to the left and give it a width of 100% to make it take up the full viewport width
Float both the ul and the li to the left and don't give them any width to make them adjust to their content.
Give the ul a position: relative of left: 50%. This will make it's left edge move to the center of it's parent, and this means the center of the viewport.
Finally you should give your li a position: relative of left: -50%. This will make them move past the left edge of the parent ul and makes the center of the list of li's line up with the left edge of the parent ul. Since we made that edge the center of our viewport in the previous step, the menu is now effectively centered.
As I said before, all credits to Matthew James Taylor, and definitly check out his thorough explanation. The drawings he made make it much easier to understand.
edit
As requested I set up a little fiddle to demonstrate the technique:
http://jsfiddle.net/fDmCQ/
Change the margin on the <ul> to 0 auto and give it a width (~575px or larger).
jsFiddle example
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0 auto;
padding: 0;
width:600px;
list-style: none;
text-align: center;
}
I just put back the social sharing buttons to my home page and they look really terrible together :)
You can take a look at it here on the bottom of the page: http://www.comehike.com
How do people usually make them fit so natural together? Mine look so disordered and unprofessional. Is there anything that can be done with styling?
Thanks!
Looking at your code you'll likely have to add individual classes to each one, as they are all in different elements. There are a few approaches, absolute positioning, display:inline but I'd recommend floats
add a ul element and each of your 'share buttons' as an li child element of that ul
<ul class='shareLinks'>
<li>facebook here</li>
<li>twitter here</li>
</ul>
then your css can look something like this
ul.shareLinks { overflow: auto; }
ul.shareLinks li { list-style: none; float: left; margin-right: 5px; }
you can obviously edit the css how ever you wish, the main point is the float: left the overflow: auto; on the ul is a fix for the floated elements not having a real height.
I have dropdown menu and its made via a list and position absolute, however the dropdown links are very very very small area and do not cover the text completely.
How can I fix this?
Example http://outreviews.com/v%202/index.html (the dropdown menus)
Remove the padding from the sub menu's UL and LI and give the A element "display:block" This will make the A element take up the entire width of the menu.
You can fiddle with the padding to get it the way you want it.
If you add:
ul li a {
display: inline-block;
width: 100%;
height: 100%;
}
It should work okay, and since even IE allows display: inline-block; on natively in-line elements it should be relatively cross-browser friendly (certainly under a valid doctype).
It's worth remembering that padding on the parent li will also reduce the possible width of the child a element, and the display: inline on the same parent li is also likely to cause you a little trouble (since display: block; on the a would be so much simpler).
Edited to note that #Chris Bentley correctly noted the points in my final paragraph (above the hr) just prior to my answer.
make the following changes:
in #headermenu li change the padding:20px; to padding :0 20px;
add delete the top:55px; from #headermenu li ul
What you can do is make the li elements display:list-item and the a elements display:block. That's what's being done on the site you're linking to.
Here's a simple menu structure:
<ul id="menu">
<li>Home</li>
<li>Test</li>
</ul>
I want the <a> to be stretched so that it fills the entire <li>. I tried using something like width: 100%; height: 100% but that had no effect. How do I stretch the anchor tag correctly?
The "a" tag is an inline level element. No inline level element may have its width set. Why? Because inline level elements are meant to represent flowing text which could in theory wrap from one line to the next. In those sorts of cases, it doesn't make sense to supply the width of the element, because you don't necessarily know if it's going to wrap or not. In order to set its width, you must change its display property to block, or inline-block:
a.wide {
display:block;
}
...
<ul id="menu">
<li><a class="wide" href="javascript:;">Home</a></li>
<li><a class="wide" href="javascript:;">Test</a></li>
</ul>
If memory serves, you can set the width on certain inline level elements in IE6, though. But that's because IE6 implements CSS incorrectly and wants to confuse you.
Just style the A with a display:block;:
ul#menu li a { display: block;}
display:flex
is the HTML5 way.
See Fiddle
Useful to hack frameworks buttons, or any other element, but you may need to remove their padding first, and set them to the desired height.
In this case, angular-material tabs, which are kind of tricky to make them work as a "standard" website nav.
Notice that the pointer changes as soon as you enter the tab : the < a > are now stretched to fit their parent dimensions.
Out of topic, notice how flawless angular-material displays the ripple effect, even on a "large surface".
.md-header{
/* THIS IS A CUSTOM HEIGHT */
height: 50vh !important; /* '!important' IS JSFIDDLE SPECIFIC */
}
md-tab{
padding: 0 !important; /* '!important' IS JSFIDDLE SPECIFIC */
}
a{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
UPDATE 2018
AngularJS Material throws a (gentle) warning when using flex on button elements, so don't assume all HTML elements/tags can handle display:flex properly, or have a homogeneous behaviour across browsers.
Remember to consult flexbugs in case of unexpected behaviour in a particular browser.
A different approach:
<ul>
<li>
<a></a>
<img>
<morestuff>TEXTEXTEXT</morestuff>
</li>
</ul>
a {
position: absolute;
top: 0;
left: 0;
z-index: [higher than anything else inside parent]
width:100%;
height: 100%;
}
This is helpful if the link's container also has images and such inside of it, or is of potentially different sizes depending on image / content size. With this, the anchor tag itself can be empty, and you can arrange other elements inside of anchor's container however you want. Anchor will always match the size of the parent, and will be on top, to make the entire li clickable.
I used this code to fill the width and height 100%
HTML
<ul>
<li>
<a>I need to fill 100% width and height!</a>
</li>
<ul>
CSS
li a {
display: block;
height: 100%; /* Missing from other answers */
}
Just changing the display property to block didn't work for me.
I removed the padding of li and set the same padding for a.
li a {
display:block;
padding: 4px 8px;
}
<!doctype html>
<html>
<head>
<style type="text/css">
#wide li a {
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Test</li>
</ul>
</body>
</html>
You should try to avoid using a class on every tag so your content remains easy to maintain.
Use line-height and text-indent instead of padding for li element, and use display: block; for anchor tag
I wanted this functionality only on tab view i.e below 720px, so in media query I made:
#media(max-width:720px){
a{
display:block;
width:100%;
}
}
If your <li>s had to have a specific height then your <a>s would only stretch to the <li>'s width and not the height anymore.
One way I solve this is to use CSS display:block and add paddings to my <a>s
OR
wrap the <a>s around the <li>s
<ul id="menu">
<li>Home</li>
<li>Test</li>
</ul>