chitrag

June 18, 2021

no answers found in wp forum

June 17, 2021

I have been working on wordpress with a templates and I do not know much of coding. Just using drag and drop site builder. But theme has additional .css code option where I can add some short of code and fix it. But which command fix the issue not sure.

June 16, 2021

Why my megamenu covers full page area instead of only menu area? how to fix it?

https://ibb.co/0Mf2Bbx

May 18, 2021

After adding

input {
width: 100%;
}

in additional .css area it worked fine. Thank you

May 16, 2021

When I insert quiz field in contact form, quiz field area goes out of size. How to fix it ? screenshot is attached

February 5, 2018

Here is the css file.

/* Visit http://www.menucool.com/responsive-slider for instructions */


#ninja-slider {
    width:100%;
    background:#FFF;
    padding: 0!important;

    margin:0 auto;
    overflow:hidden;
    box-sizing:border-box;
}

#ninja-slider .slider-inner {
    /*max-width:720px;*/
    margin:0 auto;/*center-aligned */
    font-size:0px;
    position:relative;
    box-sizing:border-box;
}

#ninja-slider ul {
    position:relative;
    list-style:none;
    padding:0;
    box-sizing:border-box;
    background:black;
}

#ninja-slider li {    
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: absolute;
    font-size:12px;
    list-style:none;
    margin:0;
    padding:0;
    opacity:0;
    overflow:hidden;
    box-sizing:border-box;
}


#ninja-slider li.ns-show {
    opacity:1;
}


/* --------- slider image ------- */  
#ninja-slider .ns-img {
    background-color:rgba(0,0,0,0.8);
    background-size:contain;/*Note: If transitionType is zoom, it will be overridden to cover.*/

    /*box-shadow: 0 1px 5px rgba(0,0,0,.8),inset 0 0 2px rgba(255,255,255,.4);*/
    border-radius:4px;

    cursor:default;
    display:block;
    position: absolute;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
}


/*---------- Captions -------------------*/

#ninja-slider .caption {
    font-size:10em;
    font-family: 'Bree Serif', sans-serif;
    position:absolute;
    width:100%;
    text-align:center;
    color:rgba(255,255,255,0.8);
    bottom:20%;
}
#ninja-slider li.ns-show .caption {
    /* 5s = (delay + transitionSpeed) set in the ninja-slider.js */
    -webkit-animation: titleAnimation 5s linear both;
    animation: titleAnimation 5s linear both;
}

#ninja-slider li.sl-0 .caption { 
    /*delay caption animation for the initial slide*/
    -webkit-animation: none;
    animation: none;
    display:none;
}

@keyframes titleAnimation { 
	0% { opacity:0; }
	10% { opacity:0;transform: translateY(-20%);}
	20% { opacity:1;transform: translateY(0%);}
	70% {opacity:1;transform: translateY(0%);}
	80% {opacity:0;transform: translateY(100%);}
	100% {opacity:0;transform: translateY(100%);}
}

@-webkit-keyframes titleAnimation { 
	0% { opacity:0; }
	10% { opacity:0; -webkit-transform:translateY(-20%);}
	25% { opacity:1; -webkit-transform:translateY(0%);}
	70% {opacity:1; -webkit-transform:translateY(0%);}
	80% {opacity:0; -webkit-transform:translateY(100%);}
	100% {opacity:0; -webkit-transform:translateY(100%);}
}

/* ---------Arrow buttons ------- */   
/* The arrow button id should be: slider id + ("-prev", "-next", and "-pause-play") */ 
/* Usually the ninja-slider.js will create the arrow buttons and pager(nav dots) automatically, unless you have added their markup manually to the HTML as this demo did.
   This demo has put them inside a DIV.navWrapper. 
*/  

div.navsWrapper {
    position:absolute;
    width:100px;
    height:50px;
    right:90px;
    bottom:9%;
    z-index:10;
}
 
#ninja-slider-prev, #ninja-slider-next
{
    position: absolute;
    display:inline-block;
    width:50px;
    height:50px;
    line-height:52px;
    margin:0;
    border:2px solid white;
    backface-visibility:hidden;
    color:white;
    overflow:hidden;
    -webkit-user-select: none;
    user-select:none;
    font-family:sans-serif;
    font-size:14px;
    transition:all 0.5s;
    cursor:pointer;
}

#ninja-slider-prev {
    left:auto; right:50%;
	margin-right:-2px;
}

#ninja-slider-next {
    left:50%; right:auto;
}

#ninja-slider-prev:hover, #ninja-slider-next:hover {width:80px;background-color:rgba(0,0,0,0.6);}

/*pagination within the prev/next buttons*/
#ninja-slider-prev div, #ninja-slider-next div {white-space:nowrap;opacity:0;position:absolute;}
#ninja-slider-prev div {left:6px;}
#ninja-slider-next div {right:6px;}
#ninja-slider-prev:hover div, #ninja-slider-next:hover div {opacity:1;}
#ninja-slider-prev:hover.disabled, #ninja-slider-next:hover.disabled {opacity:0.1;cursor:default;}

/* arrows */
#ninja-slider-prev::before, #ninja-slider-next::before {
    position: absolute;
    top: 17px;
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    border-left: 4px solid white;
    border-top: 4px solid white;
    backface-visibility:hidden;
}

#ninja-slider-prev::before {
    -ms-transform:rotate(-45deg);/*IE 9*/
    -webkit-transform:rotate(-45deg);
    transform: rotate(-45deg);
    right:15px;
}

#ninja-slider-next::before {
    -ms-transform:rotate(135deg);/*IE 9*/
    -webkit-transform:rotate(135deg);
    transform: rotate(135deg);
    left:15px;
}


/*------ pager(nav bullets) ------*/      
/* The pager id should be: slider id + "-pager" */
#ninja-slider-pager, #ninja-slider-pause-play { display:none;} 


/*Responsive settings*/
@media only screen and (max-width:500px){

    #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pager {
        display:none;
    }
}

@media only screen and (max-width:1100px){    
    #ninja-slider .caption {
        font-size:7em;
    }
}

@media only screen and (max-width:700px){    
    #ninja-slider .caption {
        font-size:3em;
    }
}

February 5, 2018

Thanks

Well, now my issue is resize of caption font. I reduced the font size 10em to 1em in css but no effect

February 5, 2018

<img class="ns-img" src="wp-content/uploads/2017/01/P3230023.jpg">

it works changing code as above

February 4, 2018

How to do that ?

February 4, 2018

It does not make difference after inserting  

February 4, 2018

Hi,

