I need 3 parts: Header, Content and footer for my page in fixed position.
<body>
<div id="header">
<div id="info">
<span id="fa">test</span>
<br>
<span id="en">Honey Koohpayeh Official Website</span>
</div>
</div>
<div id="section">
<div class="img-holder">
<img class="img" src="img/img1.jpg" />
</div>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
</body>
CSS:
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#section {
padding:10px;
text-align: center;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
And I'm using java script having two pictures which pic one loads at first then a loading.gif shows and then the second pic shows up.
The problem is when i show the loading, and then show the second pic, the content get empty for a sec and my footer reaches to the header. I need the three parts fixed position and nothing can changes their height. And i wanna use % like header and footer get 20% and the content gets the rest.
One option is to set a fixed height and width while the image loads and remove it when the image is received.
Related
I found quite a lot of people asking similar question, but mine seems to be a different problem.
This is the arrangement of my div.
<div class="container-fluid px-0">
<header>
</header>
<div class="content">
<div class="content-1">
</div>
<div class="content-2">
</div>
<div class="content-3">
</div>
</div>
</div>
Every class except for header and footer has height:100%; including <html> & <body>
Class content-1, content-2, content-3 has background-size:cover;
because I want the background to be full page.
I don't have any issue, as long as all my content is inside the class "content". However, now I want to add <footer> underneath the class "content". So the <footer> position is supposed to be below content-3, but it appear below content-1 instead. Is there a way to add a <footer> but not inside the class "content"?
What I have tried:
set <footer> to position:absolute; bottom:0; doesn't work. Problem persists.
set overflow:auto to class "content" will set footer to the
correct position, but now I have two scroll bars.
image for visualisation
.content {
display: inline;
}
Try this
.content {
float: left;
display: block;
width: 100%;
}
Thank you
I would like to re-create this revealing sticky-footer effect found at http://www.akc.org/dog-breeds/
I know the footer has to be fixed.
I know the content needs to have a higher z-index
I'm guessing (sort of) that the body needs to have a margin-bottom which is equal to the height of the footer???
Please would someone help me out.
I'm using Twitter Bootstrap 4. The general markup looks like this:
<body>
<div class="container"> <!-- This part should scroll up to reveal the footer below -->
<!-- Content goes in here -->
</div>
<footer class="footer"> <!-- This should be hidden initially -->
<div class="container">
<div class="row">
<!-- Footer stuff goes in here -->
</div>
</div>
</footer>
</body>
You will want to add a main content div and then give this div a background color of whatever you want your page to be otherwise you will just end up having text overlapping but yes you are right you will want to give your main content div a z-index of 1 or something and then fix your footer behind that and give it a z-index smaller than that in my example I gave it a z-index of -1. Then your main content div will scroll over the top of your footer. You will probably want to give your footer a height and your body a padding-bottom of the same height.
Here is an example of how I did it Fiddle Demo:
Html:
<div class="main-content">
<div class="container">
<div class="row">
Your main Content Scroll down
</div>
</div>
</div>
<footer>
<div Class="container">
<div CLass="row">
Footer Content
</div>
</div>
</footer>
Css:
body{
padding-bottom:200px;
}
.main-content{
min-height:200vh;
background:#fff;
z-index:1;
}
footer{
position:fixed;
bottom:0;
left:0;
width:100%;
height:200px;
background:#000;
color:#fff;
z-index:-1;
}
I am working on a fluid layout (using all percentages and no pixels) and have a fixed heading (#heading) at the top of the page. I want all elements of the rest of the site to start at the bottom of the heading and not disappear under it as the user scrolls down.
I researched this problem, but the only solution I could find was to add padding to the top of the site's main content that is equal to the height of the heading. This solution was, to my knowledge, mostly applicable to pixels because they won't behave differently in different browser window sizes or resolutions.
I tried this, but the problem is that because I'm using percentages and not pixels, the solution doesn't work when the browser window is made smaller. When I shrink the browser window, the top of the main content still disappears under the heading. I'd be grateful for any pointers.
This is the browser window at normal size:
image1
This is the browser window decreased in size:
image2
HTML:
<div id="wrap">
<div id="heading">
<div id="name">
<img src="logo.svg" width=100%>
</div>
<div id="navbar">
HOME PORTFOLIO ABOUTCONTACT RESUME
</div>
</div>
<div id="site_content">
<div id="side_panel_portfolio">
Illustration<br>
Graphic Design <br>
Web Design
</div>
<div class="divider">
</div>
<div id="mygallery">
<!--(the images)-->
</div>
</div> <!--End of #site_content-->
</div> <!--End of #wrap-->
CSS:
body {height:100%;
font-family: 'Helvetica', sans-serif;
font-weight:lighter;
font-size:1.3vmax;}
#heading{height:14%;
width:100%;
font-family: 'Raleway', sans-serif;
font-weight:300;
background-color:#ffffff;
top:0;
padding-top:0;
padding-left:0;
Padding-right:0;
position:fixed;
z-index:100;}
#site_content{padding-top:6.7%;
z-index:99;
height:100%;}
#side_panel_portfolio{float:left;
padding-left:3%;
position:fixed;}
#mygallery{float:right;
width:79%;
padding-right:%;
padding-left:3%;}
#portfolio_start{padding-left:18%;}
.divider{position:fixed;
left:15%;
top:14.7%;
bottom:40%;
border-left:1px solid black;}
Basically, I want #site_content to start at the bottom of #heading and #mygallery to be the only div that can scroll.
Sorry for the long question!!
*Also just want to say that I'm using another artist's work as thumbnails purely for the development process as placeholders and that site is NOT online and will not be online with those images.
Use a div for the logo image to be responsive
#logo {
display:block;
width:100%;
}
<div id="logo">
<img src="logo.svg">
</div>
also do you have all current media queries in your css?
Device Specific CSS Media Queries Collection
I have 3 div tags inside a div tag, all I want in same line. That I did using some css, but when I zoom out/in browser content goes in different lines.
css code:
#about{
float:left;
width:33%;
}
.about-panel{
width:100%;
}
html code:
<div class="about-panel">
<div id="about">
<p><img style="width:400px;height:280px;margin-top:0%;" src="/media/Banner.png"></p>
</div>
<div id="about">
<p style="margin-left:12%;"><img style="height:280px" src="/media/roto.gif"></p>
</div>
<div id="about">
<iframe width="400" height="280" src="//www.youtube.com/embed/o3vMWRWPYzE" `frameborder="0" allowfullscreen></iframe>`
</div>
</div>
I want all content as it is in same line even after zoom in/out
How I need the contents to be aligned
A jsfiddle would have been nice but for time being, try display:inline-block; in you about-panel. It throwing up because of missing display type for the div most probably!!
.about-panel{
width:100%;
display:inline-block; /* add this and check*/
}
#about{
float:left;
width:33%;
}
There can only be one id.. change the "about" to class.. That should work!
EDIT 10.12am 17th April.`Your jsfiddle and on the emulator works perfectly and as I would expect however I am having no luck. My html is
<img src="/images/mobile/m_tech_fuss.png" alt="Payco Tech logo" width="100%">
<div id="wrap">
<div id="main">
<div><img src="images/mobile/m_tech_welcome.png" width="100%" />
</div>
<div><img src="images/mobile/m_tech_self_e-contracts.png" width="100%" />
</div>
<div><img src="images/mobile/m_tech_optout.png" width="100%" />
</div>
</div>
</div>
<div id="footer"><img src="images/mobile/m_tech_soundsgood.png" width="100%" />
</div>
and css is exactly as you stated however not only does this not move the orange footer image at all but it also messes with my homepage layout :(
EDIT: 5.10pm 6th April
I found a guide which appears to work ok http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
The orange footer stays at the bottom on any mobile screen however there is still some a gap between the last bit of content and the footer which forces me to scroll down whereas on a page where there is little content, the footer should just be sitting there already. Also this guide has messed up with my green strip images which are now no longer 100% in width :(
Here is my code:
<div id="container">
<div id="header"></div>
<div id="body">
<div><img src="images/mobile/m_tech_welcome.png" width="100%"></div>
<div><img src="images/mobile/m_tech_self_e-contracts.png" width="100%"></div>
<div><img src="images/mobile/m_tech_optout.png" width="100%"></div>
</div>
<div id="footer"><img src="images/mobile/m_tech_soundsgood.png" width="100%"></div>
</div>
and my css
`}
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#fff;
padding:10px;
}
#body {
padding:10px;
padding-bottom:70px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:70px; /* Height of the footer */
content:url("../images/mobile/m_tech_soundsgood.png");
}
#container {
height:100%;
}`
If all you want is for that image to always sit at the bottom of the screen, it looks like you are making it a bit too complicated. Try:
div#content
{
position: fixed;
bottom: 0px;
}
To get CSS sticky footer to work you can't have any content outside of the #wrap or the #footer divs or it will mess up the height calculations. It will push the #wrap div, which has a min-height of 100%, down the page. This means that the bottom of the #wrap div is lower than the bottom of the screen. Resulting in unreliable behavior. Especially if the height of the content outside the #wrap or the #footer divs is of variable height, which is what was happening in this particular case.
You can either place a header inside the #wrap div in a config much like this:
<div id="wrap">
<div id="header">
<!-- Header content -->
</div>
<div id="main">
<!-- Main content -->
</div>
</div>
<div id="footer">
<!-- Footer content -->
</div>
Or you can leave it outside of the #wrap and #footer div and compensate by adding a padding-top value equal to the height of the header on the #main div. This is to stop the content inside the #main div from rendering over the top of the header outside of the #wrap and #footer divs.