There is no border line at the end of last element in the menu. I cannot fix it. Could you please help? Thanks for any help.
div.menu {
list-style:none;
margin:0;
padding:0;
width:100%;
text-align:center;
background:#FBB117;}
div.menu ul{
font-family: Verdana;
font-size:14px;
margin-left: auto;
margin-right: auto;
margin-top: 3px;
margin-bottom: 3px;
width: 100px
padding:0;
display:inline-block;}
div.menu li{
display:inline; }
div.menu li a{
text-decoration:none;
padding:7px 0;
width:100px;
background:#FBB117;
color:#4C4646;
float:left;
text-align:center;
border-left:1px solid #fff;}
div.menu li a:hover{
background:#a2b3a1;
color:#000 }
Hi you can do this easily as like this
used last child and give to li border left
My code is
HTML
<div class="menu">
<ul>
<li>Home</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
<li>Home6</li>
</ul>
</div>
CSS
div.menu {
list-style:none;
margin:0 auto;
padding:0;
width:70%;
text-align:center;
background:#FBB117;
overflow:hidden;
}
div.menu ul{
font-family: Verdana;
font-size:14px;
margin:0 3px;
width: 100%;
padding:0;
}
div.menu li{
margin:10px 0;
float:left;
border-left:1px solid #fff;
}
div.menu li a{
text-decoration:none;
line-height:29px;
padding:0 10px;
background:#FBB117;
color:#4C4646;
text-align:center;
display:inline-block;
}
div.menu li:last-child{
border-right:solid 1px #fff;
}
div.menu li a:hover{
background:#a2b3a1;
color:#000 }
Live demo http://jsfiddle.net/rohitazad/aJ5hc/
more info about Pseudo Classes http://reference.sitepoint.com/css/css3psuedoclasses
div.menu li{
border-right: 1px solid #fff;
display:inline-block;
}
div.menu li:last-child{
border-right: 1px solid #fff;
}
put the border right out of the links and put it in the li
Related
I have a dropdown menu which works exactly as expected in Chrome.
The dropdown list is with position absolute, and the parent with position relative. However, it seems to render differently in Firefox. The dropped menu appears to be relative to the ul element rather than the li element
This dropdown is activated using javascript, adding a display:block on click
Any ideas why?
I did not use a table.
Fiddle
http://jsfiddle.net/eyJ8e/1/
HTML
<div id="menubar">
<div class="container">
<ul class="menu-container title" style="float:left;">
<li>NEW
</li>
<li class="dropdown"> <a class="click-dropdown" href="#">MEN</a><span class="caret"></span>
<ul class="dropdown-menu" style="display:block"> <li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
body
{
width: 100%;
margin: 0px;
padding: 0px;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 10pt;
/* background-color: #f0f0f0; */
}
.title{
/*font-family: Impact, Charcoal, sans-serif;*/
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
text-transform: uppercase;
font-family: SourceSans Pro Bold;
}
.container{
width:1024px;
margin:0 auto;
}
a, a:active, a:visited
{
color: #000000;
text-decoration: none;
outline: none;
}
a:hover
{
text-decoration: none;
}
#menubar {
width:100%;
min-width:1000px;
height:75px;
background-color:#000;
line-height: 75px;
color:white;
}
#menubar .brand{
display: block;
height:75px;
width: 120px;
margin-right:30px;
margin-top:3px;
float:left;
color:white!important;
}
#menubar .menu-container{
list-style:none;
margin:0px;
}
#menubar .menu-container li:first{
border-left: 1px solid grey;
}
#menubar .menu-container li{
position:relative;
display:inline;
padding:0px 15px;
font-size: 14px;
text-transform: uppercase;
border-right: 1px solid grey;
height:75px;
}
#menubar .menu-container > li.shopping-bag-wrapper:hover{
text-decoration: none;
}
#menubar .menu-container li.shopping-bag-wrapper{
border-right:none;
padding-right:0px;
}
#menubar .authentication-fb-form{
display:inline;
}
#menubar .menu-container li a{
color: white!important;
}
#menubar .menu-container li:last-child{
border:none;
}
#menubar .menu-container .dropdown ul.dropdown-menu > li:hover{
background-color:#555555;
}
#menubar .menu-container ul.dropdown-menu{
border:none;
position:absolute;
z-index:1000;
background-color:black;
display:none;
margin-top:-20px;
}
#menubar .menu-container .dropdown-menu li{
display:block;
min-width:150px;
max-width: 250px;
height:auto;
}
#menubar .menu-container .dropdown-menu a{
display:block;
line-height:25px;
padding: 5px 0px;
height:auto;
border: 2px solid white;
border-bottom:0px;
}
#menubar .menu-container .dropdown-menu a:last-child{
border: 2px solid white;
}
ul{
list-style: none;
margin:0px;
padding:0px;
}
.inline-block{
display: inline-block;
}
.pull-right{
float:right!important;
}
.caret{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
There are a couple of issues here. Firstly, you are nesting <li>'s within <a>'s which is invalid. You need to fix this:
<ul class="dropdown-menu">
<li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
secondly, you arent actually giving your nested <ul> a left position which FF seems to need:
#menubar .menu-container ul.dropdown-menu{
left: 0;
}
You will then also need to move your border from the <a> to the <li> to keep the styling that you had before making these changes.
DEMO
just put left:0 in #menubar
.menu-container ul.dropdown-menu{left:0}
refer http://jsfiddle.net/aashi/eyJ8e/8/
For a drop down menu you may check this demo link :
The html part:
<ul class="menubar">
<li>NEW</li>
<li>MENU
<ul class="dropmenu">
<li>JEANS</li>
<li>PANTS</li>
<li>SHIRTS</li>
<li>SHORTS</li>
<li>TEES</li>
</ul>
</li>
</ul>
the CSS part:
*{ margin:0; padding:0;}
ul.menubar{
margin:0 auto;
width:100%;
background:#000;
height:40px;
display:block;
}
ul.menubar li{
list-style-type:none;
display:inline-block;
float:left;
position:relative;
}
ul.menubar li a{
display:block;
text-decoration:none;
color:#fff;
padding:10px;
}
ul.menubar li ul.dropmenu{
position:absolute;
width:120px;
padding:10px 10px 10px 0;
display:none;
}
ul.menubar li:hover ul.dropmenu{
display:block;
top:30px;
}
ul.menubar li:hover ul.dropmenu li{
background:#222;
width:100%;
}
ul.menubar li:hover ul.dropmenu li a:hover{
background:#333;
}
Here is the JS fiddle:
http://jsfiddle.net/ameysawant/LPdqV/1/
I have a horizontal unordered list, the list is almost half width of screen.
The problem is that the border-bottom applied to the last <li> element does not extend to the full width of the page.
.pageContent .filters{
margin:0px;
padding:0px;
list-style:none;
}
.filters li{
float:left;
display:inline;
border-right:1px solid #e5e6e7;
border-bottom:1px solid #e5e6e7;
}
.filters li:last-child{
border-right:none;
}
.filters li:hover{
background-color:#fcfcfc;
}
.filters li a{
display:block;
padding: 12px 35px;
font-size: 18px;
color:#353535;
text-transform:capitalize;
font-family:'regular';
}
This should do what you're looking for.
Using the following CSS, you get this: http://jsfiddle.net/6AGTM/
.filters{
margin:0px;
padding:0px;
list-style:none;
overflow: hidden; /* make container the same height as floating elements inside */
border-bottom:1px solid #e5e6e7; /* apply border to this element which goes to edge of page */
}
.filters li{
float:left;
display:inline;
border-right:1px solid #e5e6e7;
/* remove border-bottom from here */
}
.filters li:last-child{
border-right:none;
}
.filters li:hover{
background-color:#fcfcfc;
}
.filters li a{
display:block;
padding: 12px 35px;
font-size: 18px;
color:#353535;
text-transform:capitalize;
font-family:'regular';
}
http://www.guytgunterappliances.com/product-category/shop/
My #container is currently at width:980px and my side has positioned itself to the bottom of the container div. Im trying to float it to the right of my container div. I have reduced the width of the container to 710px to fit the 270px sidebar then i float the sidebar. As you can see in the image, it stretches the sidebar.It runs over the container div as well.
SIDEBAR
*************************************************************************/
#sidebar{
position:relative;
z-index:10;
width:270px;
display:;
}
#sidebar,
#sidebar a,
#sidebar li,
#sidebar ul,
#sidebar ol{
color:#787878;
font-size:12px;
display:;
}
#sidebar a:hover{
}
#sidebar ul{
list-style:none;
padding:0;
margin:0;
}
#sidebar ul li.widget{
margin:0 0 0px 0;
border:1px solid #fff;
background: #e6e6e6;
}
#sidebar ul li.widget h2{
font-size:18px;
padding:13px 18px;
color:#45494e;
font-style:normal;
border:1px solid #cecece;
border-bottom:1px solid #fff;
}
#sidebar ul li ul{
border:1px solid #cecece;
border-bottom:none;
}
#sidebar ul li ul li{
border-bottom:1px solid #cecece;
padding: 10px 18px;
}
#sidebar ul li ul li:hover{
border-bottom:1px solid #cecece;
padding: 10px 18px;
background:#eee;
}
#sidebar ul li ul li ul{
padding:0 0 0 15px;
border:none;
}
#sidebar ul li ul li ul li{
border-bottom:none;
}
/* TEXT WIDGET */
#sidebar ul li div.textwidget{
padding: 10px 18px;
line-height:1.4em;
border:1px solid #cecece;
}
/* TAG CLOUD */
#sidebar ul li.widget_tag_cloud div{
padding: 10px 18px;
border:1px solid #cecece;
}
#sidebar ul li.widget_tag_cloud div a{
margin:0 10px 0 0;
}
/* CALENDAR */
#sidebar ul li.widget_calendar{
border:1px solid #fff;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar{
padding: 10px 18px;
width:100%;
border:1px solid #cecece;
border-top:none;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar a{
text-decoration: underline;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar caption{
padding: 5px 18px 0 18px;
border:1px solid #cecece;
border-bottom:none;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar tr td#next{
text-align:right;
}
/************************************************************************
# SIDEBAR END
There are few steps required to fix that issue:
you have two divs with id container on main page, the inner one and the outer one. Change id of one of those.
for the inner #container, add:
width: 710px;
float: left;
reduce width of #content and iframe to 710px or less.
finally, style #sidebar as #KaronatoR suggests:
width:270px;
display: block;
float: left;
Try so:
#sidebar {
width:270px;
display: block;
dloat: left;
}
My sidebar in working with woocommerce is positioned under my content div. when i shrink the content div to 710px and try to float:right the sidebar... it doesn't want to float correctly.
SUBJECT SITE
Any help would be appreciated.
# SIDEBAR
*************************************************************************/
#sidebar{
position:relative;
z-index:10;
width:270px;
display:;
}
#sidebar,
#sidebar a,
#sidebar li,
#sidebar ul,
#sidebar ol{
color:#787878;
font-size:12px;
display:;
}
#sidebar a:hover{
}
#sidebar ul{
list-style:none;
padding:0;
margin:0;
}
#sidebar ul li.widget{
margin:0 0 0px 0;
border:1px solid #fff;
background: #e6e6e6;
}
#sidebar ul li.widget h2{
font-size:18px;
padding:13px 18px;
color:#45494e;
font-style:normal;
border:1px solid #cecece;
border-bottom:1px solid #fff;
}
#sidebar ul li ul{
border:1px solid #cecece;
border-bottom:none;
}
#sidebar ul li ul li{
border-bottom:1px solid #cecece;
padding: 10px 18px;
}
#sidebar ul li ul li:hover{
border-bottom:1px solid #cecece;
padding: 10px 18px;
background:#eee;
}
#sidebar ul li ul li ul{
padding:0 0 0 15px;
border:none;
}
#sidebar ul li ul li ul li{
border-bottom:none;
}
/* TEXT WIDGET */
#sidebar ul li div.textwidget{
padding: 10px 18px;
line-height:1.4em;
border:1px solid #cecece;
}
/* TAG CLOUD */
#sidebar ul li.widget_tag_cloud div{
padding: 10px 18px;
border:1px solid #cecece;
}
#sidebar ul li.widget_tag_cloud div a{
margin:0 10px 0 0;
}
/* CALENDAR */
#sidebar ul li.widget_calendar{
border:1px solid #fff;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar{
padding: 10px 18px;
width:100%;
border:1px solid #cecece;
border-top:none;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar a{
text-decoration: underline;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar caption{
padding: 5px 18px 0 18px;
border:1px solid #cecece;
border-bottom:none;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar tr td#next{
text-align:right;
}
/************************************************************************
# SIDEBAR END
You have two divs with id="container" that means that anything you pass to #container in your css it will only be applied to the first one. So you should take this div #wrapper-containter #wrapper #container change it's id, and then apply the width to it and then float around whatever you need.
I can't seem to be able to center the horizontal #menu in the center of the page.
I have tried adding a container DIV, but I can't seem to be able to get it to work at all.
Here is my HTML markup:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
margin:0 auto;
width: 100%;
}
#menu {
list-style:none;
width:940px;
height:43px;
background: #014464;
border: 1px solid #002232;
}
#menu ul, li {
font-size:14px;
font-family: Segoe UI;
line-height:21px;
text-align:left;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
background: #F4F4F4;
}
#menu li a {
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover a {
color:#161616;
}
.dropdown_column {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
background:#F4F4F4;
width: 560px;
}
#menu li:hover .dropdown_column {
left:-1px;
top:auto;
}
.sub_col { width:130px; }
.col { width:550px; }
.sub_col, .col {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu ul li {
line-height:21px;
text-align:left;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#FFF;
background: #014464;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align: left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="container">
<ul id="menu">
<li>4 Columns<!-- Begin 4 columns Item -->
<div class="dropdown_column"><!-- Begin 4 columns container -->
<div class="col">
<h2>This is a heading title</h2>
</div>
<div class="sub_col">
<h3>Some Links</h3>
<ul>
<li>ThemeForest</li>
<li>GraphicRiver</li>
<li>ActiveDen</li>
<li>VideoHive</li>
<li>3DOcean</li>
</ul>
</div>
<div class="sub_col">
<h3>Useful Links</h3>
<ul>
<li>NetTuts</li>
<li>VectorTuts</li>
<li>PsdTuts</li>
<li>PhotoTuts</li>
<li>ActiveTuts</li>
</ul>
</div>
<div class="sub_col">
<h3>Other Stuff</h3>
<ul>
<li>FreelanceSwitch</li>
<li>Creattica</li>
<li>WorkAwesome</li>
<li>Mac Apps</li>
<li>Web Apps</li>
</ul>
</div>
<div class="sub_col">
<h3>Misc</h3>
<ul>
<li>Design</li>
<li>Logo</li>
<li>Flash</li>
<li>Illustration</li>
<li>More...</li>
</ul>
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
</ul>
</div>
</body>
</html>
Add margin: 0 auto; to your #menu ul.
DEMO
Wrap the menu in div with style text-align: center