I have this design of a table with a menu next to it: fiddle, The problem is that the corners of the #settingNev ul li a is shown on the border-right so there are little white dots and the border the is connected to the menue and the table(you can se the in the fiddle easly).
How can i do hat they wont be? i want that the ul's li background-color will stay white and will not transparent(transparent solves it)?
Also i dont want to set the left,top and bottom borders as 0px becaus ethen when its hover one li the other move
similar to musefans answer but with a fix^^
#settingNev ul li a {
display: block;
border-radius: 6px 0px 0px 6px;
color: #666;
//padding: 5px 3px;
padding: 6px 3px 6px 4px;
border: none;
border-right: 1px solid black;
//margin: 1px 0 1px 1px;
}
#settingNev ul li a:hover {
border: 1px solid black;
border-right: 1px solid white;
//margin: 0;
padding: 5px 3px;
}
#settingNev .active a {
border: 1px solid black;
border-right: 1px solid white;
//margin: 0;
padding: 5px 3px;
}
here is a fiddle(updated)
also you have some duplicated css in you fidle
UPDATE: use padding instead of margin this works now you can see it in my updated fiddle
Related
So i'm butting a border around a div like so
#menu{
margin: 0px;
padding: 100px 0px 0px 20px;
float: left;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-radius: 0px 10px 10px 0px;
}
<div id="menu">
<p>Hello</p>
</div>
But the border ignores the padding or something as can be seen on the image
Image
According to CSS Box Model Border is right in between margin and padding.
CSS Box Model
I am not sure exactly how do you want your design to be but, you can try that shorthand property you used in padding, in margin, Like this:
#menu{
margin: 100px 0px 0px 20px;
padding: 5px;
float: left;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-radius: 0px 10px 10px 0px ;
}
I hope this is what you want.
A simple example is below. for further clarifications visit w3schools
<p class="round3">Roundest border</p>
p.round3 {
border: 2px solid red;
border-radius: 12px;
}
Try these values:
#menu{
margin: 0px;
padding: 100px 0px 0px 20px;
//padding: top right bottom left
float: left;
border: 1px solid black;
border-radius: 10px ;
}
Try this, this is working for me
#menu p{
text-align: center;
margin: 0 auto;
border: 1px solid black;
padding: 50px;
border-radius: 20px;
width: 300px;
}
<div id="menu">
<p>Hello</p>
</div>
If the padding has four values:
padding:10px 5px 15px 20px;
This means:
- top padding is 10px
- right padding is 5px
- bottom padding is 15px
- left padding is 20px
And similar is for border-radius:
border-radius: 15px 50px 30px 5px;
(first value applies to top-left corner, second value applies to top-right corner,third value applies to bottom-right corner, and fourth value applies to bottom-left corner)
So you can try this:
#menu {
margin: 0px;
padding: 100px 0px 0px 20px;
float: left;
border: 1px solid black;
border-radius: 10px;
}
I am trying to create some tabs across the top of a page.
I have a ul li div /div /li /ul. The div is dsplaced downwards to overlap the bottom border of the ul to give the tab effect:
Here's the HTML
<ul>
<li>not selected</li>
<li id="selected"><div id="innerselected"><span>selected</span></div></li>
<li>not selected</li>
</ul>
And here's the CSS:
<style type="text/css">
ul {
border-bottom: 1px solid DarkRed;
}
li {
display: inline-block;
margin-left: 1px
}
#selected {
border-left: 1px solid DarkRed;
border-top: 1px solid DarkRed;
border-right: 1px solid DarkRed;
}
li a {
display: block;
padding: 2px 5px;
border-top: 1px solid #666666;
border-right: 1px solid #666666;
border-left: 1px solid #666666;
text-decoration: none;
background: gainsboro
}
#innerselected {
padding: 2px 5px;
background: White;
position: relative;
bottom: -2px
}
#innerselected * {
position: relative;
bottom: 2px
}
</style>
In IE8, Safari and Chrome it looks as intended.
In IE9+ and Firefox, the ul height expands to accomodate the displaced div, leaving the 'selected' tab slightly raised and detached. I don't understand why it would do that. Any ideas how to stop it?
cracked it - need to add:
vertical-align: top;
to the li {}
I've made a tag-like shape in HTML/CSS as can be seen here - http://jsfiddle.net/RuXyP/
.tag {
float: left;
text-align: center;
height: 14px;
width: 110px;
background-color: #2e353d;
color: #FFFFFF;
padding-top: 2px;
margin-top: 1px;
font-size: 10px;
}
.arrow-right {
width: 0;
height: 0;
float: left;
margin-top: 1px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #2e353d;
}
I'm attempting to add an outline to it and have got as far as this - http://jsfiddle.net/RuXyP/1/
However, I'm struggling to work out how to add an outline to the arrow bit.
I can't use a border as that's how the arrow is created
I can't use outline as it can't be specified for individual sides
Is there any way for this to be done?
I prefer to not use pseudo selectors for this, and instead just use two divs for the triangle, one 1px larger than the other, and you simply move the margin over on the second div. Like so:
.arrow-border {
width: 0;
height: 0;
float: left;
margin-top: 1px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #FF00FF;
}
.arrow-right {
width: 0;
height: 0;
float: left;
margin-left: -9px; /* Width of .arrow-border's border */
margin-top: 2px;
border-top: 8px solid transparent; /* One less than .arrow-border's border width */
border-bottom: 8px solid transparent;
border-left: 8px solid #2e353d;
}
Demo: http://jsfiddle.net/RuXyP/4/
Nit: Keep in mind that if you put this in a container smaller than your arrow, it is possible that the arrow head will detach. Generally this shouldn't be a problem.
you could use a pseudo element and absolute position:
The idea is to stack both pseudo:before and after on top of eachother, and draw one that is 1pixel larger on each sides. Set the biggest underneath to draw the red border-color .
DEMO
.tag {
float: left;
position:relative;
text-align: center;
height: 14px;
width: 110px;
background-color: #2e353d;
color: #FFFFFF;
padding-top: 2px;
margin-top: 1px;
font-size: 10px;
border: 1px solid #FF00FF;
border-right: none;
}
.tag:after, .tag:before {
content:'';
margin-right:-10px;
width: 0;
height: 0;
position:absolute;
top:0px;
left:100%;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 8px solid #2e353d;
}
.tag:before {
top:-1px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 9px solid #FF00FF;
}
when you reduce the browser window u will see a different layout for iphone
I see an extra black line below the slider...
how to remove the black line....
i removed the border property but its not getting removed....
providing my code below....
http://jsfiddle.net/CAARt/1/
#slider li div {
border-radius: 4px;
border-top: 1px #fff solid;
background: #F7F9FA;
-webkit-box-shadow: 0px 1px 2px #0D0F11;
-moz-box-shadow: 0px 1px 2px #0D0F11;
box-shadow: 0px 1px 2px #0D0F11;
color: #DDE1E4;
font-size: 12px;
text-align: center;
text-shadow: 0 1px 0 #fff;
color: #A4AEB7;
}
When the window size is reduced, the border that you are seeing is caused by this
#gallery nav {
border-top:1px solid #3A4146;
}
Change that border to 0px or none and it will go away.
Hi I want to make a menu button that should look like this when it is hovered:
But I made some thing that looks like this
You may notice the black border is not square as first image.
Here is my code (CSS):
#menu a:hover{
border-top: 5px solid #333333;
border-left: 5px solid #666666;
border-right: 5px solid #666666;
border-bottom: 5px solid #666666;
background-color: #666666;
color: #FFF;
}
try this, this will work.
#menu a:hover{
border-top: 5px solid #333333;
background-color: #666666;
color: #FFF;
}
#menu a{
border-top: 5px solid #333333;
background-color: #666666;
color: #FFF;
}
It might look a bit goofy without any padding.. so this is what I'd recommend. Stack overflow's pound symbol got cut out from the CSS signature
#menu a {
border-top: 5px solid #333333;
border-left: 5px solid #666666;
border-right: 5px solid #666666;
border-bottom: 5px solid #666666;
background-color: #666666;
padding: 5px 50px 5px 50px; /*<====================== added this*/
color: #FFF;
}
#menu a:hover {
border-top: 5px solid #333333;
border-left: 0px solid #666666; /*<========== changed this for hover effect*/
border-right: 5px solid #666666;
border-bottom: 5px solid #666666;
background-color: #666666;
padding: 5px 50px 5px 50px; /*<========================== added this*/
color: #FFF;
}
Tested in FF5 and IE8. Looks ok. The buttons are hyperlinks in white space.
But changes style on hover as you want.
#menu a:hover{
border-top: 5px solid #333;
background-color: #666;
padding: 0 5px 5px 5px;
color: #FFF;
}