I am trying to insert this code in my wordpress page.

<!--start-->
    <div id="ninja-slider">
        <div class="slider-inner">
            <ul>
                <li>
                    <a class="ns-img" href="wp-content/uploads/2017/01/DSC0102-1.jpg"></a>
                    <div class="caption"></div>
                </li>
                <li>
                    <a class="ns-img" href="wp-content/uploads/2017/01/DSC0159.jpg"></a>
                    <div class="caption"></div>
                </li>
                <li>
                    <a class="ns-img" href="wp-content/uploads/2017/01/DSC_0097.jpg"></a>
                    <div class="caption"></div>
                </li>
                <li>
                    <a class="ns-img" href="wp-content/uploads/2017/01/DSCN0078-e1500520449485.jpg"></a>
                    <div class="caption"></div>
                </li>
                <li>
                    <a class="ns-img" href="wp-content/uploads/2017/01/P3200025.jpg"></a>
                    <div class="caption"></div>
                </li>
                <li>
                    <a class="ns-img" href="wp-content/uploads/2017/01/P3230075.jpg"></a>
                    <div class="caption"></div>
                </li>
                <li>
                    <a class="ns-img" href="wp-content/uploads/2017/01/P3230023.jpg"></a>
                    <div class="caption"></div>
                </li>
            </ul>
            <div class="navsWrapper">
                <div id="ninja-slider-prev"></div>
                <div id="ninja-slider-next"></div>
            </div>
        </div>
    </div>
    <!--end-->

After inserting this code in to text area and click on visual it displays as follows

<!--start-->
<code> </code>
<div id="ninja-slider">
<div class="slider-inner">
<ul>
 	<li>
<div class="caption"></div></li>
 	<li>
<div class="caption"></div></li>
 	<li>
<div class="caption"></div></li>
 	<li>
<div class="caption"></div></li>
 	<li>
<div class="caption"></div></li>
 	<li>
<div class="caption"></div></li>
 	<li>
<div class="caption"></div></li>
</ul>
<div class="navsWrapper">
<div id="ninja-slider-prev"></div>
<div id="ninja-slider-next"></div>
</div>
</div>
</div>
<!--end-->

Why this happening what's wrong with html code. I could not figure out ?

February 15, 2017

Hi

I have been using a tool to create responsive tab with wordpress theme but suddenly it is not working with desktop and large screen how to fix it ?

Example

October 19, 2016

Hi,

After applying Foundation 5 to make responsive menu in my site. Background color changed to white and page should look like this screenshot but it looks different.

Here is my css code



@charset "utf-8";

body {

margin: 0px;

padding: 0px;

background:url(images/bg.png);

}

.container

{

width:890px;

margin:auto;

}

.logo

{

padding:50px 0px;

font:bold 14px/50px Arial, Helvetica, sans-serif;

color:#fff;

display: inline;

}


.logo a:link, .logo a:visited, .logo a:active, .logo a:hover

{

font:bold 34px/50px Arial, Helvetica, sans-serif;

color:#858585;

letter-spacing:-3.5px;

text-decoration:none;

padding-right:20px;

}

.navigation ul

{

padding:0px;

margin:0px;

list-style:none;

background:#060606;

height:45px;

}

.navigation li

{

padding:0px;

margin:0px;

list-style:none;

float:left;

}

.navigation li a

{

padding:10px 25px;

background:#060606;

display:block;

font:18px Arial, Helvetica, sans-serif;

color:#858585;

text-decoration:none;

}

.navigation li a:hover

{

color:#fff;

background:#000;

}

.headerimage

{

border-bottom:solid 3px #060606;

padding-bottom:4px;

}

.left-panel

{

width:100%;

float:left;

position: relative;

}

.right-panel

{

width:235px;

float:right;

position: relative

padding-left:45px;


}

.left-panel h2

{

font:bold 34px/50px Arial, Helvetica, sans-serif;

color:#858585;

background:#060606;

letter-spacing:-3.5px;

padding:10px;

margin:0px;

display:inline;

}

.left-panel p,

.sohotext, .article_table

{

font:13px/17.5px Arial, Helvetica, sans-serif;

color:#858585;

}

.main-container

{

padding-top:40px;

}

.clear

{

clear:both;

}

.right-panel

{

font:14px Arial, Helvetica, sans-serif;

color:#c7d8ef;

}

.right-panel ul

{

padding:0px;

margin:0px;

list-style:none;

}

.right-panel li

{

background:#060606;

color:#c7d8ef;

padding:10px;

font:23px Arial, Helvetica, sans-serif;

margin-bottom:4px;

}

.footer

{

padding-top:30px;

}

.footer p

{

font:18px Arial, Helvetica, sans-serif;

color:#3b3b3b;

background:#060606;

display:inline;

padding:10px;

}


