http://www.milknhny.co.uk/SofiaWork/home/
Hi
The following has a banner, which has a box shadow, and i want it to sit over the top of the image.
Ive tried putting a z-index and position of absolute on the div class .maincontentinner
however the background seems to mess up (with it being a gradient) when i do this.
Any ideas how i can achieve this? I have a clearfix in there also
thanks
style.css line 431
.headerwrap {
width: 100%;
height: 218px;
background-color: #ffffff;
box-shadow: 3px 3px 8px #41434b;
posistion: fixed;
z-index: 99999;
}
Change posistion to position.
First off, I'd use relative rather than absolute positioning, since I don't think you want to disrupt page flow.
I applied:
position: relative;
z-index: -1;
to .maincontentinner and it seems to work just fine. What do you mean by "the background seems to mess up"? What browser are you testing in?
Related
So I am having a z-index problem on my website, take a look at: https://displee.com/osrs-store
If you look at the header of each step you, you will notice that only step 3 has a ribbon and step 1 and 2 do not (if you don't see this, then try to zoom-in). Step 1 and 2 also should have a ribbon.
I cannot seem to fix it, I played around with z-index on all elements and using position relative but it is not working. I think somehow it has to do with the height of my content or something.
I think you are having a stacking issue with your .panel elements stacking context. Your are trying to place a the <header>'s :before behind it's parent - the .panel.
You can't really stack an element behinds it's parent I think, you set the the z-index to -1 maybe trying to place the element behind it's parent but are clearly running into issues.
What you probably need to do is place the the header:before puesdo element next to the white content box (the .panel) instead of behind it by simply reducing it's size, and fixing some minor issues.
In your stylesheet (https://displee.com/css/home_style.css) update theses 2 styles starting around line 548:
CSS
.ribbon > header:before { /*Update selector*/
bottom: -24px;
content: "";
display: block;
position: absolute;
}
.ribbon > header:before { /*Update selector*/
border-color: transparent #3b4d56 transparent transparent;
border-style: solid;
border-width: 0 21px 24px 0; /*Update size*/
height: 0;
left: 0; /*Update to zero*/
width: 0;
z-index: 0; /*Update to zero*/
}
I see this as the result. I believe this fixes your having to zoom in issue also.
If I add height: 0; to my body element, then everything is fixed. Does anyone knows why this fixes it. Also, I don't think this is the right way to fix it?
I have a question on something weird that is rendering on the latest IE and Chrome browsers. I have a div that is supposed to span 100% of a parent. So clumsily, I gave it - width: 100%px; as a CSS property. Here is my entire item:
.loc_vendiv{
position: relative;
margin-top: 5px;
left: 0px;
width: 100%px;
height: 120px;
border: 1px solid #333;
background-color: #fff;
}
The weird thing - that worked perfectly. So much so, that I just noticed today that this was wrong. Not wanting an ugly style sheet, I removed the px from the end. And... the div was two pixels too wide. Any explanation as to why this is happening? Here is the parent div:
#loc_catlist{
position: absolute;
width: 612px;
height: 720px;
top: 50px;
left: 0px;
background-color: #eee;
overflow-y: auto;
overflow-x: hidden;
}
I'm mildly annoyed, as the bad code works, yet the correct code doesn't do what I want. I don't think I can leave it, though. I don't like little hiccups like this...
It's because of your border.
Try adding :
box-sizing: border-box;
to your .loc_vendiv class, it will take the border in account.
Browsers usually ignore invalid css rules like width: 100%px; which means that to get the style you had with the mistake. you only have to remove the width rule.
2px too wide is likely caused because you have a width of 100% in addition to a border of 1px (all around adds up to 2px width).
A fix can be found here from "Paul Irish" about
box-sizing
what happens is that when the width value is wrong (100%px;) this part of the CSS is simply ignored by the browser. If this part of the css was deleted, the result would be the same.
About the 2 extra pixels, this happens because of the border set to the div.loc_vendiv.
The width of div.loc_vendiv is equal to the width of div#loc_catlist and to this is added the border value (1px for the left border and 1px for the right border = 2px).
Remember that the border width is added to the size of the object while the padding creates an internal space.
I have followed the instructions at floating-div-over-an-image, and while things are working ok, I am trying to better control the behavior of the search box and the button. You can see the page I am working on here
There is a search box on the header image towards the upper right. The CSS for the search box div as follows
.search-box{
z-index: 500;
width: 50%;
border: 0px none;
top: 0px;
float: right;
left: 40%;
position: absolute !important;
}
You'll see that there is a search button to the right of the search box. When the browser window is made narrower, that search button jumps below, even when there is space to the right. I am trying to force that button to stay to the right.
Any tips on how you would achieve the behavior I described? I have tried variations of the float property in the CSS above, but that is not getting me what I need. Maybe I am not applying the correct CSS selector?
Regards
Just change your .search-box css for property width:100%
It is WORKING
.search-box {
width:100%;
}
let me know if it is helpful
In class (.search-box) the width was 40% so it was not getting enough room for the search box and button to display in line.
You Just need to replace the below css and it will work in all resolution.
.search-box{
border: 0 none;
position: absolute !important;
text-align: right;
width: 100%;
z-index: 500;
}
The #k2ModuleBox125 div has a 40% width which is causing the search button to wrap to the next line when the search bar increases in size.
You can easily fix this by looking into the style rules of the #k2ModuleBox125 div.
this is happening because .search-box has its width in % give it minimal width, and position it to the right instead of left, and you should be just fine.
.search-box {
min-width:XXpx;
right: 0;
left: auto;
}
I'm building a website for our church and I'm using joomla 2.5 to do so. The template i used was wsnone2. I know a bit of code but not a lot i've tried to play around to sort out this issue but i cant seem to do it. Basically when there is very few lines of text as here http://www.smass2.co.uk/index.php/en/hymns/annual/deacon-responses/liturgies the footer comes up and covers the space. How do i stop that without making the position fixed. i tried using ryanfait sticky footer, and several others, but that didnt seem to work. can anyone people provide me with any more suggestions? if possible could the solution be done through CSS?
Thanks.
Actually, this is going to be harder than it looks at first glance. You have a couple things working against you here. First, your footer is actually contained in 2 divs, region9wrap and region10wrap. Doing as #gartox suggests will only move part of the footer to the bottom of the page. You would also need to do the same for the other part. To do so you would need this CCS -
.region9wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 30px; /* height of div below*/
width: 100%;
}
.region10wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
}
That will move both parts of the footer down, but now you will have a huge dark stripe where your background does not extend to the footer. Now you have to fix the background. First you need to remove the background from region4wrap completely.
Then add the background to the body tag -
body {
background: url('http://www.smass2.co.uk/images/Cross.jpg') no-repeat #0D0D0D;
}
This will make the background extend all the way down to the footer of the page without causing a big dark stripe.
You need do this:
In the class .region10wrap add this properties:values
.region10wrap
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px; /* your height footer*/
width: 100%;
}
Easiest way to do this is to have the footers background on the actual page (behind the whole site), so when the footer can't reach the bottom, it will look like it's stretching all the way down.
I'm developing a help system for a site where they want the page to turn opaque when activated except for the DIVs you can receive help on.
The problem is I can't figure out how to get specific divs to "appear" transparent on top of an opaque background.
I tried setting the z-index of the divs to a value higher than the background but that doesnt seem to work.
Here is a JSBin illustrating the issue. Anything with the "help" class should appear to be transparent (i.e. not opaque)
http://jsbin.com/ifohuc/1/edit
Thanks.
You must set the position attribute of li.help in the css file
for example
position:relative;
Change #bgDiv to z-index= -1
http://jsbin.com/ifohuc/2/
#bgDiv {
width: 100%;
height: 100px;
min-height: 100%;
background-color: #999999;
position: absolute;
left: 0px;
top: 0px;
opacity: 0.85;
z-index: -1;
}