When i set my footer to relative it drops off the page and end up needing -1800px to get it to the bottom of the content but that then leaves a massive white space at the bottom what can cause this to happen? And what can you do to fix it?
#footer {
background-image: url(http://***.***.***.*/spvfooter.png);
background-repeat: no-repeat;
position: relative;
top: -1280px;
left: 550px;
width: 1025px;
height: 330px;
color: white;
line-height: 16px;
text-align: justify
}
Make sure your Divs are all closed.
Validate your code and use a css debugger to make sure all floats are cleared.
if your working with more relative elements and positioning(however) them you should remember that their static point (with width and height) contains. and if you put another element beneath it will be all their height down the page
Related
I have been having trouble with my code and I don't know why. The site allows me to scroll to the right, like I have some image or something there, but I don't. Why is this happening?
I have looked into margin but I don't find anything.
body {
background-image: url('icon/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 1439px 851px;
margin-top: 850px;
}
div.relative {
position: relative;
left: 255px;
bottom: 805px;
}
<body>
<div class="relative">
<img src="icon/folder.png">
</div>
</body>
The div is width: auto so when it is rendered, it takes up as much space as is available horizontally.
It is also position: relative and left: 255px, so it is offset by 255 pixels from the left. This does not affect its size (which is determined before the positioning is applied).
Since it is sticking almost 255 pixels out of the side of the document, a scrollbar is added so the user can see it.
If you want to give an element a left margin, then give it a left margin. Don't mess around with positioning.
Relative positioning is almost never useful when combined with left, top, etc. It is mostly useful for providing a context for the absolute positioning of an element's descendants.
It's because you have the left property set to 255px
div.relative {
position: relative;
left: 255px;
bottom: 805px;
}
It's moving the div over 255px, so it's creating the scroll.
So, I set "width: 20px" to the class and it fixed, try it
div.relative {
position: relative;
left: 255px;
bottom: 805px;
width: 20px;
}
I am learning how to make a website and have hit a bump.
The website is here, and as you can see, it's possible to scroll to the right, which I don't want to happen.
I think the problem is with the following element:
.logo_bg {
background-color: #FFFFFF;
box-sizing: border-box;
padding: 40px;
padding-bottom: 130px;
text-align: center;
width: 100%;
position: relative;
top: 0px;
}
which relates (I hope) to the container that holds the logo and the text at the top of the page. I think width being 100% is the problem, but I'm not sure why; it seems to span more than 100% at the moment.
Any help is appreciated.
Remove
.logo_text width: 100%
.logo_image position: relative
Remove left from the logo_image class to center it and fix the overflow.
Also add left: 0; to your logo_text, because it has padding 40px from parent plus 100% width (100% + 80px [overflow]) or just remove the width and position it relative
just got a question regarding relative & absolute positioning and applying clearfix to the main container cos I've written the code and it's not behaving as I expected.
Structure-wise this is a simple page about product history. nav-bar with drop-down menu at the top across the screen, then a big hero image across the screen, followed by a few paragraphs and a simple footer, that's it.
here's my problem:
I need to put 3 components in the hero image area - the hero image itself, one title word on the top left corner and one logo on the top right corner. What I've done is: I created a div and used the hero image as background image. I set the position value of the div to relative. I created another div to hold the title word and set the position to absolute, using top and left to give it a location. Following the same logic, I created another div to hold the logo and set it to float right, with position set to absolute and top and right to give a location. I've applied clearfix to the main div and everything looks ok on my screen (resolution 1280 x 1024) until I saw it on the wide screen(1680 x 1050) --- the logo is not on the hero image! It's to the right side of the hero image.
What caused this? I thought by putting 2 divs inside the main div and applying clearfix, the three will "get together" and act as one and won't separate... Is it because I haven't written any code for responsive layout? Or was it because I shouldn't have used the hero image as the background? Would this problem be solved if I used z-index instead to specify the stack order of hero image, logo and title word?
Below is my code and any help would be much appreciated!
<div id="history-content" class="clearfix">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px;
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp img {
width: 10%; /*not sure I'm doing the right thing here either*/
height: 40%; /*not sure I'm doing the right thing here either*/
float: right;
position: absolute;
right: 100px;
top: 20px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
Few things:
Absolutely positioned elements are taken out of normal flow, hence doesn't affect the size of their parent.
Since they're out of normal flow, float has no effect on them (as far as i know)
Absolutely positioned elements shrink wraps to fit it's contents unless width and height is set explicitly or stretched using the top, right, bottom & left properties.
Now your parent div #history-content doesn't have any height set, and all of it's content of are absolutely positioned, So it's not visible (height 0)
applying a proper height for the parent seems to fix the issues for me.
Side note: unlike what you think, you don't have two absolutely positioned<div>'s, #stamp img absolutely positions the <img> inside div#stamp, for the same reason mentioned above, div#stamp is also invisible (height 0) you'll get the same result with and without it. And without floats
As others have said, float doesn't have an effect on absolute positioned elements, and so technically you don't need clearfix in this case.
I'm not exactly sure why your logo is positioned outside the outermost container #history-content, but you could try to put a border around the #history-content to further troubleshoot.
EDIT: Maybe check your hero image dimension, is it smaller than 1608px in width?
<div id="history-content">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
I've changed your CSS below
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px; /*set whatever minimum height you wish*/
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp {
display: block;
position: absolute;
right: 100px;
top: 20px;
width: 10%; /*set width of image in containter instead*/
height: auto;
}
#stamp img {
max-width: 100%; /*image width will not stretch beyond 100% of container*/
height: auto;
}
JSFiddle: http://jsfiddle.net/5L9WL/3/
I have a div box that in the HTML code is below all the other content and not nested into anything else. In the CSS I placed the div on the top right of the site, and when I change the window size so that it doesn't fit, it jumps down on the site. I am not allowed to change the HTML code (it's a school assignment).
Is there any way I can make this jumping div box stay in place relative to the main content?
In the div box I have placed a background picture because this is the only way to add a stand-alone picture without changing the HTML. The teachers added these extra div-boxes in the code just for this.
The div's CSS (if it helps):
#extraDiv1 {
background-image: url('images/koala.png');
background-repeat: no-repeat;
background-size: 250px;
width: 250px;
height: 370px;
float: left;
margin-left: 20px;
margin-top: -610px;
position: relative;
z-index: -1;
}
You can use the top and left attributes to position your box properly. Since you're using relative positioning, this will position it relative to its normal position. Therefore, if you want to line it up with where you said you want it, you would end up with something like this:
#extraDiv1 {
background-image: url('images/koala.png');
background-repeat: no-repeat;
background-size: 250px;
width: 250px;
height: 370px;
position: relative;
z-index: -1;
border: 3px solid red;
top: -610px;
left: 660px;
}
Hope this helps!
I am trying to create a footer that is responsive and sticks to the bottom right of a page but can't get it to work consistently when a absolutely positioned div is on the same page.
The code I am using can be seen at:
http://192.241.203.146/sample-page/
I have tried:
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-top: 40px;
As well as:
float: right;
bottom: 0;
right: 0;
margin-bottom: 40px;
margin-top: 40px;
To get it to work, but it does not respect the absolutely positioned content on the page when it is resized down to mobile. It clashes like so:
I know that using position:absolute means that the div is removed from the flow of objects but I need to use it on the element in the middle of the page to avoid the objects jumping around when I use jQuery fades.
I suspect this is because it is not inside a span or row as per the bootstrap base I am using. Is that the problem?
I'm at a loss here - any guidance appreciated :)
Your problem is that the div is normal to the page, but his position is absolute. Inspecting your code i saw this:
if you want the footer is always visible in the bottom, you can wrap the footer to the div which width will be 100% of the width of the page. Like this:
div#footer_container{
min-width: 100%;
min-height: 100px;
position: relative;
}
div#footer_container div#footer{
position: absolute;
right: 0px;
bottom: 0px;
}
Result:
Red - main container of your page, Green - container of your footer (its always will be after the main container), Blue - your footer.
P.S. sorry for my english :)
I think I've found it!
Try this:
.main {
padding-bottom: 140px;
}
It works for me even if I reduce the width of the browser.