DIV content overflows into footer, makes footer go upward on page - css

IM trying to get the div content not to flow past the footer, I want the content div to expand as the page expands, but when the text goes past the footer, it causes the footer to jump upward on the page
html, body {
margin:0; /top, right, bottom, left/
padding:0; /top, right, bottom, left/
height:100%;
}
container {
position:fixed;
top:0;
left:0;
width:100%;
margin: 0 auto -100px;
height: auto;
min-height:100%;
}
content {
position: relative;
padding-bottom:100px;
overflow:auto;
height:100%;
}
Header, #Footer {
position: absolute;
width:100%;
background:url('bglines.png');
background-size:15px 15px;
color:white;
padding:0 auto;
text-align:center;
color:#2FAACE;
}
Footer {
margin-top: 100px;
clear:both;
}
menu {
position:absolute;
list-style-type:none;
background: #808080;
width:100%;
padding: 85px 0px 0px 0px; /* Always on top */
}
ptop {
text-transform:uppercase;
font-family:impact;
font-size:40pt;
margin: 15px auto;
color:#2FAACE;
}
pbottom {
font-family:times;
font-size:14pt;
color:#2FAACE;
}
main {
position: absolute;
text-align:center;
left:50%;
width:90%;
margin-left: -45%;
top:150px;
color:white;
padding-bottom:100px;
}
p {
font-size: 75px;
color:white;
}
mainbg {
background:#CCCCCC;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
left:50px;
width:95%;
top:150px;
position: absolute;
}
li {
line-height:40px;
margin:0px 0px 0px 0px;
padding:0px 5px 5px 0px;
text-align:center;
float:left;
}
a, a:hover {
display:block;
font-family:Georgia;
width: 75px;
text-decoration:none;
font-size:30px;
}
a { color:white; }
a:Hover {
background:#2FAACE;
border-radius:9px 9px 9px 9px;
color:#FFFFFF; /*TL, TR, BR, BL*/
}

Please add a div with clear:both before footer. It actually clears all floating which fixes the footer to stay at bottom.
<div style="clear:both;"></div>
OR if you have defined class (clear) in your style then
<div class="clear"></div>

Related

How can I FIX/CHANGE the almost invisible Menu Items in my Website's Mobile Version? (Used to be fine then Weebly made changes)

