HI hope someone can help answer my question its really starting to bug me!
The site is here http://www.calypsopretattoo.com/
When you click on the about tab the information comes up but a margin on the right hand side of the page appears and creates a massive white space?
I've tried editing the css a number of times but nothing. any ideas??
#aboutp
{
width:100%;
}
causes the issue..remove it...:)
Remove width:100%; form #aboutp ID this will work
the parent div miss a position relative.
you use position absolute without using position relative to parent div
div {
height: 900px;
width: 1000px;
overflow: hidden;
margin-right: 0px;
position: relative; /*add to inline style or make a class for this parent div*/
}
Related
so i have this fiddle http://jsfiddle.net/speeedracer/CGucm/ and as you can see when you mouse over any of the links across the top row, the popup div is under the list elements of the bottom row. anyone know how to get it to cover over the other page content? i changed the z-index to be really high so it appears on top, but it didn't work.
here's the drop-down box code:
enter code here.drop-box {
display: none;
position: static;
width: 400px;
height: 100px;
z-index: 9999;
background: #e8dfc2;
}
*i know i have some visual spacing issues, but i just need a working mockup without it having to be perfect...yet.
thanks!
z-index does not work with position: static. This is as if you had no position.
So changing your position: absolute will solve your problem and z-index will come into play.
Is there a way, by default, to right-align a child div that is position: absolute just using CSS. I know I can make it align to right using JavaScript.
Use right: 0px as shown in this jsFiddle http://jsfiddle.net/DayE3/
I think it should work for you -
parent-div-css { overflow: hidden; }
child-div-css { clear:right; float:right; }
I have a fixed positioned element somewhere near bottom of my page. As there is more content to it than window height itself displays rest of it's been cut down.
I've tried adding overflow:auto to fix this issue and be capable of scrolling through fixed positioned element but no luck.
I suppose there might be a javascript solution near by but wondering if there is a css one as well.
Hope my question made sense.
Thanks
You have to fix the height/width to get scrollbars, otherwise the fixed element expands out of view. Here's a little demo: little link. Basic outine:
HTML:
<div class = "fixed">
Glee is awesome!<br/>
...
Glee is awesome!<br/>
</div>
CSS:
html, body {
height: 100%;
}
.fixed {
position: fixed;
left: 0px;
top: 0px;
height: 100%;
width: 100px;
overflow: auto;
}
I have an absolute positioned logo on the bottom left of my website... BUT the problem is that ive positioned it to stick to the right of the page but it leaves a invisible barrier to the left of it that spreads across the page. So lets say a link is placed in alignment with that footer element, I won't be able to click it, the absolute positioned layer is spreading over it (even though nothings in it)
Heres my CSS for the logos position:
#basemenu {
margin-right: auto;
position: fixed;
bottom:0px;
width: 100%;
height: 40px;
text-align:right;
right:1%;
}
It sounds like you have an img inside of a <div id='basemenu'></div>. Is that right?
We could really use a block of HTML if you wouldn't mind posting it.
What I don't understand is why you can't target the logo itself with a bit of CSS like this:
#basemenu img {
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
}
Use the following block property display : none; to hide the block
Greetings,
I have a php site that was working fine as of the start of the year. Then a patch came out for IE8 which caused the CSS I had to malfunction.
Is this a know problem or an isolated issue?
My main problem stems from trying to lock a header into place while allowing the body to be scrollable with:
position: fixed;
overflow: scroll;
top: 135px;
left: 0px;
One of my colleagues has also encountered the same issue as I have.
Any assistance would be greatly appreciated.
Thank you,
Jordan Trulen
.belt
{
position:fixed;
top: 0px;
left:0px;
}
.header-table
{
position:fixed;
top:65px;
width:100%;
}
.header
{
position:fixed;
height:40px;
width:98%;
top:95px;
}
.body
{
position:fixed;
overflow:scroll;
height:74%;
width:99%;
top:135px;
}
You're not giving us any html or a link to see what's up.
But there's a key difference in using position:fixed and position:absolute.
Fixed is used when you don't want the container to scroll with the page, but remain at that position no matter how much you scroll the remaining page. This is good for headers that should always be visible.
Absolute should be used when you just want it to be fixed in relation to the surrounding content.
And you're using overflow:scroll; in a fixed container, which only in extremely rare cases makes sense. I think you problem is with the overflow:scroll; being on the wrong tag. It only has to do with the content of that tag being limited to the width and height (which you haven't even specified!) of the container. If the content overflows that width and height, scrollbars are inserted ON the container.
Why are you using position fixed on the "content" area (i assume thats the "content" area as scroll on a header doesnt make much sense)? Apply position: fixed; to the header instead.