I'm using a free wordpress theme from woothemes, Swatch theme. I don't know if somebody uses this theme,too. I've got involved some issue. When the posts is short. the theme's footer can't reach to the bottom. Left a piece of blank space. It's so ugly. So I wanna find a method to fix it. I've read some css books and googling for many times but I still can't find a way. So, I hope you guys can give me some suggetion. My programing knowledge is so poor. Sorry for that. Hope get your reply.
Best regards.
/* 2.1 Containers & Columns */
#wrapper { background: transparent url(images/wrapper-bg-colourstrip.png) repeat-x left top; padding-top: 5px; } /* Top padding is the height of the colour strip image. */
#main{width:575px;}
#main.fullwidth, .layout-full #main, .col-full {width: 900px; margin:0 auto;}
#sidebar{width:250px;}
#sidebar .secondary { width:140px; }
.entry img { max-width:565px; }
.layout-full .entry img { max-width:890px; }
.col-left { float: left; }
.col-right { float: right; }
.two-col-right #main { float:right; }
.two-col-right #sidebar { float:left; }
/* 2.6 Footer */
#footer{padding: 30px 0 20px; background: url(images/bg-ripple-footer.png) repeat top left; color:#999;}
#footer p {}
#footer a { color: #ffffff; }
#footer #credit img{vertical-align:middle;}
#footer #credit span{display:none;}
#footer-widgets { margin-bottom: -5px; background: url(images/bg-ripple-footer-widgets.png) repeat top left; padding:10px 0; }
#footer-widgets .block { padding:20px 10px 0 10px; float:left; }
#footer-widgets .col-1 .block { width:100%; padding-left:0; }
#footer-widgets .col-2 .block { width:420px; padding-left: 20px; }
#footer-widgets .col-3 .block { width:270px; padding-left: 16px; }
#footer-widgets .col-4 .block { width:200px; padding-left: 10px; }
This demo displays a widely used method of implementing a sticky footer http://ryanfait.com/sticky-footer.
The HTML setup:
<div class="wrapper">
<!-- Body Content -->
<div class="push"></div>
</div>
<div class="footer">
<!-- Footer Content -->
</div>
This is the CSS that does it:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
Failing that you could try asking WooThemes for support.
Related
I'm making a site using the Divi theme (elegant themes) in Wordpress. I've been trying to get rid of the white space under the footer but have been unsuccessful. I've tried applying the Sticky Footer CSS and trying different padding/margins in the footer id, html and body. The site is thedaltondaleygroup.org.
I've created a page with divi builder and then copied the shortcode from revisions into footer area #1.
Here's the css code I've tried, this is attempting to apply the sticky footer css:
html, body {
height:100%;
}
#main-content {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
#main-content:after {
content: "";
display: block;
}
#main-footer, #main-content:after {
height: 142px;
}
.et_pb_gutters3 .footer-widget {
margin: 0 .5% 3% 0; */
}
Here's the rest of the code I have for the footer if there's anything conflicting:
#main-footer {
box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.3);
padding-bottom:1%;
}
.et_pb_row .et_pb_row_3 .et_pb_gutters2 .et_pb_row_fullwidth et_pb_row_1-2_1-4_1-4 {
width:100%;
max-width:100%;
}
#footer-bottom .container, #main-footer .container{
margin-right: 2.773%;
margin-left: 2.773%;
width:94.454%!important;
max-width: 94.454%;
}
#main-footer .fwidget.et_pb_widget {
width: 100%!important;
max-width: 100%!important;
}
#footer-widgets .footer-widget li:before {
display: none;
}
html #footer-widgets .footer-widget .et_pb_widget:not(.woocommerce) ul li {
line-height: 26px;
padding-left: 0px;
}
#footer-widgets {
text-align: center;
color: #ffffff;
padding-top: 2%;
width: 100%;
height: auto;
}
:not(.et_pb_fullwidth_section).et_pb_section {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#footer-bottom {
padding: 0;
}
#main-footer {
width: 100%;
height:auto;
}
/* Footer Columns - Centered */
.footer-widget { margin-right: 0; text-align:center;}
.footer-widget:nth-child(1) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 32%; margin-right:0;}
.footer-widget+.last{display:none;}
#media only screen and (max-width: 980px){
.footer-widget:nth-child(1) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 30%; margin-right:0;}}
#media only screen and ( max-width: 767px ) {
.footer-widget:nth-child(1) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 100%; margin-right:0;}}
Before I write any css code I usually type out html,body,p,h1,h2 { margin:0; padding:0;} etcc...This usually fixes it for me,
Or you can google a css reset page and they have most of that pre-written...
hope this helps.
If you have a menu in the bottom/footer with dropdown menus, make sure in the design>Layout to set "Dropdown Menu" to "Upwards". If not it will cause white space.
This is my first question, so I hope it adheres to the standards. I am trying to move my child div to the bottom of the parent div. I read that the positioning of the parent div has to be set to relative and the positioning of the child div has to be set to absolute. Then, bottom has to be set to 0 for the child div to move down.
<html>
<style type="text/css">
.card {
position:relative;
/* Don’t change these */
float: left;
box-sizing: border-box;
/* Feel free to play around with these */
text-align: center;
border-style: double;
border-width: 3px;
background: #84a0d7;
line-height: 100px;
height: 100px;
/* Change the width to get a different layout */
width: 33.33%;
}
.comment {
font-size:9pt;
color:white;
font-family:Verdana;
line-height:normal;
position:absolute;
/* Here, I set top to 0. If I change that line to bottom:0;
the Div moves up instead of down. Could someone help me
figure out why that happens? */
top:0;
text-align:left;
width: 100%;
height:100px;
}
#media (max-width:800px) {
.card {
width:50%;
}
}
#media (max-width:400px) {
.card {
width:100%;
}
}
</style>
<head>
<meta charset="UTF-8">
</head>
<body style="margin:0px">
<h1>Best Football Players</h1>
<div class="card">
Messi
<div class="comment">Undoubtedly the best in the world and most likely of all times (Sorry, Ronaldo fans)</div>
</div>
</body>
</html>
Now you have the comment set to same height as the card, so it doesn't matter if you set top or bottom to 0.
Change .comment like this and it will align at the bottom.
bottom:0;
height: auto;
Sample snippet
.card {
position: relative;
/* Don’t change these */
float: left;
box-sizing: border-box;
/* Feel free to play around with these */
text-align: center;
border-style: double;
border-width: 3px;
background: #84a0d7;
line-height: 100px;
height: 100px;
/* Change the width to get a different layout */
width: 33.33%;
}
.comment {
font-size:9pt;
color:white;
font-family:Verdana;
line-height:normal;
position:absolute;
bottom:0;
text-align:left;
width: 100%;
height: auto;
}
#media (max-width:800px) {
.card {
width:50%;
}
}
#media (max-width:400px) {
.card {
width:100%;
}
}
<h1>Best Football Players</h1>
<div class="card">
Messi
<div class="comment">Undoubtedly the best in the world and most likely of all times (Sorry, Ronaldo fans)</div>
</div>
I have seen that other persons have asked the same question, but the solution does not apply to this problem. The solution should preferably work on different devices, such as iPhone, iPad, etcetera, so a generic solution is preferable - not something that just works on one device.
I have tried to set text-align:center and also tried to set margin-left:auto and margin-right:auto , but it doesn't work.
Html (only the relevant code is included):
<div class="container">
<div class="buttonyear"> <img class="buttonyear" src="./navi/yearen.png" /><span>2014</span></div>
<div class="buttonyear"> <img class="buttonyear" src="./navi/yearen.png" /><span>2013</span></div>
<div class="buttonyear clearfix"> <img class="buttonyear" src="./navi/yearen.png" /><span>2012</span></div>
<br/>
<br/>
</div> <!-- end of navi -->
Css:
.container {
max-width: 48rem;
width: 90%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
body{
background-image: url(../images/gradient.jpg);
}
// todo improve css..ask on stackoverflow..
.navi {
width:100%;
text-align:center;
text-align: center;
margin-left: 42%;
margin-right: 42%;
}
.buttonyear
{
float: left;
}
.buttonyear a
{
text-decoration: none;
}
.logocontainer {
text-align:center;
}
.logo {
width:180px;
height:60px;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Small screens (default) */
html { font-size: 100%; }
/* Medium screens (640px) */
#media (min-width: 40rem) {
html { font-size: 112%; }
}
/* Large screens (1024px) */
#media (min-width: 64rem) {
html { font-size: 120%; }
}
ul {
list-style-type:none;
}
.buttonyear {
position: relative;
width: 42px;
height: 20px;
}
.buttonyear span {
left: 0;
position:absolute;
width: 100%;
color: white;
font: 12px Gill Sans;
font-weight:600;
text-decoration:none;
text-align:center;
width:42px;
height:20px;
padding-top:2px;
position:absolute;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Fiddle: http://jsfiddle.net/wzhwtvmt/
What you want to do is put a container around your buttonyear divs that will center everything appropriately. I've created a fiddle for you with what I think you want. You'll have to modify it to your needs, but it centers all of your buttons within the container. Use your media queries to break them up at the right sizes.
http://jsfiddle.net/vtgw5zfg/
I had some time on my hands, and messed with your code a bit. Here's an updated version that centers things horizontally and vertically based on size. It also uses a bit of JavaScript and jQuery to center your span's. It's not perfect, but should help get you started.
http://jsfiddle.net/vtgw5zfg/1/
Super weird: For some reason, my site's front page layout (CSS) shifts to the right on a mobile device when it's supposed to be centered? See: http://www.stylerepublicmagazine.com
Does anyone know why this is? I've seen this error on other forums, but no one seems to have a solid fix for it.
Here's the main portion of the stylesheet for my template:
#wrapper {
position:absolute;
width:100%;
margin: 0, auto;
margin-top:60px;
}
#socialmedia {
float:right;
}
#topbanner {
margin-left:180px;
width:990px;
}
#magnavigation {
position:absolute;
margin-top:150px;
margin-left:150px;
}
#featureslides {
position:absolute;
margin-top:240px;
margin-left:190px;
width:1000px;
}
div.img
{
padding-top:40px;
margin: 0px;
height: 150px;
width: 150px;
float: left;
text-align: left;
vertical-align:top;
padding-right:62px;
}
div.imglast
{
padding-top:40px;
margin: 0px;
height: 150px;
width: 150px;
float: left;
text-align: left;
vertical-align:top;
}
div.img img
{
display: inline;
margin: 3px;
}
div.articlename {
padding-top:5px;
font-family:'Oswald', sans-serif;
font-size:1.4em;
}
div.desc
{
padding-top:5px;
text-align: left;
font-family:helvetica;
font-size:1em;
font-weight: normal;
width: 140px;
margin: 0px;
padding-bottom:100px;
}
#morefeatures {
margin-top:180px;
float:left;
width:685px;
padding-right:15px;
padding-bottom:20px;
}
#adverts {
width:300px;
float:right;
margin-top:180px;
}
.FrontHeading {
font-family: 'Oswald', sans-serif;
font-size:30px;
padding-bottom:5px;
}
Thanks,
B
You're declaring a lot of margin-left properties which causes the elements to shift to the right.
Before and after removing the margins on the left.
As some others pointed out, you're simply using too many position: absolute properties in your CSS and basically, you've tuned your layout for one resolution (1440 wide). For example, on my resolution of 1920x1080, your layout appears on the left.
You can fix this by removing all position: absolute properties and using substitutes. For example, for the main column, you should be using margin: 0 auto, which will center it.
I've created an example of a layout you can use, to get an idea of the various types of positioning you'll want to use for your layout. I essentially duplicated the layout (more or less) using different properties that should scale across resolutions and devices.
The Fiddle
HTML
<div id='wrapper'>
<div id='banner'>
Your logo
<div id='social'>FACEBOOK | TWITTER</div>
</div>
<div id='slides'><img src='http://placekitten.com/500/200'/></div>
<div class='news'>News item 1</div>
<div class='news'>News item 2</div>
<div class='news'>News item 3</div>
<div class='news'>News item 4</div>
<div class='news last'>News item 5</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div style='clear: both'></div>
</div>
CSS
#wrapper {
width: 500px;
margin: 0 auto;
font: 18px sans-serif;
}
#banner {
background: #8888ff;
padding: 20px;
margin-bottom: 5px;
}
#social {
float: right;
margin-top: -10px;
font-size: 50%;
}
#slides {
margin-bottom: 5px;
}
.news {
background: #88ff88;
display: inline-block;
*display: inline; /* IE8- hack */
zoom: 1; /* IE8- hack */
margin-right: 10px;
width: 78px;
text-align: center;
padding: 5px;
}
.news.last {
margin-right: 0;
}
.blog {
margin-top: 8px;
clear: both;
}
.blog .entryimg {
float: left;
margin-right: 10px;
}
Result
Too much position absolute for the CSS I think.
Change these few CSS for content to center.
#wrapper {
width: 100%;
margin: 0 auto;
margin-top: 60px;
}
#topbanner {
margin-left: 180px;
width: 990px;
margin: 0 auto;
}
#magnavigation {
margin-top: 150px;
margin-left: 150px;
margin: 0 auto;
}
#featureslides {
margin-top: 240px;
margin-left: 190px;
width: 1000px;
margin: 0 auto;
}
I suggest you to reconstruct your section as it's quite a mess and hard to control from what I saw.
Please take a look at this laytout which i built with divs:
First of all you can ignore Header section
So Content has to be centered exactly at the center and it has a fixed width which is easy, but Left Column needs to extend from left side until it reaches Content and here is the difficult part, since the gap betwen Left Column and Content can be any length it's hard to know what width to set.
Now i know it would be fairly easy to do this with javascript but i would like to avoid that if possible.
EDIT as requested here is the code:
<div class="left_column"></div>
<div class="content"></div>
.left_column{
width:100px;
height:100px;
float:left;
}
.content{
width:100px;
height:100px;
margin:auto;
position:relative;
}
Take a look at Object-Oriented CSS. In particular, check out their grids page
tried percentages?
overflow: auto;
padding: 10px;
width: 45%;
try float left float right as well as display inline, you could also try width auto but that don't work too well
float:left;
width:auto;
height: auto;
display: inline;
there is also one more trick used in menus
<div id="mail_menu">
<ul>
<li><a href=something</a></li>
</ul>
</div>
css
#mail_menu {
position: relative;
top: 0px;
left: 0px; /* LTR */
z-index: 3;
color: #000;
}
#mail_menu ul {
list-style-type: none;
}
#mail_menu li {
display: inline;
float:left;
margin: 0px;
padding: 3px;
}
#mail_menu a {
color: #000;
background: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 1px;
border-color:#CCC;
border-width:1px 0;
padding: 2px;
float:left;
border-width:1px;
border-style:solid;
border-bottom-color:#aaa;
border-right-color:#aaa;
border-top-color:#ddd;
border-left-color:#ddd;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mail_menu a:hover {
color: #0000DD;
text-decoration: none;
background-image: url(/images/lyel.png);
background-repeat: repeat-x;
}
css to middle something
.middle {
display: block;
width: 50em;
margin-left: auto;
margin-right: auto
}
and finally some table values for display to mess with
.td {
display: table-cell;
display:inline
}
.wrap{
position: inherit;
}
.tr {
display: table-row;
display:inline
}
table {
border-collapse: collapse;
}
th {
text-align: left; /* LTR */
padding-right: 1em; /* LTR */
border-bottom: 3px solid #ccc;
}
I would use percentages, but go 1% short of where you should. I've found a lot of times a browser will "round up" a pixel or something, so if you have your percentages totaling 100%, any extra added will push a div below.
For instance, if you wanted two divs, one on the right and one on the left, have one of them have width:49%; and the other width:50%;.
This can be accomplished using this hack, please try this:
div.header { height: 50px; line-height: 50px; background-color: #222; color: #eee; }
div.wrapper { background-color: #b261da;position: relative;z-index: 0; }
div.wrapper div.content { width: 600px;margin: 0 auto; background-color: #6189fe; color: #fefefe; }
div.wrapper div.left-column { background-color: #00fe72; position: relative;width: 550px;float: left;z-index: -1000; }
with this markup:
<div class="header">Header</div>
<div class="wrapper">
<div class="left-column">Left Column</div>
<div class="content">Content</div>
</div>
Note the left-column will be cutted if you resize the screen too much. Either way, I hope it helps.