BACKGROUND
Years ago, I built my first Weebly website for my business ( www.smehelper.com )
The mobile version 'used to' look great!
SINCE THEN
However... Weebly made some changes a year or so ago ( I don't know what ),
since then, regardless of what CSS I've tried in an attempt to overide things, I can't seem to make it change.
NOOB APOLOGIES
Apologies if I'm using wrong terminology, I work in Marketing for a living and specialise in Lead Generation, however, I love to learn various items.
www.smehelper.com
SOURCE CODE
The following is ALL the CSS. Apologies for being a noob - Let me know if there's any other code/files you need 👍
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input{margin:0; padding:0}
ul{list-style:none}
fieldset{border:0}
img{
/*box-shadow: 2px 2px 7px #AAAAAA;*/
/*-webkit-box-shadow: 4px 2px 7px #AAAAAA;*/
/*16px=1em*/
}
html{width:100%}
body{
width:100%;
margin:0;
padding:0;
background-color:#eeeded;
font-family:Trebuchet MS,sans-serif;
/*font-size:14px;*/
color:#eeeded;
/*background: url(bodybg1400x790_planks.jpg);*/
background:url("Swansea-Marketing-Consultant-Workshops-1280x1024.jpg") top no-repeat fixed; /* top center no-repeat fixed */
background-size: 100% auto;
}
/* #bg{ */
/* background:url("Swansea-Marketing-Consultant-Workshops-1280x1024.jpg") top center no-repeat fixed;*/
/* } */
blockquote{
margin: 5px 0;
padding-left: 10px;
border-left: 7px solid orange !important;
font: normal 1.3em;
/*font-size:1.2em;
font-style: normal !important;
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;*/
line-height: 160%;
}
blockquote em {
/*font: #ffcc00 !important;*/ /*orange*/
/*font-style: bold !important;
font-size: 1.4em !important;*/
font: bold 1.4em #ffcc00 !important;
}
/*.thought via https://codepen.io/quadbaup/pen/rKOKQv (also in GglDrv_growth-dev_*/
a img{border:0}
a{text-decoration: underline; color:#4db7c8;}
.clear{clear:both}
p{line-height:130%; color:#eeeded; font-size:14px; padding-bottom:10px}
em, ul em {
color:#ffcc00;/*yellow*/
}
h1{font-size:24px; font-weight:bold; color:#4db7c8; margin:0px 0px 10px 0px}
h2{
font-family:arial,sans-serif;
font-size:18px;
line-height:130%;
font-weight:normal;
letter-spacing:2px;
color:#ffc000; /*orig-turqiouse: #4db7c8*/ /*cccccc=Orig grey SW chose OR ffbc66=orange equiv of h2:first-line OR ffc000=warm-bright-yellow */
margin:18px 0px 2px 0px; /*12px 0px 12px 0px*/
/*background-color:yellow;*/
}
h2:bold {
font-size:11px;
color:#4B4B4B;
font-weight: normal;
text-transform:uppercase;
letter-spacing:-3px;
padding: 8px 0px 0px 0px;
}
/*
h2 a:link {
color:white;
text-decoration:none;
/*line-height:150%;*/
/*}*/
/*h2 a:visited {*/
/*color:white;*/
/*}*/
h2 a:hover {
color:white;
text-decoration:underline;
}
h2 a:active {
text-decoration:underline;
/*background-color:yellow;*/
}
h2:first-line {
text-transform:uppercase;
font-size:1.5em; /*SW's orig 18px pre feb'14 - 16px=1em - pre march 15: 1.3em*/
/*font-variant: small-caps; /*pre mar'15=normal*/
line-height:150%; /*pre mar'15=130%*/
color:#66ccff;/*lime: #9dc205*/
letter-spacing:normal;
}
#header{
position:fixed;
top:0px; left:0px;
width:980px;
height:auto;
margin:0pt;
padding:0pt;
border:1px solid green;
background:pink;
}
#line {position:fixed; width:100%; height:125px; margin-top:60px; background:transparent url(navbg.png) repeat-x; z-index:2; border:1px solid green;}
#wrapper { /* this is the header to footer but not whole site background */
position:relative;
z-index:2;
width:980px;
height:100%/*150px*/;
margin:0pt auto;
}
.logo {
z-index:1000;
position:fixed;
top:0px; /*left:0px;*/
margin:0px auto;
width:980px; height:125px;/*width:980px; height:165px;*/ /*Area independent of Nav.*/
background:url("small-business-helper-digital-marketing-for-UK-small-businesses-80pc-30pc.png") no-repeat left center; /*fyi.logo is 980x118*/
/*background:url("small-business-helper-holistic-e-business-consultancy.png") no-repeat left center; /*fyi.logo is 980x118*/
/*background-color:black; opacity:0.50; -moz-opacity:92; filter:alpha(opacity=95);*/ /*use shaded header png instead*/
}
.logo a{
/*display:block;*/
width:100%; height:100%;/*set clickable area*/
text-indent:-9999px;
overflow:hidden;
}
#telephone { /*for right hand side div element*/
float: right;
width: 500px;
font-family: Georgia, "Times New Roman", Times, serif;
color: white;
font-size: 14px;
text-align: right;
}
#telephone .number { /*for addressing class:number within right hand side div telephone element*/
font-size: 34px;
}
#telephone #email a {
text-transform: uppercase;
color: white;
text-decoration: none;
font-size: 15px;
line-height: 24px;
}
.navContainer{ /*FULL WIDTH BAR*/
z-index:5;
position:fixed; top:125px; left:0;
height:35px /*50px*/; width:100%; /*aligns whole nav elements*/
/*margin:2px auto;*/
background:url("shadow1.png");
}
.frame{/*frame for nav area*/
/*width:980px; height:55px;*/
width:980px; height:35px; /*width:980px; height:173px;*/
margin:0px auto/*4px auto 0px auto*/;
/*border:1px solid purple;*/
}
.wsite-mobile-menu {
background: url(theme/shadow1.png?1645107290);!important
}
.wsite-mobile-menu .wsite-menu-mobile-arrow {
color: red; !important
<!-- border: none; -->
<!-- width: 16px; -->
<!-- height: 16px; -->
<!-- top: 5px; -->
<!-- left: 0; -->
<!-- background: url(theme/shadow1.png?1645107290) top left no-repeat; -->
background: url(theme/shadow1.png?1645107290);!important
<!-- background-size: 16px 16px; -->
}
.wsite-mobile-menu li a {
<!-- font-weight: 300; -->
color: red;!important
<!-- padding: 15px; -->
<!-- font-size: 16px; -->
<!-- border-bottom: 1px solid #111 !important; -->
<!-- text-shadow: 0 1px 0 rgb(0 0 0 / 70%); -->
<!-- box-shadow: inset 0 0 1px rgb(255 255 255 / 20%), inset 0 1px 2px rgb(255 255 255 / 10%); -->
background: url(theme/shadow1.png?1645107290);!important
}
.wsite-mobile-menu li a {
<!-- font-size: 1em; -->
<!-- line-height: 1.5; -->
<!-- padding: 8px 10px; -->
<!-- color: white; -->
<!-- text-decoration: none; -->
<!-- display: block; -->
cursor: pointer;
-webkit-tap-highlight-color: blue;!important
}
.wsite-mobile-menu a:hover, #active a{
background-repeat:repeat-x;!important
background-position:0 100%;!important
color:blue/*txt hover color*/;!important
}
.mainNav{ /*actual nav textual area*/
width:980px; /*changing this width wraps all main nav bullet elements*/
font:14px Arial,sans-serif;
color:#fff;
/*margin:0px; */
/*background:url("weebly-menu.png") no-repeat -9999px -9999px;*/
margin:0px auto;
/*border:1px solid red;*/
}
/*when changing all nav height change line-height also.*/
.mainNav a{
display:inline-block;
color:white;
text-decoration:none;
padding:0px 13px;
width:auto;
height:34px;
line-height:34px/*42px*/; /*this aligns the nav text elements vertically*/
margin:0px auto;
background:transparent url("MainNavActive.png") no-repeat -9999px -9999px;
/*border:1px solid red;*/
/*background-color:black; opacity:0.92; -moz-opacity:92; filter:alpha(opacity=95);*/
}
.mainNav a:hover, #active a{
background-repeat:repeat-x;
background-position:0 100%;
color:#00a1b4/*txt hover color*/;
}
.mainNav ul{
margin:0 auto;
list-style:none;
background:url("bullet-weebly-menu.png") no-repeat -9999px -9999px;
}
.mainNav li{
float:left;
}
.mainNav ul li.weebly-nav-more{
background:none;
} /*unsure of usage*/
#weebly-menus .weebly-menu-wrap{
position:absolute; top:25px; left:70%;
width:250px; /*use to set + constrain width for drop downs*/
margin:0px;
/*background:black; opacity:0.85; -moz-opacity:92; filter:alpha(opacity=95);*/ /*initial excess blocks upon initial expansion*/
}
#weebly-menus span.weebly-menu-more{ /*controls the 'more arrows' i.e.>. */
height:100% /*39px*/;
Margin:auto 0px;
padding:auto 0px;
}
#weebly-menus .weebly-menu{
margin:0;
list-style:none;
}
#weebly-menus .weebly-menu li{
float:none; /*controls float/alignment from one sub item to the next e.g.vertical v left=horizontal*/
clear:none;
width:100%; /*sets background width of drop downs*/ vertical-align:top;
}
#weebly-menus .weebly-menu li a{/*this is the actual drop down backgrounds in total*/
font:12px Arial,sans-serif; color:#fff; text-decoration:none;
display:block;
border:0 none;
background:black; /*background:url("bullet-weebly-menu.png") no-repeat 10px 100%*/
width:auto; /*sets text area*/
line-height:15px; height:auto; min-height:18px;
padding:14px 20px 10px 20px;
}
#weebly-menus .weebly-menu li a:hover, #weebly-menus .weebly-menu li.weebly-nav-current a{
background:#003366 /*#336699 #006666 #009999 #00a1b4*/ /*url("bullet-weebly-menu.png") no-repeat 30px */; /*blue hover background on sub-menu*/
/*background:#003366/*#336699/*#006666/*#009999/*#00a1b4*/ /*url("bullet-weebly-menu.png") no-repeat 30px ;*/ /*30px /*50%*/
}
#weebly-menus span.weebly-menu-title{display:inline; padding:0px;}
/* START MOBILE - MOBILE BURGER-MENU & BACKGROUND DROP-DROWN */
/* DESIGN GOAL: DOWN(dark). Standard: White Font. Hover: Blu Background highlight. Slect: Blue Font.*/
/* END MOBILE */
#container{position:relative; z-index:1; width:980px;}
.sliderContainer{width:980px; min-height:200px; height:auto; max-height:400px; overflow:hidden; padding:0px 0px 0px 0px; /*margin-bottom:17px;*/ /*background: url("sliderShadow.png") no-repeat 50% 100%*/}
.sliderContainer-noheader{padding-top:100px;}
.sliderContainer-short{padding-top:125px; width:980px; min-height:200px; height:auto; max-height:400px; overflow:hidden;}
#slider-tall{ position:center; width: 980px;height: 400px; overflow: hidden}
.wsite-header{ width:980px; height:200px; background:url(%%HEADERIMG%%) no-repeat; margin:0px 0px 0px 0px }
#slider-short{ position:center; width: 980px;height: 200px; overflow: hidden}
#slider-medium{ position:center; width: 980px;height: 250px; overflow: hidden}
#slider-home{ position:center; width: 980px;height: 250px; overflow: hidden}
#bar{position:relative; width:980px; height:45px;/*height:50px;*/ margin:4px 0px 2px 0px; background:transparent url(headerbg.png) repeat-x; /*margin-top:25px*/}
#bar-short{position:relative; width:980px; height:45px;/*height:50px;*/ background:transparent url(headerbg.png) repeat-x; border:1px solid green;}#bar-short{position:relative; width:980px; height:50px;/**/ background:transparent url(headerbg.png) repeat-x; border:1px solid green;}
#sitename{float:left; /*width:810px;*/ padding:10px;/*padding:13px 0px 0px 15px;*/ color:#eeeded; font-family:Georgia; font-style:italic; font-weight:bold; text-align:left; font-size:19px; letter-spacing:0.1em; /*background-color:red; opacity:0.50; -moz-opacity:50; filter:alpha(opacity=50);*/}
.clearfix:after{content:"."; clear:both; display:block; height:0; visibility:hidden}
* html .clearfix{/*height:1%*/}
.framer{/*float:right;*/}
#viewcart{float:right; padding:14px 10px 0px 10px; /*background-color:yellow; opacity:0.50; -moz-opacity:50; filter:alpha(opacity=50);*/}
#social{float:right; padding:8px; /*background-color:blue; opacity:0.50; -moz-opacity:50; filter:alpha(opacity=50); margin:-21 10 0 0;*/}
#social li{float:right; /*floats individual elements alongside each other*/list-style-type:none}
#social li a{display:block; margin:0 3px; padding:0; height:30px; width:30px; text-indent:-9999px}
#social li a#rssf{background:url(rss.png) no-repeat top left}
#social li a#rssf:hover{background-position:bottom left}
#social li a#fb{background:url(facebook.png) no-repeat top left}
#social li a#fb:hover{background-position:bottom left}
#social li a#mail{background:url(mail.png) no-repeat top left}
#social li a#mail:hover{background-position:bottom left}
#social li a#twitter{background:url(twitter.png) no-repeat top left}
#social li a#twitter:hover{background-position:bottom left}
#social li a#linkedin{background:url(linkedin.png) no-repeat top left}
#social li a#linkedin:hover{background-position:bottom left}
#content_container{position:relative; z-index:1; width:980px; margin:0px auto;}
#contentbg{position:relative; width:980px; height:auto !important; min-height:300px; background:transparent url(contentbg-98pc-prplGrad.png) repeat-y}
#content{position:relative; width:940px; height:auto !important; min-height:300px; padding:20px 20px 20px 20px}
#footerbg {position:relative; width: 980px; height:60px; background:transparent url(footerbg.png) repeat; margin:4px 0px 20px 0px; padding:10px 0px;}
#footer {position:relative; width:940px; /*height:80px;*/ /*text-align:right;*/ background: url(footerbg.png) repeat; margin:4px 0px 30px 0px; padding:15px 20px 0px 20px;/*border:green 1px solid;*/}
#footer li{}
#footer a{color:#a2a1a0; text-decoration:underline;}
#footer a:hover{color:orange;}
#footer .weebly-footer a{color:#e6e6e6; border:green 1px solid;}
/**************plugin for index.html Layout start HERE*******************************************/
.flash_slider{
width:980px;
height:300px;
overflow:hidden;
/* margin:250px 0px 0px 0px;*/
/* orig margin-left:-7px;*/
/*background:green;*/
}
/***************Splash Page and Landing page CSS Starts Here *************************************/
/*************** START Stick Contact Tab ******************************/
/* http://mojotech.github.io/stickymojo/ */
#sticky-contact-tab {
width: 120px;
background-color: #ccc;
min-height: 200px;
margin: 10px 0 15px 0; /*controls the cutoff of the top and bottom limitations*/
padding: 15px 10px;
float: left; /* float right for a right aligned sidebar */
}
/*************** END Stick Contact Tab ******************************/
WHAT I TRIED
I tried overiding various css elements using !important
I'm guessing, either:
a) I've incorrect css-selection
or
b) I need to add HTML scripts
or
c) It's not doable via Weebly's Manual CSS
EXAMPLE:-
.wsite-mobile-menu a:hover, #active a{
background-repeat:repeat-x;!important
background-position:0 100%;!important
color:blue/*txt hover color*/;!important
}
🤷‍♀️
Your example is using !important incorrectly. In CSS, the !important must come before the semi-colon, e.g. background-repeat: repeat-x !important;. This appears to be why your styles are not applying.
If you replace your code with the following, you should see the difference:
.wsite-mobile-menu a:hover, #active a{
background-repeat:repeat-x!important;
background-position:0 100%!important;
color:blue/*txt hover color*/!important;
}
As for actually making things more visible, it took a while to find what menu items you were referring to, but I believe you're talking about these:
In this example, I've just overridden color to make them stand out a bit more.
You should be able to get the same result with .wsite-mobile-menu a { color: #000 !important }.

Divs not using z-index

The issue
I have a fixed navigation bar on my website (z-index: 98) and a rotating banner (z-index: 96).
When I scroll down, however, the content positioned relatively on the banner appears higher (in z-space) than the navigation bar.
Screenshots
Code
Banner:
div#banner {
padding-top:60px;
z-index: 98;
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
z-index: 96;
}
div#banner div#bannerWrap {
width:1080px;
margin: 0 auto;
height:100%;
position:relative;
}
div#bannerWrap div#logoLeft {
position:absolute;
top:50%; margin-top:-164px;
left:0;
width:305px;
height:328px;
background: url(../img/bannerLogo.png) no-repeat center center;
float:left;
}
div#bannerWrap div#logoRight {
position:absolute;
top:50%; margin-top:-164px;
right:0;
width:305px;
height:328px;
background: url(../img/bannerLogo.png) no-repeat center center;
float:right;
}
div#bannerWrap div#textRight {
position:absolute;
top:50%; margin-top:-20px;
right:0;
text-align:right;
color:white;
font-weight:bold;
font-size:28px;
text-shadow: 3px 3px 0 #1f3848;
float:right;
}
Navbar:
div#topBar {
width:100%;
height:60px;
margin:0 auto; padding:0;
background: #1f3848;
color:white;
font-size:12px;
position:fixed;
}
div#topBar div#tBContainer {
width:1080px;
margin: 0 auto; padding: 0;
}
div#topBar div#tBLogo {
width:56px;
height:60px;
background: url(../img/tB_logo.png) no-repeat;
display:block;
float:left;
margin-right:20px;
}
div#topBar div#tBLeft {
float:left;
padding-top:15px;
}
div#topBar div#tBRight {
float:right;
padding-top:15px;
text-align:right;
}
By default, z-Index doesn't work with position:static elements.
It only works with position:relative/absolute/fixed elements.
This might work:
div#banner
{
position:relative;
z-index:96;
}
Reference: z-index - CSS-Tricks
z-index repeated twice please check. and you don't have to specify any z-index to div#banner. please follow below css
div#banner {
padding-top:60px;
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
}
div#topBar {
width:100%;
height:60px;
margin:0 auto; padding:0;
background: #1f3848;
color:white;
font-size:12px;
position:fixed;
z-index:2;
}
why you giving the z-index value twice? Also by watching the screenshot its clear banner is coming over the navigation because of higher z-index value. either give this one negative value or the give the positive higher value to navigation.
div#banner {
padding-top:60px;
z-index: 98;/* repeated*/
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
z-index: 96;/* repeated */
}
Note: while using z-index its required to use positioning either relative or absolute