a:link {color: #1A5194; text-decoration: underline;}

a:visited {color: #1A5194; text-decoration: underline;}

a:active {color: #1A5194; text-decoration: underline;}

a:hover {color: #A5C6E6; text-decoration: none;}


.boxReadMore1 a:link {color: #1A5194; text-decoration: underline;}

.boxReadMore1 a:visited {color: #1A5194; text-decoration: underline;}

.boxReadMore1 a:active {color: #A5C6E6; text-decoration: underline;}

.boxReadMore1 a:hover {color: #A5C6E6; text-decoration: none !important;}




.navigation ul li{

position:relative;

}

.navigation ul ul{

text-align:left;

margin:0px;

padding:0px;

border:0px; 

list-style:none;

background:transparent;

}

.navigation ul ul li

{

padding:0px;

margin:0px;

}

.navigation li ul, .navigation li a ul{

visibility:hidden;

position:absolute;

top:30px;

left:0px;

z-index:1000;

margin:0px;

padding:0px;

}

.navigation li ul a{

display:block;

color:#fff;

padding:10px;

margin:0px;

height:auto;

border:none;

line-height:10px;

width:150px;

background:#000;

}

.navigation li:hover ul, #top-menu li a:hover ul{

display:block;

visibility:visible;


}

.navigation li li a:hover{ 

display:block;

color:#fff;

padding:10px;

margin:0px;

height:auto;

border:none;

line-height:10px;

width:150px;

color:#3d3c63;

background:#fff;

}


div.entry, .entry p {

color:#E2E2E2!important;

}


#content-parent {

color:#C0C0C0;

}


.FormLt1 {

 font-family : Arial;

 font-size : 8pt;

 cursor: hand;

 color: #ffffff;

}

Here is my site after Foundation 5 Application http://www.kalseeecolodge.com

August 29, 2016

Hello,

I am trying to use a widget with the following code but it does not work fully in my site. I could not figure out what is wrong. I followed all the steps but not worked.

<div class="mozio-widget" data-ref="mozio" data-theme="default" data-redirect="www.mozio.com">
<div class="mozio-widget-loading">
<img src="//widget.mozio.com/images/ajax.gif" class="mozio-ajax">
<p class="mozio-loading">Loading...</p>
<a href="https://www.mozio.com" target="_blank">
<img src="//widget.mozio.com/images/logo.png" alt="">
</a>
</div>
</div>
<script src="//widget.mozio.com/v1.2.0/mozio-widget.js" async></script>

Example as in my site;

http://www.egtours.com/Airport_Transfers.php

March 6, 2016

When I change these value as suggested in above custom.css all the contents goes below side menu.

Need additional code ? if so example

March 5, 2016

Hi,

I m looking to convert my vertical menu http://egtours.com to responsive. How can I make it.

my custom.css

html {
	height: 100%;
	margin-bottom: 1px;
}

body {
	margin: 0px;
	padding: 0px;
	background-color: #CCCCCC;
	
}

body,
td.sohotext,
td.text,
p,
span {
	font-family: sans-serif, Helvetica, Verdana, Arial;
	font-size: 13px;
	color: #525252;
	line-height: 140%;	
}

/* Fixes and hacks */

.clearfix:after {
	clear: both;
	display: block;
	content: ".";
	height: 0;
	visibility: hidden;
}

* html input.quick_signup {
	background-attachment: fixed;
	}

/*END - Fixes and Hacks */


/* Navigation */

#mainnav a:link, #mainnav a:visited  {

	color: #FFF;
	text-decoration: none;
	display: block;
	padding-right: 13px;
	float: left;
	padding-top: 5px;
	padding-left: 13px;
	padding-bottom: 5px;
	background-image: url(images/menu_div.jpg);
	background-repeat: no-repeat;
	background-repeat: repeat-x;
	background-position: right top;
}


#mainnav a:hover {
	color: #36CC2F;
	background-image: url(images/nav_active.jpg);
	background-repeat: repeat-x;
	background-position: right top;
	padding:4px 12px 4px;


}

.hmains {
    font-size: 100%;
}
#megamenu {  
        list-style-type:none;  
        width:95%;  
        margin: 3px auto 04px auto;  
        height:40px;  
        padding:2px 0px 3px 0px; 
}
table.vmenu_subs {
    margin-bottom: 30px;
	margin-top: 15px;
}

/*#leftav a:link, #leftnav a:visited, */
   a.vmenu_sub_off:link,
   a.vmenu_sub_off:visited,
   a.vmenu_sub_on:link,
   a.vmenu_sub_on:visited  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 95%;
	font-weight: bold;
	color: #000;
	background-image: url(images/sideNav_bullet.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #acacac;
	text-decoration: none;
	padding-left: 24px;
	display: block;
	width: 150px;
}

/*#leftav a:hover,*/
a.vmenu_sub_off:hover,
a.vmenu_sub_on:hover
a.vmenu_sub_off:active,
a.vmenu_sub_on:active  {
	color: #666;
}


a:link, a:visited {
	color: #00CC00;
	text-decoration: none;
}

a:hover {
	color: #009900;
	margin-top:0px;
margin-bottom:0px;
}

#feat a:link, #feat a:visited {
	color: #fdb417;
	text-decoration: none;
}

#feat a:hover {
	color: #fed27e;
}

/*END - Navigation */

#headwrapper {
	background-image: url(images/top_bg.png);
	background-repeat: 50% no-repeat;
	margin: 0px;
	padding: 0px;
	height: 109px;
	position: relative;
}
#featwrapper {
	background-color: #1e8019;
	height: 124px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #185d14;
	overflow: hidden;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #2b9d22;
}
#feat {
	max-width: 88%;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/feat_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 124px;
	color: #FFFFFF;
}
#navwrapper {
	background-color: #1e8019;
	height: 32px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #2b9d22;
	border-bottom-color: #185d14;
}
#nav {
	background-image: url(images/nav_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 32px;
	max-width:100%;
	margin-right: auto;
	margin-left: auto;
	color: #FFFFFF;
}
#contentwrapper {
	background-color: #ededf1;
	margin: 0px;
	padding: 0px;
}
#maincontent {
	background-image: url(images/content_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	max-width: 88%;
	margin-right: auto;
	margin-left: auto;
	background-color: #ededf1;
}
#mainnav {
	width: 72%;
	float: left;
	padding-left: 5px;
}
#signup {
	width: 25%;
	padding-left: 5px;
	float: left;
	height: 20px;
	padding-top: 2px;
	font-size: 85%;
	color: #cccccc;
	text-align: center;
}
#subnav {
	margin: 0px;
	float: left;
	min-width:155px;
	width: 25%;
	padding-top: 15px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;

}
#belowmenu {
	display: block;
	float: left;
	width: 100%;
	padding-top: 15px;
	padding-left: 5px;
	
}
div.sidebox {
	display: block;
	float: left;
	width: 100%;
}

#content {
	margin: 0px;
	width: 70%;
	float: left;
	padding-top: 12px;
	padding-right: 7px;
	padding-bottom: 12px;
	padding-left: 7px;
	overflow: visible;
}
#content-parent {
width: 100%;
}

#date {
	font-size: 90%;
	text-align: right;
	color: #858585;
}

#featleft {
	float: left;
	width: 25%;
	padding-left: 5px;
	padding-top: 5px;
}
#featright {
	float: left;
	width: 72%;
	padding-left: 10px;
	padding-top: 5px;
}

#footer {
	text-align: center;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	font-size: 85%;
	padding-bottom: 10px;
	color: #939393;
}

#head {
	height: 109px;
	max-width: 88%;
	margin-right: auto;
	margin-left: auto;
}
#logo_box {
	height: 109px;
	float: left;
	width: 28%;
}
#tagline {
	float: left;
	width: 70%;
	color: #999999;
	text-align: right;
	padding-top: 22px;
}

#logo {
	position: absolute;
	top: 3px;
}


#trimbar {
	background-color: #000000;
	margin: 0;
	padding: 0;
	height: 7px;
	width: 100%;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #333333;
}

div.newsbox {
    line-height: 115%;
}

/*hiding from IE mac \*/

* html .clearfix {
	height: 1%;
}

.clearfix {
    display: block;
}

/* end hiding from IE mac */


#footerwrapper {
	width: 100%;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #959595;
	background-color: #CCCCCC;
}
/* Integrated Styles */

