guys,
I'm building this responsive website where i have footer at the bottom floating.
On my index.page (http://testi3.aada.fi/) my code works fine, but something is wrong with my content page () even i use same code for the floating footer..
can someone give my a hint how to fix this?
my floating code:
.container {
min-height: 100%;
/* equal to footer height */
margin-bottom: -120px;
}
.container:after {
content: "";
display: block;
}
.site-footer, .container:after {
/* .push must be the same height as footer */
height: 120px;
text-align: center;
}
.site-footer {
background-image: url(../images/footer_bg_trans.png);
background-repeat: no-repeat;
background-position: center top;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
}
/ Mika
The CSS on your content page is not the same as the CSS on your index page. The CSS for .site-footer on the index page is:
.site-footer {
background-image: url("../images/footer_bg_trans.png");
background-position: center top;
background-repeat: no-repeat;
bottom: 0;
position: fixed;
text-align: center;
width: 100%;
}
Where as on the content page its:
.site-footer {
background-image: url("../images/content_footer_bg.png");
background-position: center top;
background-repeat: no-repeat;
margin-top: 10px;
text-align: center;
}
You're missing width: 100%; position: fixed; bottom: 0;
Related
I have quite simply code and i've spent a day for solving problem, but still no progress :/ I want to display iframe with background-image. Snippet code is not showing background-image, so You can see live demo here: http://lukdan2.47.pl/index2.php
.parrent {
width: 100%;
background-image: url('http://lukdan2.47.pl/images/black-iphone-frame.png');
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 427px;
}
.child {
margin: 0 auto;
position: relative;
width: 73%;
padding-top: 37%;
}
iframe {
border: none;
width: 100%;
height: 100%;
margin: 0;
}
<div class="parrent">
<div class="child">
<iframe src="http://sshtest.co.pl/" id="iphone-x-portrait"></iframe>
</div>
</div>
As You can see iframe has too much height. I can add
.child {
margin: 0 auto;
position: relative;
width: 73%;
padding-top: 37%;
height: 550px;
padding-bottom: 37%;
}
and it works fine.
But, for screen lower than 460px parent div is getting smaller so static height for child is not working correctly.
I've tried to change parent div to display flex and table (and change child div also) but nothing found that will solve my problem.
Help, please.
Ok, i've found solution.
.iframe-container {
padding-top: 56.25%;
position: relative;
background-image: url('http://lukdan2.47.pl/images/black-iphone-frame.png');
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
}
.iframe-container iframe {
border: 0;
height: 62%;
left: 40%;
position: absolute;
top: 0;
width: 20%;
margin: 0 auto;
padding-top: 11%;
padding-bottom: 0%;
}
<div class="iframe-container">
<iframe src="http://sshtest.co.pl/"></iframe>
</div>
I'm using the background-image prop to get an image in the bg and a text on the foreground:
fiddle:
https://jsfiddle.net/zvy0j3r1/5/
however I dont see any image getting displayed. i'm not sure what I'm I missing here
CSS:
.main {
padding: 40px 70px;
display: inline-block;
width: 100%; //customizable user controlled width (not necessarily be 100% all time)
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
Just set the .main as relative and .icons as absolute.
.main {
padding: 40px 70px;
display: inline-block;
width: 100%;
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
position: relative;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
<div class="main">
<div class="icon"></div>
<div class="text">No Data available</div>
</div>
The background image is not showing because the element doesn't have any height. You might think that using height: 100% to the element, would make it take up the same height of it's parent, but it doesn't work like that.
When a child element has height: 100%, it will only take up 100% of it's parent if the parent has an explicit height set, like with pixels, ems, vm, etc.
My footer div is overlapping the content in chrome browser eventhough I have cleared it. Can someonone poin t me in the right direction with the css. Should I use an if is chrome javascript thing?
http://archibaldbutler.com/projects/roaming-giraffe/html/
Thanks
If the footer is designed to be at the bottom of the page all the time, then do this:
.footer-bg {
clear: both;
bottom: 0px;
position: fixed;
width: 996px;
height: 192px;
background-image: url('../html/images/footer-bg.jpg');
background-position: center top;
background-repeat: no-repeat;
}
.content-bg2 {
clear: both;
float: left;
margin-top: 10px;
margin-bottom:192px;
width: 996px;
height: 369px;
background-image: url('../html/images/maincontent2bg.jpg');
background-position: center top;
background-repeat: none;
}
if it is supposed to just be at the bottom of that content area then do this:
.footer-bg {
clear: both;
bottom: 0px;
width: 996px;
height: 192px;
background-image: url('../html/images/footer-bg.jpg');
background-position: center top;
background-repeat: no-repeat;
}
on the site JN-Racing i´ve add a div on the left side but when I resize the Browser the div goes about the content. Thanks for all tipps
Try this:
#bg_right {
background-image: url("images/bg_rechts.jpg");
background-repeat: no-repeat;
float: right;
height: 935px;
position: relative;
width: 258px;
z-index: -1;
}
#bg_left {
background-image: url("images/bg_links.jpg");
background-repeat: no-repeat;
float: left;
height: 935px;
position: relative;
width: 258px;
z-index: -1;
}
#wrapper {
height: 0;
margin: auto;
text-align: left;
width: 1024px;
}
body {
height: 100%;
margin: auto;
width: 1540px;
}
If you limit the width of the body, it shall work like a charm! (:
i have a twitter layout, well sorta.. the main table kinda looks like it, with the way it's sectioned off...
html {
-webkit-user-select: none;
text-shadow: 2px 2px 2px #000;
color: #fff;
font-smooth: always;
padding: 0;
width: 100%;
height: 100%;
background: url("./img/main_back.jpg");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
body
{
height: 100%;
width: 100%;
}
.content_wrap {
position: relative;
top: 5px;
display: inline-table;
margin-right: auto;
margin-left: auto;
width: 90%;
height: 100%;
background-color: transparent !important;
}
.left_table {
overflow: hidden;
display: table-cell;
text-align: center;
width: 50%;
height: 100%;
padding-left: 5px;
padding-bottom: 20px;
}
.right_table {
display: table-cell;
text-align: center;
width: 20%;
height: 100%;
}
html5 doc type
header <-- floated left
section <-- floated right
section <-- content wrap
section <-- left_table
aside <-- right_table
footer <-- fixed position, bottom 0px
markup is spot on, i check it with the w3c site all the time.
can't get it to center, it's off center by about 30 to 40px, anyone have any ideas?
I notice that nowhere in yoru code do you actually have a center on your content div...
Perhaps you mean this?
body
{
height: 100%;
width: 100%;
text-align: center;
}
Also, first comment has a point.