I have a problem with some CSS ,maybe someone can help me out .
I dont see any margin or padding there that will be the problem.Only that the height is to big or something.
I am using wordpress Sydney theme.
This is the website.
How can i get the space out between the banner and the content of the page ?
Here is a screenshot of what i mean.
Thank You.
#sf-slider-overlay {
position: absolute;
top: 230 px;
z - index: 999;
width: 1170 px;
margin - left: auto;
margin - right: auto;
}
you only have to do this..
Position : absolute
Will work ☺
There is one element (#sf-slider-overlay) with wrong position.
#sf-slider-overlay {
position: relative;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
Change it to,
#sf-slider-overlay {
position: absolute;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
So Simple just add below code to custom css style of your theme
#sf-slider-overlay {
position: absolute;
}
Your problem will be solved or put above code in your page css.
That's because the space isn't caused by any margin or padding. The space is caused by an element that has been moved out of the way using position relative.
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: relative;
top: 230px;
width: 1170px;
z-index: 999;
}
If you change this to have a position:absolute; it fixes the extra space that you had.
Like this:
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: absolute;
top: 230px;
width: 1170px;
z-index: 999;
}
You may have to fiddle with the positioning slightly to get it right, I noticed that once absolute has been set, the word "Domestic" sits right on the edge of the screen, so perhaps add a left:2em; to the property, or even padding-left:2em;
You are using position: relative; in the element #sf-slider-overlay. position: relative; takes an element out of the float, but the space remains there.
You can use position: absolute; but have to set the left property to get the same result as now:
#sf-slider-overlay {
position: absolute;
left: 50%;
translate: translateX(-50%);
}
Related
I have a position: fixed element. It has some top and left properties but it was not visible in the screen. After some debugging I found that it was positioned way off than it should be. So I set top: 0 and left: 0 and now that element was where I wanted it to be (near middle bottom) instead of being in the top-left of the screen as it should be.
Why is this happening? One thing is that it's parent container also has position fixed. I'll have a snippet below
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
<div class="container">
<div class="child">Test</div>
</div>
The reason there is a fixed component inside another fixed is that one is container and the other is kind of a tooltip so it has to be that way.
left and top properties should have some units associated with it, e.g. pixels. Try the following:
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
Got the answer. It's a bug in chrome where a child with fixed position doesn't work if any parent has transform: translate css.
Duplicate of this question
Issues I have had
I have not been able to scroll down on my site.
No solutions I ave found work.
Info
My site is execlinux.glitch.me
The CSS files and HTML can be found by going to glitch.com and searching execlinux
I found the solution:
in your CSS file you have a ".text" element which has the fixed position property. It's wrong!!! it should have the relative position like the below:
.text {
position: relative;
top: 100px;
left: 50px;
}
the css below is incorrect:
.text {
position: fixed;
top: 100px;
left: 50px;
}
You could try changing fixed to relative, however if you do there will be other issues you will face.
If you use the following css:
.text {
position: relative;
top: 100px;
left: 50px;
}
you will find that the contents of your <div class="text"> scrolls over the top of your navigation menu and is not left justified.
Perhaps try
.text {
position: relative;
top: 100px;
left: 50px;
z-index-1;
width: 90%;
}
html {
height: 100%;
width: 100%;
overflow: visible;
}
Tested these changes and while not perfect, they achieve a somewhat satisfactory result.
I have a container div which has 5 images, all absolutely positioned. I've added the top and left values for all of them but as soon as you define the last element as absolutely positioned, all other images lose their positions and stact at the top.
The container is relatively positioned
.responsive-container{
position: relative;
}
And it has the images inside
<img src="img/responsive-mac.png" id="res-mac">
<img src="img/responsive-laptop.png" id="res-lap">
<img src="img/responsive-tab.png" id="res-tab">
<img src="img/responsive-phone-portrait.png" id="res-ph-1">
<img src="img/responsive-phone-landscape.png" id="res-ph-2">
With following Css applied
.responsive-container{
position: relative;
}
#res-mac{
position: absolute; width: 97%; top: 0%;
}
#res-lap{
position: absolute; width: 85%; top: 232%; left: 30%;
}
#res-tab{
position: absolute; width: 35%; top: 414%; left: 7%;
}
#res-ph-1{
position: absolute; width: 20%; top: 573%; left: 36%;
}
#res-ph-2{
position: absolute; width: 25%; top: 26%; left: 28%;
}
In the demo here, you can just remove the position: absolute; from the 5th image and others would start working. It's not that particular image which is the problem, if you remove the 5th image completely, the 4th image will start doing the same thing.
I've tried removing all css and javascript to narrow down the cause but it;s still not working. What gives?
Try this:
.responsive-container { height: 66px; }
Ok I am running into a little problem positioning an image inside a DIV.
<div id="wholePage">
<img src="theImages/header_shadow_flip.png" id="hF" />
<div id="pageWrapper"><img src="theImages/header_shadow.png" id="bF" />
</div>
</div>
I have the following CSS for both DIVs
#wholePage {
position: relative;
width: 1000px;
padding: 0 10px;
padding-top: 35px;
margin: 0 auto;
}
#pageWrapper {
position: relative;
width: 960px;
padding: 0 10px;
padding-top: 37px;
margin: 0 auto;
}
The CSS for the top shadow, which works just fine. no need to change, is:
img#hF {
position: absolute;
left: 50px;
top: 56px;
z-index:2;
}
But the bottom footer image is giving me issue and the css is:
img#bF {
position: absolute;
left: 50px;
top: 1657px;
z-index:2;
}
Two examples of the page is below:
www.interfaithmedical.com/CheckSite/index.html
www.interfaithmedical.com/CheckSite/ms_gynecology.html
How do I align the bottom shadow image to match the pageWrapper DIV so it is positioned right below it? and doesn't position based on the page itself like it did on the second link. (On the second link, you can see it uses the original spacing and extends beyond page content)
Instead of setting the top: property of bF, try setting the bottom: property of bF to -4px. That way you aren't tied to your page being 1657px tall every time.
img#bF {
left: 50px;
position: absolute;
bottom: -4px;
z-index: 2;
}
I would like to make the blue element sit halfway up the green circle and behind it. How can I do that? Also, why is there a random marginal-space between the green circle and the blue element?
#profile-circle {
margin-right: auto; margin-left: auto;
height: 164px; width: 164px;
border-radius: 84px 84px 84px 84px;
}
#main-container {
margin-right: auto; margin-left: auto;
height: 400px; width: 450px;
}
http://jsfiddle.net/LqJ79/
position: relative will help you here. It allows you to use z-index to put the circle over the box, and also you can use top which will move the box relative to its current position. The problem with position: absolute is that it takes the element out of the flow, which is not what you need here I think.
#profile-circle {
position: relative;
z-index: 100;
}
#main-container {
position: relative;
z-index: 50;
top: -100px;
}
See the demo
Use attributes "position: absolute;" in the second box, I updated js fiddle CSS with the following:
#main-container {
margin-right: auto;
margin-left: auto;
height: 400px;
width: 450px;
background-color: blue;
position: absolute;
top: 80px;
}
The easiest way to move the blue element up is to set a negative top margin:
margin-top: -82px;
However, with your current markup, the blue element will sit on top.
You can either put the green element below the blue one in your HTML, then use CSS to slide it up, or you can:
use position: relative; on both elements
set a z-index on the blue and green elements to determine which appears on top (give the green element a higher number so it appears on top)
set top: -82px; on the blue element to slide it up under the green one
The space between them is due to your margins:
margin-top: 15px;
margin-bottom: 5px;
you can make the position: fixed;
top:10px;
left: 10px;
z-index: 1;
and what not in the css to move them around. like this:
http://jsfiddle.net/LqJ79/
The 'magical' space between the two is due to the margin in the div user-info. I changed the CSS to the following:
#user-info {
height: auto;
width: 380px;
margin-right: auto;
margin-left: auto;
}
This will removed the space.