Joomla CSS: Increasing menu size to parent div - html
Small problem on my Joomla site.
I have added a menu module that is not displaying in full on the site. Its in a that is configured to be 100% of the screen.
But with the menu when I try to make it 100% of the screen it is cut on both sides.
Where could I find where is the menu configured?
Or how should I start with it?
<body id="body">
<div id="siteWrapper">
<header id="header">
<div class="wrapper container">
<div class="siteLogo"></div>
<div class="ol_clearFR"></div>
<div id="mainMenu">
<div class="moduletable">
<ul class="jb_free_dropdown jb_free_dropdown_111"></ul>
</div>
<div class="moduletable">
<ul class="jb_free_dropdown jb_free_dropdown_105">
<li class="item-126 current active"></li>
<li class="item-118 parent"></li>
<li class="item-122">
</li>
<li class="item-123"></li>
<li class="item-124"></li>
</ul>
</div>
</div>
<div class="cleartBoth"></div>
</div>
</header>
CSS FROM DROPDOWN:
#charset "UTF-8";
ul.jb_free_dropdown,
ul.jb_free_dropdown li,
ul.jb_free_dropdown ul {
list-style: none;
margin: 0;
padding:0 ;
font-family: Tahoma, Geneva,sans-serif;
text-align: left;
vertical-align: middle;
}
/*This is for menu item links by Nejc Vukovic*/
ul.jb_free_dropdown li.item-124
{
margin-right:1px;
float:right;
background: #FFFFFF;
}
ul.jb_free_dropdown li.item-126 {border-style:none}
ul.jb_free_dropdown.jb_free_dropdown_105
{width:100%;}
ul.jb_free_dropdown li.item-118 a:after {
content:url(../../../../images/trianglegrey8x4.png);
display: inline-block;
vertical-align: middle;
padding-left:10px;
margin-bottom: 6px;
}
ul.jb_free_dropdown li.item-122 a:after {
content:url(../../../../images/trianglegrey8x4.png);
display: inline-block;
vertical-align: middle;
padding-left:10px;
margin-bottom: 6px;
}
ul.jb_free_dropdown li.item-123 a:after {
content:url(../../../../images/trianglegrey8x4.png);
display: inline-block;
vertical-align: middle;
padding-left:10px;
margin-bottom: 6px;
}
ul.jb_free_dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.jb_free_dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
margin-left:1px;
}
ul.jb_free_dropdown li.hover,
ul.jb_free_dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.jb_free_dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.jb_free_dropdown ul li {
float: none;
}
ul.jb_free_dropdown ul ul {
top: 0px;
left: 100%;
}
ul.jb_free_dropdown li:hover > ul {
visibility: visible;
}
/* -- Base drop-down styling -- */
ul.jb_free_dropdown {
font-weight: bold;
}
ul.jb_free_dropdown li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}
ul.jb_free_dropdown li.hover,
ul.jb_free_dropdown li:hover,
ul.jb_free_dropdown li.on {
background-color: #eee;
color: #000;
}
ul.jb_free_dropdown a:link,
ul.jb_free_dropdown a:visited { color: #000; text-decoration: none; }
ul.jb_free_dropdown a:hover { color: #000; background-color: #ececec;}
ul.jb_free_dropdown a:active { color: #000000; }
/* -- level mark -- */
ul.jb_free_dropdown ul {
width: 100%;
margin-top: 1px;
}
ul.jb_free_dropdown ul li {
font-weight: strong;
}
ul.jb_free_dropdown a,
ul.jb_free_dropdown span {
display: block;
padding: 1px 10px;
background: #f4f4f4;
width: 100%;
}
/* -- Base style override -- */
ul.jb_free_dropdown li {
padding: 0;
border: none;
}
/*
JB
*/
ul.jb_free_dropdown li li.parent a {
background: #FFFFFF('../../media/images/arrow.png') right 10px no-repeat;
}
ul.jb_free_dropdown li li.parent li a {
background: #FFFFFF;
}
ul.jb_free_dropdown li.parent a:hover {
background-color: #FFFFFF;
}
ul.jb_free_dropdown li li.child a {
background: #FFFFFF;
}
ul.jb_free_dropdown li.active a {
background-color: #FFFFFF;
}
ul.jb_free_dropdown li.active li a {
background-color: #FFFFFF;
}
ul.jb_free_dropdown li.active li a:hover {
background-color: #FFFFFF;
}
/*
JB
*/
ul.jb_free_dropdown ul a,
ul.jb_free_dropdown ul span {
padding: 1px;
width: 100%;
display: block;
border-width: 5px;
border-style: ridge;
border-color: #F8F8F8;
-moz-border-radius: 2px; /* FF1+ */
-webkit-border-radius: 2px; /* Saf3-4 */
border-radius: 2px;
}
/* -- Base style reinitiate: post-override activities -- */
/* -- Custom styles -- */
ul.jb_free_dropdown li.hover,
ul.jb_free_dropdown li:hover {
content: url(../../../../images/trianglegrey16x8.pn) 0 100% repeat-x;
color: #000;
background-color: #FFFFFF;
}
ul.jb_free_dropdown li:hover {
color: #F8F8F8;
}
ul.jb_free_dropdown li a:active {
background-color: #FFFFFF;
}
ul.jb_free_dropdown li a:link{background-color: #FFFFFF}
ul.jb_free_dropdown li a:visited{background-color: #FFFFFF}
ul.jb_free_dropdown
/* -- Mixed -- */
ul.jb_free_dropdown li a,
ul.jb_free_dropdown *.dir {
border-left-style: solid;
border-width: 1px;
border-left-color: #E8E8E8;
}
/* -- Drop-down open -- */
AND TEMPLATE CSS:
/* CSS Document */
#font-face {
font-family: 'ol_icons';
src: url("../fonts/ol_icons.eot");
src: url("../fonts/ol_icons.eot?#iefix") format('embedded-opentype'), url("../fonts/ol_icons.woff") format('woff'), url("../fonts/ol_icons.ttf") format('truetype'), url("../fonts/ol_icons.svg#ct_icons") format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color: #f7f7f7;
}
p {
margin: 10px 0 12px 0;
}
a {
color: #369;
}
a:hover {
text-decoration: none;
background-color: #F8F8F8;
}
a:focus {
outline: none;
}
h1, h1 a, h1 span,
h2, h2 a, h2 span,
h3, h3 a, h3 span,
h4, h4 a, h4 span,
h5, h5 a, h5 span,
blockquote {
display: block;
margin: 0;
padding: 0;
text-decoration: none;
width: auto;
}
h1, h2, h3, h4, h5 {
margin: 0 0 10px 0;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5), 0px -1px 0px rgba(0, 0, 0, 0.15);
}
h1 a, h2 a, h3 a, h4 a, h5 a {
cursor: pointer;
}
#header{background: rgba(255,255,255,0.7);}
.row > div,
.row_main > div,
.error {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
header{
z-index: 50000;
}
.page-header {
bordr: none;
padding: 0;
margin: 0;
width100%;
}
blockquote {
font-size: 18px;
font-style:italic;
line-height: 19px;
}
#main img {
border:medium none;
margin:0 10px 0px 0;
max-width:100%;
outline:meium none;
}
.ol_imgRaw {
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.collapse {
-moz-transition:heigt 0.35s ease 0s;
height:0;
overflow:hidden;
position:relative;
}
/* logo ------------------------------- */
.textLogo { font-size: 35px; }
.slogan { font-size: 12px;}
/* LISTS ------------------------------- */
ul, ol {
margin: 1em 0;
padding: 0;
padding-left: 0;
margin-left: 15px;
}
li {
line-height: inherit;
}
ul li {
margin-left: 0;
}
ul.category {
list-style: none inside none;
}
ul.category li {
padding: 7px;
}
ul.ol_squareList,
ul.ol_arrowList,
ul.ol_starList,
ul.ol_checkList {
list-style: outside;
}
ul.ol_arrowList {list-style-image: url(../images/ul_arrow.png);}
ul.ol_arrowList.back {list-style-image: url(../images/ul_arrow_black.png);}
ul.ol_arrowList.white {list-stye-image: url(../images/ul_arrow_white.png);}
ul.ol_checkList {list-style-image: url(../images/ul_check.png);}
ul.ol_checkList.black {list-style-image: url(../images/ul_check_black.png);}
ul.ol_checkList.white {list-style-image: url(../images/ul_check_white.png);}
ul.ol_arrowList li, ul.ol_starList li, ul.ol_checkList li {
background: non;
}
ul.ol_arrowList li ul,
ul.ol_starList li ul,
ul.ol_checkList li ul,
ul li ul li ul, ul li ul li ul li ul {
margin-left: 13px;
}
/* SLIDER -------------------------------------*/
#ol_headerWrapper {
position: relaive;
z-index: 30;
height: auo;
overflow: visble;
margin: auo
margin-bottom: 20px;
}
#ol_headerContent{
position: rlative;
height: aut;
margin: auo;
-webkit-border-radius: px;
border-radius: 10px;
}
/* Flash header -------------------------------------------------------------------------------------------------------- */
#mx-headerout { background-color: #6e6e6; margin-top: -15px; -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.25);
box-shadow: 0 0px 4px rgba(0, 0, 0, 0.25);
-pie-box-shadow: 0 0px 4px rgba(0, 0, 0, 0.15)}
#mx-header { margin-bottom: 1px; padding: 0px; }
/* Mobile */
#media handheld, only screen and (max-width: 940px) {
#mx-header { display: none; }
}
/* Copyright -------------------------------------------------------------------------------------------------------- */
#copyright { margin-top: 0.5em; margin-bottom: 0; padding: 10px;float:right;}
#copyright p { margin-bottom:0; }
#copyright ul { margin:0; padding: 1.2em 0 0; }
#copyright ul li { float:left; list-style:none; background: none; }
#copyright ul li a { display:block; color: #1F1F1F; }
#copyright ul li.active a, #copyright ul li a:hover, #copyright ul li:hover a, #copyright ul li.sfHover a { color: #0099FF; text-decoration:none; }
/* MODULE POSITION CONTAINERS -------------------------------------*/
.cleartBoth {
clear: both;
}
.ol_clearFL {
clear: left;
}
.ol_clearFR {
clear: right;
}
.cleartBoth,
.ol_clearFL,
.ol_clearFR {
margin: 0 !important;
padding: 0 !important;
}
.ol_module, .ol_left {
float: left;
}
.ol_right {
float: right;
}
/* TABLE STYLES ------------------------------------------*/
.table-striped tbody tr:nth-child(2n+1) td,
.table-striped tbody tr:nth-child(2n+1) th {
background: none;
}
.table th, .table td {
border-top: none;
}
#siteWrapper {
color: #333;
}
/* MODULE BOX STYLES -------------------------------------*/
.moduletable {
height: auto;
}
.ol_left .moduletable,
.ol_right .moduletable,
.ol_left .moduletable_ol_dark,
.ol_right .moduletable_ol_dark,
.ol_left .moduletable_ol_light,
.ol_right .moduletable_ol_light,
.ol_left .moduletable_ol_red,
.ol_right .moduletable_ol_red,
.ol_left .moduletable_ol_green,
.ol_right .moduletable_ol_green,
.ol_left .moduletable_ol_blue,
.ol_right .moduletable_ol_blue {
padding: 10px;
}
.moduletable_ol_dark,
.moduletable_ol_light,
.moduletable_ol_red,
.moduletable_ol_green,
.moduletable_ol_blue {
width: auto;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 4px rgba(0,0, 0, 0.25);
-pie-box-shadow: 0 2px 0px rgba(0, 0, 0, 0.15);
}
.moduletable_ol_light {
color: #333;
background-color: #fff !important;
}
.moduletable_ol_dark {
color: #ccc;
background-color: #333 !important;
}
.moduletable_ol_red {
color: #f1f1f1;
background-color: #cc0000 !important;
}
.moduletable_ol_green {
color: #f1f1f1;
background-color: #339933 !important;
}
.moduletable_ol_blue {
color: #f1f1f1;
background-color: #336699 !important;
}
/* LINKLIST ------------------------------------------------------------------------*/
.moduletable_ol_linkList a {
position: relative;
display: block;
border: none;
font-weight: normal;
font-size: 15px;
padding: 5px 0 5px 0;
text-decoration: none;
padding: 5px 10px 5px 0;
width: auto;
background-image: url(../images/icon_link_arrow.png);
background-color: transparent;
background-position: center right;
background-repeat: no-repeat;
float: left;
clear: both;
cursor: pointer;
}
/* VOTING / RATING ------------------------------------------------------------------------*/
.content_vote {
margin: 5px 0;
}
.content_vote input[type="radio"] {
margin: 0 2px 0 3px;
}
.content_vote input.button {
display: inline;
text-align: center;
text-decoration: none;
height: 23px;
width: auto;
cursor:pointer;
font-size:12px;
font-weight:normal;
color:#FFFFFF;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.4);
padding: 2px 7px 7px 7px;
margin-left: 10px;
}
/* ACTIONS PANEL (PRINT & E-MAIL) ------------------------------------------------------------------------*/
.actions {
margin: 0;
padding: 0;
list-style: inside none;
float: right;
width: auto;
}
.actions > li {
float: left;
}
.actions > li {
width: 20px;
height: 20px;
overflow: hidden;
white-space: nowrap;
padding: 0;
margin-left: 7px;
}
.actions li > a > i {
font-size: 18px;
width: 20px;
height: 20px;
}
.print-icon a,
.email-icon a,
.edit-icon a {
}
.print-icon a img, .email-icon a img, .edit-icon a img{
opacity: 0;
-moz-opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
}
i.tip {
z-index: 0 !important;
max-width: auto;
padding: 0;
-webkit-border-radius: 0;
border-radius: 0;
background: none;
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
.print-icon > a > i,
.email-icon > a > i,
.edit-icon > a > i,
.print-icon > a:hover > i,
.email-icon > a:hover > i,
.edit-icon > a:hover > i {
background-image: none !important;
margin-right: 5px;
}
.print-icon > a,
.email-icon > a,
.edit-icon > a {
}
.print-icon > a > i:before,
.email-icon > a > i:before,
.edit-icon > a > i:before {
font-family: 'ol_icons';
font-style: normal;
}
.print-icon > a > i:before{ content: '\e716'; } /* '' */
.email-icon > a > i:before { content: '\2709'; } /* '✉' */
.edit-icon > a > i:before { content: '\270d'; } /* '✍' */
#ocpanel {
padding: 10px;
clear: both;
font-size: 37px;
left: 40%;
top: 45%;
position:absolute;
color: #888;
display: block;
text-shadow: 1px 3px 3px rgba(0,0,0, 0.5);
}
/* LOGIN -----------------------------------------*/
#login-form p {
margin-top: 5px;
}
.ol_logins {
display: inline-block;
margin-left: 0;
padding-left: 14px;
list-style: outside;
list-style-image: url(../images/icon_link_arrow_small_hover.png);
}
.ol_logins li {
width: 100%;
}
.ol_logins li a {
font-weight: bold;
font-size: 12px;
text-decoration: none;
}
#form-login-remember {
display: block;
}
#form-login-remember label,
#form-login-remember input {
float: left;
}
#form-login-remember label {
line-height: 19px;
}
#form-login-remember input {
clear: right;
}
#login-form .button {
float: left;
clear: left;
margin-top: 10px;
display: inline-block;
}
.login-fields {
margin-bottom: 10px;
}
.login .button {
margin-top: 5px !important;
}
.logout-button .button {
margin: 0 !important;
float: none !important;
}
.login-greeting {
height: 25px;
font-size: 14px;
padding-top: 5px;
margin-right:15px;
}
/* COMPACT VERSION FOR HEADER */
#login-form.compact,
#login-form.compact fieldset
{
width: auto;
}
#login-form.compact p {
padding: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
float: left;
display: inline-block;
}
#login-form.compact #form-login-username label,
#login-form.compact #form-login-password label,
#login-form.compact #form-login-remember,
#login-form.compact .ol_logins
{
display: none;
}
#login-form.compact input[type="text"],
#login-form.compact input[type="password"]
{
width: 120px;
height: 25px;
margin-right:5px;
padding-left: 7px;
}
#login-form.compact .button
{
margin: 0;
float: left;
display: inline-block;
margin:0 !important;
text-indent: -9999px;
overflow: hidden;
width: 25px;
padding: 0;
padding-bottom: 1px;
background-position: right;
background-repeat: no-repeat;
height: 25px;
}
#login-form.compact .button
{
float: none;
clear: none;
margin-top: 0;
}
/*-----------------*/
/* RESET / REMIND / REGISTRATION */
.reset, .remind, .registration {
max-width: 460px;
white-space: normal;
}
.reset .form-actions,
.remind .form-actions,
.registration .form-actions {
}
/* HEADER SEARCH ------------------------------------------------------------------------*/
#ol_hIn h3 {
display: none;
}
#ol_hIn label,
#ol_hIn .finder label {
visibility: hidden;
width: 0;
height: 0;
}
#search #mod-search-searchword,
#search .finder input {
width: 200px;
padding-left: 30px;
background-repeat: no-repeat;
}
#ol_hIn .search input,
#ol_hIn .finder input {
background-repeat:no-repeat;
height:25px;
padding-left:30px;
width:200px;
}
.autocompleter-choices {
border: none !important;
margin-top: 5px !important;
-webkit-border-radius: 2px;
border-radius: 2px;
overflow: visible !important;
width: auto !important;
margin-left: -5px !important;
}
.autocompleter-choices li {
margin:10px !important;
background: #00ff00;
}
.autocompleter-choices {
border: none !important;
margin-top: 5px !important;
-webkit-border-radius: 2px;
border-radius: 2px;
overflow: visible !important;
width: auto !important;
margin-left: -5px !important;
}
.autocompleter-choices li {
margin:10px !important;
background: #00ff00;
}
/* PAGENAV ------------------------------------------------------------------------*/
ul.pagenav {
width: 100%;
display: block;
margin: 25px auto;
clear: left;
}
ul.pagenav li {
list-style:none outside none;
background-image: none;
margin:0;
padding:0;
}
ul.pagenav li a {
margin-top: 20px !important;
}
ul.pagenav li.previous a,
ul.pagenav li.next a {
float: left;
}
/* GLOBAL TABLE STYLES ------------------------------------------------------------------------*/
table.category th, table.category td {
padding: 5px 5px 5px 7px;
}
table.category {
width: 100%;
}
table.category th {
padding: 5px 10px 5px 0;
}
table.category th, table.category th a {
text-align: left;
font-family: "MavenProRegular", "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}
table.category th a img {
margin-left: 5px;
}
table.category th, table.category td {
padding: 5px;
}
/* SYSTEM MESSAGES -------------------------------------------- */
.alert-info {
background-color: transparent;
border-color: transparent;
color: inherit;
}
.alert,
#system-message > dd {
text-indent: 45px;
}
.alert,
#system-message dd.message ul,
#system-message dd.error ul,
#system-message dd.warning ul,
#system-message dd.notice ul,
.bfErrorMessage {
background-position: left top !important;
border: none;
-webkit-border-radius: 7px;
border-radius: 7px;
padding-left: 0 !important;
background-color: #fff;
}
.alert,
#system-message > dd.message ul li,
#system-message > dd.error ul li,
#system-message > dd.warning ul li,
#system-message > dd.notice ul li,
.bfErrorMessage {
color: #ff3600 !important;
font-size: 14px !important;
}
.alert-heading {
color: #ff3600 !important;
font-size: 18px !important;
font-weight: bold;
}
/* TOOLTIP ----------------------------------------------------- */
.tip-wrap {
z-index: 1981 !important;
}
.tip {
padding: 5px 10px 10px 10px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-repeat: no-repeat;
}
.tip-title {
display: inline-block;
font-weight: normal !important;
margin: 0 0 5px 23px;
padding: 0;
text-decoration: none;
width: auto;
font-size: 18px;
line-height: 18px;
}
.tip-text {
font-size: 12px;
}
/* BADGES --------------------------------------------------------------*/
.badge {
display: inline-block;
height: 20px;
min-width: 10px;
padding: 0 5px;
text-align: center;
line-height: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* BLOG-FEATURED ------------------------------------------------------ */
.blog-featured h1 {
margin-bottom: 20px;
}
.blog-featured h2 {
margin-bottom: 10px;
}
/* BREADCRUMBS ------------------------------------------------------ */
.ol_breadcrumbs {
position: relative;
display: block;
margin: 10px;
}
.ol_breadcrumbs span, .ol_breadcrumbs a {
text-decoration: none;
font-weight: bold;
}
.ol_breadcrumbsSeparator {
display: inline-block;
height: 8px;
width: 7px !important;
background: url(../images/icon_link_arrow_small_hover.png);
background-repeat: no-repeat;
}
/* LINKS ---------------------------------------------------*/
.ol_inlineLink {
position: relative;
display: inline-block;
font-size: 12px;
font-weight: 600;
text-decoration: none;
margin: 0 5px;
padding: 0 9px 2px 0;
width: auto;
height: auto;
background-color: transparent;
background-position: center right;
background-repeat: no-repeat;
}
a.readmore,
p.readmore a,
.ol_customLink {
display:block;
font-size:12px;
font-weight:bold;
letter-spacing: 0.05em;
min-height:19px;
line-height:14px;
padding: 5px 7px 1px 7px;
position:relative;
text-decoration:none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
a.readmore,
p.readmore a {
float: left;
}
/* ERROR PAGES ---------------------------------------------------*/
.error {
padding: 20px 0;
}
#ol_errorWrapper {
display: block;
width: 800px;
margin: auto;
margin-top: 15px;
margin-bottom: 50px;
}
.errorNumber, #errorboxheader {
text-align: center;
display: block;
}
.errorNumber {
text-shadow: 1px 3px 3px rgba(0,0,0, 0.5);
font-size: 100px;
line-height: 100px;
margin-bottom: 20px;
}
#errorboxheader {
font-size: 26px;
white-space: nowrap;
}
#errorboxbody {
margin-top: 50px;
text-align: center;
}
#errorboxbody ul {
list-style: none;
}
#errorboxbody a {
position: relative;
z-index: 0;
text-decoration: none;
border: none;
font-size: 14px;
text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.6);
cursor: pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-position: right;
background-repeat: no-repeat;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-pie-box-shadow: 0 2px 0px rgba(0, 0, 0, 0.15);
height: 25px;
line-height: 22px;
padding: 4px 12px 1px 12px;
display: inline-block;
margin: 0 10px 10px 0;
}
#mailto-window { padding: 10px 20px; }
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-width : 321px)
and (max-width : 786px) {
#main .colWidth_11 img {
float: none;
}
}
/* ADMIN / EDIT ---------------------------------*/
#adminForm .tab-content {
overflow: visible;
}
#ol_errorWrapper, #ol_errorWrapper a {
color: #369;
}
body,
body.contentpane,
#errorboxheader,
#errorboxoutline {
color: #333;
}
/* BASIC ELEMENTS ------------------------------*/
a:hover,
#ol_logins li:hover a,
.ol_breadcrumbs a:hover,
a.readmore:hover,
p.readmore a:hover,
.categories-list span.item-title a:hover,
.category td a:hover,
.category th a:hover,
.registration legend,
.search-results .result-title:hover,
.search-results .result-title:hover a,
ul.circleList li,
ul.circleList li ul li,
.errorNumber
{
color: #cc0000;
}
.row > div > h1:after,
.row > div > h2:after,
.row > div > h3:after,
.row > div > h4:after,
.row > div > h5:after {
border-bottom: 1px solid #bbb;
}
Related
design breaks in IE 11 but in Firefox and Chrome and IE8 its working fine
I have a page designed here http://idc.interlinktravels.com/lanka/default7.aspx
once the Your Departure City is selected the page gets refreshed and the design breaks whereas this does not occur in IE 8 or Firefox, or Chrome.
I have no clue which code to share here...so please let me know if i need to share any of my design codes
here is the whole CSS code I did for this design:
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
}
body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
a {
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
a:link, a:visited,
a:active, a:hover {
color: #333;
}
a:hover {
background-color: #c7d1d6;
}
header, footer, hgroup,
nav, section {
display: block;
}
mark {
background-color: #a6dbed;
padding-left: 5px;
padding-right: 5px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
h1, h2, h3,
h4, h5, h6 {
color: #000;
margin-bottom: 0;
padding-bottom: 0;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
h5, h6 {
font-size: 1em;
}
h5 a:link, h5 a:visited, h5 a:active {
padding: 0;
text-decoration: none;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
#body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
}
.main-content {
background: url("../Images/accent.png") no-repeat;
padding-left: 10px;
padding-top: 30px;
}
.featured + .main-content {
background: url("../Images/heroAccent.png") no-repeat;
}
header .content-wrapper {
padding-top: 20px;
}
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
/* login
----------------------------------------------------------*/
#login {
display: block;
font-size: .85em;
margin: 0 0 10px;
text-align: right;
}
#login a {
background-color: #d3dce0;
margin-left: 10px;
margin-right: 3px;
padding: 2px 3px;
text-decoration: none;
}
#login a.username {
background: none;
margin-left: 0px;
text-decoration: underline;
}
#login ul {
margin: 0;
}
#login li {
display: inline;
list-style: none;
}
/* menu
----------------------------------------------------------*/
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
}
ul#menu li a {
background: none;
color: #999;
text-decoration: none;
}
ul#menu li a:hover {
color: #333;
text-decoration: none;
}
/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
background-color: #fff;
}
.featured .content-wrapper {
background-color: #7ac0da;
background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
color: #3e5667;
padding: 20px 40px 30px 40px;
}
.content-wrapper img {
width:100%;
height:50%;
}
.featured hgroup.title h1, .featured hgroup.title h2 {
color: #fff;
}
.featured p {
font-size: 1.1em;
}
/* page titles */
hgroup.title {
margin-bottom: 10px;
}
hgroup.title h1, hgroup.title h2 {
display: inline;
}
hgroup.title h2 {
font-weight: normal;
margin-left: 3px;
}
/* features */
section.feature {
width: 300px;
float: left;
padding: 10px;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
margin: 25px 0;
padding-left: 45px;
}
ol.round li.zero {
background: url("../Images/orderedList0.png") no-repeat;
}
ol.round li.one {
background: url("../Images/orderedList1.png") no-repeat;
}
ol.round li.two {
background: url("../Images/orderedList2.png") no-repeat;
}
ol.round li.three {
background: url("../Images/orderedList3.png") no-repeat;
}
ol.round li.four {
background: url("../Images/orderedList4.png") no-repeat;
}
ol.round li.five {
background: url("../Images/orderedList5.png") no-repeat;
}
ol.round li.six {
background: url("../Images/orderedList6.png") no-repeat;
}
ol.round li.seven {
background: url("../Images/orderedList7.png") no-repeat;
}
ol.round li.eight {
background: url("../Images/orderedList8.png") no-repeat;
}
ol.round li.nine {
background: url("../Images/orderedList9.png") no-repeat;
}
/* content */
article {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
aside ul {
list-style: none;
padding: 0;
}
aside ul li {
background: url("../Images/bullet.png") no-repeat 0 50%;
padding: 2px 0 2px 20px;
}
.label {
font-weight: 700;
}
/* login page */
#loginForm {
border-right: solid 2px #c8c8c8;
float: left;
width: 55%;
}
#loginForm .validation-error {
display: block;
margin-left: 15px;
}
#socialLoginForm {
margin-left: 40px;
float: left;
width: 40%;
}
#socialLoginForm h2 {
margin-bottom: 5px;
}
fieldset.open-auth-providers {
margin-top: 15px;
}
fieldset.open-auth-providers button {
margin-bottom: 12px;
}
/* contact */
.contact h3 {
font-size: 1.2em;
}
.contact p {
margin: 5px 0 0 10px;
}
.contact iframe {
border: 1px solid #333;
margin: 5px 0 0 10px;
}
/* forms */
fieldset {
border: none;
margin: 0;
padding: 0;
}
fieldset legend {
display: none;
}
fieldset ol {
padding: 0;
list-style: none;
}
fieldset ol li {
padding-bottom: 5px;
}
label {
display: block;
font-size: 1.2em;
font-weight: 600;
}
label.checkbox {
display: inline;
}
input, textarea {
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: 1.2em;
margin: 5px 0 6px 0;
padding: 5px;
width: 300px;
}
textarea {
font-family: inherit;
width: 500px;
}
input:focus, textarea:focus {
border: 1px solid #7ac0da;
}
input[type="checkbox"] {
background: transparent;
border: inherit;
width: auto;
}
input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.2em;
font-weight: 600;
padding: 7px;
margin-right: 8px;
width: auto;
}
td input[type="submit"],
td input[type="button"],
td button {
font-size: 1em;
padding: 4px;
margin-right: 4px;
}
/* info and errors */
.message-info {
border: 1px solid;
clear: both;
padding: 10px 20px;
}
.message-error {
clear: both;
color: #e80c4d;
font-size: 1.1em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.message-success {
color: #7ac0da;
font-size: 1.3em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.error {
color: #e80c4d;
}
/* styles for validation helpers */
.field-validation-error {
color: #e80c4d;
font-weight: bold;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #e80c4d;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #e80c4d;
font-weight: bold;
font-size: 1.1em;
}
.validation-summary-valid {
display: none;
}
/* tables
----------------------------------------------------------*/
table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 0.75em;
border: 0 none;
}
th {
font-size: 1.2em;
text-align: left;
border: none 0px;
padding-left: 0;
}
th a {
display: block;
position: relative;
}
th a:link, th a:visited, th a:active, th a:hover {
color: #333;
font-weight: 600;
text-decoration: none;
padding: 0;
}
th a:hover {
color: #000;
}
th.asc a, th.desc a {
margin-right: .75em;
}
th.asc a:after, th.desc a:after {
display: block;
position: absolute;
right: 0em;
top: 0;
font-size: 0.75em;
}
th.asc a:after {
content: '▲';
}
th.desc a:after {
content: '▼';
}
td {
padding: 0.25em 2em 0.25em 0em;
border: 0 none;
}
tr.pager td {
padding: 0 0.25em 0 0;
}
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
/* header
----------------------------------------------------------*/
header .float-left,
header .float-right {
float: none;
}
/* logo */
header .site-title {
margin: 10px;
text-align: center;
}
/* login */
#login {
font-size: .85em;
margin: 0 0 12px;
text-align: center;
}
#login ul {
margin: 5px 0;
padding: 0;
}
#login li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#login a {
background: none;
color: #999;
font-weight: 600;
margin: 2px;
padding: 0;
}
#login a:hover {
color: #333;
}
/* menu */
nav {
margin-bottom: 5px;
}
ul#menu {
margin: 0;
padding: 0;
text-align: center;
}
ul#menu li {
margin: 0;
padding: 0;
}
/* main layout
----------------------------------------------------------*/
.main-content,
.featured + .main-content {
background-position: 10px 0;
}
.content-wrapper {
padding-right: 10px;
padding-left: 10px;
}
.featured .content-wrapper {
padding: 10px;
}
/* page content */
article, aside {
float: none;
width: 100%;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
padding-left: 10px;
margin: 25px 0;
}
ol.round li.zero,
ol.round li.one,
ol.round li.two,
ol.round li.three,
ol.round li.four,
ol.round li.five,
ol.round li.six,
ol.round li.seven,
ol.round li.eight,
ol.round li.nine {
background: none;
}
/* features */
section.feature {
float: none;
padding: 10px;
width: auto;
}
section.feature img {
color: #999;
content: attr(alt);
font-size: 1.5em;
font-weight: 600;
}
/* forms */
input {
width: 90%;
}
/* login page */
#loginForm {
border-right: none;
float: none;
width: auto;
}
#loginForm .validation-error {
display: block;
margin-left: 15px;
}
#socialLoginForm {
margin-left: 0;
float: none;
width: auto;
}
/* footer
----------------------------------------------------------*/
footer .float-left,
footer .float-right {
float: none;
}
footer {
text-align: center;
height: auto;
padding: 10px 0;
}
footer p {
margin: 0;
}
}
/* END: Mobile Styles */
after some research I just break the table into 2 and wrap each of the table into DIV and its perfectly working now.
how to bring drop down menu infront of slider
hi i am having provlems with my drop down menu on my index page, the drop down items are hidden below my image slider which is directly below my nav bar, i would like to be able to see the drop down menu items, any help would be greatly appreciated
thank you very much;
here is my html for the nav bar:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="">sports news
<ul>
<li>headlines</li>
<li>when an where</li>
<li>rewind</li>
<li>manager of the week </li>
</ul>
</li>
<li class="about"><a class="active" href="#">music</a></li>
<li class="news">events
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">events</li>
<li class="contact">gallery</li>
<li class="contact">Contact</li>
</ul>
</div>
<div class="cleaner"></div>
and here is my css:
/*
jmc
*/
body {
margin: 0px;
padding: 0px;
color: #4d4638;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background: url(images/tooplate_body.jpg);
background-color: #c2b8a1;
background-repeat: repeat-x;
background-position: top
}
a, a:link, a:visited { color: #000; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
.orange {
color: #FC0;
}
.green {
color: #CF6;
}
p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }
em { color: #000; font-weight: bold; font-style: normal }
h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
h1 { font-size: 34px; margin: 0 0 20px 0; padding: 5px 0 }
h2 { font-size: 28px; margin: 0 0 20px 0; padding: 5px 0; }
h3 { font-size: 24px; margin: 0 0 15px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0; }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }
.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }
a.more {
clear: both;
display: block;
width: 87px;
height: 31px;
padding-right: 15px;
line-height: 30px;
text-align: center;
color: #000;
font-weight: bold;
background: url(images/tooplate_btn.png);
}
a.more:hover {
text-decoration: none;
color: #960;
}
.float_l { float: left }
.float_r { float: right }
.tooplate_margin { margin: 10px; }
.image_wrapper {
display: inline-block;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 4px;
margin-bottom: 5px;
}
.image_fl {
float: left;
margin: 3px 15px 0 0;
}
.image_fr {
float: right;
margin: 3px 0 0 15px;
}
.tooplate_list {
margin: 20px 0 20px 20px;
padding: 0;
list-style: none;
}
.tooplate_list li {
color:#000;
margin: 0 0 5px 0;
padding: 0 0 0 25px;
background: url(images/tooplate_list.png) no-repeat scroll 0 5px;
}
.tooplate_list li a {
color: #000;
font-weight: normal;
}
.tooplate_list li a:hover {
text-decoration: underline;
}
#tooplate_header {
width: 960px;
padding: 10px 0;
margin: 0 auto;
}
#site_title {
float: left;
}
#site_title h1 {
margin: 30px 0 0 0;
padding: 0;
}
#site_title h1 a {
display: block;
width: 278px;
height: 50px;
color: #fff;
text-indent: -10000px;
background: url(images/tooplate_logo.png) no-repeat;
}
/* menu */
#tooplate_menu {
float: right;
width: 632px;
height: 48px;
margin-top: 40px;
background: url(images/tooplate_menu.png)
}
#tooplate_menu ul {
width: 600px;
margin: 0 auto;
padding: 0;
list-style: none;
}
#tooplate_menu ul li {
float: left;
display: block;
padding: 0;
margin: 0;
display: inline;
text-align: center;
}
#tooplate_menu ul li a {
display: block;
width: 116px;
padding: 9px 4px 9px 0;
margin: 0;
font-size: 14px;
text-align: center;
text-decoration: none;
color: #000000;
text-shadow: 1px 1px 1px #cec8ba;
font-weight: normal;
outline: none;
border: none;
background: url(images/tooplate_menu_divider.png) center right no-repeat
}
#tooplate_menu ul li a:hover, #tooplate_menu ul li .current {
color: #fff;
text-shadow: 1px 1px 1px #3d3728;
}
#tooplate_menu ul .last {
background: none;
}
#search_box {
float: right;
margin: 12px 0 0 0;
width: 170px;
height: 27px;
background: url(images/tooplate_search.png) no-repeat;
}
#search_box form {
clear: both;
width: 170px;
height: 26px;
padding: 0;
margin: 0;
}
#searchfield {
float: left;
display: block;
height: 16px;
width: 130px;
padding: 5px;
font-size: 12px;
color: #ccc;
line-height: 0;
background: none;
border: none;
}
#searchbutton {
float: right;
display: block;
height: 26px;
width: 30px;
padding: 0;
margin: 0;
cursor: pointer;
background: none;
border: none;
}
/* end of menu */
/* slider */
#tooplate_middle {
clear: both;
width: 940px;
height: 307px;
padding: 10px 40px;
margin: 0 auto;
background: url(images/tooplate_middle_home.png) no-repeat
}
#tooplate_middle_subpage {
clear: both;
width: 820px;
height: 207px;
padding: 60px 100px;
margin: 0 auto;
font-family: Georgia, "Times New Roman", Times, serif;
background: url(images/tooplate_middle_subpage.png) no-repeat;
}
#tooplate_middle_subpage h2 {
font-size: 48px;
color: #000;
}
#tooplate_middle_subpage p {
font-size: 18px;
color: #000;
line-height: 30px;
}
#tooplate_middle_subpage a {
color: #507921;
font-weight: normal;
}
#slider {
float: right;
width: 940px;
height: 300px;
overflow: hidden;
}
/* end of slider */
#tooplate_main {
clear: both;
width: 960px;
padding: 30px 0;
margin: 0 auto;
}
.col_w960 { width: 960px; margin-bottom: 40px }
.col_w600 { width: 600px }
.col_w450 { width: 450px }
.col_w300 { width: 300px }
.col_allw300 { width: 300px; float: left; margin-right: 30px }
.col_last { margin: 0 }
.col_w960_last { margin: 0; background: none; }
.col_last { margin: 0; }
.wwd_box { clear: both; margin-top: 20px; margin-bottom: 40px }
.wwd_box img { float: left; width: 80px; margin-right: 30px }
.wwd_box h3 { font-size: 16px; margin-bottom: 0 }
.wwd_box h3 a { color: #507921; font-size: 16px; font-weight: normal }
.wwd_box p { margin-bottom: 30px; }
.lp_box { float: left; width: 300px; margin-right: 30px }
.lp_box h6 { font-weight: bold; color: #507921 }
.lp_box_last { margin: 0 }
.lp_box img { border: 1px solid #CCC; padding: 4px }
#cp_contact_form {
margin: 10px;
padding: 0;
width: 412px;
}
#cp_contact_form form {
margin: 0px;
padding: 0px;
}
#cp_contact_form form .input_field {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form label {
display: block;
width: 100px;
margin-right: 10px;
font-size: 14px;
}
#cp_contact_form form textarea {
width: 400px;
height: 160px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form .submit_btn {
margin: 5px 0px;
padding: 5px 14px;
text-decoration: none;
border: 1px solid #ccc;
background: #fff;
font-size: 14px;
}
#map {
margin: 10px;
}
#map img {
width: 300px;
height: 200px;
border: 1px solid #d9d3c5;
background: #b5ac98;
padding: 7px;
margin-bottom: 10px;
}
.news_box {
clear: both;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px dashed #333;
}
.news_box h2 {
font-size: 20px;
margin-bottom: 0;
}
.news_box p.date {
color: #000;
}
.news_box img {
float: left;
padding: 4px;
border: 1px solid #000;
margin-right: 30px;
}
.news_box a.more {
clear:none;
float: right;
}
.sb_lp_box {
clear: both;
margin-bottom: 20px;
}
.sb_lp_box img {
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box {
clear: both;
margin-bottom: 30px;
}
.post_box h2 {
font-size: 20px;
margin-bottom: 10px;
}
.post_box p.post_meta {
margin-bottom: 0;
}
.post_box p span.cat a {
color: #507921;
font-weight: 400;
}
.post_box img {
width: 550px;
height: 160px;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box a.more {
float: left;
}
.lbe_box {
clear: both;
margin-bottom: 20px;
}
.lbe_box h3 {
font-size: 16px;
margin-bottom: 0;
}
.lbe_box h3 a {
color: #507921;
font-size: 16px;
font-weight: normal;
}
.lbe_box h3 a span {
font-size: 12px;
color: #507921;
}
.lbe_box p {
margin-bottom: 0;
}
.lbe_box p.date {
font-size: 10px;
font-weight: 700;
color: #507921;
}
#gallery {
margin: 0;
padding: 0;
}
#gallery ul {
margin: 0;
padding: 0;
}
#gallery ul li {
display: block;
float: left;
width: 281px;
margin: 0 30px 30px 0;
padding: 8px;
border: 1px solid #d0c9b8;
background: #b6ac97;
}
#gallery ul .third {
margin: 0 0 30px 0;
}
#gallery ul li a img {
border: 1px solid #ccc;
margin-bottom: 5px;
}
#tooplate_footer_wrapper {
clear: both;
width: 100%;
background: #a19882;
border-top: 10px solid #d0c8b4;
}
#tooplate_footer {
width: 960px;
margin: 0 auto;
padding: 15px 0;
text-align: center;
color: #000;
background: url(images/tooplate_footer.jpg) top center no-repeat
}
#tooplate_cr a {
color: #5fa008;
font-weight: normal;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
#nav ul {
z-index: 9999;
}
thanks again;
From what I can see from the snippet provided, my best guess would be to add:
position:relative;
to your:
#nav ul{
z-index:9999;
}
HOWEVER I cannot see div id="nav" in your html! If you have just not included it in your snippet, that's fine, but if this is also an error and you mean to assign that css to div class="nav", then try changing that whole block to:
.nav ul{
position:relative;
z-index:9999;
}
One final note to remember, assign z-index to elements that ALSO have a position set (be it relative or absolute etc) - as far as i'm aware, z-index doesn't work unless the block has a position attribute set to it also.
Hope this works for you.
Why am I missing a section?
So here's what I should be getting
But this is what I'm getting
As you can see the yellow section is missing. Here's my working example http://jsfiddle.net/Qk543/ but for some weird reason I cannot replicate it. Here's my code for the defective page.
<div class="wrap">
<div class="foot">
<ul class="styl">
<a id="html" href="#">
<li style="background: #F16529">
WORD
</li>
</a>
<a id="css" href="#">
<li style="background: #2AA9E0">
WORD
</li>
</a>
<a id="php" href="#">
<li style="background: #8892BF">
WORD
</li>
</a>
<a id="js" href="#">
<li style="background: #F0DB4F">
WORD
</li>
</a>
</ul>
</div>
</div>
And the CSS to it...
h1 {
padding: 80px 0 40px;
font-size: 40px;
line-height: 48px;
color: #505762;
}
.search h1 {
padding: 60px 0;
}
.slidey {
overflow: hidden;
padding: 30px 0;
background: #f3f5f8;
border-bottom: 1px solid #e5e8ed;
}
.js-enabled .slidey {
-webkit-transition: margin-top .2s;
-moz-transition: margin-top .2s;
transition: margin-top .2s;
}
.slidey b, .slidey label {
display: block;
font-weight: 500;
padding-bottom: 15px;
font-size: 15px;
font-weight: 500;
}
.slidey form, .slidey aside {
float: left;
width: 50%;
}
.slidey form input {
padding: 20px;
width: 75%;
}
.slidey li {
list-style: none;
}
.slidey a {
display: block;
text-decoration: none;
color: #717985;
}
.slidey a:hover {
color: #414b59;
}
.slidey li span {
float: right;
opacity: .6;
}
#top {
overflow: hidden;
padding: 20px 35px;
background: #fff;
border-bottom: 1px solid rgba(22,36,54,.1);
}
#top a {
float: left;
font-size: 13px;
font-weight: 500;
text-decoration: none;
color: #8895a7;
}
#top #logo:hover, #top ul a:hover, #top ul .active a, .posts .items li:first-child h2 a:hover, p a:hover {
color: #4171b1;
}
#top ul {
list-style: none;
float: right;
}
#top ul li {
float: left;
padding-left: 40px;
}
#top ul a {
display: inline-block;
color: #555f6d;
}
#top ul img {
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
width: 16px;
height: 16px;
opacity: .4;
}
#top ul a:hover img {
opacity: .7;
}
#top ul a.active img {
opacity: 1;
}
/**
* Index page listing, category listing, search page results
*/
.items {
list-style: none;
}
.items > li {
padding: 70px 0 60px;
color: #97aec9;
background: #3c4552;
}
.posts .items > li:first-child {
background: #fff !important;
padding: 110px 0;
}
.items li h1 a, .posts .items > li:first-child h2 a {
color: #3d4551;
}
.items h1 {
padding: 0 0 8px;
}
.items h1 a {
text-decoration: none;
}
.items h2 {
font-size: 32px;
line-height: 41px;
}
.items h2 a {
display: block;
padding-bottom: 12px;
color: #fff;
color: rgba(176,200,236,.8);
text-decoration: none;
}
.items h2 a:hover {
color: #fff;
}
.items .content {
padding: 10px 0 0;
}
.items .content p {
padding-bottom: 15px;
}
/**
* Pagination
*/
.pagination {
overflow: hidden;
padding: 30px 0;
margin-bottom: 50px;
border-top: 1px solid rgba(22,36,54,.1);
border-bottom: 1px solid rgba(22,36,54,.1);
}
.pagination:empty {
display: none;
}
.pagination a {
float: left;
text-decoration: none;
font-size: 13px;
font-weight: 500;
color: #6f7b8b;
}
.pagination a:hover {
color: #3c4857;
}
.pagination a.next {
float: right;
}
/**
* Give some extra space to single-page wrappers
*/
.content.wrap {
padding-bottom: 50px;
}
.content.wrap ul, .content.wrap ol, .items li ul {
padding: 20px 30px;
}
.content.wrap ul ul, .content.wrap ol ol, .items li ul ul {
padding: 0 20px;
}
/**
* Footnotes and straplines
*/
.footnote, .commentlist time, .items footer {
display: block;
padding: 5px 0 15px;
color: #98a2b1;
font-size: 14px;
font-style: italic;
white-space: nowrap;
}
.footnote {
padding: 20px 0 40px;
}
/**
* Comment form
*/
ul.commentlist {
margin-bottom: 40px;
list-style: none;
border-top: 1px solid rgba(22,36,54,.1);
}
ul.commentlist .wrap {
position: relative;
}
ul.commentlist li {
padding: 40px 0;
border-bottom: 1px solid rgba(22,36,54,.1);
}
ul.commentlist time {
font-size: 13px;
}
ul.commentlist h2 {
font-size: 25px;
line-height: 33px;
}
ul.commentlist .counter {
position: absolute;
right: 0;
top: 0;
font-size: 25px;
font-weight: 300;
color: #cdd2da;
}
#comment {
overflow: hidden;
}
#comment label[for] {
display: none;
}
#comment p {
float: left;
width: 48%;
margin-right: 4%;
margin-bottom: 10px;
text-indent: 0;
}
#comment p + p {
margin-right: 0;
}
#comment p.textarea {
float: none;
width: 100%;
}
#comment input, #comment textarea {
width: 100%;
padding: 10px 15px;
font-size: 15px;
font-weight: normal;
border: 1px solid rgba(22,36,54,.2);
border-radius: 4px;
}
#comment input:focus, #comment textarea:focus {
outline: none;
background: #f7f9fc;
}
#comment textarea {
min-height: 150px;
max-height: 800px;
resize: vertical;
}
#comment button {
display: inline-block;
padding: 9px 18px;
background: #4e82ce;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
}
#comment button:hover {
background: #3c6eb7;
}
*{padding:0;margin:0;}
body {
text-align: center;
padding-top: 50px;
font-family: "Helvetica Neue", sans-serif;
}
.foot{
bottom: 0px;
position: fixed;
width:100%;
margin: 0px;
font-weight: 400;
}
.foot li{
opacity: 0.95;
position: relative;
float: left;
list-style: none;
width: 25%;
height: 60px;
text-align: center;
}
.foot a{
font-size: 1.5em;
color: #fff;
height: 75px;
position: relative;
text-indent: 0;
text-decoration: none;
line-height: 60px;
}
.foot li:nth-child(1){
background: #B36C4E;
}
.foot li:nth-child(2){
background: #2AA9E0;
}
.foot li:nth-child(3){
background: #8892BF;
}
.foot li:nth-child(4){
background: #F0DB4F;
}
a:link{text-decoration: none}
a:hover{text-decoration: none}
a:visited{text-decoration: none}
a:active{text-decoration: none}
.content {
padding-right: 5%;
padding-left: 5%;
}
Any ideas?
You're using floats, so there's a good chance your last element is a pixel or so too wide for the container it's in and it's floating to the next line.
Try changing the width to 24% on each element and you'll probably see all four.
If you don't want to play with the width, try adding this to your css:
* {
box-sizing: border-box;
}
That includes any padding/margin in the width so that 25% width will be the true width instead of 25% plus padding/margin.
not getting vertical scroll
i am not getting vertical scrollbar...
jsfiddle link -> http://jsfiddle.net/QNuzb/2/
css is
/* Navigation */
#nav-bar {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 45px;background: #F5F5F5;}
#nav {width: 800px;margin: 0 auto;height: 48px;text-align:center;}
#nav > li { display: inline-block;width: 15em;}
ul{list-style-type: none; display:inline-block;margin:0 auto; padding:0; position:relative;font-weight: bold; }
ul li{display:block;display:inline-block; position:relative;margin-right:5px;margin-left:5px}
ul li a{text-align: center;font-size: 18px;margin: 5px;padding: 8px;text-decoration: none; text-transform: capitalized;height: 35px; color:#222; font-size:18px; line-height:48px;}
ul li a:hover, ul li a.active{text-align:center;border-bottom:3px solid #800000; color:#800000}
/* Tabs */
.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
It's because of the position: fixed; in your nav-bar class. remove it.
#nav-bar {
position: fixed; /* remove */
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 45px;
background: #F5F5F5;
}
How do solve left gap semantically in Media Queries menu
I have a css issue with a media queries menu, I want the dropdown menu to be 100% width but there is a css issue on the left hand side of the menu showing a gap.
Any help would be great!!
please see fiddle here
http://jsfiddle.net/kavbE/
body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
font-size: 62.5%;
text-rendering: optimizeLegibility;
background: #fff;
}
li {
list-style: none;
}
a:link, a:visited {
color: #4083a9;
outline: none;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #205f82;
}
#header {
width: 100%;
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
z-index: 9997;
}
#header-inner {
position: relative;
margin: 0 auto;
padding: 0 12px;
max-width: 970px;
}
#logo {
float: left;
padding: 0px 20px 0 0;
}
#logo a {
display: block;
width: 82px;
height: 50px;
background-repeat: no-repeat;
background-position: 0 50%;
background-image: url(../img/assets/chartego-logo.png);
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
#logo img {
height: 0;
}
#logo a:hover {
opacity: .6;
}
#nav {
margin: 0 0px 0 20px;
color: #777;
}
#nav>li {
float: left;
font-size: 1.25em;
line-height: 1;
}
#nav>li>a {
display: block;
height: 50px;
padding: 0 10px;
line-height: 50px;
text-decoration: none;
color: #999;
}
#nav>li#user-profile {
float: right;
}
#nav>li img {
float: right;
position: relative;
top:13px;
}
#nav li ul.tabs {
width: 180px;
padding: 0 0 10px 0;
background: #333;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
z-index: 999;
}
#nav li ul.tabs li a {
display: block;
padding: 5px 15px;
font-size: 12px;
font-weight: normal;
line-height: 2;
color: #999;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a:hover {
color: #ddd;
background: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav li:hover>a, #nav li>a:hover {
color: #ddd;
}
#nav li#user-profile ul.tabs li:first-child a {
font-weight: bold;
}
#toggle-nav {
display: none;
}
#nav li#user-profile span.profile-name {
display: none;
}
/* =============================================================================
NAVIGATION MEDIA MAX 800PX
========================================================================== */
#media screen and (max-width: 800px) {
#header {
position: fixed;
height: 40px;
}
#toggle-nav {
position: absolute;
top: 0;
left: 0px;
display: block;
width: 48px;
height: 40px;
text-indent: -9999px;
background-repeat: no-repeat;
background-position: 15px 50%;
background-image: url(../img/assets/icon-hamburger.png);
opacity: .5;
}
#logo a {
display: block;
height: 40px;
margin: 0 auto 0 auto;
}
#logo {
float: none;
padding-right: 0;
text-align: left;
}
#nav {
float: left;
width: 100%;
margin: 0 0 10px 0;
text-align: left;
}
#nav li {
position: relative;
float: none;
margin-right: 0;
text-align: left;
font-size: 12px;
background: rgba(47, 47, 47, 0.98);
}
#nav li ul.tabs {
display: block;
position: static;
float: none;
width: 100%;
left: 0;
margin: 0;
padding: 0;
background: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a {
padding: 15px;
font-size: 12px;
font-weight: normal;
line-height: 1;
text-transform: none;
}
#nav li#user-profile {
float: none;
}
#nav li#user-profile img {
float: left;
margin: 0 8px 0 0;
}
#nav li#user-profile span.profile-name {
display: inline;
}
#nav li a:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li a:hover {
color: #fff;
}
#nav li ul.tabs li a:hover {
color: #999;
background: none;
}
#nav li#user-profile ul.tabs li:first-child {
display: none;
}
#header-inner {
width: auto;
padding: 0;
}
}
There's some browser-default padding on your #nav list. Add padding: 0; to #nav and it should fix it.