I want to create a space between Introduce Yourself and the main nav bar like the one between Share Stories and Introduce yourself. The code that styles the Introduce Yourself nav bar and the Share Stories nav bar are the same so I am a bit confused as to why it is being displayed like this.
Here is the css code:
div.IntroduceYourself nav,
div.IntroduceYourself nav ul,
div.IntroduceYourself nav li,
div.IntroduceYourself nav a {
list-style: none;
margin: 8px 8px 8px 8px;
padding: 2px 2px 2px 2px;
border: 2px 2px 2px 2px;
font-size: 12px;
font-family: Helvetica;
line-height: 1;
}
div.IntroduceYourself nav ul {
zoom: 1;
background: #a7bc7a url(images/pattern.png) top left repeat;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #839b4e;
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
width: 578px;
margin: 0 auto;
padding: 0;
}
div.IntroduceYourself nav ul:before {
content: '';
display: block;
}
div.IntroduceYourself nav ul:after {
content: '';
display: table;
clear: both;
}
div.IntroduceYourself nav a,
div.IntroduceYourself nav a:link,
div.IntroduceYourself nav a:visited {
padding: 5px 12px;
display: block;
text-decoration: none;
color: #ffffff;
text-shadow: 0 -1px 1px #586835;
border-right: 1px solid #839b4e;
}
div.IntroduceYourself nav a:hover {
color: #586835;
text-shadow: 0 1px 1px #bdcd9c;
}
div.IntroduceYourself nav li {
float: left;
border-right: 1px solid #b2c58b;
}
div.IntroduceYourself nav ul li.category{
float: left;
vertical-align: top;
}
div.IntroduceYourself nav ul li {
float: right;
vertical-align: top;
}
div.Stories nav,
div.Stories nav ul,
div.Stories nav li,
div.Stories nav a {
list-style: none;
margin: 4px 4px 4px 4px;
padding: 2px 2px 2px 2px;
border: 2px 2px 2px 2px;
font-size: 12px;
font-family: Helvetica;
line-height: 1;
}
div.Stories nav ul {
zoom: 1;
background: #a7bc7a url(images/pattern.png) top left repeat;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #839b4e;
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
width: 578px;
margin: 0 auto;
padding: 0;
}
div.Stories nav ul:before {
content: '';
display: block;
}
div.Stories nav ul:after {
content: '';
display: table;
clear: both;
}
div.Stories nav a,
div.Stories nav a:link,
div.Stories nav a:visited {
padding: 5px 12px;
display: block;
text-decoration: none;
color: #ffffff;
text-shadow: 0 -1px 1px #586835;
border-right: 1px solid #839b4e;
}
div.Stories nav a:hover {
color: #586835;
text-shadow: 0 1px 1px #bdcd9c;
}
div.Stories nav li {
float: left;
border-right: 1px solid #b2c58b;
}
div.Stories nav ul li.category{
float: left;
vertical-align: top;
}
div.Stories nav ul li {
float: right;
vertical-align: top;
}
Thanks
Remove these two lines:
.mainHead nav {
display: table-cell;
float: left;
}
(Personally, though, I'd restructure the whole thing, as it's a bit of a mess.)
Related
The css for my page goes for awhile. There are 2 files which are imported in the head section of my master page. One is the default.css page and the other is menu.css. I tried to add padding and my nav bar flickered over to the right for a split second, but it came right back. I have read in numerous posts about adding space to use padding between the list items but there is a lot of confusing css and classes. I"m not sure which sections of the css will fix the spacing between the menu items
If someone can help me figure this out, that would be terrific. Here is my .css code and html
<header>
<div class="container">
<div class="navbar navbar-static-top">
<div class="navigation">
<nav>
<ul class="nav topnav bold">
<li class="dropdown active">
HOME
</li>
<li class="dropdown">
RESOURCES<i class="icon-angle-down"></i>
<ul style="display: none;" class="dropdown-menu bold">
<li>REVERSE MTG FAQ</li>
<li>OTHER RESOURCES</li>
</ul>
</li>
<li class="dropdown">
OUR PROCESS<i class="icon-angle-down"></i>
<ul style="display: none;" class="dropdown-menu bold">
<li>LOAN PROPOSAL</li>
<li>PROCESSING</li>
</ul>
</li>
<li class="dropdown">
GET QUOTE
</li>
</ul>
</nav>
</div>
<!-- end navigation -->
</div>
</div>
</header>
.css
/* --- header -- */
header {
background: url(../img/menubackground.png) repeat;
margin: 0 0 0 0;
width: 762px;
padding: 10px 0 10px;
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
position: relative;
z-index: 2000;
text-align: left;
}
/* --- menu --- */
header .navigation {
float: left;
}
header ul.nav li {
border: none;
margin: 0;
}
header ul.nav li a {
border: none;
font-weight: 400;
}
header ul.nav li ul {
z-index: 1000;
margin-top: 1px;
}
header ul.nav li ul li ul {
margin: 1px 0 0 1px;
}
header ul.nav li a i {
color: #fff;
}
.container,
.navbar-static-top .container {
width: 750px;
}
.container {
margin-right: 0;
margin-left: 0;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
.dropdown {
position: relative;
}
.nav {
margin-bottom: 20px;
margin-left: 0;
list-style: none;
}
.nav > li > a {
display: block;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
cursor: pointer;
}
.navbar .nav a:hover {
background: #333333;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover {
font-weight: 600;
}
.navbar .nav > .active > a:active, .navbar .nav > .active > a:focus {
background: #333333;
outline: 0;
font-weight: 600;
}
.navbar .nav li .dropdown-menu {
z-index: 1000;
}
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0px 10px 0 0;
}
.navbar .nav > li {
float: left;
}
.navbar .nav > li > a {
float: none;
padding: 2px 15px 2px;
color: #777777;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: #333333;
text-decoration: none;
background-color: transparent;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #555555;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
.navbar .nav > li > .dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.navbar .nav > li > .dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.dropdown-menu {
*border-right-width: 0;
*border-bottom-width: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.dropdown-menu .dropdown i {
position: absolute;
right: 0;
margin-top: 3px;
padding-left: 20px;
}
.dropdown-submenu > .dropdown-menu {
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
}
.navbar .nav {
border-right: none;
border-left: none;
}
.navbar .nav > li > a {
float: none;
font-size: 15px;
margin-left: 0px;
margin-right: 0;
text-decoration: none;
text-shadow: none;
border-right: none;
border-left: none;
color: #fff;
border: 2px solid transparent;
padding: 4px 5px 4px 5px;
background-image: none;
background: none;
}
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
color: #dddddd;
background-color: none;
background-image: none;
background-repeat: repeat-x;
filter: none;
text-decoration: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 2px solid #302f2f;
padding: 4px 5px 4px 5px;
background: #343434;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 0 1px #555;
-webkit-box-shadow: inset 0 0 1px #555;
box-shadow: inset 0 0 1px #555;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #fff;
border: 2px solid #302f2f;
padding: 4px 10px 4px 10px;
background-image: none;
background: #343434;
filter: none;
text-decoration: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 0 1px #555;
-webkit-box-shadow: inset 0 0 1px #555;
box-shadow: inset 0 0 1px #555;
}
.navbar .nav > a i[class^="icon-"] {
color: #fdfdfd;
}
ul.nav li.dropdown a {
z-index: 1000;
display: block;
}
ul.nav li.dropdown ul li ul.dropdown-menu {
margin-left: 0px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
ul.nav li.dropdown ul li i {
margin-right: 50px;
}
select.selectmenu {
display: none;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 165px;
padding: 0;
margin: 2px 0 0;
list-style: none;
background: #386A57;
border: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 2px solid #302f2f;
border-top: none;
-webkit-background-clip: none;
-moz-background-clip: none;
background-clip: none;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.dropdown-menu li {
margin: 0;
padding: 0;
}
.dropdown-menu li a {
color: #ddd;
font-size: 15px;
padding: 5px 7px 5px 7px;
margin: 0;
text-shadow: none;
border-bottom: 1px solid #303030;
text-decoration: none;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #ffffff;
text-decoration: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-repeat:inherit;
filter: none;
}
.dropdown-menu .sub-menu-level1, .dropdown-menu .sub-menu-level2 {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: 0;
}
.dropdown-menu li:hover .sub-menu-level1 {
visibility: visible;
}
.dropdown-menu li li:hover .sub-menu-level2 {
visibility: visible;
}
I am sorry in advance, I know multiple postings on this topic is a drag.. But I have tried at least 10 different solutions and cannot figure out why this menu will not center.
Here is the menu as a live screen shot that I would like centered:
Here is the life page if you want to see the full source:
https://www.orangeinsurance.com/contractors-NEW.html
Thanks in advance.
CSS
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 50%;
margin: 2px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 15px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu li:last-child
{
border-right: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#67c6dd, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#67c6dd), to(#0186ba));
background-image: -webkit-linear-gradient(#67c6dd, #0186ba);
background-image: -o-linear-gradient(#67c6dd, #0186ba);
background-image: -ms-linear-gradient(#67c6dd, #0186ba);
background-image: linear-gradient(#67c6dd, #0186ba);
}
#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #67c6dd;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
/* Mobile */
#menu-trigger {
display: none;
}
#media screen and (max-width: 600px) {
/* nav-wrap */
#menu-wrap {
position: relative;
}
#menu-wrap * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* menu icon */
#menu-trigger {
display: block; /* show menu icon */
height: 40px;
line-height: 40px;
cursor: pointer;
padding: 0 0 0 35px;
border: 1px solid #222;
color: #fafafa;
font-weight: bold;
background-color: #111;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -moz-linear-gradient(#444, #111);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -webkit-linear-gradient(#444, #111);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -o-linear-gradient(#444, #111);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -ms-linear-gradient(#444, #111);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
/* main nav */
#menu {
margin: 0; padding: 10px;
position: absolute;
top: 40px;
width: 100%;
z-index: 1;
background-color: #444;
display: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu:after {
content: '';
position: absolute;
left: 25px;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul {
position: static;
visibility: visible;
opacity: 1;
margin: 0;
background: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul ul {
margin: 0 0 0 20px !important;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu li {
position: static;
display: block;
float: none;
border: 0;
margin: 5px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul li{
margin-left: 20px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu a{
display: block;
float: none;
padding: 0;
color: #999;
}
#menu a:hover{
color: #fafafa;
}
#menu ul a{
padding: 0;
width: auto;
}
#menu ul a:hover{
background: none;
}
#menu ul li:first-child a:after,
#menu ul ul li:first-child a:after {
border: 0;
}
}
#media screen and (min-width: 600px) {
#menu {
display: block !important;
}
}
/* iPad */
.no-transition {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
opacity: 1;
visibility: visible;
display: none;
}
#menu li:hover > .no-transition {
display: block;
}
body,td,th {
font-family: Calibri;
color: #333;
}
Rather than using floats on your li elements, use display:inline-block; You'll have to either increase the overall size of your ul or reduce the padding/margins of your li elements since they have a total width of more than 50% of the page...
Change this:
#menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
To this:
#menu li {
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
display: inline-block;
}
If you create a fiddle I can show you a working example...
#menu li {
/* float: left; --> Delete this*/
display: inline-block; /*use this */
}
I am having a hard time positioning my drop down menus within my Wordpress Theme Navigation. They are showing up no where near the nav bar and are near the top left corner of the screen when I hover over a ul li >.
My CSS Is Below:
#main-navigation {
clear: both;
float: left;
font-size: 17px;
margin-top: 30px;
width: 938px;
}
#main-navigation > ul { width: 105%; margin-left:auto; margin-right:auto; }
#main-navigation > ul > li {}
#main-navigation > ul > li:hover { transparent; }
#main-navigation > ul > li:first-child { border: medium none; }
#main-navigation > ul > li > a {
margin-right:20px;
border-bottom: 2px solid #6a6a65;
color: #181818;
display: block;
font-weight: bold;
height: 48px;
line-height: 48px;
padding: 0 29px;
// text-shadow: 0 1px 0 #AD581D;\
text-transform:uppercase;
}
#main-navigation > ul > li:first-child > a {
background: url("./assets/img/home.png") no-repeat scroll center 10px transparent;
// border: medium none;
color:#6a6a65;
border-bottom: 2px solid #6a6a65;
overflow: hidden;
padding: 0 25px;
text-indent: -999px;
width: 31px;
}
#main-navigation > ul > li:first-child > a:hover {
border-bottom: 2px solid #fa7d4c;
}
#main-navigation a:hover { text-decoration: none; border-bottom: 2px solid #fa7d4c;}
#main-navigation ul li:hover ul { display: block; }
#main-navigation ul ul {
border-bottom: 1px solid #333333;
display: none;
left: 0;
padding-top: 20px;
position: absolute;
top: 148px;
white-space: nowrap;
z-index: 1000;
background: url("./assets/img/dd-arrow.png") 33px 10px no-repeat;
}
#main-navigation ul ul li {
background: none repeat scroll 0 0 #3C3C3D;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
border-top: 1px solid #2C2C2C;
box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3), 0 1px 0 #444445 inset;
float: none;
font-size: 16px;
}
#main-navigation ul ul li:first-child {
border-top: medium none;
box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3);
}
#main-navigation ul ul a {
color: #FFF;
display: block;
height: 48px;
line-height: 48px;
padding: 0 29px;
text-shadow: 0 1px 0 #2D2D2E;
}
#main-navigation ul ul a:hover { color: #ccc; }
Any help would be greatly appreciated as I have spent a long time looking for the error its starting to frustrate me.
Thanks a bunch guys!
You need to tell childs to absolute position from main-navigation and not screen by defaut, Iguess since HTML code is missing :)
#main-navigation {
position:relative; /* tells absolute child to take coordonates from here */
clear: both;
float: left;
font-size: 17px;
margin-top: 30px;
width: 938px;
}
When ever i minimize the browser window, the drop down menu goes up and goes left, how to correct it?
Here's the css code:
div#secondary-menu { bottom: -62px; position: relative; z-index: 5; text-align:center; margin:auto; width:100%;}
ul#secondary { display: inline-block; font-size: 13px; padding: 0 !important; }
ul#secondary li { padding-right: 12px; }
ul#secondary li a { color:#fff; text-shadow: 1px 1px 1px #105059; padding: 6px 0px 13px 9px; }
ul#secondary li a:hover {text-decoration: none; color:#eeeeee;}
ul#secondary ul { background: url(images/secondary-dropdown-bg-blue.png) no-repeat bottom left; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; padding: 8px 0px 17px 15px; width: 173px; box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.4); -moz-box-shadow:3px 6px 7px 1px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.4); z-index: 200; }
#secondary li:hover ul, #secondary li.sfHover ul { top:39px; }
#secondary ul li:hover ul, #secondary ul li.sfHover ul { top:-8px; }
ul#secondary > li { background: url(images/secondary-menu-linkbg-blue.png) no-repeat left bottom; } ul#secondary > li.sf-ul.sfHover { background: url(images/secondary-menu-linkbg-blue.png) no-repeat bottom right; } ul#secondary > li.sf-ul.sfHover > a { background: url(images/secondary-menu-linkbg-blue.png) no-repeat top left; display: block; color: #000000; text-shadow: none; color: #ffffff; text-shadow: 1px 1px 1px #737373;}
ul#secondary ul li a { background: url(images/secondary-dropdown-bullet.png) no-repeat 0px 12px; padding: 5px 3px 5px 15px; text-align:left; width:155px; font-size: 90%; }
ul#secondary ul li a:hover { color: #8eaeb1; text-shadow: 1px 1px 1px #0b454e; }
Here the link to site:
http://demo.nextsyntax.com/goldcoast/
Regards
I'm encountering two problems in Internet Explorer at the moment. The first is my navigation menu: the links are stacking on top of each other instead of going across the bar. Here is my code for the nav menu.
HTML
<div class="main-navigation" role="navigation" style="margin-top: 5px;">
<div class="nav-menu"><ul><li class="page_item page-item-8">design your own</li><li class="page_item page-item-10">fan photos</li><li class="page_item page-item-12">Win a free T-shirt</li></ul></div>
</div><!-- #site-navigation -->
CSS
.main-navigation li {
margin: 0px 20px 0px 0px;
position: relative;
text-align: center;
padding: 7px 0px;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left: 0;
display: block;
}
.main-navigation li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #cb0000;
font-weight: bold;
}
The second problem is with my two ribbons I have for titles in the side bar.
The right bottom flap that gives it the wrap around look is not showing up.
HTML
<div class="ribbon"><strong>SPECIAL OFFERS</strong></div>
CSS
.ribbon {
padding-bottom: 7px;
padding-top: 8px;
padding-left: 3px;
color: #fff;
text-shadow: 1px 1px 0px #c1c1c1;
font-size: 15px;font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;
letter-spacing: 5px;
position:relative;
width:267px;
right:0px;
top:19px;
background-color:#212121;
-moz-border-radius:2px 0px 0px 2px; /*radius of 2px*/
-khtml-border-radius:2px 0px 0px 2px;
-webkit-border-radius:2px 0px 0px 2px;
-webkit-box-shadow: -2px 2px 4px rgba(50, 50, 50, 0.35);
-moz-box-shadow: -2px 2px 4px rgba(50, 50, 50, 0.35);
box-shadow: -2px 2px 4px rgba(50, 50, 50, 0.35);
}
.ribbon:after {
content:'';
width:0;
height:0;
border-color: #000 transparent transparent #000;
border-style:solid;
border-width:5px 5px;
position:absolute;
right:0;
bottom:-10px;
}
This code works in other major browsers, but not in IE.
For the first issue you should add anywhere you have display: inline-block for ie
zoom: 1;
*display: inline
Update
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block !important;
*display: inline
zoom: 1;
text-align: center;
width: 100%;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
*display: inline
zoom: 1;
text-decoration: none;
}
From the link you provided