how to get rid of the border-bottom which under test text in the li when the mouse hover on the test text by css?
the html :
<div class="rank">
<ul>
<li class="tab1 active">test</li>
<li class="tab2">one</li>
</ul>
</div>
<div class="content">....</div>
my style(it's doesn't get rid of the bottom under test text):
.active{
background-color:#FFFFFF;
}
rank ul li{
float:left;
border:1px solid #D5D5D5;
border-bottom:none;
}
.content{
clear:both;
border-top:1px solid #D5D5D5;
}
ps: why when i use overflow:hidden to rank div, it can prevent the float to the content div?
#zhuanzhou; may be you have to play with margin padding
for example
.rank ul{
border-bottom:1px solid #D5D5D5;
}
.clr{
clear:both;
}
.active{
background-color:#FFFFFF;
padding-bottom:1px;
margin-bottom:-1px;
}
.rank ul li{
float:left;
border:1px solid #D5D5D5;
border-bottom:none;
margin-right:10px;
}
.content{
clear:both;
border-top:1px solid #D5D5D5;
}
check live demo http://jsfiddle.net/PBBED/
NOTE:in my example i am using clear:both instead of overflow:hidden for clear floated child element.
.active {
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
margin-bottom: -1px;
}
.active{
background-color:#FFFFFF;
}
ul li{
display:inline;
}
li{
border-bottom:1px solid;
}
li:hover{
border-bottom:none;
}
.content{
clear:both;
border-top:1px solid #D5D5D5;
}
Remove line 7 in your css then start a new selector using the css psuedo class :hover at the end
rank ul li:hover {
border-bottom: none;
}
Although, older browser will disregard that unless it is on an a tag.
Related
http://liveweave.com/BNM1Jj
I try to put both li element in same line occupying 50% of width but i could not get them in same line
i do not want to use table structure .
unable to put both li in same line why so ??
ul.primary_nav{
background-color:#494949;
}
ul.primary_nav li.selected{
background-color:#942F99;
color:#494949; float:left;
}
ul.primary_nav li{
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
}
ul.primary_nav li a{
display:block;
height:36px;
text-align:center;
color:#c5c5c5;
font-size:13px;
text-shadow:0px 1px 0px #2a2a2a;
text-decoration:none;
font-weight:bold;
}
ul.primary_nav li a span.icon{
display:block;
margin:auto;
width:22px;
height:22px;
}
please tell what i am missing
Make the following change:
ul.primary_nav li.selected{
background-color:#942F99;
color:#494949;
float:left;
}
ul.primary_nav li{
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
width:50%;
float:left;
}
Notice the float:left; that will get them on the same line.
Remove the whitespace between li elements and add box-sizing: border-box to ul.primary_nav li:
Demo
HTML:
<div class="moby_wrap">
<header>
<a id="logo" href="#">Header</a><br>
<ul class="primary_nav">
<li class="selected"><a><span class="icon about"></span>Rings & Pendants</a></li><li><span class="icon folio"></span>Earrings and Cufflinks</li>
</ul>
</header>
CSS:
ul.primary_nav li{
display:inline-block;
padding-top:5px;
padding-bottom:5px;
width: 50%;
box-sizing: border-box;
box-shadow:inset 0 0 1px #7d7d7d;
-webkit-box-shadow:inset 0 0 1px #7d7d7d;
border:solid 1px #921699;
border-radius:3px;
}
Option 1: (Which you might not want)
Make primary_nav rendered as a table & li as table cells
ul.primary_nav{
background-color:#494949;
border-radius:3px;
width:100%;
display:table;
}
ul.primary_nav li{
display:table-cell;
padding-top:5px;padding-bottom:5px;
width:50%;
width:50%;
box-shadow:inset 0px 0px 1px #7d7d7d;
-webkit-box-shadow:inset 0px 0px 1px #7d7d7d;
border:solid 1px #921699;
border-radius:3px;
}
Option 2:
Make li as float left with border none.
Then use another inside for styling.
ul.primary_nav li{
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
border:none;
float: left;
}
I think that you could have a better result using divs elements instead a ul.
Take a look a this code:
HTML
<header>
<div>
Header
</div>
<div class="menuitem">
Link 1
</div>
<div class="menuitem">
Link 2
</div>
</header>
CSS
header {
width: 100%;
text-align: center;
background-color: red;
}
div.menuitem {
width: 50%;
float: left;
text-align: center;
background-color: orange;
height: 50px;
}
It's an easy html structure, less css to write and a code more readable (and also fluid content).
Check out this codepen.
i'm trying to create an horizontal menu on my site.
The idea is to have a layout in this way ----O---- where the - are the links of the menu and the O is a picture put in the middle of the page, so the two list are on the left and on the right and the are around the picture.
I've created the html
<div class="prima">
<ul class="prima_lista">
<li>primo</li>
</ul>
</div>
<div class="seconda">
<ul class="seconda_lista">
<li>secondo</li>
</ul>
</div>
and then i've created the CSS that will organize everything
.prima{
position:absolute;
top:400px;
width:50%;
left:-70px;
border:1px solid red;
}
.seconda{
position:absolute;
top:400px;
width:50%;
right:-70px;
border:1px solid green;
}
ul.prima_lista {
margin:0 auto;
list-style:none;
text-align:right;
border:1px solid blue;
}
ul.seconda_lista {
margin:0 auto;
list-style:none;
text-align:left;
border:1px solid blue;
}
ul.prima_lista li {
display:inline-block;
border:1px solid gray;
}
ul.seconda_lista li {
display:inline-block;
border:1px solid gray;
}
ul.prima_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
ul.seconda_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
The big problem is the while the first ul/li works perfectly and is well aligned on the right edge of the div... the second one instead present some spaces between the UL and the DIV margin. Is there a way to eliminate this space?
No matter how much i try i haven't find a way to solve this riddle -> http://jsfiddle.net/7voe8jea/
--- i've updated the link to the jsfiddle. first of all for it didn't work... and second because i think i haven't explained myself very well. What i'd like to do is to "push" the second ul to the left of the div just like the first one is aligned to the right edge of the first div.
I saw that rather that using an id for the div you used a class. SO i changed it to an id, and prefixed everything in the css with a #. Here is a link to the js with it working http://jsfiddle.net/fstxsd5g/1/
Here is the html:
<div id="lista">
<div id="prima_lista">
<ul id="prima_lista">
<li>primo</li>
</ul>
</div>
</div>
And the css
#lista {
position:absolute;
height:60px;
width:100%;
top:400px;
border:1px solid #000;
}
*/
#prima_lista{
position:absolute;
top:400px;
height:60px;
width:50%;
left:-70px;
border:1px solid red;
}
ul.prima_lista {
margin:0 auto;
list-style:none;
text-align:right;
}
ul.prima_lista li {
display:inline-block;
/* border-top:1px solid #dededc; */
/* padding-top:16px;
padding-right:40px; */
}
ul.prima_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
.seconda_lista{
width:50%;
right:-70px;
}
ul.seconda_lista {
margin:0 auto;
list-style:none;
text-align:left;
}
ul.seconda_lista li {
display:inline-block;
border-top:1px solid #dededc;
padding-top:16px;
padding-right:40px;
}
ul.seconda_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
Hope this helps! Littleswany
I got a menu bar on my website which is consisting of lists. The html looks like this:
<div id="menu">
<ul class="menu">
<li class="menu"><a class="menu" href="#">HOME</a></li>
<li class="menu"><a class="menu" href="#">MOSAIC</a></li>
<li class="menu"><a class="menu" href="#">SUCCESS</a></li>
<li class="menu"><a class="menu" href="#">MEMBERS</a></li>
<li class="menu"><a class="menu" href="#">CONTACT</a></li>
</ul>
</div>
And the css looks like this:
#menu {
margin-left: 10%;
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;
position:absolute;
}
ul.menu {
float:middle;
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
And my menubar looks like following at the moment:
It just takes 80% of the sites width, but the 5 elements doesn't take 20% of the 80% as expected. How can I fix my issue ? It would be also pretty awesome if you could explain to me how the correct answer is working if it is not obvious and self explaining.
My opinion is to use table-cell and apply the style in li element not in children ones like this:
#menu {
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
position:relative;
margin: 0 auto;
}
ul.menu {
width:100%;
padding:0;
margin: 0 auto;
list-style-type:none;
}
ul{
display:table;
}
li{
display:table-cell;
text-align:center;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-left:1px solid white;
vertical-align: middle;
}
fiddle
Any borders or padding will add to the width of the elements until you tell them not to with
box-sizing: border-box;
JSFiddle Demo
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#menu {
margin: 0 auto;
border-top:1px solid white;
border-bottom:1px solid white;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;}
ul.menu {
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
You are using borders.
Borders add 2px to every element.
box-sizing: border-box;
Is the solution
http://jsfiddle.net/Hc3au/
You need to change the position of #menu to relative or add an wrapper containing the list. I'm also pretty sure there is no float: middle, just right and left ( and none and inherit ).
Also I do prefer the following:
ul.menu > li
{
width: 20%;
}
ul.menu > li > a
{
width: 100%;
}
Why do you use the menu class on every element?
I want to remove the red lines in-between "google links" but I still want the border color to be red.
How do I do it?
Here is the code:
<!doctype html>
<html>
<head>
<title>Website</title>
</head>
<body>
<style>
a{
text-decoration:none;
color:white;
font-weight:bold;
font-family:tahoma;
background:black;
padding-top:2px;
padding-right:0px;
padding-bottom:3px;
padding-left:0px;
border:1px solid red;
margin-left:0px;}
</style>
googlegooglegooglegooglegoogle
</body>
</html>
You can set seperate border attributes for each a element like this:
a{
text-decoration:none;
color:white;
font-weight:bold;
font-family:tahoma;
background:black;
padding-top:2px;
padding-right:10px;
padding-bottom:3px;
padding-left:0px;
border-bottom: 1px solid red;
border-top: 1px solid red;
margin-left:0px;
}
a:last-child{
border-right:solid 1px red;
}
a:first-child{
border-left:solid 1px red;
}
fiddle
You can try below code:
Demo
Demo 2
<div style="border:1px solid red;">
google
google
google
google
google
<div>
Border-color will help you
Fiddle
CODE :
a{
text-decoration:none;
color:white;
font-weight:bold;
font-family:tahoma;
background:black;
padding-top:2px;
padding-right:0px;
padding-bottom:3px;
padding-left:0px;
margin-left:0px;
border-color:red;
}
You should use pseudo classes and remove your left and right border from a.
a {
border-right:none;
border-left:none;
}
a:last-child {
border-right: 1px solid red;
}
a:first-child {
border-left: 1px solid red;
}
See here for a demo
Wrap a div around your anchor tags and set the border to that div.
<div id="wrap">
google
google
google
google
google
</div>
Use display:inline-block; that your width is as big as your anchor tags.
Have a look at this fiddle
I'm trying to do a dropdown menu that I designed with photoshop. However, there is a border in the top of this menu. The image, can explain it better:
Using CSS, all I get is a line that covers more that it is designed to. I tryed to use z-index position to make, but without success. Take a look at my code:
nav{
display: inline;
font-weight:900;
text-transform:uppercase;
font-size:13px;
margin-left:95px;
}
.menu > li > a {
width:auto;
padding:10px 20px 10px 10px;
background-image:url('img/seta_menu.png');
background-repeat:no-repeat;
background-position:right 50%;
}
.menu>li{
width:auto;
margin-right:45px;
padding:10px;
border-left: solid 1px #F8FAFA;
border-right: solid 1px #F8FAFA;
border-top:solid 1px #F8FAFA;
border-bottom:solid 1px #F8FAFA;
}
.menu>li:hover{
border-left: solid 1px #bdc9c5;
border-right: solid 1px #bdc9c5;
border-top:solid 1px #bdc9c5;
border-bottom:solid 1px #bdc9c5;
background-color:white;
}
nav>div{
display:inline;
}
nav>div>ul{
display: inline;
}
.menu li{
display: inline-table;
}
.menu>li:hover >ul{
display:block;
}
.sub-menu{
position:absolute;
display:none;
padding:10px;
margin-left:-11px;
margin-top:10px;
border-left: solid 1px #bdc9c5;
border-right: solid 1px #bdc9c5;
border-bottom:solid 1px #bdc9c5;
/*border-top:solid 1px #bdc9c5;*/
background-color:white;
}
.sub-menu ol, ul {
padding:0px;
margin:0px;
}
.sub-menu > li{
display:block;
}
http://jsfiddle.net/btgfE/
Problem solved...
jsfiddle: http://jsfiddle.net/btgfE/2/
1) uncomment the top border of the .sub-menu
2) comment out the bottom border of the .menu>li:hover
3) give .sub-menu the css rule z-index:-1;
4) decrease the margin-top of .sub-menu to 9px
Really what this is doing is letting the top level menu item slightly overlap ontop of the sub-menu item's top border, giving the appearance you are looking for
I have edited your fiddle here:
http://jsfiddle.net/btgfE/4/
I gave the .submenu a z-index of -1, this fixed it.
I also changed the colours so they are more easily visible. You will want to set the green to white, I did this so that you can see the border is on top of the sub-menu's border