I have a horizontal navigation using inline-block for li tags as the fowllowing pieces of code:
<ul>
<li>HOME</li>
<li>FEATURES</li>
<li>ABOUT US</li>
</ul>
ul {
list-style-type: none;
background-color: green;
}
ul > li {
display: inline-block;
}
li a {
display: block;
border: 2px solid #00283a;
padding: 2.1em 1.5em 2.5em;
}
The result: http://jsfiddle.net/a0odv8tj/2/
The height of ul tag: 95px;
The height of li tags: 95.5938px;
But I don't know why the height of the ul tag is not equal the height of the li tags. Could you explain the problem and help me to fix it? Thank you so much!
maybe just a hack, but changing
padding: 2.1em 1.5em 2.5em;
to:
padding: 2.0em 1.5em 2.5em;
seams to fix this
The problem has to do with line boxes of your text overflowing your anchor element. Your issue is relative to where the baseline for the text is set versus block level elements which collapse to the size of the text.
One way to verify this is to set overflow:auto; to li a and see how things expand to cover the element.
Re-reading what I wrote, I realize, is not a good explanation but it's been a while since I've thought of the details. I may come back and edit that later.
Or you can read the spec on this which is probably a good idea.
Related
Since my last question was marked as a duplicate, while it was no duplicate, and no-one is changing it back, I will just ask my question again.
I have an <a>, which has, by default, a on-click function. This <a> also has a hover, which I would like to keep.
How do I disable the click function, but keep the hover?
P.s., I would love to see a CSS solution!
Important! Last time, my question was marked as a duplicate of this question: How to disable a link using only CSS?, but pointer-events:none; is also blocking the hover.
If it is still a duplicate, please mark it as a duplicate of a question that is truly a duplicate.
Edit:
I forgot to mention, that my hover is made like this:
https://jsfiddle.net/7o3dbak7/7/
HTML:
<div class="container">
<ul>
<li id="item1">hoverable object</li>
<li id="item2">text object, here comes alot of text explaining certain features of the website.</li>
</ul>
</div>
CSS:
.container ul #item2 {
display: none;
width: 150px;
padding: 20px;
background: red;
color: white;
cursor: pointer
}
.container ul #item1 {
pointer-events: none;
}
.container ul #item1:hover + #item2 {
display: block;
}
Add pointer-events: none to the a element, then apply the hover to the parent element, targeting the a specifically within that:
span a {
pointer-events:none;
}
span:hover a {
color: red;
}
<span>Hello, world!</span>
I would not use anchor to begin with. Replace anchor with a paragraph tag and modify your CSS.
CSS:
.container #item2 {
display: none;
width: 150px;
padding: 20px;
background: red;
color: white;
}
HTML:
<div class="container">
<p id="item1" href="somelinkthatistherebecauseitis">hoverable object</p>
<div id="item2">text object, here comes alot of text explaining certain features of the website.</div>
</div>
I got a question (capt obvious..)
I have this html:
<div id="row-01-separator">
<ul>
<li>d</li>
<!-- -->
<li><img src="img/scroll_one.png"></li>
<!-- -->
<li>d</li>
</ul>
</div>
the Middle li with the image can noz get a background-color. Just the first and last element should have a background-color.
I got this CSS code
#row-01-separator ul {
height: 32px;
}
#row-01-separator ul li {
display: inline-block;
vertical-align: top;
height: 100%;
min-height:100%;
}
#row-01-separator ul li:first-child, #row-01-separator ul li:last-child {
background-color: white;
width: calc(50% - 38px);
height: 100%;
min-height:100%;
}
And it work. But the Problem is width: calc(50% - 38px); This doesnt work in ie8.
Do you have another idea how can I do this. I know there is a solution with javascript and oneresize.
But maybe you have solution with pure css/html and no js and no calc().
I set up something on CodePen. I think you can understand it better than: http://codepen.io/anon/pen/yBxdq
EDIT:
I decided to do the javascript/jquery alternative. I set up something on codepen, maybe someone can use is it later: http://codepen.io/anon/pen/tfqdL
Is there a CSS way to vertically align my div within the body element?
The thing is my div will have a different height each time, so its not constant.
These are the things I've tried but they dont work:
body { vertical-align: middle; }
#mainContent {
vertical-align: middle;
}
// Also this
body { margin-top: 20%; margin-bottom: 20%; }
I did it without table: (demo on dabblet.com)
The main trick in this demo is that in the normal flow of elements going from top to bottom, so the margin-top: auto is set to zero. However, for an absolutely positioned element acts the same distribution of free space, and similarly can be centered vertically at the specified top and bottom (does not work in IE7).
This trick will work with any sizes of div.
HTML:
<div></div>
CSS:
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
A common problem indeed. I have seen many people offering straight css solutions for this but they all require knowing the height of the element needing to be centered, so no help there.
I usually do it this way using jquery:
$(document).ready(function(){
site.resize();
$(window).resize(function(){
site.resize();
});
});
var site = {
resize: function(){
var new_margin = Math.ceil(($(window).height() - $('#mainContent').height()) / 2);
$('#mainContent').css('margin-top', new_margin + 'px');
}
};
Surprisingly (or not), the vertical-align tool actually works best for this job. Best of all, no Javascript is required.
In the following example, I am positioning the outer class in the middle of the body, and the inner class in the middle of the outer class.
Preview: http://jsfiddle.net/tLkSV/513/
HTML:
<div id="container">
<span></span><div class="outer">
<span></span><div class="inner">
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0; }
#container {
text-align: center;
height: 100%; }
span {
height: 100%;
vertical-align: middle;
display: inline-block; }
.outer {
width: 100px;
height: 200px;
padding: 0;
border: 1px solid #000;
vertical-align: middle;
display: inline-block; }
.inner {
background: red;
width: 30px;
height: 20px;
vertical-align: middle;
display: inline-block; }
Vertical align works by aligning the centers of elements that are next to each other. Applying vertical-align to a single element does absolutely nothing. If you add a second element that has no width but is the height of the container, your single element will move to vertically center with this no-width element, thus vertically centering it. The only requirements are that you set both elements to inline (or inline-block), and set their vertical-align attribute to vertical-align: middle.
Note: You may notice in my code below that my <span> tag and <div> tag are touching. Because they are both inline elements, a space will actually add a space between the no-width element and your div, so be sure to leave it out.
You can do it without using tables, and without adding extra elements:
<ul>
<li>One short item</li>
<li>Any real long text...</li>
<li>Another short item</li>
</ul>
And then the CSS:
ul {
list-style-type: none;
display: table-row;
}
li {
display: table-cell;
vertical-align: middle;
}
You can see it here
It would work with any other kind of hierarchy, including div, p, etc.
Honestly, my opinion is often that if you're doing vertical alignment you should still be using a table. I know it's often frowned upon, but it is still the simplest and cleanest way to vertically center something.
HTML
<table>
<tbody>
<tr>
<td>
<div>Your DIV here.</div>
</td>
</tr>
</tbody>
</table>
CSS
td {vertical-align: middle;}
I have a menu like this
Home About Privacy Shopping Contact Us
I want to show this menu in the center of its container (whatever the width of the container is). I can apply 20% width to these list-item but then some list-item has more spacing in between and others have little due to different sizes of texts
<div id="container">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Privacy</a></li>
<li><a>Shopping</a></li>
<li><a>Contact us</a></li>
</ul>
</div>
Try using Flex Box layout (Demo):
#container ul {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
box-orient: horizontal
}
#container li {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
border: solid 1px #000;
text-align: center
}
This method allows you to use your 20% width and center the items in your container, all while keeping the same width of each item.
ul {
list-style-type: none;
width: 700px;
margin: 0 auto;
}
#container {
width: 800px;
background: #CC9;
}
li { display: block;
float: left;
width: 20%;
margin-left: -5px;
background: #399;
text-align: center;
border: solid black 1px;
color: white;
}
which you can view here... http://jsfiddle.net/r6Wwf/15/
I added a negative margin-left to compensate for the border I added so you get a better visual of how it works. I also set the width of the ul to 700px. This could be any width.
To set the entire menu in the center of a container add this to your css:
ul { margin: 0 auto; }
And then add a width to your container. This is all in the fiddle. You can set the width of the container to whatever you want. I have it at 800px.
If you're okay adding a containing element (nav is probably the most suitable), here's a good solution for you:
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Privacy</li>
<li>Shopping</li>
<li>Contact us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
float: left;
position: relative;
left: 50%;
padding: 0;
list-style: none; }
nav ul li {
float: left;
position: relative;
right: 50%;
margin: 0 10px; }
nav ul li a {
padding: 5px;
display: block; }
Preview: http://jsfiddle.net/Wexcode/bKH79/
If you want each li element to be 20% of the width of the container, just set the container to have width: 100% and set each li element to have width: 100% (you would also need to remove the margin from the li and add text-align: center).
See: http://jsfiddle.net/Wexcode/bKH79/2/
The best way to horizontally center elements in CSS is to give it a specific width, and then give it margin: auto;. Here is an example I made real quick. You can see the ul (blue border) has a width of 300px and it sits centered inside the 500px container (red border): http://jsfiddle.net/r6Wwf/4/. You can space the list elements however you would like.
What is the container width exactly..?
ok Let me assume its 960px now give width to your ul element so that the list item will not go in second line.Suppose it has taken 600px now in this case your CSS for making menu items in CENTER will be:
.container{width:960px;}
.container ul{width:600px;margin:auto}
Hope it'll solve your problem.
Pretty simple.
div#container {
width: 300px;
margin: auto 0;
}
div#container li {
display: inline-block;
padding: 15px;
}
You would definitely need to write some JavaScript to make this happen. This is how I would do it... http://jsfiddle.net/rb39A/1/
By using a little bit of jQuery you can get the dynamically sized containers you're looking for.
So, I have DOM that looks like this:
<ul id="nav">
<li><a>Hello</a></li>
<li>
<a>OuterMenu</a>
<ul>
<li><a>InnerMenu1</a>
<ul><li><a>InnerMenu2</a></li><li><a>Item 1</a></li><li><a>Item 2</a></li></ul>
</li>
</ul>
</li>
</ul>
which looks like this:
+Hello +OuterMenu
----InnerMenu1--------------InnerMenu2
----Other list item Item 1
Item 2
That is, the first menu is horizontal, the next menu is directly below the first menu, and all subsequent inner menus appear directly to the right [see example here].
This works fine, but I need the hover styles for each outer menu to persist as each inner menu is selected. When the user is hovering over Item 1, Item 1, InnerMenu, and OuterMenu should be highlighted, and when the user moves off of the whole menu tree, then and only then should OuterMenu no longer be highlighted. Is there a better way to do this than trying to manage a hover and mouseout event on every single list item?
I'm looking for a clean implementation here.
Check out Stu Nicholls great css-only work on just this issue.
I don´t know what you have already, but if you use something like:
#nav > li:hover > a {
// outer menu highlight
}
it should highlight the outer menu also when you are on a sub-menu item.
The same technique can be applied to all levels, but it depends on your browser compatibility requirements as li:hover will not work in older IE versions.
For completeness
/* second level */
#nav > li > ul > li:hover > a {
}
/* third level */
#nav > li > ul > li > ul > li:hover > a {
}
Simply using the :hover psuedo-class on your li will apply even when you are over a descendant element. Here's a working example showing that this is true: http://jsfiddle.net/eMyHE/; hover over InnerMenu2 and you'll see InnerMenu1 and OuterMenu highlight.
Also, you might be interested in my 8-years-old CSS-only hierarchical menu tests, part of some ancient code that uses JavaScript for hierarchical menus.
This isn't my work, I'm just passing it on. It looks like it's the same answer as JakeParis's, but in JSFiddle form. http://jsfiddle.net/XPE3w/7/ This is for HTML with a ul>li>a structure (see the link if this doesn't make sense).
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
li:hover li a:hover {
background: #95A9B1;
}