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.
Related
Website: https://bucksfoodpartnership.org/
So on my desktop the text over the top image "Buckinghamshire Food Partnership believe that everyone is entitled to a Right to Food" and the button "Get involved" are aligned to left with 10% margin. However on smaller screen the text is centered (as it should be), but the button is aligned to the far left. How can I make it centered as well (not all the time, only when the text above is centered)?
I think this class makes it aligned to left:
.content-caption {
max-width: 100%;
left: 0;
position: relative;
text-align: center;
but adding
position: relative;
left: 50%;
transform: translateX(-50%);
or
margin: auto;
Doesn't help really. Am I barking at the wrong tree here?
All you need to do is set wp-block-button to width:100%.
.wp-block-button{
width:100%;
}
Because of all the inherited styles and the way inline-block behaves with text-align:center this will work for you. Even across your breakpoints.
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
I have this layout:
Code here: http://m6000225.ferozo.com/test/
I need the blue and brown image to lay below the main content div, and both be aligned regardless of the window width, both centered horizontally.
I implemented a css tip I read on this site, which is having a div with absolute position and left: 50% and an img inside with relative position and left: -50%.
It works fine, except for the fact that it pushes the page width to the right, as you can see in the screenshot, the scrollbar can be seen.
3rd party lib solutions like jQuery are welcome, but I'd prefer plain CSS.
PS: I also need something similar below the footer, but I guess using the same solution with a negative bottom value should work, right?
PS2: Extending the blue-brown strip to both borders of the window is no problem as I already used another div with absolute position and background-repeat: repeat-x.
The scroll bar is appearing because of the left: 50%; on the class .header-image. You should drop that altogether. Since that tag has a width set, when you push it over 50% it falls outside the window forcing the scroll bar to appear.
After you drop the left call, you should then set the width of that div to the width of the window, not a specific value in pixels. Use Width: 100%. So, that tag should look like:
.header-image {
height: 245px;
position: absolute;
top: 40px;
width: 100%;
z-index: -1;
}
After that, you'll need to re-center the image contained within the div. To do that, instead of using positions (which rely on set boundaries), give the element auto margins. Use :
.header-image img {
display: block;
margin-left: auto;
margin-right: auto;
}
That will recenter the image. Please let me know if this is what you were looking for!
Per Paulie_D's suggestion:
.header-image {
position:absolute;
z-index: -1;
top: 40px;
width: 100%;
height: 245px;
background-image: url('header.png');
background-position: center;
background-repeat: no-repeat;
}
That did 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.
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.