How do you fix the grey border line so that it comes right down to the bottom of the green highlight instead of cutting off halfway?
I have provided my code below at codepen.
Thanks in advance for your help :)
html
<div id="status_bar">
<div class="admin_status_box">
<ul>
View & Delete posts
View & Delete members
</ul>
</div>
</div>
css
#status_bar {
width: 700px;
height: 60px;
background: #efefef;
float: left;
}
.admin_status_box {
background: #efefef;
height: 60px;
border-right: 1px solid #d6d6d6;
}
.admin_status_box ul {
margin: 0px;
padding: 0;
}
.admin_status_box li {
text-decoration: none;
}
.admin_status_box a {
text-decoration: none;
padding: 0 30px 0 30px;
text-align: center;
height: 60px;
float: left;
line-height: 60px;
border-right: 1px solid #d6d6d6;
}
.admin_status_box a.active {
border-bottom: 10px solid #619e4c;
}
.admin_status_box a:hover {
background: #fff;
}
First, your HTML should be valid by actually using <li> tags. Next, you need to know, that borders meet at an angle and the corners are interpolated. A nice example is
div.test {
height: 200px;
width: 300px;
border-radius: 40px;
border-width: 20px 0 5px 0;
border-color: #000;
border-style: solid;
}
So, in order to fix your problem, you need to assign the borders to different elements. If you insert the <li> tags you have two elements to work with. See the demo for the following code.
.admin_status_box li {
border-right: 1px solid #d6d6d6;
}
.admin_status_box a.active {
border-bottom: 10px solid #619e4c;
}
You need li elements to be the first child of a ul element. If you put each a element inside of a li element, you can then set the border on the li element and the border have the desired result. After this is done, make sure you remove the 1px border from .admin_status_box
It may take a bit of CSS to get them positioned exactly how you would want them.
See this edited codepen
EDIT Typo
You will have to add a separate div to act as the bar. You can't tell the side border to shorten because that's the behavior it's set. Best bet is to use the div you have commented out as green_box.
I just corrected the html, displayed the li's inline-block and added the border bottom to the li's instead of the link. http://codepen.io/anon/pen/hvcBI
Related
I created a navigation with a subnavigation, see JSFiddle with subnavigation. I have the issue that between the top navigation with yellow background and the subnavigation with red-colored background I want to have a distance of 1px solid white to separate both areas. At the moment this CSS definition is used
html, body {
background-color: green;
}
I tried to put another div around <nav class="top-bar" data-topbar> and set the background-color: white; but without success.
The goal is to have always a 1px solid line below the .top-bar area. So also when there is no subnavigation displayed, see JSFiddle without subnavigation, there should be this separator. I tried it to achieve it there with
.top-bar {
background: yellow;
border-bottom: 10px solid white; /*10px only to see that the border is inside the box*/
}
but the border is not outside the yellow top-bar box, it is inside, which I do not want to have. Also it would be great to have a combined so that the 1px white space between top and sb navigation is always there.
Working demo
Your border solution was almost correct, just change the box-sizing property so the border isn't placed inside the div:
.top-bar {
background: yellow; border-bottom: 10px solid white;
box-sizing: content-box;
}
This is the default value but you included Foundation that override this value with box-sizing: border-box;.
Add outer Box Shadow to your top-bar. like This:
.top-bar{
background: yellow;
box-shadow:0 0 1px #fff;
}
You can use a white border-bottom with 1px extra height on the nav:
.top-bar { height:71px; border-bottom:1px solid #fff; }
add Z-INDEX on .menu-center .active > a:before, .menu-center .active > a:after and
ul.sub-menu {
background-color: red;
display: block;
left: 0;
border-top: 1px solid #FFF;
position: absolute;
right: 0;
text-align: center;
top: 100%;
}
http://jsfiddle.net/aytaxykf/12/
I want to remove the space between tab and horizontal line displayed. Please find the fiddle http://jsfiddle.net/yy1t6w1f/ .
Sample code to create horizontal line:
div.hr {
background: #fff no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}
div.hr hr {
display: none;
}
The created tab's should touch the horizontal line and their should be no space between tab and div.Thanks.
Adding
hr { margin: 0; }
will do the trick. The hr tag in HTML has default margins, which are causing that space between those two elements. Note that the above code will remove all margins. If you only want the top margin removed, you can use margin-top instead of margin.
In fact, in your case, you need not use hr tag at all; you can remove it and simply add:
border-bottom: 1px solid #888888;
to your .tabDiv CSS selector; that should also serve your purpose here.
table, table td {
border-spacing: 0px;
padding: 0px;
}
hr { margin: 0; }
http://jsfiddle.net/yy1t6w1f/6/
Unless I’m misunderstanding what you are building, there is a far better way to write this.
See below:
nav a {
display: inline-block;
background-color: #efefef;
border: 1px solid #888;
border-top: 2px solid #888;
border-top-left-radius: 10px 5px;
min-width: 96px;
padding: 0 4px;
text-align: center;
font: 18px impact;
letter-spacing: 2px;
color: #3B0B17;
text-transform: uppercase;
text-decoration: none;
}
<nav>
FirstTab
SecondTab
ThirdTab
</nav>
For a website project, we have a simple navigation bar where each link is outlined in gray, and hovering outlines it in black.
I got it working and my code is here: http://jsfiddle.net/BpjK8/ -- although I admit it's a little dirty and 'hacky' in a way. (You can see when hovering link A, the border of link B beside it is visible, making it somewhat distracting.)
My question is: can this be done in a better way without using display: table and display: table-cell? It would be nice if the answer involved display: inline or float: left but I can't get the border effect working properly.
Demo Fiddle
Of course! Add:
body{
text-align:center; /* centre the content */
}
Then set your ul to display:inline-block to allow it to be subject to the centering, and give your li:
float:left;
display:block;
So they display one after another correctly.
You may not want to centre your entire document however, so instead you may want to wrap the ul in a div with text-align:center; set.
Try this css:
ul {
margin: 50px auto;
list-style:none;
}
li {
display:block;
float:left;
border: 1px solid #CECECE;
border-right: 1px solid #fff;
padding: 2px;
}
li:last-child {
display:block;
float:left;
border: 1px solid #CECECE;
border-right: 1px solid #CECECE;
padding: 2px;
}
li:hover {
border: 2px solid #000;
position: relative;
z-index: 9999;
padding: 1px;
}
a {
position: relative;
text-decoration: none;
line-height: 40px;
padding: 20px;
color: #000;
}
Le Code (without background): http://jsfiddle.net/SP6ny/ (colors changed for extra contrast)
Basically I have LI elements, and I need to add this border to them:
there is a pattern in the background so the list must not have a background.
thanks.
(I have no idea what I"m doing.)
body{
background: black;
}
.rl_section{
color: white;
display: block;
font-size: 12px;
margin-bottom: 20px;
}
.rl_section:first-child;{
border-top: none;
}
.rl_section:last-child;{
border-bottom: none;
}
.rl_content{
width: 100%;
display: block;
border-top: 1px solid #aaf;
border-bottom: 1px solid #a55;
padding: 3px 0;
}
You could use a technique like this: http://jsfiddle.net/sl1dr/Hub86/
Basically I am using top and bottom borders with differing colors.
Make the background of the container of the LI elements black. Make a margin-top:1px; on the LI elements themselves. then a border-top:1px solid {#YOUR COLOR CODE}; on the elements.
you can use the outline propperty for 1 color and border for the other
li {
outline: 1px gray solid;
border: 1px black solid;
}
Hi I'm trying to create a user friendly hyperlink button with the use of XHTML and CSS. I have an unordered-list of list-item hyperlinks, I want to to add a rounded border to these hyperlinks and be able to click anywhere in the button to use the hyperlink functionality.
I currently have in my XHTML file:
<div>
<ul>
<lh>Web Links</lh>
<li>Google</li>
</ul>
</div>
and in my CSS:
div ul li { border:2px solid blue;
width: 175px;
height: 40px;
text-align:center;
margin: 25px;
border-radius:10px;
-webkit-border-radius:10x;
-moz-border-radius:10px; }
when I add 'a:link' to div ul li (div ul li a:link) it puts the border right around the link ignoring the width and height px padding. I have also tryed to use:
a:link { display: block;
width: 8em;
height: 1.5em;
background-color:#999999;
border-top: 1px solid blue;
border-right: 1px solid blue;
border-bottom: 1px solid blue;
border-left: 1px solid blue;
text-decoration: none;
color: #000000;
cursor: default;
margin: 25px;
block-radius:10px;
-webkit-block-radius:10x;
-moz-block-radius:10px;}
By using this I acheive decent looking buttons but not the buttons I would like, nor does it round the corners.
Thanks in advance for the help.
You can add this rule, and it will expand the link element to fill the button,
a {
display: block;
text-decoration: none;
height: 100%;
width: 100%;
}
Demo at http://jsfiddle.net/7pMHf/