.portfolio {
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #EFEFEF;
	width: 100%;
	overflow: auto;
}

span.alert, 
span.profile,
span.download,
span.search  {
	display: block;
    float: left;
	margin:  10px;
	padding: 10px 10px 10px 45px;
}

span.alert {
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_alert.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.profile {
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_profile.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.download {
    width: 100%; 
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_download.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.search {
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_search.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.product {
	color: #333333;
	background-color: #fff;
	border: 1px solid #b6b6b6;
	margin:  10px;
	padding: 10px;
	font-size: 10px;
	line-height: 145%;
	display: block;
}

blockquote {
	border-top: 4px solid #D3D3D3;
	border-bottom: 4px solid #D3D3D3;
	margin:  10px;
	padding: 10px 10px 5px 45px;
	background-color: #f5f5f5;
	background-image: url(images/quote1.png);
	background-repeat: no-repeat;
	background-position: 5px 5px;
}

blockquote p {
	padding-right: 35px;
	background-image: url(images/quote2.png);
	background-repeat: no-repeat;
	background-position: 100% 100%;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li { 
        background-image: url("images/li_bullet.gif");
        background-position: 0px 4px;
        background-repeat: no-repeat;
        overflow: hidden;/* added by dsonesuk as li cannot detect area of    floated 'a' elements*/
        padding-left: 14px;
        margin-left: 0px 4px;
        font-size: 12px;
}
 
ul, li {list-style-type:none !important;}
}

h4 {
	font-size: 115%;
	color: #333;
	margin-bottom: 5px;
	margin-top: 0px;
	padding: 0px;
}

#feat h4 {
	color: #fdb417;
}

h4 {
    font-size: 120%;
	color: #0066FF
}


h3 {
	font-size: 150%;
	color: #1E7D19;
}

h2 {
	font-size: 180%;
	color: #196115;
}
input.login_box {
	border: 0;
	height: 25px;
	width: 122px;
	padding-left: 30px;
	padding-top: 4px;
	background-image: url(images/login_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

input.pass_box {
	border: 0;
	height: 25px;
	width: 122px;
	padding-left: 30px;
	padding-top: 4px;
	background-image: url(images/password_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

input.quick_signup {
	border: 0;
	height: 19px;
	width: 168px;
	padding-left: 32px;
	padding-top: 3px;
	margin-top: 4px;
	background-image: url(images/quick_signup_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #ededed;
}

div#answer0,
div#answer1,
div#answer2,
div#answer3,
div#answer4,
div#answer5,
div#answer6,
div#answer7,
div#answer8,
div#answer9,
div#answer10 

{
        padding-left: 28px;
	padding-bottom: 10px;
	background-image: url(images/answer.gif);
	background-repeat: no-repeat;
	background-position: 2px 0;
}

table#Search_Form,
table#Search_Form2  {
    
}

table#Detail_Results2,
table#Initial_Results {
    margin-top: 15px;
}

.MegaMenu {
display:table;
margin: 0 auto !important;
height:29px;
background-color:transparent;

}

#mainnav table, #mainnav table tr th, #mainnav table tr td, #Container td {
	padding: 0px!important;
background:inherit!important;
}

#Container,.MegaMenuTable, .MegaMenuTable tr {
background:inherit!important;
}
table {
border-width:0px;
background:inherit;
}
table tr th, table tr td {
padding:inherit;
}
table tr.even, table tr.alt, table tr:nth-of-type(2n) {
background:inherit;
}
.sohotext p {
min-width:120px;
}
#tagline {
    bottom: 0;
    padding-top: 0px;
    position: absolute;
    right: 0;
	width:62%;
}
#tagline img {
margin: 0px 0px -12px; 
height: auto!important; 
max-width: 100%; 
width: auto!important; 
max-height: 68px;
min-height:45px;
}

February 22, 2016

Hi,

I tested imageslider in my site http://egtours.com/test.php

But it does not appear in full size.

#ninja-slider div.slider-inner {

    margin:0 auto;/*center-aligned */
    font-size:0px;
    position:relative;
    box-sizing:border-box;
}

#ninja-slider.fullscreen .slider-inner {
    width:95%;
    max-width:900px;
}

Make the slider full-width (100%)

Just remove the max-width setting in the ninja-slider.css, e.g.#ninja-slider div.slider-inner { ~~max-width:800px;~~ }

I made changes as above as advised from plug in maker but nothing change

February 17, 2016

Hi,

I m trying to customize image slider but not success. http://egtours.com/test.php here I tested my image slider but next and previous aero not appearing. Expand button coming over close button. Black boarder is more larger than normal. here is css file

/* Visit http://www.menucool.com/responsive-slider for instructions */

#ninja-slider {
    width:100%;
    background:#333;
    padding: 30px 0;

    margin:0 auto;
    overflow:hidden;
    box-sizing:border-box;
}

#ninja-slider.fullscreen {
    background:black;
}

#ninja-slider .fs-icon {
    top:10px;
    right:6px;
    width:60px;
    height:26px;
    background: rgba(0,0,0,0.3);
    z-index:2;
    color:white;
    text-align:center;
    font:bold 11px/26px arial;
    border:1px solid rgba(255,255,255,0.3);
    border-radius:2px;
    opacity:0;
    -webkit-transition:opacity 0.8s;
    transition:opacity 0.8s;
}

#ninja-slider .slider-inner:hover .fs-icon,
#ninja-slider.fullscreen .fs-icon {
    opacity: 1;
}

#ninja-slider .fs-icon::before {      
    content:"EXPAND";
    display:block;
}

#ninja-slider.fullscreen .fs-icon::before {
    content:"CLOSE";
}

#ninja-slider .slider-inner {
    max-width:500px
    margin:0 auto;/*center-aligned */
    font-size:0px;
    position:relative;
    box-sizing:border-box;
}

#ninja-slider.fullscreen .slider-inner {
    width:100%;
    max-width:950px;
}

#ninja-slider ul {
    /*overflow:hidden;*/
    position:relative;
    list-style:none;
    padding:0;
    box-sizing:border-box;
}

#ninja-slider li {
    
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: absolute;
    font-size:12px;
    list-style:none;
    margin:0;
    padding:0;
    opacity:0;
    overflow:hidden;
    box-sizing:border-box;
}

#ninja-slider li.ns-show {
    opacity:1;
}


