I'm having trouble coming up with a solution here. I have a menu with a bar between list elements. However rather than a standard border, there is a break at the top and bottom.
The only solution I came up with is to use li:after in the CSS to place an image but for some reason the padding and margin gets all messed up. So far I have the CSS and HTML embedded below (I'm using Bootstrap as the framework here).
Any ideas on how to get these bars working?
Screenshot:
(Ignore the red color ... things were messed up in illustrator).
#reviews .review-actions {
text-align: center;
z-index: 2;
padding-top: 1px;
}
#reviews nav {
display:inline-block;
margin:0 auto;
}
#reviews nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#reviews nav ul li{
display: inline;
margin: 0;
float: left;
padding: 10px;
background-color: #fff;
font-size:1.2em;
}
/*#reviews nav ul li:after{
content: url('./img/menu-splitter.png');
}*/
#reviews nav ul > li:first-child {
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
border: 1px solid #ccd0d0;
border-right: none;
}
#reviews nav ul > li:nth-child(2){
border: 1px solid #ccd0d0;
border-right: none;
border-left: none;
}
#reviews nav ul > li:last-child {
border-top-right-radius: .5em;
border-bottom-right-radius: .5em;
border: 1px solid #ccd0d0;
border-left: none;
}
#reviews nav ul li a{
}
<section id='reviews'>
<!-- Navigation -->
<div class="review-actions">
<nav>
<ul>
<li><a href='#'>The App</a></li>
<li><a href='#'>Our Service</a></li>
<li><a href='#'>Surprises</a></li>
</ul>
</nav>
</div>
</section>
You can set it directly in the background of the li
#reviews .review-actions {
text-align: center;
z-index: 2;
padding-top: 1px;
}
#reviews nav {
display:inline-block;
margin:0 auto;
}
#reviews nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#reviews nav ul li{
display: inline;
margin: 0;
float: left;
padding: 10px;
background-color: #fff;
font-size:1.2em;
}
/*#reviews nav ul li:after{
content: url('./img/menu-splitter.png');
}*/
#reviews nav ul > li:first-child {
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
border: 1px solid #ccd0d0;
border-right: none;
}
#reviews nav ul > li:nth-child(2){
border: 1px solid #ccd0d0;
border-right: none;
border-left: none;
}
#reviews nav ul > li:last-child {
border-top-right-radius: .5em;
border-bottom-right-radius: .5em;
border: 1px solid #ccd0d0;
border-left: none;
}
#reviews nav ul li a{
}
li:nth-last-child(n+2) {
background-image: linear-gradient(blue, blue);
background-size: 2px 90%;
background-repeat: no-repeat;
background-position: right center;
}
<section id='reviews'>
<!-- Navigation -->
<div class="review-actions">
<nav>
<ul>
<li><a href='#'>The App</a></li>
<li><a href='#'>Our Service</a></li>
<li><a href='#'>Surprises</a></li>
</ul>
</nav>
</div>
</section>
One solution is to deploy 4 single-pixel-width box-shadows around the <ul> as a faux border, and then give the <ul> an actual border the same color as the <li> background-color:
#reviews .review-actions {
text-align: center;
z-index: 2;
padding-top: 1px;
}
#reviews nav {
display:inline-block;
margin:0 auto;
}
#reviews nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 6px solid #ffffff;
box-shadow: 1px 1px #ccd0d0, -1px 1px #ccd0d0, -1px -1px #ccd0d0, 1px -1px #ccd0d0;
border-radius: .5em;
}
#reviews nav ul li{
display: inline;
margin: 0;
float: left;
padding: 10px;
background-color: #fff;
font-size:1.2em;
border-left: 1px solid #ccd0d0;
}
#reviews nav ul > li:first-child {
border-left: none;
}
<section id='reviews'>
<!-- Navigation -->
<div class="review-actions">
<nav>
<ul>
<li><a href='#'>The App</a></li>
<li><a href='#'>Our Service</a></li>
<li><a href='#'>Surprises</a></li>
</ul>
</nav>
</div>
</section>
Related
I have a fairly simple navigation bar with a bottom border but I would like to box it off on either side - but not the top. So I get a |______________| surrounding all of my links but I am just starting out and whatever I try seems to border every single link which I don't want.
<nav>
<div align="center">
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>News</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
</div><!--navigation-->
</nav>
and css
nav {
width: 100%;
margin:0 auto;
}
nav ul li {
width: 16.6%;
float: left;
border-bottom: 1px solid #A2A2A2;
list-style-type: none;
display: inline;
}
nav ul li a {
display: block;
width: 100%;
text-align: center;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
color: #202020;
font-family: "Myriad Pro Light";
text-transform: uppercase;
text-decoration: none;
font-size: 12pt;
}
nav ul li a:hover {
color: #89ccca
}
nav ul{
width: 80%;
list-style: none;
margin: 0;
padding: 0;
}
Use first-child and last-child properties and apply it like below.
CSS
nav ul li:first-child
{
border-left: 1px solid #A2A2A2;
}
nav ul li:last-child
{
border-right: 1px solid #A2A2A2;
}
FIDDLE DEMO
maybe i can help you
try this
nav ul li {
width: 16.0%;
float: left;
border-bottom: 1px solid #A2A2A2;
border-right: 1px solid #A2A2A2;
list-style-type: none;
display: inline;
}
nav ul li:first-child{border-left: 1px solid #A2A2A2;}
fiddle here
http://jsfiddle.net/zfdxko8h/
try including this one..
#navigation ul li:first-child {
border-left: 1px solid #A2A2A2;
}
#navigation ul li:last-child {
border-right: 1px solid #A2A2A2;
}
Here is The Fiddle
Struggling to center the nav bar in the middle of the browser... Tried a number of the things found through google but no luck as yet. Seems like it should be such an easy thing to do but its turned out to be a pain in the neck!
Heres the code.
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
Try not using floats but rather display:inline-block instead.
JSfiddle Demo
CSS
ul {
padding: 0;
margin: 0;
}
#nav {
//width: 100%; /* not required */
//float: left; /* not required */
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
width:100%;
display: block;
list-style-type: none;
text-align: center; /* add this */
}
#nav li {
//float: left; /* remove */
display: inline-block; /* add this */
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
EDIT - added reset of ul padding/margin
Add a margin-top:50%; to it
just like this:
#nav {
width: 100%;
float: left;
margin-top:50%;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
Does this solve your problem?
Or didn't I understand your question ?
Just add text-align: center; in you #nav style. And reset UL default margin It should be like this
HTML
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
CSS
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
margin: 0;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
I would like to centered the ul-list inside the div-container.
My Code:
<div class="subnav_wines">
<ul>
<li>ToBeDefined
</li>
<li>Valpollicella
</li>
<li>Veneto
</li>
<li id="dd_sort" class="last"><a id="" href="#">Sorted by</a>
</li>
</ul>
<div style="clear:both"></div>
</div>
And the CSS:
.subnav_wines {
border-bottom: 1px solid #b58150;
padding: 0;
margin-bottom: 0px;
}
.subnav_wines ul {
padding: 0;
margin: 0;
text-align: center;
}
.subnav_wines li {
float:left;
padding: 10px 25px 10px 25px;
margin: 0;
}
.subnav_wines li.last {
border-right: 0;
padding: 0;
}
.subnav_wines li a {
text-transform: uppercase;
color: #b58150;
text-decoration: none;
}
.subnav_wines li a:hover {
border-bottom: 1px solid #b58150;
}
.subnav_wines li a.active {
border-bottom: 1px solid #b58150;
}
Can anyone help me?
Thanks.
The float:left for .subnav_wines li is pushing the list items to the left of its parent ul. Try removing the float:left for .subnav_wines li and add display:inline-block;
.subnav_wines li {
display:inline-block;
padding: 10px 25px 10px 25px;
margin: 0;
}
DEMO
Add the below to your CSS
.subnav_wines {
text-align: center;
}
.subnav_wines ul {
display: inline-block;
}
Demo
hi try the below code for ul
.subnav_wines { border-bottom: 1px solid #b58150; padding: 0; margin-bottom: 0px; text-align:center}
.subnav_wines ul { padding: 0; display:inline-block; }
working example : http://jsfiddle.net/zQTD3/
I have created a simple .arrow-up class of CSS:
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
I want this arrow to come on exact top of the second level menu, here is my menu code:
HTML:
<header>
<div class="welcome_area">
<p>
Welcome, <b>Arkam Gadet </b>
</p>
</div>
<div class="menu">
<nav>
<ul>
<li>My Profile
<ul>
<li>My Questions
</li>
<li>Settings
</li>
</ul>
</li>
<li>Inbox
</li>
<li>Notifications
</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background-color: #eee;
height: 45px;
box-shadow: 0px 2px 3px 1px #bbb;
}
a {
color: black;
text-decoration: none;
}
h2 {
color: #f79a1d;
}
.welcome_area {
float: left;
margin-left: 5%;
}
.menu {
float: right;
margin-right: 5%;
}
.menu nav > ul {
position: relative;
padding:0px;
}
.menu nav ul li {
display: inline;
padding: 5px;
}
.menu nav ul li a {
padding: 2px;
}
.menu nav ul li a:hover {
background: #eee;
border: 0;
border-radius: 3px;
box-shadow: 0px 0px 2px 1px #000;
}
.menu nav > ul ul {
position: absolute;
left: -30px;
top: 40px;
padding:0px;
width: 150px;
border-radius: 3px;
display: none;
background-color: #eee;
box-shadow: 0px 0px 2px 3px #bbb;
}
.menu nav > ul li > ul li {
display: block;
}
Demo.
I tried to add it as a li of the list but then it's coming inside it not on top of it.
How can I bring the .arrow-up on top of the second level menu?
What about something along these lines:
.menu nav ul ul:before {
width:0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
display:block;
clear:both;
position:absolute;
top:-5px;
border-bottom: 5px solid black;
content:'' ;
}
I am new to CSS and I am trying to pop up a sub menu in my vertical menu, but it is not doing it... Please see my CSS and HTML below:
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 130px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
position: relative;
top: 15px;
}
.glossymenu li a{
background: white url(../images/glossyback.gif) repeat-x bottom left;
font: bold 11px/1.5em Verdana;
font-size: 120%;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
}
// IE only. Actual menu width minus left padding of A element (10px)
* html .glossymenu li a{
width: 130px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(../images/glossyback2.gif);
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 100px;
}
ul.sub-level li {
border: none;
float: left;
width: 150px;
}
and my HTML:
<div id="side">
<ul class="glossymenu">
<li>MENU</li>
<ul class="sub-level">
<li><span>Appetizer</span></li>
<li><span>Beverages</span></li>
<li><span>Desserts</span></li>
</ul>
<li>LOCATIONS</li>
<li>HOURS</li>
</ul>
</div>
The submenu element should be inside one of the li elements.
Check this out.
HTML
<div id="side">
<ul class="glossymenu">
<li>MENU
<ul class="sub-level">
<li><span>Appetizer</span></li>
<li><span>Beverages</span></li>
<li><span>Desserts</span></li>
</ul>
</li>
<li>LOCATIONS</li>
<li>HOURS</li>
</ul>
</div>
CSS
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 130px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
position:relative;
top:15px;
}
.glossymenu li a{
background: white url(../images/glossyback.gif) repeat-x bottom left;
font: bold 11px/1.5em Verdana;
font-size:120%;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
}
* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 130px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(../images/glossyback2.gif);
}
ul.sub-level {
display: none;
}
.glossymenu li:hover > .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 100px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}