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/
Related
I can't find a similar problem to this one.
I want to have two CSS :hover buttons horizontally aligned in a centered parent div (orange div), but it isn't working.
Centering:
The cursor-activated area (purple border) expands far beyond the buttons, covering much of the page. How can I format the cursor-activated area to match the size of the buttons' source content:url() without destroying the centering of the parent div? Using something like position:absolute doesn't seem to be the right solution.
Horizontal alignment:
display: inline-block; works only if I change the div id #alpha a{ to #alpha{ and #beta a{ to #beta {.
This way the buttons horizontally align but then I lose their functionality.
See/edit the example here:
http://dabblet.com/gist/0ec177e3a1191051cc3555ca958a6d20
A possible solution:
Certain styling is probably needed for :hover or something like a:hover so that the unexpectedly large cursor-activated area can be reduced to the same size as the button without effecting the centering from the parent div. I've had no luck with position:absolute.
Any insights?
body {
background-color: rgb(0,0,0);
margin: 0px;
border: 0px black;
padding: 0px;
}
#parent {
background-color: rgb(200,80,0) !important;
width: 50vw;
font-size: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
a{
border: 1px solid red !important;
}
:hover{
border: 1px solid purple !important;
}
#alpha a{
border: 1px solid black !important;
max-width:7%;
content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-A_130_130.jpg");
display: inline-block;
}
#alpha:hover a{
border: 1px solid yellow !important;
max-width:7%;
content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-D_130_130.jpg");
display: inline-block;
}
#beta a{
border: 1px solid black;
max-width:7%;
content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-B_130_130.jpg");
display: inline-block;
}
#beta:hover a{
border: 1px solid yellow !important;
max-width:7%;
content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-D_130_130.jpg");
display: inline-block;
}
<div id=parent>
<div id="alpha">
</div>
<div id="beta">
</div>
</div>
Add this to #parent
display: flex;
align-items:center;
justify-content: center;
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
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/