/* --------- slider image ------- */  
#ninja-slider .ns-img {
    background-color:rgba(0,0,0,0.3);
    background-size:contain;/*Note: If transitionType is zoom, it will be overridden to cover.*/

    /*decorate border*/
    box-shadow: 0 1px 5px rgba(0,0,0,.8),inset 0 0 2px rgba(255,255,255,.4);
    border-radius:4px;

    cursor:default;
    display:block;
    position: absolute;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
}


/*---------- Captions -------------------*/
#ninja-slider .caption {
    padding:20px 40px;
    margin:auto;
    left:0;right:0;
    top:auto;bottom:8%;
    width:100%;
    text-align:center;
    font-family:sans-serif;
    font-size:2.2em;
    color:#fff;
    background:rgba(0,0,0,0.6);
    border:1px solid rgba(255,255,255,0.4);
    border-radius:4px;
    position:absolute;
    box-sizing:border-box;
    opacity:0;
    -webkit-transition:opacity 1s ease-in;
    transition:opacity 1s ease-in;
}
#ninja-slider li[class*='-s'] .caption {
    opacity:1;
}


/* ---------If there are videos ------- */ 
#ninja-slider .video, .video-playbutton-layer 
{
    top:0; left:0; border:0;
    width: 100%;height: 100%;
    text-align: center;
    background: black;
    position: absolute;    
}

/* And if you have added the HTML: <div class="video-playbutton-layer"></div> */
.video-playbutton-layer {
    background: transparent url(video-btn.png) no-repeat center center;
}

/* And if you have YouTube or Vimeo */
#ninja-slider div.stopVideoIcon 
{
    position:absolute;
    width:30px;height:30px;
    top:0;right:0px;
    margin:0 0 6px 6px;
    background:rgba(0,0,0,0.7);
    border-bottom-left-radius:4px;
    cursor:pointer;
}
#ninja-slider div.stopVideoIcon::before {
    content:"+";
    color:white;
    font:bold 30px/30px arial;
    -webkit-transform:rotate(45deg);
    transform: rotate(45deg);
    display:block;
}


/* ---------Arrow buttons ------- */   
/* The arrow button id should be: slider id + ("-prev", "-next", and "-pause-play") */   
#ninja-slider-pause-play { display:none;} 

#ninja-slider-prev, #ninja-slider-next
{
    position: absolute;
    display:inline-block;
    width:60px;
    height:100px;
    line-height:100px;
    top: 50%;
    margin:0;
    margin-top:-65px;/*pager's height should also be counted*/
    background-color:none;
    background-color:#ccc\9;/*IE8 hack*/
    backface-visibility:hidden;
    color:white;
    overflow:hidden;
    white-space:nowrap;
    -webkit-user-select: none;
    user-select:none;
    border-radius:3px; 
    z-index:10;
    opacity:0.2;
    cursor:pointer;
    font-family:sans-serif;
    font-size:11px;
    cursor:pointer;
    -webkit-transition:all 0.7s;
    transition:all 0.7s;
    -webkit-transform:scale(1,1.3);
    transform:scale(1,1.3);
    /*border:1px solid white;*/
}
#ninja-slider-prev:hover, #ninja-slider-next:hover {
    opacity:1;
    /*background-color:rgba(0,0,0,0.4);*/
}

#ninja-slider-prev {
    left: -70px;
}

#ninja-slider-next {
    right: -70px;
}

/*pagination within the prev/next buttons*/
#ninja-slider-prev div {opacity:0;margin-left:30px;transition:opacity 0.7s;}
#ninja-slider-next div {opacity:0;float:right;margin-right:30px;transition:opacity 0.7s;}
#ninja-slider-prev:hover div, #ninja-slider-next:hover div{opacity:1;}

/* arrows */
#ninja-slider-prev::before, #ninja-slider-next::before {
    position: absolute;
    top: 25px;
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    border-left: 3px solid #ccc;
    border-top: 3px solid #ccc;
}

#ninja-slider-prev::before {
    -ms-transform:rotate(-45deg);/*IE 9*/
    -webkit-transform:rotate(-45deg);
    transform: rotate(-45deg);
    backface-visibility:hidden;
    right:-16px;
}

#ninja-slider-next::before {
    -ms-transform:rotate(135deg);/*IE 9*/
    -webkit-transform:rotate(135deg);
    transform: rotate(135deg);
    backface-visibility:hidden;
    left:-16px;
}



/*------ pager(nav bullets) ------*/      
/* The pager id should be: slider id + "-pager" */
/* #ninja-slider-pager { display:none;}*/
#ninja-slider-pager
{
    padding-top:30px; /* set the distance away from the slider */
    margin:0 auto; /* center align */
    text-align:center;
    display:table;
    font-size:0;
}
         
#ninja-slider-pager a 
{
    display:inline-block;
    width: 10px;
    height: 10px;
    background-color: #888;
    font-size:0; /* Non-zero will show the index num */
    margin:2px 6px;
    cursor:pointer;
    border-radius:10px;
    box-shadow:inset 0 1px 3px #666666;
}

#ninja-slider-pager a:hover 
{
    opacity:0.6;
}
#ninja-slider-pager a.active 
{
    background-color:#ccc;
    box-shadow:0 1px 1px rgba(0,0,0,.5);
}

   

#ninja-slider-pager, #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pause-play
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}


/*------ Responsive settings ------*/
@media only screen and (max-width:950px){
    
    #ninja-slider-prev {
        left: -12px;
    }

    #ninja-slider-next {
        right: -12px;
    }
}

@media only screen and (max-width:600px){
      
    #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pager {
        display:none;
    }
}

February 12, 2016

I think using foundation.css making these issues. Now all is well using custom.css

February 11, 2016

Hi,

After applying foundation.css in my site, tooltips and lightbox are not working and fonts are being big.

Tool tips

http://egtours.com/

Lightbox

http://www.egtours.com/10_days_nepal_trip.php click in photo gallery

my custom.css file

html {
	height: 100%;
	margin-bottom: 1px;
}

body {
	margin: 0px;
	padding: 0px;
	background-color: #CCCCCC;
	
}

body,
td.sohotext,
td.text,
p,
span {
	font-family: sans-serif, Helvetica, Verdana, Arial;
	font-size: 13px;
	color: #525252;
	line-height: 140%;	
}

/* Fixes and hacks */

.clearfix:after {
	clear: both;
	display: block;
	content: ".";
	height: 0;
	visibility: hidden;
}

* html input.quick_signup {
	background-attachment: 100%;
	}

/*END - Fixes and Hacks */


/* Navigation */