Positioning Prev and Next Buttons (on NivoSlider)

I am using the nivoSlider on a page.
I adapted a Theme to my needs, but i would now like to have the Prev and Next buttons next to the image (Prev on the left side, and Next on the right site), instead of on top of the image.
You can see the test page here:
http://dccf.site88.net/test/dccf.php
here is the html:
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="_imgs/photos/fashion3.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/fashion4.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/fashion7.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/fashion9.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/GardenWork1.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/GardenWork2.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/GardenWork3.jpg" alt="Doncare Care Child Foundation" />
<img src="_imgs/photos/GardenWork4.jpg" alt="Doncare Care Child Foundation" />
</div><!-- enf of #slider -->
</div><!-- end of .sliderWrapper -->
and the CSS (from the base template):
.nivoSlider {
position:relative;
width:600px;
height:auto;
overflow: hidden;
margin:auto;
margin-top:1em;
}
.nivoSlider img {
position:absolute;
top:0px;
max-width: 600px;
max-height:420px;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 600px !important;
height:420px !important;
margin:auto;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:auto;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
margin:auto;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
margin:auto;
}
.nivo-box img {
display:block;
margin:auto;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:fixed;
top:50%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
and the Theme CSS:
.theme-default .nivoSlider {
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
margin-bottom:10px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
position:absolute;
display:none;
margin:auto;
}
.theme-default .nivoSlider a {
border:0;
display:block;
margin:auto;
}
.theme-default .nivo-controlNav {
text-align: center;
padding:0;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:10px;
height:10px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 0 2px;
margin-bottom:1em;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -10px;
}
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(arrows6.png) no-repeat 0px 0;
text-indent:-9999px;
border:0;
opacity: 1;
/* -webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}*/}
.theme-default a.nivo-nextNav {
position:absolute;
background-position:-30px 0;
right:2px;
z-index:9999;
}
.theme-default a.nivo-nextNav:hover {
background:url(arrows6.png) no-repeat -30px -30px;
right:2px;
}.theme-default a.nivo-nextNav:active {
background:url(arrows6.png) no-repeat -30px -60px;
right:2px;
}
.theme-default a.nivo-prevNav {
position:absolute;
left:2px;
}
.theme-default a.nivo-prevNav:hover {
background:url(arrows6.png) no-repeat 0px -30px;
left:2px;
}
.theme-default a.nivo-prevNav:active {
background:url(arrows6.png) no-repeat 0px -60px;
left:2px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}
Thank you for your time and help!
.nivoSlider - in this class you have to remove overflow:hidden, and then you have to change the left and right of your buttons:
.nivoSlider{
overflow:hidden; (remove it)
}
And then:
.theme-default a.nivo-prevNav{
left: -35px; (about)
}
.theme-default a.nivo-prevNav:hover{
left: -35px; (about)
}
.theme-default a.nivo-nextNav{
right: -35px; (about)
}
.theme-default a.nivo-nextNav:hover{
right: -35px; (about)
}

