I'm really struggling with my footer. I've followed the instructions at http://www.cssstickyfooter.com/ to make my footer stick to the bottom of the page. It works fine until I add divs into the footer div - the purple background and image disappears. I would do it as a single div but I can't work out how to do the zigzag edge without creating a separate box.
Any help would be greatly appreciated! I've been trying for days to get this to work.
Here is my HTML:
<body>
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<img src="images/logo.png" width="435px" height="112px" alt="Lauren Womack Logo" />
<div id="menu">
<img src="images/menu/home.png" width="142" height="160" alt="Home" />
<img src="images/menu/about.png" width="131" height="157" alt="About" />
<img src="images/menu/contact.png" width="128" height="160" alt="Contact" />
</div>
</div>
<!-- End Header -->
<!-- Begin Content -->
<div id="content">
<div id="rightholder">
<div class="outerleft">
<div class="inner"><h2>Animation and Interactive</h2>
</div>
</div>
<div class="outerright">
<div class="inner">
<h2>Web Design</h2>
</div>
</div>
<div class="outerleft">
<div class="inner">
<h2>Print Design</h2>
</div></div>
<div class="outerright">
<div class="inner">
<h2>Illustration</h2>
</div>
</div></div> <!-- End Content -->
</div>
</div><!-- Begin Footer -->
<div id="footer">
<div class="footeredge"> </div>
<div class="footerinner"> <p>© Lauren Womack 2012</p>
</div> </div> </div>
<!-- End Footer --></body></html>
And here's my css:
body {font-size: 13px; background: url(images/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%;}
html {height: 100%;}
#wrapper{ min-height:100%; min-width:992px; margin-left:0px; margin-right:0px;}
#header {height: 170px; padding-top:36px; border: none;}
#menu {float:right;}
#content { position: relative; min-width: 1141px; border:none;background: none; overflow:auto; padding-right:32px; padding-left:32px; padding-bottom: 86px;}
#rightholder { float: right; clear: left;min-width: 639px;width: 60%;padding-top: 90px;}
.outerright {background-image:url(images/threadborder.jpg);min-width: 257px;width: 45%; height: 98px; margin-top: 22px; margin-bottom: 22px; margin-left: 20px;float: right;clear: right;}
.outerleft {background-image:url(images/threadborder.jpg);
min-width: 257px; width: 45%; height: 98px; margin-top: 22px;margin-bottom: 22px;margin-right: 20px; float: left;clear: left;}
.inner {padding: 5px; height: 87px;}
#footer {position: relative; margin-top:-86px; margin-left:0px; margin-right:0px; padding-left:0px; padding-right:0px; height:86px; clear:both; padding-right: 32px; margin-left:0px; margin-right:0px; border: none;
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
.footeredge {
background-color: none;
background-image:url(images/footer/zigzag.png);
background-repeat:repeat-x;
height: 20px;
}
.footerinner {
background-color:#663366;
height: 66px;
}
How I want it to look: http://tinypic.com/r/242swuc/6 The purple box at the bottom and the zigzag isn't showing though, just the text.
There's no closing curly brace for #footer, which in turn break's your style declarations after this point.
Related
I have element on page, where I need to set height: auto, but it doesn't work the way I want to. Only min-height works, but when it's bigger that this, text goes over to the next element. Important thing to say, that I am reworking downloaded template. Everywhere else height: auto worked, but not here. I'm including the code below. I've already tried overflow: auto; but it just added scrollbar in the size of min-height value...
HTML:
<section id="dates" class="full-wrapper parallax-wrapper dates"> <!-- Tour Dates -->
<div class="parallax" data-velocity="-.3" data-fit="0">
<div class="front-content dates">
<h1>Koncerty</h1>
<div class="spacer"></div>
<div class="dates-wrapper">
<ul>
<li> <!-- List #2 --> <!-- max 5 Date Info elements per li -->
<div class="date-box"> <!-- Date Info 1 -->
<div class="info date">
<div class="day">15</div>
<div class="month">zář</div>
<div class="year">2015</div>
</div>
<div class="info">
<div class="city">Mladá Boleslav</div>
<div class="place"><div class="ico"></div>Nádvoří hradu</div>
</div>
<div class="info">
<div class="time"><div class="ico"></div>19:00 - 20:00</div>
<div class="buy"><div class="ico"></div>FB událost</div>
</div>
<div class="clear"></div>
</div> <!-- end Date Info 1 -->
<div class="date-box"> <!-- Date Info 2 -->
<div class="info date">
<div class="day">11</div>
<div class="month">úno</div>
<div class="year">2016</div>
</div>
<div class="info">
<div class="city">Plzeň</div>
<div class="place"><div class="ico"></div>
Pod Lampou</div>
</div>
<div class="info">
<div class="time"><div class="ico"></div>20:30 - 21:30</div>
<div class="buy"><div class="ico"></div>FB událost</div>
</div>
<div class="clear"></div>
</div> <!-- end Date Info 2 -->
<div class="date-box"> <!-- Date Info 3 -->
<div class="info date">
<div class="day">24</div>
<div class="month">úno</div>
<div class="year">2016</div>
</div>
<div class="info">
<div class="city">Praha</div>
<div class="place"><div class="ico"></div>Vagon</div>
</div>
<div class="info">
<div class="time"><div class="ico"></div>21:00 - 22:00</div>
<div class="buy"><div class="ico"></div>FB událost</div>
</div>
<div class="clear"></div>
</div> <!-- end Date Info 3 -->
</li>
</ul>
</div>
</div>
<div class="overlay"></div>
</div>
</section><!-- end Tour Dates -->
CSS:
#dates>div:nth-of-type(1) {
background: url(../img/parallax/01.jpg) 50% 0% repeat-y fixed;
background-color: #333333;
margin: 0;
height: auto !important;
min-height: 200px;
position: relative;
width: 100%;
text-align: center;
/* background-size: 100%;*/
-moz-background-size: cover !important;
-o-background-size: cover !important;
-webkit-background-size: cover !important;
-khtml-background-size: cover !important;
}
.parallax-wrapper.dates {
height: auto;
min-height: 200px;
position: static;
width: 100% !important;
/*min-width: 1000px;*/
margin: 0;
padding: 0;
}
.parallax-wrapper.dates h1 {
color: white;
}
.front-content.dates{
width: 500px;
margin-left: -250px;
}
.dates-wrapper{
width: 600px;
height: auto;
min-height: 200px;
position: relative;
overflow: hidden;
margin-left: 10px;
}
.dates-wrapper ul li{
float: left;
width: 600px;
}
.date-box{margin-bottom: 12px;}
.date-box:last-child{margin-bottom: 0;}
.date-box .info{
float: left;
text-align: left;
padding-left: 10px;
color: #bbb;
max-width: 170px;
overflow: hidden;
font-size: 14px;
}
.date-box .info div{position: relative;}
.date-box .info.date{
width: 65px;
height: 80px;
background: #ee6c00;
color: #fff;
text-align: center;
padding-left: 0;
}
Solved! I had to add exception for .front-content class, because there was only this:
.front-content{
position: absolute;
left: 50%;
z-index: 5;
}
So I had to edit it for .dates block:
.front-content.dates{
position: relative;
z-index: 5;
padding: 5px 10px 25px 10px;
}
I have a problem. This is my code:
<body>
<div class="imerologio">
<div id="imerologio-mistika">
<img src="#">
</div>
<div id="imerologio-xarti">
<img src="#">
</div>
</div>
And my css is:
.imerologio{
display: inline-block;
width: 100%;
}
#imerologio-mistika{
background: url("../images/imerologio/mistika.png") no-repeat;
float:left;
}
#imerologio-xarti{
background: url("../images/imerologio/xarti.png") no-repeat;
float:left;
}
I wand to center the inside divs, but i can't. Any help?
You have to remove floats, set display: inline-block to items and text-align: center to container.
.imerologio {
text-align: center;
width: 100%;
}
#imerologio-mistika {
background: url("../images/imerologio/mistika.png") no-repeat;
display: inline-block;
width: 50%;
}
#imerologio-xarti {
background: url("../images/imerologio/xarti.png") no-repeat;
display: inline-block;
width: 50%;
}
<div class="imerologio">
<div id="imerologio-mistika">
<a href="foo">
<img src="#">
</a>
</div><!--
--><div id="imerologio-xarti">
<a href="foo">
<img src="#">
</a>
</div>
</div>
I wonder how can I make a gradient background to repeat outside the defined layout.
http://i.imgur.com/CYk2FiE.png
Needed to repeat the water green and orange, which are also gradients.
Thank you.
<body>
<div id="header" style="width:1316px;height:80px;">
<div style="width:150px;height:72px;background-color:white;float:left;">repeat</div>
<div id="header-internal" style="background-color:gray;float:left;">
1016px
</div>
<div style="background-color:white;width:150px;height:72px;float:left;">repeat</div>
</div>
<div id="content">
what repeat background header left and right? two colors different?
</div>
<div id="footer">
footer
</div>
<br /> <br /> <br />
Should look like:
<img src="http://i.stack.imgur.com/KCbiK.png" />
</body>
and Css would be
body {
margin:0;
padding:0;
}
#header {
background:url("http://s10.postimg.org/jfhegkq49/bg_center.jpg") no-repeat;
background-position: bottom center;
background-color: #EFEFEF;
background-size:100%;
height: 80px;
}
#header-internal{
margin: 0 auto;
height: 72px;
width: 1015px;
}
#footer {
background-color: red;
height: 80px;
margin-top:20px;
}
I would like to put the footer at the bottom of the browser window and fill the empty part with the container when necessary(. This is my structure:
<header>
<div class='container'>
....
</div>
</header>
<div id='wrap'>
<div class='container'>
<div class='white-background'>
<div class='col-xs-12 col-sm-5 leftcontent'>[%leftcontent%]</div>
<div class='col-xs-12 col-sm-7 maincontent'>[%maincontent%]</div>
</div>
</div>
</div>
<footer>
<div class='container'>
<div style='text-align: center; padding-bottom: 20px;'><h3>[%copyright%]</h3></div>
</div>
</footer>
And this is the css:
#wrap {
min-height: 100%;
background-image:url('bk.gif');
background-color: #2c3e50;
}
.white-background{
width:100%;
height:100%;
display:block;
overflow:auto;
background-color: #fff!important;
}
footer{
background-color: #f2f2f2;
text-align:center;
position: relative;
margin-top: -50px;
height: 50px;
clear:both;
padding-top:20px;
}
I have done some tries and took a look to other answers, but without success...
Try add first stycky footer solution
http://ryanfait.com/html5-sticky-footer/
demo: http://jsfiddle.net/57M68/. I have tried a lot of things like float, margin, padding but I can't get the textbox to align vertically in the center of the black strip. Please help. The code:
html:
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-ws="collapse" style="margin-top:0" data-maq-appstates="{}" id="myapp">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">
</div>
</a>
<div style="display:inline-block"> <input type="text" ></input></div>
</div>
</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>
js:
require([
"dijit/dijit",
"dojo/parser",
"maqetta/space",
"maqetta/AppStates",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/TextBox"
]);
css:
html,body {
height: 100%;
width: 100%;
}
.logo_a{
background:url("icon1.png");
}
.logo{
width:60px;
height:50px;
display:inline-block;
}
.logo_a:active{
background-position:0 1px;
}
#top_bar{
padding:0px;
background: -webkit-linear-gradient(#464646, #121212);
background: -moz-linear-gradient(#464646, #121212);
background: -ms-linear-gradient(#464646, #121212);
background: -o-linear-gradient(#464646, #121212);
background: linear-gradient(#464646, #121212);
color: #ccc;
text-shadow:none;
height:50px;
width:100%;
}
#top_bar_divider{
background-color:#1ba0e1;
height:4px;
width:100%;
}
You just need to add vertical-align: middle to your input div and to .logo_a:
.logo_a {
background:url("icon1.png");
vertical-align: middle;
}
http://jsfiddle.net/57M68/1/
The HTML goes like this
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq- ws="collapse" style="margin-top:0" data-maq-appstates="{}" id="myapp">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">
</div>
</a>
<div id="text"> <input type="text"></div>
</div>
</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin- left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>
And the css is added to the existing demo--
#text{display:inline;}
#text input{position:relative;
top:-43px;
left:110px;}