#mainnav a:link, #mainnav a:visited  {

	color: #FFF;
	text-decoration: none;
	display: block;
	padding-right: 13px;
	float: left;
	padding-top: 5px;
	padding-left: 13px;
	padding-bottom: 5px;
	background-image: url(images/menu_div.jpg);
	background-repeat: no-repeat;
	background-repeat: repeat-x;
	background-position: right top;
}


#mainnav a:hover {
	color: #36CC2F;
	background-image: url(images/nav_active.jpg);
	background-repeat: repeat-x;
	background-position: right top;
	padding:4px 12px 4px;


}

.hmains {
    font-size: 100%;
}
#megamenu {  
        list-style-type:none;  
        width:100%;  
        margin: 3px auto 04px auto;  
        height:40px;  
        padding:2px 0px 3px 0px; 
}
table.vmenu_subs {
    margin-bottom: 30px;
	margin-top: 15px;
}

/*#leftav a:link, #leftnav a:visited, */
   a.vmenu_sub_off:link,
   a.vmenu_sub_off:visited,
   a.vmenu_sub_on:link,
   a.vmenu_sub_on:visited  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 95%;
	font-weight: bold;
	color: #000;
	background-image: url(images/sideNav_bullet.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #acacac;
	text-decoration: none;
	padding-left: 24px;
	display: block;
	width: 150px;
}

/*#leftav a:hover,*/
a.vmenu_sub_off:hover,
a.vmenu_sub_on:hover
a.vmenu_sub_off:active,
a.vmenu_sub_on:active  {
	color: #666;
}


a:link, a:visited {
	color: #00CC00;
	text-decoration: none;
}

a:hover {
	color: #009900;
	margin-top:0px;
margin-bottom:0px;
}

#feat a:link, #feat a:visited {
	color: #fdb417;
	text-decoration: none;
}

#feat a:hover {
	color: #fed27e;
}

/*END - Navigation */

#headwrapper {
	background-image: url(images/top_bg.png);
	background-repeat: 50% no-repeat;
	margin: 0px;
	padding: 0px;
	height: 109px;
	position: relative;
}
#featwrapper {
	background-color: #1e8019;
	height: 124px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #185d14;
	overflow: hidden;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #2b9d22;
}
#feat {
	max-width: 880px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/feat_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 124px;
	color: #FFFFFF;
}
#navwrapper {
	background-color: #1e8019;
	height: 32px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #2b9d22;
	border-bottom-color: #185d14;
}
#nav {
	background-image: url(images/nav_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 32px;
	max-width:880px;
	margin-right: auto;
	margin-left: auto;
	color: #FFFFFF;
}
#contentwrapper {
	background-color: #ededf1;
	margin: 0px;
	padding: 0px;
}
#maincontent {
	background-image: url(images/content_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	max-width: 880px;
	margin-right: auto;
	margin-left: auto;
	background-color: #ededf1;
}
#mainnav {
	width: 72%;
	float: left;
	padding-left: 5px;
}
#signup {
	width: 25%;
	padding-left: 5px;
	float: left;
	height: 20px;
	padding-top: 2px;
	font-size: 85%;
	color: #cccccc;
	text-align: center;
}

#subnav {
	margin: 0px;
	float: left;
	min-width:155px;
	width: 25%;
	padding-top: 15px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;

}
#belowmenu {
	display: block;
	float: left;
	width: 210px;
	padding-top: 15px;
	padding-left: 5px;
	
}
div.sidebox {
	display: block;
	float: left;
	width: 210px;
}

#content {
	margin: 0px;
	width: 70%;
	float: left;
	padding-top: 12px;
	padding-right: 7px;
	padding-bottom: 12px;
	padding-left: 7px;
	overflow: visible;
}
#date {
	font-size: 90%;
	text-align: right;
	color: #858585;
}

#featleft {
	float: left;
	width: 25%;
	padding-left: 5px;
	padding-top: 5px;
}
#featright {
	float: left;
	width: 72%;
	padding-left: 10px;
	padding-top: 5px;
}

#footer {
	text-align: center;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	font-size: 85%;
	padding-bottom: 10px;
	color: #939393;
}

#head {
	height: 109px;
	max-width: 880px;
	margin-right: auto;
	margin-left: auto;
}
#logo_box {
	height: 109px;
	float: left;
	width: 28%;
}
#tagline {
	float: left;
	width: 70%;
	color: #999999;
	text-align: right;
	padding-top: 22px;
}

#logo {
	position: absolute;
	top: 3px;
}


#trimbar {
	background-color: #000000;
	margin: 0;
	padding: 0;
	height: 7px;
	width: 100%;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #333333;
}

div.newsbox {
    line-height: 115%;
}

/*hiding from IE mac \*/

* html .clearfix {
	height: 1%;
}

.clearfix {
    display: block;
}

/* end hiding from IE mac */


#footerwrapper {
	width: 100%;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #959595;
	background-color: #CCCCCC;
}
/* Integrated Styles */

.portfolio {
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #EFEFEF;
	width: 100%;
	overflow: auto;
}

span.alert, 
span.profile,
span.download,
span.search  {
	display: block;
    float: left;
	margin:  10px;
	padding: 10px 10px 10px 45px;
}

