Is there something wrong with my code that makes this green css div block not show up in the exact same place on each page?
On the index page it's perfect, right under the nav bar. But on the page "This" it's not in same place. The stripe also changes position with any additional content. Why is that if it's set to relative? Isn't it floating and other content shouldn't disrupt its postioning? I'm so confused. PLEASE take pity on me as I am not great at CSS as you will see from my code:
/* green stripe */
.stripe
{
padding: 0.25rem 9999rem;
background-color: #4ea647;
z-index: 889;
position: relative;
top: -1200px;
left: -500px;
height: 50px;
}
THIS IS THE SITE:
https://andrea-levin-7gzp.squarespace.com/
Related
I have a contentWrapper class which contains all of the elements on my page. For some reason, the navigation takes up what appears to be 100% of the body and then some. I cannot however get the following elements, the slider and divs below, to stretch to fill the same width. There is always extra room to scroll to the right which displays the background color. I have made it pink in the fiddle its easy to see.
body {
background-color: black;
}
.contentWrapper {
height: 100vh;
width: 100%;
background-color: black;
}
http://jsfiddle.net/o5y26tqw/
Any suggestions? I feel like it could be an easy fix, deleting sections of the page at a time did not seem to remedy the issue.
So it looks like your .cycle-overlay is 100% wide and left is set to 20px. This is pushing everything over and revealing the background. Setting the width to 300px got rid of it for me.
JSFiddle
.cycle-overlay {
position: relative;
top: -200px;
left: 20px;
z-index: 999;
width:200px;
}
I'm currently having issues with some CSS/HTML code.
http://codepen.io/anon/pen/bgHGn
I've got the background of the page in a div (feature-bg) this is to fill the entire page. The content then scrolls up from the bottom but that's irrelevant.
I'm having issues trying to get the largeheader to be displayed in the middle of the page (regardless of resolution/window size) and stick to the background so that when the user scrolls, the content covers it?
I'm not sure if that makes any sense or is even possible.
Thanks!
you want to set the text-alignment property to center
.largeheader{
position: fixed;
margin: 0 auto;
font-size: 100px;
z-index:2;
text-align: center;
top: 50%;
left: 50%;
}
The core issue being this isn't exactly in the center of the page,so as #RCorrie put in his answer, you can make a set width and height to the div and then fix the margin with some simple math. Now if you wanted to jump into using javascript and jQuery thats a whole other ball game and you can definitely do this with minimal work and you wouldn't have to keep changing the div size and margin for each web page that is created.
See the CSS code for the solution:
http://codepen.io/anon/pen/GqeBa
.largeheader {
position: fixed;
top: 50%;
left: 50%;
height: 100px;
width: 250px;
margin: -50px 0 0 -112px;
font-size: 100px;
z-index: 2;
}
Fixed positioning allows the element to stay put while you scroll the page.
To get the large header horizontally centered you can use text-align: center; as #metsales suggested.
In order to vertically center the large header there are a few different options you can use. For this case, since you want the large header to stick in the center of the page, I would suggest using the "Absolute Positioning and Negative Margin" method in the linked article.
You'll end up with something like this:
.largeheader {
line-height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
left: 0px;
}
To put the header behind other content when the user scrolls you'll want to play with its z-index property. I can't suggest anything because I don't know the rest of your markup, but you'll probably want a negative value, and the MDN has a decent article on it.
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;
}
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.