1

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!

Spencer
  • 98
  • 1
  • 12
  • The issue with this is that if you set the position to fixed and then top and left positioning to 50% you then have to fiddle with it to get it perfectly centered. That is because it will push the corner of the div to where it is 50% of the width away from the left and from the top. – Adjit Jan 03 '14 at 22:13

3 Answers3

1

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.

Adjit
  • 10,134
  • 12
  • 53
  • 98
  • This doesn't center it vertically nor does it fix the content over the background when scrolled. – rcorrie Jan 03 '14 at 21:54
0

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.

rcorrie
  • 921
  • 8
  • 26
  • Yeah, but then when you want to change the font or do this with something else you have to spend time messing with the margin to get it just so it's centered – Adjit Jan 03 '14 at 22:12
  • This centers the text perfectly. But when the content scrolls up the text is still on top of everything. I tried playing with the z-index but I can't get it to work. – Spencer Jan 03 '14 at 23:01
  • make the `z-index:0;` and then add `z-index:9` to the content container. – rcorrie Jan 03 '14 at 23:03
  • But make sure that the content container is set to `position:relative;` – rcorrie Jan 03 '14 at 23:05
  • Is that what you needed? You just have to add `position:relative` to the `#wrapper` and set a background color. – rcorrie Jan 03 '14 at 23:10
  • Setting a background to the #wrapper then makes it go over the static navigation when you scroll. I just need the text to scroll up with the background and for the content to be visible. It's close, but not 100% . – Spencer Jan 03 '14 at 23:12
  • You just need to add `z-index: 99;` to your navigation. – rcorrie Jan 03 '14 at 23:13
  • It was a matter of switching to `position:absolute;` for `.largeheader` – rcorrie Jan 03 '14 at 23:14
  • Adding the z-index: 99 did work. And all content went over the text apart from a small amount of the page, if you scroll slowly you can see it in the white background just before the wrapper hits. Changing the position to absolute on the #largeheader also works but the text then scrolls and isn't static anymore. – Spencer Jan 03 '14 at 23:17
  • http://codepen.io/anon/pen/jwIKs like I said, just switch position `fixed` to `absolute` for the `.largeheader` – rcorrie Jan 03 '14 at 23:20
  • Agreed, it works. But I still see this issue: http://i.imgur.com/sc8EGag.png and the text scrolls, when I needed fixed. – Spencer Jan 03 '14 at 23:22
  • That's the first time you've linked it. It works almost perfectly, apart from the text scrolling with the page. It's so close :) – Spencer Jan 03 '14 at 23:27
  • Here you go: http://codepen.io/anon/pen/kgpAm don't forget to give me best answer ;D – rcorrie Jan 03 '14 at 23:29
  • You absolute star! Thank you very much. What was it you changed? I can't see it. – Spencer Jan 03 '14 at 23:31
  • No problem! For `#wrapper` you had `margin-top:55px;` set. This adds an outer margin so I removed it and replaced it with `padding-top:55px;`. – rcorrie Jan 03 '14 at 23:34
  • So simple, I'm still learning so this is greatly appreciated. Thanks again. – Spencer Jan 03 '14 at 23:35
  • Ok, btw, do you know how the alignment of `.largeheader` works? If not , let me know and I can explain it so you can use it yourself whenever you need to. – rcorrie Jan 03 '14 at 23:36
  • I'm not 100% sure, no. So that would be great. I just also edited the text inside the .largeheader and it's no longer centered. – Spencer Jan 03 '14 at 23:38
  • here you go: http://codepen.io/anon/pen/fEDLC if this has helped you a lot, you can up-vote the answers I gave that you liked best :) – rcorrie Jan 03 '14 at 23:48
  • btw make sure to hide the menu bars in codepen so you can see the whole thing – rcorrie Jan 03 '14 at 23:50
  • Would you like to be my teacher full-time? This is fantastic. I'd upvote everything if I could but I don't have the required reputation yet. Once I do, I'll come back and upvote them for you. Thank you @Rcorrie – Spencer Jan 03 '14 at 23:51
  • Oh yeah forgot they had those restrictions.. You can send me an email whenever you need help, click here to see my email http://codepen.io/anon/pen/jeCnd – rcorrie Jan 04 '14 at 00:07
  • @user3158814 I don't know why I didn't think of this before, but if you want to avoid the math you could use a table... not sure if it will save you some time, but I think it may be easier to work with: http://codepen.io/anon/pen/euvCx – Adjit Jan 06 '14 at 14:54
  • @metsales I wouldn't recommend using tables for anything related to layout and the `valign` attribute is not supported in HTML5. – rcorrie Jan 06 '14 at 15:30
  • Take a look at this: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html it's a pretty interesting read. But other than `valign` not being supported by HTML5 I think a table makes the most sense for this situation, but you could also just put `vertical-align: middle;` in the css in addition to valign to make sure it works for anyone who is using HTML5. – Adjit Jan 06 '14 at 15:40
  • @metsales Thanks for the link, good post. I mean, it's totally valid for you to use tables. I just see it as old technology, further more I don't see them as being part of mainstream web development in the near-future. It's just my opinion that I won't use tables for anything other than tabular data, when it can easily be achieved and maintained in pure CSS. – rcorrie Jan 06 '14 at 16:09
0

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.

potterbm
  • 125
  • 7
  • Unless you specify a width, `text-align:center;` will not do anything... that is when an element is set to `absolute` or `fixed` – rcorrie Jan 03 '14 at 21:58