Can someone plz show me how to center this image in its div while keeping the image overlapping its div top.
jsfiddle.net/MalcollmS/0ees82hc
<body>
<div id="outerdiv">
<div id="innerdiv">
<img src="http://www.mylester.lester.com.au/Content/Images/LesterBanner.jpg" alt="lesterbanner" id="banner" />
<div id="body">
</div>
</div>
</div>
</body>
body{
height:100%;
background-color: #142758;
padding-top:50px;
}
#outerdiv {
margin:auto;
width:70%;
height:500px;
background-color:#778CAC;
}
#innerdiv {
width:95%;
margin:auto;
height:95%;
background-color:white;
position: relative;
top: 50%;
transform:translateY(-50%);
}
header {
width:100%;
}
#banner {
background-image:url('lesterbanner.jpg');
width:300px;
margin-left:auto;
margin-right:auto;
margin-top:-90px;
}
Malcolm
Just text-align:center; add to #innerdiv
jsFiddle example
img tags are display: inline-block by default which can be centered with text-align: center; on the parent element:
#innerdiv {
...
text-align: center;
}
JSFIDDLE
Try using % for margin or assign it to a div here
<body>
<div id="outerdiv">
<div id="innerdiv">
<!-- assign div --><div class="img_holder">
<img src="http://www.mylester.lester.com.au/Content/Images/LesterBanner.jpg" alt="lesterbanner" id="banner" />
</div>
<div id="body">
</div>
</div>
</div>
</body>
Css
body{
height:100%;
background-color: #142758;
padding-top:50px;
}
#outerdiv {
margin:auto;
width:70%;
height:500px;
background-color:#778CAC;
}
#innerdiv {
width:95%;
margin:auto;
height:95%;
background-color:white;
position: relative;
top: 50%;
transform:translateY(-50%);
}
header {
width:100%;
}
#banner {
background-image:url('lesterbanner.jpg');
width:100%;
}
.img_holder{
position: relative;
width:300px;
margin: 0 auto;
top: -30px;
}
#banner {
background-image:url('lesterbanner.jpg');
width:300px;
margin:-2% 0 0 42%;
}
Related
This is what I've tried so far:
.content{
margin-bottom: 50px;
}
.bottom{
position:absolute;
height:50px;
line-height: 50px;
bottom:0;
width:80%;
background:green;
}
<div class="content">
......
</div>
<footer class="bottom">
<p>
this is always at bottom
</p>
</footer>
Here is a Fiddle is an example too.
Did someone know why this happen, and how I can solve it?
Thank you!
1.You have make small change in CSS.According to your demo link.
.parent {
height:1500px;
width:200px;
border:1px solid grey;
position: relative;
background-color: white;
}
.topDiv {
display:block;
background:silver;
width:100px;
height:100px;
position:absolute;
top:0;
left:0
}
.bottomDiv {
background:red;
width:100px;
height:100px;
position:absolute;
bottom:0;
}
body {
height:1500px;
background: linear-gradient(#111, #777);
}
You have to use position:fixed, to achieve this !!
CSS
<style type="text/css">
.content{
margin-bottom: 50px;
}
.bottom{
position:fixed;
height:50px;
line-height: 50px;
bottom:0;
width:80%;
background:green;
}
</style>
HTML
<div class="content">
......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br> ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br> ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br> ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br> ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br> ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>
</div>
<footer class="bottom">
<p>
this is always at bottom
</p>
</footer>
So I have been looking around on the internet to find a solution in order to make the footer stay at the very bottom on the page regardless of the length of the content of the page. I have followed the CSS from tutorials, the footer is only at the bottom of the page if the content is not long enough, if the content is much longer, the page will get the scroll bar and the footer will get stuck in the middle of the page as you scroll down for more content. Below is my CSS and HTML.
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
position:absolute;
top:100px;
left:20%;
width: 1024px;
height:1300px;
background:blue;
}
.container {
position:absolute;
top:0px;
left:20%;
width: 1024px;
height:86px;
max-height:300px;
background:blue;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
height:100px;
max-height:900px;
left:0px;
color:#000099;
background:#f2f2f2;
}
Now this is my html, the two absolute positioned divs and the footer are inside the wrapper which has position relative.
<html>
<body>
<div class="wrapper">
<div class="container">Container 1</div>
<div class="country-container">Container 2</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Try to use this above in Css code
<div style="width: 100%;height: auto;border:1px solid red;float:left;">
<div style="width: 100%;height: auto;border:1px solid green;float:left;">
</div>
<div style="width: 100%;height: auto;border:5px solid Yellow;position: fixed;float:left;margin-top: 50%;">
</div>
</div>
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
position:absolute;
top:100px;
left:20%;
width: 1024px;
height:1300px;
background:blue;
}
.container {
position:absolute;
top:0px;
left:20%;
width: 1024px;
height:86px;
max-height:300px;
background:blue;
}
#footer{
position:fixed;
bottom:0px;
width:100%;
height:100px;
max-height:900px;
left:0px;
color:#000099;
background:#f2f2f2;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="country-container">Container 2</div>
<div id="footer">Footer</div>
</div>
change #footer to
position:fixed;
Please try this css and see fiddle link:
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
background: #0000ff none repeat scroll 0 0;
height: 1300px;
left: 20%;
position: relative;
width: 1024px;
}
.container {
background: #0000ff none repeat scroll 0 0;
height: 86px;
left: 20%;
margin-bottom: 3%;
max-height: 300px;
position: relative;
top: 0;
width: 1024px;
}
#footer {
background: #f2f2f2 none repeat scroll 0 0;
bottom: 0;
color: #000099;
height: 100px;
left: 0;
max-height: 900px;
position: absolute;
width: 100%;
}
https://jsfiddle.net/tn30t1k7/2/
Otherwise you can reffer this link:
http://www.cssstickyfooter.com/
<body>
<section class="wrapper">
<main class="content">
content
</main>
<footer class="footer">
footer
</footer>
</section>
</body>
html {
position: relative;
min-height: 100%;
}
body{
margin: 0 0 60px 0;
}
/* don't do that */
/* .wrapper {
position: relative;
} */
.content {
background: green;
height: 200px;
/* height: 700px; */
}
footer{
position: absolute;
bottom: 0;
left:0;
width: 100%;
height: 60px;
background-color: orange;
}
How about this https://jsfiddle.net/zkto8o88/2/.
.footer class will search for the nearest parent with relative position which in this case is html tag.
If the .wrapper class would have the position relative property then it would not work.
http://i.stack.imgur.com/aDBuK.png
http://i.stack.imgur.com/mPbuX.png
How do I get #cols to contain the whole of #botcol's area. I realise this is quite basic but I've been struggling with it for a while, thanks for your help in advance.
Html:
<div id="content">
<img id="worldmap" src="worldmap.png"/>
<div id="cols">
<div id="topcol">
...
</div>
<div id="botcol">
<div id="infopanel">
...
</div>
</div>
CSS:
div#container{
margin-left: auto;
margin-right: auto;
width: 70%;
height:100%;
position: relative;
border: grey solid 1px;
}
#cols {
z-index:1;
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
overflow:auto;
}
#topcol {
width:100%;
overflow:auto;
}
#botcol {
height:100%;
width:100%;
}
div#content{
position:relative;
}
This should work. I just want that the nested div is in the center of the parent div.
Is this at least the correct approach to center something, or am I way off the standards?
I'm just beginning to build my websites.
#container {
position:relative;
width:980px;
height:900px;
margin:auto;
border:1px solid red;
}
#logo {
width:960px;
height:305;
margin: 0 auto;
position:absolute;
}
and the markup
<body>
<div id = "container">
<div id = logo><img src="img/johndoe.jpg" width="960" height="305"/></div>
</div><!-- end of container -->
</body>
Actually, the nested div is at the leftmost of the container.
Remove position:absolute; for the logo.
remove possition:absolute; from .logo
#container {
position:relative;
width:980px;
height:900px;
margin:auto;
border:1px solid red;
}
#logo {
width:960px;
height:305;
margin: 0 auto;
/*position:absolute;*/
}
Try checking out http://codepen.io/skeep/pen/nGupC
html
<div class="container">
<div class="logo"><img src="http://placehold.it/350x150" alt="" /></div>
</div>
css
.container {
width:980px;
height:900px;
margin:auto;
border:1px solid red;
}
.logo {
width:350px;
height:150px;
margin: 0 auto;
}
I've been trying to get my footer to display properly, and have combined a number of approaches, but am still getting the same result. The footer sits a fixed number of pixels from the top of the page, and doesn't extend all the way across the page. I need it to display just below the content, no matter the size of the content, and for it to extend all the way across the page.
the CSS:
html, body, #container { height: 100%; }
#container { height: auto !important; min-height: 100%; margin-bottom:-50px;}
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-align:center;
float:left;
position:relative;
body:before;
content:"";
overflow:auto;
margin-top:50px;
padding:10px;
}
#footer, #push{
height:50px;
}
.clearboth {
clear:both;
}
The HTML:
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
You need to make sure that you reference your css file from your html, so your html should look like this, if they are in the same directory you don't need to add the path:
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="path_to/YOUR_CSS_FILENAME_HERE.css">
</head>
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
and your css, I took away the left -5%:
#page {
min-height: 100%;
position:relative;
}
#main {
padding-bottom: 50px;
}
#footer {
background-color:#4a4a4a;
position: absolute;
width: 100%;
bottom: 0;
height: 50px;
padding:10px;
font-family:'discoregular';
display: block;
overflow:auto;
text-align:center;
float:left;
margin-top:50px;
}
change the css to the following.You can chage the "bottom" so that it can come up
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-decoration: none;
text-align: center;
width: 100%;
position: fixed;
z-index: 1000;
vertical-align: baseline;
bottom: -50px;
padding:10px;
}
All I added into my footer styles after reading this post was- overflow:auto; - and it's sorted now