span.alert {
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_alert.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.profile {
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_profile.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.download {
    width: 100%; 
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_download.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.search {
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_search.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.product {
	color: #333333;
	background-color: #fff;
	border: 1px solid #b6b6b6;
	margin:  10px;
	padding: 10px;
	font-size: 10px;
	line-height: 145%;
	display: block;
}

blockquote {
	border-top: 4px solid #D3D3D3;
	border-bottom: 4px solid #D3D3D3;
	margin:  10px;
	padding: 10px 10px 5px 45px;
	background-color: #f5f5f5;
	background-image: url(images/quote1.png);
	background-repeat: no-repeat;
	background-position: 5px 5px;
}

blockquote p {
	padding-right: 35px;
	background-image: url(images/quote2.png);
	background-repeat: no-repeat;
	background-position: 100% 100%;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li { 
        background-image: url("images/li_bullet.gif");
        background-position: 0px 4px;
        background-repeat: no-repeat;
        overflow: hidden;/* added by dsonesuk as li cannot detect area of    floated 'a' elements*/
        padding-left: 14px;
        margin-left: 0px 4px;
        font-size: 12px;
}
 
ul, li {list-style-type:none !important;}
}

h4 {
	font-size: 115%;
	color: #333;
	margin-bottom: 5px;
	margin-top: 0px;
	padding: 0px;
}

#feat h4 {
	color: #fdb417;
}

h4 {
    font-size: 120%;
	color: #0066FF
}


h3 {
	font-size: 150%;
	color: #1E7D19;
}

h2 {
	font-size: 180%;
	color: #196115;
}
input.login_box {
	border: 0;
	height: 25px;
	width: 122px;
	padding-left: 30px;
	padding-top: 4px;
	background-image: url(images/login_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

input.pass_box {
	border: 0;
	height: 25px;
	width: 122px;
	padding-left: 30px;
	padding-top: 4px;
	background-image: url(images/password_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

input.quick_signup {
	border: 0;
	height: 19px;
	width: 168px;
	padding-left: 32px;
	padding-top: 3px;
	margin-top: 4px;
	background-image: url(images/quick_signup_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #ededed;
}

div#answer0,
div#answer1,
div#answer2,
div#answer3,
div#answer4,
div#answer5,
div#answer6,
div#answer7,
div#answer8,
div#answer9,
div#answer10 

{
        padding-left: 28px;
	padding-bottom: 10px;
	background-image: url(images/answer.gif);
	background-repeat: no-repeat;
	background-position: 2px 0;
}

table#Search_Form,
table#Search_Form2  {
    
}

table#Detail_Results2,
table#Initial_Results {
    margin-top: 15px;
}

.MegaMenu {
display:table;
margin: 0 auto !important;
height:29px;
background-color:transparent;

}

#mainnav table, #mainnav table tr th, #mainnav table tr td, #Container td {
	padding: 0px!important;
background:inherit!important;
}

#Container,.MegaMenuTable, .MegaMenuTable tr {
background:inherit!important;
}
table {
border-width:0px;
background:inherit;
}
table tr th, table tr td {
padding:inherit;
}
table tr.even, table tr.alt, table tr:nth-of-type(2n) {
background:inherit;
}
.sohotext p {
min-width:120px;
}
#tagline {
    bottom: 0;
    padding-top: 0px;
    position: absolute;
    right: 0;
	width:62%;
}
#tagline img {
margin: 0px 0px -12px; 
height: auto!important; 
max-width: 100%; 
width: auto!important; 
max-height: 68px;
min-height:45px;
}

foundation.css

index.html

February 9, 2016

Hello,

I am also trying to make responsive menu and pages but still not worked. As I used instruction from my site builder to use foundation

I applied their instructions after that I got result as in my site

All drop down menu is white, side vertical menu background also white, footer also white.

which .css file should correct foundation.css or custom.css ?

February 1, 2016

Hello,

I have been using soho site builder (soholaunch.com) provided by my hosting company (vodahost.com) which is online.

I m considering to use drop down menu from ( http://www.menucool.com/drop-down-menu ) if possible.

I have custom.css file as follows. how can I customize or use above with my custom.css ?

html {
	height: 100%;
	margin-bottom: 1px;
}

body {
	margin: 0px;
	padding: 0px;
	background-color: #CCCCCC;
	
}

body,
td.sohotext,
td.text,
p,
span {
	font-family: sans-serif, Helvetica, Verdana, Arial;
	font-size: 13px;
	color: #525252;
	line-height: 140%;	
}

/* Fixes and hacks */

.clearfix:after {
	clear: both;
	display: block;
	content: ".";
	height: 0;
	visibility: hidden;
}

* html input.quick_signup {
	background-attachment: fixed;
	}

/*END - Fixes and Hacks */


/* Navigation */

#mainnav a:link, #mainnav a:visited  {

	color: #FFF;
	text-decoration: none;
	display: block;
	padding-right: 13px;
	float: left;
	padding-top: 8px;
	padding-left: 13px;
	padding-bottom: 7px;
	background-image: url(images/menu_div.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}


#mainnav a:hover {
	color: #36CC2F;
	background-image: url(images/nav_active.jpg);
	background-repeat: repeat-x;
	background-position: right top;
}

.hmains {
    font-size: 100%;
}
#megamenu {  
        list-style-type:none;  
        width:100%;  
        margin: 3px auto 04px auto;  
        height:40px;  
        padding:2px 0px 3px 0px; 
}
table.vmenu_subs {
    margin-bottom: 30px;
	margin-top: 15px;
}

/*#leftav a:link, #leftnav a:visited, */
   a.vmenu_sub_off:link,
   a.vmenu_sub_off:visited,
   a.vmenu_sub_on:link,
   a.vmenu_sub_on:visited  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 95%;
	font-weight: bold;
	color: #000;
	background-image: url(images/sideNav_bullet.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #acacac;
	text-decoration: none;
	padding-left: 24px;
	display: block;
	width: 150px;
}

/*#leftav a:hover,*/
a.vmenu_sub_off:hover,
a.vmenu_sub_on:hover
a.vmenu_sub_off:active,
a.vmenu_sub_on:active  {
	color: #666;
}


a:link, a:visited {
	color: #00CC00;
	text-decoration: none;
}

a:hover {
	color: #009900;
}

#feat a:link, #feat a:visited {
	color: #fdb417;
	text-decoration: none;
}

#feat a:hover {
	color: #fed27e;
}

/*END - Navigation */

#headwrapper {
	background-image: url(images/top_bg.png);
	background-repeat: repeat;
	margin: 0px;
	padding: 0px;
	height: 109px;
	position: relative;
}
#featwrapper {
	background-color: #1e8019;
	height: 124px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #185d14;
	overflow: hidden;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #2b9d22;
}
#feat {
	width: 880px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/feat_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 124px;
	color: #FFFFFF;
}
#navwrapper {
	background-color: #1e8019;
	height: 32px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #2b9d22;
	border-bottom-color: #185d14;
}
#nav {
	background-image: url(images/nav_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 32px;
	width:880px;
	margin-right: auto;
	margin-left: auto;
	color: #FFFFFF;
}
#contentwrapper {
	background-color: #ededf1;
	margin: 0px;
	padding: 0px;
}
#maincontent {
	background-image: url(images/content_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	width: 880px;
	margin-right: auto;
	margin-left: auto;
	background-color: #ededf1;
}
#mainnav {
	width: 72%;
	float: left;
	padding-left: 5px;
}
#signup {
	width: 25%;
	padding-left: 5px;
	float: left;
	height: 20px;
	padding-top: 2px;
	font-size: 85%;
	color: #cccccc;
	text-align: center;
}

#subnav {
	margin: 0px;
	float: left;
	width: 25%;
	padding-top: 15px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;

}
#belowmenu {
	display: block;
	float: left;
	width: 210px;
	padding-top: 15px;
	padding-left: 5px;
	
}
div.sidebox {
	display: block;
	float: left;
	width: 210px;
}