child div expanding out of parent div issue

I want something like this, click here.
This is a simple code in my HTML:
#mainContent {
margin:0;
width:100%;
height:600px;
padding: 0 0 30px 0;
}
#mainContent #sidebar { /* sidebar inside #mainContent */
float:left;
width:220px;
height:560px;
margin:10px 10px 40px 10px;
padding:10px 5px 10px 5px;
background-color:#CCCCCC;
}
#mainContent #featContent {
height:560px;
margin:10px 10px 40px 260px;
padding:10px 5px 10px 5px;
background-color:#CCCCCC;
overflow:auto;
}
<div id="mainContent">
<div id="sidebar"></div>
<div id="featContent"></div>
</div>
The problem is one of the divs are improperly placed .The #featContent div is going out of its parent #mainContent div for reason I don't understand. Check out this in jsFiddle here. The margin of #featContent goes out of the #mainContent bounds.
Demo
Add the following style to the #mainContent
#mainContent {
overflow:hidden;
}
Live demo
Add padding to parent div
#mainContent {
margin:0;
width:100%;
height:auto;
padding:10px 5px 40px 5px; background-color:red
}
#mainContent #sidebar { /* sidebar inside #mainContent */
float:left;
width:220px;
height:560px;
margin:10px 10px 40px 10px;
background-color:#CCCCCC;
}
#mainContent #featContent {
height:560px;
margin:10px 10px 40px 260px;
background-color:#CCCCCC;
overflow:auto;
}​
Demo hrer http://jsfiddle.net/j4C7T/

