I need to style a regular html list like the following picture:
as you see each each list item has a padding on the sides and a top&bottom border. When hovered the border has a width of 100% of the <ul> item.
Now the problem actually is: when you give each <li> element a top & bottom border I have a border of 2 px between each element (bottom border from the first element and the top border from the second element), I don't want that however I do not know any solution for this.
my html:
<div id="tab_top" class="tab">
<div class="bottom">
<div class="cont">
<ul>
<li>Here’s a Sample Post <span class="ct">32</span></li>
<li>Here’s a Sample Post <span class="ct">32</span></li>
<li>Here’s a Sample Post <span class="ct">32</span></li>
<li>Here’s a Sample Post <span class="ct">32</span></li>
<li>Here’s a Sample Post <span class="ct">32</span></li>
<li>Here’s a Sample Post <span class="ct">32</span></li>
<li>Here’s a Sample Post <span class="ct">32</span></li>
</ul>
</div>
</div>
</div>
my css:
#tabs .tab div.cont ul li a{line-height:30px; height:30px; color:#3ca097; display:block; padding-left:11px; padding-right:13px; width:259px;}
#tabs .tab div.cont ul li a span.ct{float:right;background:url(images/count_comments.gif) no-repeat left top; height:13px; padding-left:16px; margin-top:10px; line-height:12px;}
#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;}
#tabs .tab div.cont ul li a:hover span.ct{background-position:left bottom; color:#23665f; margin-top:9px;}
I would be pleased if you can help me
Yours truthfully
If you use border-top and border-bottom, you are correct, you will get a 1px border, if however you use both, then specify li+li like so:
.tab div.cont ul li { border-top: 1px solid black; border-bottom:1px solid black; }
.tab div.cont ul li + li { border-top:none; }
You will get what you claim to want.
You could just use a bottom border and for the first also include a top border..
either use an extra class for the first item, or use the :first-child pseudo-class (which is not supported on IE6)
As Pekka suggested, prior to deleting his answer, the obvious solution is to amend this style:
#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;}
to become:
#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;}
Not terribly 'adv.', really...Unless we're both missing something?
Remove either the top or bottom border and then set an inline style on the first or last li to add the one border that would seem to be "missing."
Related
How to click the navicon image in mobile phone (not hover) and it will show up a small container which has links. Here are my codings..
HTML
<div id="nav">
<ul class="menu">
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
</ul>
<img src="nav.png">
<div class="navimage">
<img src="twitter.png">
<img src="facebook.png">
</div>
</div>
CSS
#nav {
height:70px;
border-bottom:1px solid #FFF;
margin-bottom:20px;
padding:0;
max-width:95%;
margin:0 auto;
}
#nav-icon img {
display:none;
}
.menu {
float:left;
width:70%;
margin:0 auto;
}
.menu li {
display:inline;
}
.menu a {
padding:15px;
margin:15px 0;
display:inline-block;
text-align:center;
}
.menu a:hover {
color:#DEB887;
}
#nav a:hover {
text-decoration:none;
}
.navimage {
float:right;
margin:20px 0;
width:30%;
}
.navimage img {
width:30px;
height:30px;
margin:0 2px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
float:right;
}
RESPONSIVE CSS
#media only screen and (min-width: 480px) and (max-width: 764px) {
#nav-icon img {display:inline-block;height:40px;margin-top:10px;margin-left:10px;cursor:pointer;}
#nav ul, #nav:active ul {
display:none;
position:absolute;
padding:15px;
background:#fff;
border: 3px solid #DEB887;
left:30px;
top:50px;
width:30%;
border-radius:0 0 3px 3px;
z-index:9999;
}
#nav:hover ul {display:block;}
#nav ul li a {width:100%;color:#000;padding:0;margin:10px 0;}
#nav ul li a:hover {color:#DEB887;}
}
Here is JSFIDDLE to check it out. The problem is I hover nav div everywhere and it shows menu. What I want is to click the navicon image and it will appear menu? Any ideas?
Thanks
You need a small bit of jQuery, which means including the library in your head and having a small piece of script in the head aswell.
First add this to the head:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
That loads the latest version of jQuery for you.
Next you need to add the jQuery code in to make the nav work. Its a simple 3 line code that checks its been clicked and then toggles the display on and off.
<script type="text/javascript">
$(document).ready(function() {
$('#nav-icon').click(function() {
$('ul.menu').toggle();
});
});
</script>
As you can see, it finds the id nav-icon and when its been clicked, runs a function which toggles the visibility of the ul.menu.
jsFiddle Demo: http://jsfiddle.net/3w63B/2/
If you go on the mozilla developer network (link) or go to the jQuery API pages (link) you can pick up the basics pretty quick. It only starts getting difficult when you start getting jumping right into the deepend of what it can all do.
Hope this helps fella.
What do you think this line of code does?
#nav:hover ul {display:block;}
Everytime you hover the nav anywhere the submenu will appear.
Instead of CSS use javascript / jQuery to make it appear on click.
$("#nav-icon").on("click", function() {
$(".menu").css("display","block");
});
Although above code isn't exactly what you want, because the submenu will stay forever. This will help you finding a solution by yourself ;). Coding is doing.
I'm creating a menu bar with ul li tags and the links are to close together how do I get them to have a bigger space between links?
Give margin on li element ...
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Gallery</span></li>
<li class="last"><span>Map</span></li>
</ul>
</nav>
<style>
li{
display:inline-block;
background:blue;
width:100px;
height:20px;
text-align:center;
margin-right:15px; /* edit this margin to separate your elements*/
}
a{
text-decoration:none;
color:black;
display:block;
}
.last {margin-right:0px;}
</style>
http://jsfiddle.net/Tv7pA/
you can remove margin right from last element like top or with jQuery or with css li:last-child, li:nth-child(3) ... but best way is with jQuery or with class coz it is sup. in all browsers
I have a simple nav list. Typical set up, where the active page li item has the id "active".
I want to be able to keep the active page as a link, have a solid border underneath, but have a dashed border on the li items without the "active" id.
How can I achieve this without having the active tag being overwritten with the dashed border-bottom?
Here's the code for the list:
<div id="nav_bar">
<ul id="nav_list">
<li id="active">About</li>
<li>Design</li>
<li>Photography</li>
</ul>
</div>
jsFiddle Example
Since borders are already being applied to each a, make the :hover only apply to li that are not #active by using :not().
Change:
#nav_list li a:hover{
border-bottom:1px dashed #666;
}
#active a{
border-bottom:1px solid #666;
}
#nav_list li#active a:hover{
border-bottom:1px dashed #666;
}
To:
li#active a{
border-bottom:1px solid #666;
}
#nav_list > li:not(#active) a:hover{
border-bottom:1px dashed #666;
}
DEMO:
http://jsfiddle.net/FaESR/1/
NOTE: Make sure to use class instead of id if you plan on having more than one instance of #active, since id must be unique!
Happy coding!
I have been trying to create a border-color change hover effect with CSS and something seems to not be working properly. Here is my code:
Markup:
<ul>
<li class="hover">
<img src="img/content/lighter.png" alt="lighter"/>
<p>Discusing Strategy</p>
</li>
<li class="triangle"></li>
<li class="hover">
<img src="img/content/wrench.png" alt="wrench"/>
<p>Beginig <br/> Designs & Development</p>
</li>
<li class="triangle"></li>
<li>
<img src="img/content/car.png" alt="car"/>
<p>Delivering Product</p>
</li>
</ul>
CSS:
div#bpath ul li.triangle {
width: 0;
height: 0;
border-top: 95px solid #d0dde5;
border-left: 20px solid #c1c1c1;
border-bottom: 95px solid #d0dde5;
}
div#bpath ul li.hover:hover li.triangle {
border-left-color: #5f9999;
}
What am I doing wrong here? I used the same technique to change the color of the p element and that worked. Why dosen't the border color change work?
Your selector:
div#bpath ul li:hover li.triangle
is trying to match a li element of class 'triangle' within an li. As you don't appear to have a nested list (therefore no li elements within other li elements) this doesn't seem able to work.
If you remove the latter li (li.triangle) to give (all, or one, of) the following:
div#bpath ul li:hover,
#bpath ul:hover li.triangle:hover,
#bpath ul:hover li.triangle,
#bpath ul li.triangle:hover {
border-left-color: #5f9999;
}
this might work. Assuming your posted-HTML is correct.
If you want all triangle li's to be changed use this:
div#bpath ul:hover li.triangle{
border-left-color: #5f9999;
}
If you want just the next triangle element it's more tricky but you can try this:
div#bpath ul li:hover + li.triangle {
clear:both;
}
I think this doesn't work on ie. If you want it to work on IE i would go for jquery.
you should use this way,
div#bpath ul li.triangle:hover {
border-left-color: #5f9999;
}
you can use this fiddle, which changes the triangles color and adapt it to clarify your question. http://jsfiddle.net/j7YSu/1/
(or just accept it as the right answer :))
i had some issues with your code, but maybe this fiddle will help: http://jsfiddle.net/j7YSu/3/
I would like to have an ordered list that has the text on the left and an image for each li within it on the right of the li. So I floated the image to the right and it puts the image correctly on the right and text on the left, but the image is 14 pixels too low in IE and FF. Chrome does it right. This appears to me to be IE and FF putting the float outside or underneath each LI instead of inside where it should be (like Chrome). If I adjust the position -14px (up) for IE and FF, it works fine for them, but then Chrome is messed up. 14px is the height of each LI which is why that trick works.
I don't want a single browser hack unless absolutely needed (ie, do the -14px offset for IE/FF and tell Chrome to ignore it).
#top25list{
width:185px;
cursor:n-resize;
list-style:
decimal inside;
padding:0;
margin:0
}
#top25list li{
margin:0;
padding:0 3px;
background-color:#FFF;
border-top:1px solid #990100;
border-bottom:1px solid #990100
}
#top25list img{
border:none;
height:13px;
width:13px;
float:right
}
#top25list li:hover{
background-color:#990100;
color:#FFF
}
Nothing special about the li's:
<li id=##>Name <img src="/images/button-x.png" alt="Remove Name"></li>
See the first LI doesn't have the image for FF/IE because it's below (where it looks like it's for #2) and the #25 image is off the bottom of the list.
I want all 3 to look like the Chrome. There is some JavaScript producing the OL/LIs, and the class=removeTeam is just for jQuery actions. This list is within a jQuery sortable and I do have the list selection disabled with jQuery (.disableSelection();). I don't think this has anything to do with jQuery or JavaScript, just simple CSS.
It's a bug that IE and Firefox share. To work around it you must move image to be before any non-floated text in its line.
<li id=##>
<a href="#" rel="##" class="removeTeam">
<img src="/images/button-x.png" alt="Remove Name">
</a>
Name
</li>
If you can't change the HTML you could try positioning instead of floats.
#top25list li{
margin:0;
padding:0 3px 10px 3px; /* add padding-right to make room for the image */
background-color:#FFF;
border-top:1px solid #990100;
border-bottom:1px solid #990100;
position: relative; /* for img to have position */
}
#top25list img{
border:none;
height:13px;
width:13px;
position: absolute;
top: 0;
right: 0;
}
I haven't tested this, let me know if I'm wrong.
The list-style: inside is messing it up.
Below is the code that works. I moved the float to the #top25list a and moved the to before the name.
#top25list{
width:185px;
cursor:n-resize;
padding:0;
margin:0
}
#top25list li{
margin:0;
padding:0 3px;
background-color:#FFF;
border-top:1px solid #990100;
border-bottom:1px solid #990100
}
#top25list a{float:right;}
#top25list img{
border:none;
height:13px;
width:13px;
}
#top25list li:hover{
background-color:#990100;
color:#FFF
}
<ul id="top25list">
<li><img src="/images/button-x.png" alt="Remove Name">Name </li>
<li><img src="/images/button-x.png" alt="Remove Name">Name </li>
<li><img src="/images/button-x.png" alt="Remove Name">Name </li>
<li><img src="/images/button-x.png" alt="Remove Name">Name </li>
</ul>