In HTML, I am trying to make a footer but every time I do this it just comes like this with an added margin on the left.
this is my footer code;
<div id="footer"> tester </div>
#footer {
background-image: url(images/backgroundrpatternfooter.png);
background-repeat: repeat;
position : absolute;
bottom : 0;
height : 40px;
width : 1800px;
margin: 0;
}
Your problem lies not within the footer div, but within the body. The body element has a default margin of 8px (might depend on the browser you're using), so you need to set the body's margin to 0 like this:
body {
margin: 0;
}
Working example.
I would also like to suggest that you look into using the footer element instead of using a div as a footer, it was added to HTML5 for that very purpose!
I hope this helped and good luck!
<div id="footer"> tester </div>
#footer {
background-image: url(images/backgroundrpatternfooter.png);
background-repeat: repeat;
position : absolute;
bottom : 0;
height : 40px;
width : 1800px;
margin: 0;
**left:0;**
}
Try adding left:0;, if still not working check your inherit css.
Your CSS indicates a fixed with of 1800px but since your element is absolutely positioned, you need to add a margin-left or left property to specify where the element should be positioned from (margin-right and right also work).
Do you want your element centered? Try using
left: 50%
to achieve that.
Also, try adding
left: 0;
and see if that removes the gap you're dealing with.
(The gap is probably caused by your containing element being wider than 1800 px).
Related
I created a div where I plan to a title for my webpage, I set the width to 100% but there was still white on the sides and top. I got the top to disappear but the sides won't, I assume it's got something to do with the movement of the div, I've checked everywhere, but everyone has different divs for different purposes so I couldn't find the answer. In case you guys wanna show an example of your solution you could do so here
Here is the HTML:
<div id="toptitle">
</div>
For my CSS I tried using margin-left: -8px and the same for the right side but they don't work like that, it's only movement of the div and even when I don't set the left side yet the right still won't move till there's isn't a white gap:
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
margin-top: -15px;
}
Reset your body margin. Also make a research for reset css.
body {
margin: 0;
}
Add margin: 0 to the body :
body{
margin:0;
}
You are missing body margin, please have a look at the below working snippet taken from your codepen. and there is no need to have negative top margin too.
body {
margin: 0
}
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
}
<div id="toptitle">
</div>
The body tag has a default margin of 8px which you have to remove. So just add this to your code:
body{
margin:0;
}
You should also remove margin-top:-15;
Hope this is clear to you!
How would i go about making the div i am using to contain the page stretch all the way to the bottom of the page.
You can see that here: http://csgoshack.com/shop/index.php?page=cats The white div don't go all the way to the bottom of the page this is making it ugly.
Whats the best way to go about making this always stretch to the bottom of the page relative to the browser size?
Thanks.
If you need any code of the website to help me do this please ask.
EDIT Right all i really want is that white bar to stay static over the background and then let the products scroll over the white box so its always in the center of the page how is this possible?
I would move the top bar outside of the whitebg as it might make this easier.
Set your body:
padding: 0;
Set your .whitebg:
position: relative;
left: 50%;
margin-left: -625px;
top: 0;
padding-top: 60;
height: 100%;
You'll probably notice how you have a scroll bar on the right even when it isn't necessary. I think moving the top bar out of the whitebg will remove your need for the padding-top: 60 which should help get rid of the scroll.
** EDIT **
If you move the top nav bar outside of whitebg I think it works well leaving a lot of your css as-is.
.whitebg
position: absoulte;
left: 50%;
margin-left: -625px;
top: 50px;
padding: 10;
height: 100%;
** EDIT #2 **
The key here is to get your background to encompass the area you desire. Then user other inner elements to handle positioning of the contents within. If you try to add a margin or padding onto the outer most background element, you'll find that it will exceed the desired size since those will always add on to the height or width.
.holder
remove the padding-top
.whitebg
remove all padding
.bodycon
add margin-top: 50px;
change margin-bottom to a normal margin
.fotter
add a margin if desired
Try setting height: 100% on .whitebg selector
Just inspected your page..try to set the bottom: 0px; to your whitebg class
.whitebg {
..your existing code..
bottom: 0px;
}
First ill ask why you have all meta tags in body?:)
If the blue bar is fixed position you can try
html, body{
height:100%
}
.whitediv{
height:100%;
}
Or just doo simple jquery:
var docheight = $(document).height();
$('.whitediv').height(docheight);
And make it as function on window.resize
This Code should help you,
.WhiteBag{
height : 100Vh;
}
Ask if you have any doubt
Add these in style
.whitebf
{
height:800px;
width:100%;
}
this one in your footer
footer
{
position:absolute;
bottom:0px;
}
I am specifying a background color for the body which displays up to a certain distance only. I need it to be full height and for its child elements too. One of its child elements has border-right which also needs to show over the full screen height.
My CSS looks like(sample one) better check my demo
demo page
html,body {
height: 100%;
background-color: #fefefe;
}
.cover {
height: 100%;
}
.left_side {
float: left;
height: 100%;
border-left: 1px solid #ccc;
width: 31%;
}
and html is
<body>
<div class="cover">
<div class="left_side">
</div>
</div>
</body>
and the bgcolor and childs border seems up-to some limited distance only like
what is that problem guys i need that background and border as 100% height.
Remove height:100% from your body and html style.
Instead of having a border set to the left container, try setting the border on the content container instead.
your css would be something like:
.large-9 .columns .right_side{border-left:1px solid #333;}
the left column is currently set to 100% and renders correctly. the problem is that it doesnt take into account the overflow content you cannot see, until you scroll. The other solution would be to absolute or fixed position the left container, and set its top and bottom values to 0.
css for that would be something like:
.left_side .full_height{position:fixed;top:0;bottom:0;width:200px;}
Here's a really basic layout with a fixed left column - http://jsfiddle.net/WAJtk/
and a version with a fixed header too - http://jsfiddle.net/WAJtk/1/
you might also like this pen - http://codepen.io/lukeocom/pen/KqAfG
You could use absolute position and setting top and bottom:
body {
position: absolute;
top: 0;
bottom: 0;
}
I know this has been discussed here many times, but none of the answers I found here, seem to address my problem.
I have this variable (in height) layout, and wnat the footer to always stick to the bottom.
I have used the min-height: 100%; to the container div, and got it somehow to always be in the bottom. trouble is, it's sinking too low to the bottom.
I've put an example here:
http://jsbin.com/erono3
As you can see, my footer is at the bottom, but will go too far in the bottom, and even though there's space on the page to display it, it's creating a scroll bar.
Also, I'd like the main container to to be shown as big as the content is (i.e. closing the square), but right now, it looks like the container is going all the way to the bottom, and my footer is covering it.
What am I doing wrong there?
Thanks in advance
You should take a look at the link by Ben Lee again :). I have used that in your layout to achieve the effect you want. See it here: http://jsbin.com/erono3/2
The important thing is for the footer to be part of the container. The container has a min-height of 100%. So it occupies the whole screen always. The header is normal what ever it is inside.
Then you should have an inner container element (important), where your main content resides. In the link above, it has the id #body. This would have a padding-bottom (to give space to the footer.
The footer is absolutely positioned with a bottom:0px meaning it is always going to be at the bottom of the container (the container has to be position:relative).
EDIT (in response to the comment)
To make your footer span the entire page, but keep everything else centered, just do this:
remove the width off of the #containter, #container spans the whole page. Provide a width to the #body element in the link above and center it, using margin: 0px auto. You get the effect you wanted.
New link: http://jsbin.com/erono3/5
Here's a simplified version of this, which is worth reading for the explanation. See if you can adapt yours to fit.
CSS:
html, body, div {
margin: 0;
border: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrap {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background-color: #aaa;
}
and HTML:
<div id="wrap">
<div id="content">Stuff goes here.</div>
<div id="footer">FOOTER</div>
</div>
The problem is you have a min-height of 100% on your container div. That means that the container will be 100% the height of its parent, which is the body tag which has a height of 100%. So if your viewport is 600px, then your body will be 600px, then your container will be 100% of that which is 600px, and then it will stick the footer after the container div which is why it goes below the veiwport.
So one thing you can do is just absolutely position your footer inside the body. Do this by changing your position to be absolute, and bottom:0px. It will float at the bottom.
You might want to put it in your container as well depending on what style you are going for and position it absolute in that and at the bottom.
Your problem is not that the footer is too low, but by making the body 100% it pushes the footer below the bottom of the page.
Consider putting the footer div inside the container div and getting rid of the margin-top: -5.5em and position: relative and it will work just fine.
http://ryanfait.com/sticky-footer/
* {
margin: 0;
}
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 */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
This is particularly for anyone using ASP.NET master pages but also in general, if your content is also wrapped in a <form> element you will need to change
html, body {
height: 100%;
}
to
html, body, form {
height: 100%;
}
in the header section of my web page, the design is something like the logo and navigation div should overlap a repeat-x image(i.e bg-header).
this is the html i have used
<div id="header">
<div id="header-bar">
<p>kljslakdjlaskjdkljasdlkjasdlkjaskldjasjd</p>
</div>
</div>
and this is the css
#header {
min-width: 1040px;
height: 111px;
position: relative;
}
#header-bar {
margin-top:50px;
height:53px;
}
now when in the #header-bar if i give margin-top:50px then the header div shifts the position to 50px from top. i want to achieve something like
the header div is to define the height of the header content.
i want to wrap header-bar in the header div and the elements or the div wrapped inside the header div should should have the margin of 50px from within the header.
for example the header-bar should have a margin of 50px from the top of the header div.
when i use the above code it moves the position of header div too. i want the header div to be fixed on top only the sub div or content within the header div is what i want to position.
hope i am not confusing you.
where i am going wrong?
thank you
EDIT: it works if i use padding-top but excluding the background with repeat-x property.
i want to move the image with repeat-x property. in the header-bg div
Margin doesn't affect the position of elements relative to their parents.
To achieve the effect you want, you need to use padding on the #header, for example:
#header {
min-width: 1040px;
height: 61px;
position: relative;
padding-top: 50px;
}
#header-bar {
height:53px;
}
If you add "overflow:hidden" to the #header div, it'll work like a charm! Note that there is padding, but also margin. If you remove the padding, there will still be space left, that's the margin!
Jsfiddle example here
Use padding on the header div rather than margin.
#header {
min-width: 1040px;
height: 111px;
padding:50px 0px 0px 0px;
}
#header-bar {
height:53px;
}
You're running into something called margin-collapse. In essence, adjacent margins will collapse together, and only display the larger one - that is, the one with more absolute distance from 0. Since your #header margin (0px) is adjacent to your #header-bar margin (50px), the 50px margin is the one that is displayed, and it affects both of your elements.
If you were to add even 1px of padding to the top of #header, you would get the desired effect:
#header {
min-width: 1040px;
height: 111px;
position: relative;
padding-top: 1px;
}
I'm not sure I understood the question.
Does it seem like your answer : link ?