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;
}
Related
I'm working on this page and trying to get the slideshow to display correctly at tablet and mobile widths with media queries. However, all of the slider container elements are setting their height to 590px and this is creating a large gap beneath the slider and its content. I don't belive any of the elements have a fixed height set, but I have used some max-height:590px here and there. Any thoughts on how to get rid of that gap and force the containers to resize correctly?
Slider uses Cycle2.
Some HTML code
<div id="slider" class="cycle-slideshow" data-cycle-pager="#adv-custom-pager" data-cycle-slides="> div" data-cycle-timeout="7000">
<div class="singleSlide">
<!-- content goes in here -->
</div>
And some CSS that I think is important:
#homeslider {
height: auto;
}
#homeslider, #slider img {
width: 100%;
height: auto;
}
#homeslider {
width: 1090px;
margin: 0px auto;
max-height: 590px;
}
For reference, this slideshow is the expected behavior.
ETA: Added some of the code that I think is important?
In your .slidercaption you have a top:-200px which is causing the issue. Unlike margin, elements with position:relative won't physically move when you set a top or left style. That means the occupied space for that element will still remain on that position.
So to fix that, remove top: -200px and replace with margin-top: -200px instead.
From this:
.slidercaption {
position: relative;
top: -200px;
}
To this:
.slidercaption {
margin-top: -200px
}
Take note, in your css there's a margin:0 set in that element. Make sure your update will override that existing style.
Update:
A far better solution is to use position:absolute instead, since having a negative margin or position is more likely to get an issue with that huge value.
So...
From:
.slidercaption {
position: relative;
top: -200px;
}
To:
.slidercaption {
position: absolute;
bottom:0;
}
Then what was causing the below elements to go up is because of this:
#sliderNav {
margin-top: -190px;
}
Change that to:
#sliderNav {
position: absolute;
bottom: 168px;
z-index: 99;
width: 100%;
margin: 0;
}
When you came to a point where you are using large negative values, you can use position:absolute instead which is very helpful and less likely to have some issues if used properly.
So i have this image right here
"http://i.imgur.com/eh71foN.png"
My problem is that whenever i resize the window the Mass Effect image doesnt resize with it.
It becomes like this
"http://i.imgur.com/jaDV7jG.png"
I've been trying to figure this out for a while. Can anyone point me in the right direction?
#MassEffectSign {
background: url(masseffect12.png) center top no-repeat;
top: 25px; left: 750px; z-index: 2;
padding: 250px;
position: absolute;
}
My blue background
#bodyBorder {
background: url(navyblue.jpg) center top repeat-y;
padding: 1000px;
opacity: 0.7;
background-attachment: fixed; }
Use img tag instead background image in CSS.
img {width: 100%}
Use percents for the relevent values.
top: 25px; left: 45%;
This makes the amount of space between the left edge and the image relative to the window size. Play around with the value a little to center it and you should be good.
Your positioning is absolute, so it will move independently of the scale. Put that inside a relatively positioned div and then it will work.
For instance,
<div style="position:relative;">
<div id="MassEffectSign"> </div>
</div>
Hope this helps.
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 the following code:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: 100%; width: 100%; background-color: #FF0000;"></div>
</div>
Screenshot:
Why does the div gets pushed outside of the viewing area and hence showing the scrollbars. If you check toward the top right corner, the black area is the extension when the red div moved.
How can I edit it so the red div has the top and the left position but doesn't extend beyond the page width and height?
To actually answer the "why" of the question:
The reason you're getting scroll bars is that the relative positioned div inside of the absolute is set to 100% width and height, but ALSO is displaced (in this case, by top and left)
It is therefor assuming 100% width/height of the parent container AND displacing it, causing it to be too large.
By adding overflow:hidden, you seemingly solve this issue, but any content past that will be clipped, not actually fitting inside the dimensions you have set.
Another way to do this would be something like...
top: 10%;
left: 10%;
width:90%;
height:90%;
You could just as easily substitute top and left for padding/margin of that direction.
You can use CSS3's calc() function to set the second div's height and width to be the same as the first one's, minus the left and top offsets. This will also allow you to use position: absolute in your text, aligning it to the right:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: calc(100% - 45px); width: calc(100% - 300px); background-color: #FF0000;">
<span style="position: absolute; right: 0; top: 50%;">TESTING THIS OUT</span>
</div>
</div>
Check the working JSFiddle. I also added a CSS reset to get rid of the body margins that the browser might add. If you want to use this reset in your HTML file, create a <style> tag inside your <head> tag, with the code that is showing in the CSS section in the JSFiddle. If you don't want to use the entire reset, the only actually relevant part is body { margin: 0px; }, so you can also add style="margin: 0px;" to your body tag.
In an HTML page, if I align some <div>s with "right: 0px", they all look very nice, as I expect. However, if I make the browser window smaller and the horizontal scroll bar appears, when I scroll the page to the right, I see an unexpected white space (instead of the background colors of my <div>s). It seems that my <div>s are aligned relative to the visible area of the page. See the sample code below:
<html>
<head>
<style>
<!--
#parent {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: yellow;
}
#child {
position: absolute;
left: 100px;
top: 300px;
width: 1000px;
height: 400px;
background-color: blue;
}
-->
</style>
</head>
<body>
<div id="parent"><div id="child">some text here</div></div>
</body>
</html>
Is there any way to make the "right: 0px" property align the controls relative to the size of the entire page, not only the visible area?
Thanks.
The Problem is the "absolute" position in the parent element, because it's scrollable per definition.
If you set the position to "fixed" and an additional attribute overflow to "scroll", it should look like expected.
#parent {position: fixed;
overflow: scroll;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: yellow;
}
if you add
html{ border: 3px solid red }
to your stylesheet,
you'll see that you are setting the 'right' property to the edge of the page.
I think you need to rethink your strategy.
What are you trying to achieve?
Dont use absolute position unless you absolutely must. Use margins and paddings instead. And dont forget to reset margins and paddings so you dont start with whatever the browser has as default.
Is it necessary to use absolute positioning in your case? Otherwise you can remove the left and right properties and simply use width: 100%;
my answer is i want change align scroll?
example "right align" scroll.
#ex {overflow: scroll}
Right? Bottom? Are sure these are even real CSS attributes? Normally you would just set top/left and then width/height...