Toggle div container overlapping another container under it

I have 3 divs on a form page of my website. The top left toggle overlaps the bottom div whenever i click the toggle button.
What I'm trying to do is that the bottom left div container should move down when the top div container is clicked and move back to it's former position when toggle is closed.
I have included the css for the right div, I dont know if that is the css afecting the positions of the two div 's beside it.
Before Toggle
After Toggle
CSS for Toggle
#toggle-view {
list-style:none;
font-family:arial;
font-size:10px;
margin:0;
padding:0;
width:200px;
position: absolute;
}
#toggle-view li {
list-style:none;
text-decoration:none;
font-size:13px;
font-family:'lato';
padding:2px;
margin:10px;
margin-left:20px;
position:relative;
cursor:pointer;
border-radius: 5px;
}
#toggle-view li a:hover {
color: brown;
}
#toggle-view h3 {
margin:0;
font-size:13px;
color:#2a5a9a;
}
#toggle-view span {
position:absolute;
right:5px; top:0;
color:#2a5a9a;
font-size:20px;
font-weight: bolder;
}
#toggle-view p {
margin:5px 0;
display:none;
}
#toggle-view a{
padding:5px 0;
color:#35371c;
}
#toggle-view a:hover{
color:#2a5a9a;
}
CSS for LeftBox
.report{
position: absolute;
margin-top:100px;
margin-left:0;
padding-left: 20px;
}
CSS for Right Box
.register-body {
height:auto;
font-size:1em;
width:710px;
position:relative;
color:#000;
border-radius:5px;
background-color:#d2d4bb;
line-height:20px;
margin:20px 0 20px 250px;
padding:15px 15px 0;
}
UPDATE
When I changed
#toggle-view {
position: absolute;
}
to
#toggle-view {
position: relative;
}
and
.report{
position: absolute;
}
to
.report{
position: relative;
}
I got this :
The Right Box is pushed below the bottom left box.
It's because you're using position absolute. Try doing the layout without absolute positioning and then it will move and flex and bend to your almighty will! :)

Resources