I imported a wow slider to my webpage and now my footer is stuck in it. I tried using www.cssstickyfooter.com but it didn't work. I think is has something to do with the position element the slideshow uses. What would be causing this?
LIVE DEMO: http://epicureancateringaz.com/New/123
#footer{
position: relative;
margin-top: -100px;
height: 100px;
clear:both;
background-image:url(../images/backgrounds/footerback.png);
}
#wowslider-container1 {
zoom: 1;
position: relative;
max-width:1000px;
margin:9px auto 9px;
z-index:90;
border:9px solid #FFFFFF;
text-align:left; /* reset align=center */
}
#wowslider-container1 .ws_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
You've inserted div#footer into your slideshow div. Just pull it out.
Related
This question already has answers here:
CSS Disabled scrolling
(3 answers)
Closed 5 years ago.
Hi guys i want my webpage to display everything on it without
scrolling down or up to view anything. Please how can i do it?
it has been giving me some difficulties.
Here is my layout.css
body {
margin:0;
padding:0;
}
#Holder {
width:980px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 21px;
margin-bottom: 21px;
}
#Header {
height: 150px;
background-repeat: no-repeat;
margin-bottom: 11px;
}
#NavBar {
height: 60px;
background-color:rgb(13, 13, 13);
}
#Content {
height:auto;
clear:both;
overflow:auto;
}
#PageHeading {
height:auto;
padding:11px;
}
#ContentLeft {
width:280px;
float:left;
padding-top:11px;
padding-left:11px;
}
#ContentRight {
width:680px;
float:right;
}
#Footer {
height:100px;
vertical-align: bottom;
width:50%;
position: relative;
}
Add one of this to your code:
overflow-x: hidden;
would hide any thing on the x-axis that goes outside of the element, so there would be no need for the horizontal scrollbar and it get removed.
overflow-y: hidden;
would hide any thing on the y-axis that goes outside of the element, so there would be no need for the vertical scrollbar and it get removed.
overflow: hidden;
would remove both scrollbars
I need to design a web page that should be look like the above page.
I finished the auto viewer, but I found that I can't print a word above the slideshow (1/6 & autoviewer). How can I print it out?
Also, I try the code and it still can't print the word out, here is the code
<style type="text/css">
#myslideshow {
border-spacing:10px 10px;
border-left:7px solid black;
border-right:4px solid black;
position:relative
}
#myslideshow > div.overlay-one {
position: absolute;
top: 5px;
right:10px;
color:#fff;
font-size:18px;
font-family:sans-serif;
}
#myslideshow > div.overlay-two {
position: absolute;
bottom: 5px;
right:10px;
color:#fff;
font-size:20px;
font-family:sans-serif;
font-weight:bold;
background:rgba(56,56,56,0.5);
padding:3px 6px;
border-radius:3px;
}
</style>
<div style="float:right;width:500px;>
<div "id="myslideshow">
<div class="overlay-one">1/6</div>
<div class="overlay-two">AUTOVIEWER</div>
</div>
</div>
It only apply the border space of the left and the top of the photo - it mean there are not blank between border and the photo in the right and bottom
How to fix it?
u haven't mentioned HTML
so here it is
#slideshow{
background: #fff url("https://i.ytimg.com/vi/sTX8qbOtPN8/hqdefault.jpg");
width: 480px;
height: 360px;
position:relative;
}
#slideshow>div.overlay-one{
position: absolute;
top: 5px;
right:10px;
color:#fff;
font-size:18px;
font-family:sans-serif;
}
#slideshow>div.overlay-two{
position: absolute;
bottom: 5px;
right:10px;
color:#fff;
font-size:20px;
font-family:sans-serif;
font-weight:bold;
background:rgba(56,56,56,0.5);
padding:3px 6px;
border-radius:3px;
}
<div id="slideshow">
<div class="overlay-one">
1/6
</div>
<div class="overlay-two">
AUTOVIEWER
</div>
</div>
It's all about position: add parent with relative and child with absolute and you are done.
http://jsfiddle.net/maes222/AtPf2/
Can someone help me to fit my content in the div tag. If i add some more <li> then the div tag should be resized automatically.
Now i am confused with many styles. Where i might have gone wrong?
Thanks
CSS
#qhse
{
background-color: #92DF7B;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: 0.1;
}
a.icon{
width:52px;
height:52px;
position:absolute;
top:0px;
left:0px;
cursor:pointer;
}
Update these two css classes as:
#qhse {
background-color: #92DF7B;
width: 100%;
height: 100%;
}
.item ul {
list-style:none;
display:inline-block;
}
Your is not visible and it has position:absolute so it wont grow your surrounding div;
.item ul{
list-style:none;
position: relative;
}
Maybe you can show us how it should look like and how it should behave.
Remove the
.item ul {display:none;}
and add
.item ul {border: solid 1px;}
and see?
I have three divs: head, foot and textbox.
The head and foot divs are fixed positions, and the third div is partly fixed (margin-top).
My question is: How can I change the textbox's div bottom to fix different monitors size? I can't use 100% height because it hangs on foot div. In this homepage I don't use scrollbar, because the backgrounk is changing image files. I woud like to make it somehow the margin-bottom part keep distance the monitor's bottom.
<html>
<head>
<title>Div bottom</title>
<style>
.head{
position:absolute;
clear:both;
top:0px;
right:0px;
float:right;
width:100%;
height:80px;
background-color:grey;
}
.foot {
position:fixed;
clear:both;
height:35px;
right:0px;
float:right;
width:100%;
background-color:grey;
bottom:0px;
}
.textbox {
overflow: hidden;
position: relative;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
margin-top:100px;
width:910px;
margin-left: auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="head">HEAD</div>
<div class="textbox">?</div>
<div class="foot">FOOT</div>
</body>
</html>
You could use javascript to accomplish this .. add in the following script to your head:
<script type="text/javascript">
window.onload=resize_height;
function resize_height(){
var height=0;
var divs=document.getElementsByTagName('div');
if(self.innerHeight){
height=self.innerHeight;
}else if(document.documentElement && document.documentElement.clientWidth){
height=document.documentElement.clientHeight;
}else if(document.body){
height=document.body.clientHeight;
}
divs[1].style.height=(parseInt(height)-200)+'px';
}
</script>
The 200 comes from height and padding and margins, you could dynamically generate the 200 by taking the height/padding from your other divs and offsetting it to achieve what you want.
EDIT:
also, for textbox, remove margin-top:100px; and replace with top:100px; ....
.textbox {
overflow: hidden;
position: relative;
top:100px;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
/*margin-top:100px;*/
width:910px;
margin-left: auto;
margin-right:auto;
}
You don't have to use a script for that, here is a pure CSS solution for the 'header content footer' layout.
the margin between the sections is optional, so and so are the vertical & horizontal centering. and everything is totally responsive.
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper Content">
<div class="Centered">
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/*For Centering only*/
.Content:before
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -5px;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
padding: 0 5px;
text-align: center;
}
.Header, .Footer
{
margin-bottom: 5px;
padding: 5px 0;
}
.Header
{
background-color: #bf5b5b;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}
is there any way to make a div scrollable with overflow-y:hidden; and overflow-x:hidden?
i'm trying without success, maybe i need some js or jquery script?
i mean, i would like to make div scroll on y axes without showing scrollbar on right side( as it is now).
itryed:
.get-list{
position:absolute;
z-index:444;
text-align: center;
display: none;
bottom:0;
clear:both !important;
left:0;
right:0;
top:11%;
margin:0 auto;
background:#fff;
max-height:800px;
overflow-y:no-display;
overflow-x:hidden;
display: block;
}
thanks
EDIT
.log-widget-list{
position:absolute;
z-index:444;
text-align: center;
display: none;
width:99%;
margin:0 auto;
background:#fff;
height:800px;
overflow: hidden;
}
.log-widget-list .scroller{
overflow: scroll;
height:800px;
width:100%;
}
it shows right scrollbar anyway
Let's create a div with a width of 200px: (note the overflow:hidden)
#sidebar{
width: 200px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
Inside that div we will create the 'scrollable' div. See:
#sidebar #scroller{
width: 215px;
height: 300px;
padding-bottom: 15px;
overflow: scroll;
}
Altough we give it overflow:scroll, the scrollbar isn't visible. This is because this div has a total width of 215px which will make the scrollbar disappear outside the div.
Also see: http://jsfiddle.net/TBsN8/
fixed as shown thanks to Sebass van Boxel
.log-widget-list{
position:absolute;
display: none;
width:98% !important;
top:11%;
max-height:500px;
overflow: hidden;
bottom:0 !important;
left:0;
right:0;
margin:0 auto !important;
}
.log-widget-list .scroller{
overflow: scroll;
max-height:500px;
padding-bottom:3%;
width:104% !important;
}