I have a div which has its CSS initially defined as:
.mydiv {
position: absolute;
top: 60px;
left: 60px;
right: 60px;
bottom: 60px;
background-color: cyan;
overflow: hidden;
}
That is with equal distance from screen borders and I wanted to make it draggable via jQuery. This wouldn't work because of the right and bottom CSS directives.
So my next idea was to use this CSS definition:
.mydiv {
position: absolute;
width: 90%;
height: 90%;
margin-left: 5%;
margin-top: 5%;
background-color: cyan;
overflow: hidden;
}
Which according to my understanding would create a div with a width and height equal to 90% of the screen width/height and additionally the margin directives (5% on each side) would position it in the center of the screen.
This solution doesn't seem to work for 100%.
It works horizontally, the div is centered horizontally BUT vertically the space in the bottom is less than the space on top. Which is not what I want it to be.
I know I could use calc() to solve it in a different way but I want to avoid it due to browser compatibility (IE8).
I was wondering what I'm doing wrong?
i'm kind of stupid today.
i removed the margins and used:
top: 5%;
left: 5%;
and it solved my problem.
Related
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
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.
I'm trying to figure out how to get the footer to stick to the bottom of the page in the css of http://bit.ly/138xOAB
I've tried alot of things which were said in tutorials, such as:
the position absolute,
bottom:0,
and min-height of the container 100%,
height of the body 100%,
But none of those things turned out well.
You can see the HTML and CSS by inspecting the website. I can't get the proper code over here.
Can someone help me, maybe there is something wrong in the HTML?
The problem with you footer's position: absolute; is that it will hide the other elements behind it.
Your footer can be best viewed if you remove position: absolute; so as to show all elements and add margin-top: 20px; for some gap in between the footer and the element before it..
Try it.
EDIT:
If you want the footer to be always float on the screen, use the following CSS (comments inline):
.container {
max-width: 1200px;
margin: auto;
padding: 0px 3%;
margin-bottom: 250px; /* so that all content is visible */
}
.footer {
background: #efefef;
position: fixed; /* so that the footer floats */
overflow: auto;
bottom: 0px; /* float at bottom */
padding-top: 20px;
padding-bottom: 20px;
height: 180px;
width: 100%;
margin-top: 20px;
}
Remove "position: absolute" and "bottom: 0" from the .footer class. I think that fixes your issue. And add a small margin above the footer so there is a small space between the content and the footer.
My fixed header is overlapping my content.
Much like here (Position fixed content overlapping problem)
but my header is dynamic so not always 50px in height sometimes 52, 100 ...
Try to position it in your box better.
When you create a fixed element, it requires an exact position:
Example:
#header{
height: 95px;
width: 640px;
position: fixed;
top: 30px;
right: 30px;
}
So, this is how your browser will read this: I will place a fixed element in the top-right corner of the screen: 30 pixels from the top, and 30 pixels from the right of my screen.
THE REASON those fixed elements are one on top of another it's because he didn't define a top/bottom and left/right position correctly. Add more text and you will see if you can scroll on the fixed elements (you can't..).
Put everything in a div and ID'it #bigBody. Give the #bigBody an exact width and height, let's say 1000 width and 600 height.
Now add these:
#header {
height: 50px;
width: 600px;
position: fixed;
top: 30px;
right: 30px;
}
#footer {
background: #fff;
bottom: 0;
right: 0;
height: 30px;
width: 600px;
position: fixed;
}
min-width is irrelevant here... you use this only if you design big websites that require multiple devices access like iPhones, Tablets etc... if your just playing with the code just stick with the basics.
You can do that via JavaScript, updating both the size of the header and the margin of other widgets. See my fiddle for an example (with CoffeeScript, tested on Firefox and Chrome), or this other fiddle that uses jQuery. Basically it's changing the CSS together for more than one element.
header { height: value + "px"; }
.contents { margin-top: anotherValue + "px"; }
If the size change isn't done by JavaScript/CoffeeScript, you'll have to put a event listener to update the .contents CSS.
#header
{
position: absolute;
top: 0%;
height: 24px;
}
#body
{
position: absolute;
top: 24px;
bottom: 20%;
overflow: auto;
}
#footer
{
position: absolute;
bottom: 0px;
height: 17.2%;
min-height: 80px;
overflow: auto;
}
My problem is that when I compress the browser window, the middle element (the 'body') starts to slip into the footer's area (when 20% from the bottom becomes larger than the minimum height of the footer). The footer can be larger in height than its minimum, but it cannot be smaller.
Any good way to do this without Javascript code?
No. When an element is positioned absolutely it is removed from the flow of the document and has no knowledge of any other elements.
I have not seen a sticky-footer solution that will work with a variable height footer.
There are some examples of headers and footers on Dynamic Drive. These are pure CSS layout examples.
You should be able to achieve the same effect with a combination of these two.