I just found a nice script you can see it over here
http://demo.tutorialzine.com/2012/10/css3-dropdown-menu/
I saw the drop down has a little ^ on top. On the css I could find this:
#colorNav li ul li:first-child:before{
content:none;
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:#313131;
left:50%;
top:-10px;
margin-left:-5px;
}
Only I can't understand how this is working; does it have
something to do with the border?
This CSS operates on the following markup (reduced for simplicity):
<nav id="colorNav">
<ul>
<li class="green">
<ul>
<li>Back to the tutorial</li>
<li>Get help</li>
</ul>
</li>
<li class="red">
<ul>
<li>Payment</li>
<li>Notifications</li>
</ul>
</li>
</ul>
</nav>
The selector targets the :before pseudo-element on the inner-most li elements that are also the first elements within their parent:
#colorNav li ul li:first-child:before
Missing from your code here, but present in the original tutorial, was the following comment:
/* the pointer tip */
This particular set of rules is for creating the small triangle that appears at the top of the dropdown menus, pointing up to their associated block (pictured below, emphasized with a red circle):
The styles then follow for creating this triangular shape:
content: none; /* Pseudo-element has no content */
position: absolute; /* It's positioned absolutely */
width: 1px; /* It has a width of 1 pixel */
height: 1px; /* And a height of 1 pixel too */
border: 5px solid transparent; /* Applies initial border style */
border-bottom-color: #313131; /* Overrides bottom border color */
left: 50%; /* Moves it half-way from the left */
top: -10px; /* And 10px up above the element */
margin-left: -5px; /* Margin, half of width, to center */
The end-result, is a triangle created purely with borders in CSS.
It creates a fake area front of the #colorNav li ul li:first-child with content:''; and manages that area with other css styles.
#colorNav li ul li:first-child:before { ... }
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
content:'';
The content property is used with the :before and :after pseudo-elements, to insert generated content.
Hope this will help you?
Related
Did a lot of research on all the separate components. However, I don't understand how the components work together. Several placement issues have plagued me on different occasions. I would like to understand why it behaves like it does.
Designing a site with a fixed header, containing some buttons. I want the buttons to be placed on a colored row (NAV). That's why I made a child of NAV. However I can't seem to place the buttons over the bar.
Html
<body>
<nav class="row">
<ul class="menu">
<li id="link1">Link 1</li>
<li id="link2">Link 2</li>
<li id="link3">Link 3</li>
<li id="link4">Link 4</li>
<li id="link5">Link 5</li>
</ul>
</nav>
<div class="row main">
#RenderBody()
</div>
CSS
nav, div, li {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px dashed black;
}
.row {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
nav {
position: fixed;
top: 80px;
height: 40px;
z-index: 100;
background-color: Green;
border-bottom: solid greenyellow 2px;
}
.menu li {
display: block;
background-color: darkgreen;
float: left;
height: 40px;
width: 60px;
}
.menu a {
color: white;
}
Result
It can be fixed by several things, like button margin or placing the buttons relative with a negative Top offset. However, these solutions feel 'dirty', like it's not the right way to do it. Why are the LI's not on top of NAV?
because your broswer applies by default some margin to the ul tag
try adding
ul {
margin: 0;
}
you could avoid these issues by using a css reset (Eric Meyer is the authority here: http://meyerweb.com/eric/tools/css/reset/) or Necolas' Normalize.css: http://necolas.github.io/normalize.css/
the first one zeroes all the values of all elements - you have to rebuild the style of some elements like lists.
The second one normalizes the values of elements to fix browsers inconsistencies
When you use the "float" property on some elements (here the "LI"), the parent (here the "menu") ignore his floating children to calculate his height.
So you have to specify a valid height to your menu, or probably better, use "overflow:auto" on it to remember him his children.
So remove your
nav {
height:40px;
}
and add in your CSS :
.menu {
overflow:auto;
}
As in this fiddle : http://jsfiddle.net/bE3QH/
When using the element ul it sometimes creates whitespace on browsers. By making the margin 0px you are removing the whitespace decreasing the area used by element. hope this helps. The following code can be used...
ul {
margin:0px
}
You can use this instead of your code.
You will get ready made menu control on this website.
You can modify as you want & you will get your menu control available in a moment.
Here's the link.
http://cssmenumaker.com
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/
http://cssmenumaker.com/builder/1666948
Please check it out.
These are very useful and it will definitely save your time as well.
I hope this will resolve your issue.
Add this to your CSS:
ul{
margin:0;
padding:0;
}
This clears the default properties for ul elements
You would be better off if you didn't specify a width and a height for the list items, but rather displaying the anchor tags as blocks, and giving those a width and height.
I have a vertical menu in which each item is centered.
This is done with ul/li.
I would like to have a repeatable background image for each item, which is all aligned on the left, but aligned with inside text width on the right.
Here is an illustration of what I want to do :
illustration as an image
Of course, it is possible to add DIVs to the HTML structure.
Thanks
This doesn't seem to be possible alone with CSS. So I went ahead and created this with jQuery.
HTML is
<ul>
<li><span class="center">Text</span></li>
<li><span class="center">Text big</span></li>
<li><span class="center">Text small</span></li>
</ul>
All I do in script is this.
$('li .center').each(function() {
var width = $(this).width();
$(this).css({"paddingLeft": (200 - width)/2 + 'px'});
});
I have added a fiddle for reference.
I hope you won't have trouble adding a background image instead of #666 for .center
It's possible with span and a pseudo-element
Codepen Demo
HTML
<div class="wrapper"> /* not required */
<ul>
<li class="center"><span>Some Long Text</span></li>
<li class="center"><span>Some Text</span></li>
<li class="center"><span>Text</span></li>
</ul>
</div>
CSS
ul {
padding: 0;
margin: 0;
}
/* THE GOOD STUFF */
li{
overflow:hidden; /* hides all extra pixels */
font-size:2em;
padding: 0;
margin-bottom:.5em;
}
.center {
text-align:center;
}
li > span {
diaplay:inline-block;
background:red;
position:relative;
padding-right:0.5em;
}
li.center > span:before {
content: "";
position: absolute;
right:100%;
top: 0;
height:100%;
width:2000px; /* some really large number*/
background:red;
margin-right:0; /* or remove and add padding-right to span */
}
<div id="menuNav">
<ul id="menuNav-ul">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
I have a JSFiddle that I've made here:
http://jsfiddle.net/agzF5/
If you hover over the menu items that aren't the first of type you'll notice there is some strange margin appearing after where the border would be if it were set, I was wondering as to how I can remove that?
Matt
JSFiddle here
You had your list items as display:inline-block;
I've floated them left, added display:block; and changed some properties on the wrapping element. so it still contains the floated elements, see below.
#menuNav-ul {
background: lightgrey repeat-x;
list-style-type: none;
padding: 0;
margin: 0;
border-bottom: 2px solid darkgrey;
display:block;
overflow:hidden;
}
#menuNav-ul li {
display: block;
border-right: 1px solid #bfbfbf;
margin: 0px;
padding: 0px;
float:left;
}
add
html, body{margin:0;}
to the top, body alone should probably work as well..
Others have answered with good solutions.
I wanted to leave this here in case it helps someone though.
The reason for this is that there is whitespace in your markup (totally fine), which inline-block renders as spaces.
If you are working with inline-block elements, you can to set the font-size of the parent to 0, then explicitly set the font-size of the child elements as a workaround for this.
You're setting your LI elements to be display:inline-block which means they will have a inline whitespace space between them (usually ~4px).
3 solutions:
1. LIVE DEMO
add font-size:0; to the UL
reset the font size to px for the LI elements
2. don't add display:inline-block; but float:left; your LI elements
3. (not recommended) add a -4px margin-left to your LI elements
P.S: an additional suggestion is not to style (colors, borders etc) you LI elements. Treat them like simple positioned containers for your styled <a> elements.
Well the simple solution is to add comment between your li items:
<div id="menuNav">
<ul id="menuNav-ul">
<li>Home</li><!--
--><li>Page 1</li><!--
--><li>Page 2</li>
</ul>
</div>
Check it in action: http://jsfiddle.net/agzF5/7/
I have some text links inside a list, then within two divs. I want the hover effects to expand past the list to the outside of the outer div. Is there a way to do it with negative padding? Another way? Possible at all?
Visuals will be easier
How it is now-
Highlight of the padding in the surrounding div-
How I want the a:hover effect to look-
Basically the code looks like this-
.1 { padding: 10px;}
.2 { padding: 5px;}
<div class="1">
<div class="2">
<ul>
<li>
<a>abcde</a>
</li>
<li>
<a>fghij</a>
</li>
</ul>
</div>
</div>
Negative margin/padding are invalid and don't work as expect,
but is possible, you have to take out all his
parents margins and add padding to the links to get
the same effect but with all wide anchors:
/* CSS CODE */
.parent { padding:0px; border:1px solid red }
.child { padding:0px; }
.parent h2 { margin:10px; font-size:22px; }
.child ul li a { display:block; padding:10px 15px; }
.child ul li a:hover { background:green; }
you can see an example in: http://jsfiddle.net/3zANs/
Negative padding is invalid (and simply won't work), negative margin on the other hand is valid and it might be useful in your case.
I believe, also invalid are classes that stars with numbers.
I have an unordered list with a background-image set. All list-items have the same height, the background-image is positioned left center.
The text of each item should be centered vertically to the li. This works well with single-line text (by setting the line-height according to the height of the li), but not with two lines of text.
I could add "line-height:normal" to the two-line item, but I want a solution that works for all items.
How can I do this?
Example:
li {
list-style-type:none;
padding-left:40px;
height:36px;
line-height:36px;
background:url('tick.png') no-repeat 0 50%;
}
this is a most crossbrowser solution
li {
width : 200px;
line-height : 100px;
height : 100px;
border : 1px blue solid;
}
li span {
display : -moz-inline-box; /* FF2 or lower */
display : inline-block; /* FF3, Opera, Safari */
line-height : normal;
vertical-align : middle;
}
li span { *display : inline;} /* haslayout for IE6/7 */
<ul>
<li><span>My text</span></li>
<li><span>My longer text</span></li>
<li><span>My text, but this time is really wide</span></li>
<li><span>My text, some thoughts about how much it will expand in this item.</span></li>
</ul>
I used star hack for brevity, you should avoid. Just use html5boilerplate solution, it uses conditional comments on body tag
li {
height:200px;
line-height:200px;
border:1px solid red;
}
li span {
vertical-align:middle;
display:inline-block;
line-height:1.2;
}
<li>
<span>two<br />lines</span>
</li>
It should work.
EDIT : updated to see changes