#content {
	margin: 0px;
	width: 70%;
	float: left;
	padding-top: 12px;
	padding-right: 7px;
	padding-bottom: 12px;
	padding-left: 7px;
	overflow: hidden;
}
#date {
	font-size: 90%;
	text-align: right;
	color: #858585;
}

#featleft {
	float: left;
	width: 25%;
	padding-left: 5px;
	padding-top: 5px;
}
#featright {
	float: left;
	width: 72%;
	padding-left: 10px;
	padding-top: 5px;
}

#footer {
	text-align: center;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	font-size: 85%;
	padding-bottom: 10px;
	color: #939393;
}

#head {
	height: 109px;
	width: 880px;
	margin-right: auto;
	margin-left: auto;
}
#logo_box {
	height: 109px;
	float: left;
	width: 28%;
}
#tagline {
	float: left;
	width: 70%;
	color: #999999;
	text-align: right;
	padding-top: 22px;
}

#logo {
	position: absolute;
	top: 3px;
}


#trimbar {
	background-color: #000000;
	margin: 0;
	padding: 0;
	height: 7px;
	width: 100%;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #333333;
}

div.newsbox {
    line-height: 115%;
}

/*hiding from IE mac \*/

* html .clearfix {
	height: 1%;
}

.clearfix {
    display: block;
}

/* end hiding from IE mac */


#footerwrapper {
	width: 100%;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #959595;
	background-color: #CCCCCC;
}
/* Integrated Styles */

.portfolio {
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #EFEFEF;
	width: 100%;
	overflow: auto;
}

span.alert, 
span.profile,
span.download,
span.search  {
	display: block;
    float: left;
	margin:  10px;
	padding: 10px 10px 10px 45px;
}

span.alert {
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_alert.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.profile {
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_profile.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.download {
    width: 100%; 
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_download.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.search {
	color: #333333;
	background-color: #dddddd;
	border-bottom: 4px solid #b6b6b6;
	border-top: 4px solid #b6b6b6;
	background-image: url(images/span_search.jpg);
	background-repeat: no-repeat;
	background-position: 7px 12px;
}

span.product {
	color: #333333;
	background-color: #fff;
	border: 1px solid #b6b6b6;
	margin:  10px;
	padding: 10px;
	font-size: 10px;
	line-height: 145%;
	display: block;
}

blockquote {
	border-top: 4px solid #D3D3D3;
	border-bottom: 4px solid #D3D3D3;
	margin:  10px;
	padding: 10px 10px 5px 45px;
	background-color: #f5f5f5;
	background-image: url(images/quote1.png);
	background-repeat: no-repeat;
	background-position: 5px 5px;
}

blockquote p {
	padding-right: 35px;
	background-image: url(images/quote2.png);
	background-repeat: no-repeat;
	background-position: 100% 100%;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li { 
        background-image: url("images/li_bullet.gif");
        background-position: 0px 4px;
        background-repeat: no-repeat;
        overflow: hidden;/* added by dsonesuk as li cannot detect area of    floated 'a' elements*/
        padding-left: 14px;
        margin-left: 0px 4px;
        font-size: 12px;
}
 
ul, li {list-style-type:none !important;}
}

h4 {
	font-size: 115%;
	color: #333;
	margin-bottom: 5px;
	margin-top: 0px;
	padding: 0px;
}

#feat h4 {
	color: #fdb417;
}

h4 {
    font-size: 120%;
	color: #0066FF
}


h3 {
	font-size: 150%;
	color: #1E7D19;
}

h2 {
	font-size: 180%;
	color: #196115;
}
input.login_box {
	border: 0;
	height: 25px;
	width: 122px;
	padding-left: 30px;
	padding-top: 4px;
	background-image: url(images/login_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

input.pass_box {
	border: 0;
	height: 25px;
	width: 122px;
	padding-left: 30px;
	padding-top: 4px;
	background-image: url(images/password_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

input.quick_signup {
	border: 0;
	height: 19px;
	width: 168px;
	padding-left: 32px;
	padding-top: 3px;
	margin-top: 4px;
	background-image: url(images/quick_signup_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #ededed;
}

div#answer0,
div#answer1,
div#answer2,
div#answer3,
div#answer4,
div#answer5,
div#answer6,
div#answer7,
div#answer8,
div#answer9,
div#answer10 

{
        padding-left: 28px;
	padding-bottom: 10px;
	background-image: url(images/answer.gif);
	background-repeat: no-repeat;
	background-position: 2px 0;
}

table#Search_Form,
table#Search_Form2  {
    
}

table#Detail_Results2,
table#Initial_Results {
    margin-top: 15px;
}

January 31, 2016

What can be the better code work with it. for example ? How to validate code ?

January 31, 2016

<span class="tooltip" onmouseover="tooltip.pop(this, '#demo1_tip')">
    <a href="http://www.egtours.com/10_days_nepal_trip.php"><img src="http://www.egtours.com/images/10daysnepal/thumbs/_DSC0160.jpg"><p>10 Days Nepal Trip</p></a>
</span> 
<div style="display:none;">
    <div id="demo1_tip">
        <a href="http://www.egtours.com/10_days_nepal_trip.php"><h3>10 Days Nepal Trip</h3></a>
        <img src="http://www.egtours.com/images/buddhist/5t.jpg" style="float:right;" />
    	<i><p>City Tour, Culture, People, Wildlife Viewing, Hiking & more</p></i>
			<font color="#CC0000"><b>Price from US$ 1645</b> <p><a href="http://egtours.trekksoft.com/en/tours/15420/10-days-nepal-trip">Check 
			here</a></p>
    </div>
</div>

Above code works fine. But html validation says error

egtours.com/images/eastern/thumbs/DSCF0713.jpg"></a><p>Eastern Himalayas</p>

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

How to fix ?

January 29, 2016

I used bootstrap css and js file in my page. But still it says my contents are larger than screen.

Sign In

chitrag

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by chitrag

Megamenu

Megamenu

Megamenu

Form field goes out of scale

Form field goes out of scale

HTML code creates many div and breaks links

HTML code creates many div and breaks links

HTML code creates many div and breaks links

HTML code creates many div and breaks links

HTML code creates many div and breaks links

HTML code creates many div and breaks links

Responsive tabs not working

Foundation application issues

widgets not working with my site.

covert vertical menu to responsive

covert vertical menu to responsive

Why image slider not appearing in full size ?

image slider re-sizing issues

Lightbox and tool tips is not working

Lightbox and tool tips is not working

CSS: Responsive Navigation Menu

Drop Down Menu plugin

tool tip

tool tip

How to configure mobile friendly page

Browse

Activity