- This topic is empty.
June 1, 2013 at 6:33 am #45179
I am working on a responsive website, and I need to keep the text (h3) of an “aside” widget always vertically centered (also when resizing the browser).
I made a pen here which explains the issue: http://cdpn.io/jJdGv
If you resize the window, the image will scale down, and I want the h3 element to remain in the centre (where you see the ribbon).
I tried these 2 solutions, none of them work:
1) If I make h3 absolute positioned, I cannot center it as it won’t consider its parent, so I have to give it fixed width: but it won’t be responsive!
2) making h3 it relaitve positioned forces me to use magic numbers, and those as well are not good for responsive web design
I also put online some images (correct and wrong situations) of the real site:
When I solve this, I have to make the ribbon outside of the image.. that will be a pain too: does a “scalable background” exist?
Thanks a lot guys!June 1, 2013 at 7:18 am #137248CodeGraphicsParticipant
You have to make the ribbon to be the background of the text. You align the text center.June 1, 2013 at 7:24 am #137249
Yeah maybe, thanks Code. But that’s not the main problem. First I want to solve the other issue! ;)June 1, 2013 at 8:46 am #137252Paulie_DMember
Here’s one way to get the text where you need it.: http://codepen.io/Paulie-D/pen/hfBGA
No positioning required at all, H3/link structure intact, text centers etc.
Frankly, I would try and do the ‘ribbon’ with a pseudo element rather than an image but if that’s the way you want to go.
Also, I don’t think it’s really appropriate to use a figure element there…that’s not what it’s for (non-sematic)….a div will work just fine but, in fact, you don’t need one.
An h3 is a block element already.June 1, 2013 at 9:22 am #137257Paulie_DMember
>i think the picture is part of page content
I disagree. The real ‘content’ is the `h3` and he wants a background for that (effectively).
Hence my example which uses no special positioning etc. at all. There is, if you like, a magic number which is the line-height which will match the height of the bg image.June 3, 2013 at 2:33 am #137397
Guys thanks for all yout support, I found this comunity to be very kind and… incredibly fast.
I’ll try your suggestions during the day and let you know… I’ve already seen something really interesting in your links, though!
See you laterJune 3, 2013 at 3:30 am #137400
first of all, the needs to be, as gcyrillus says, inside the html, because I have to change it dinamically.
So I am trying to work with your suggestion, but it’s kinda hard for me cause I can’t change the structure at this point using em instead. I’ll try again and come back later..June 9, 2013 at 3:01 pm #135524
Hi guys, finally I have done it: thanks you all, I used gcyrillus solution but partially, I decided not to render the text responsive, but in fixed pixels. You can see it here:
I know there are a lot of things to be bettered, but it’s a start! Thanks a lot again!
- The forum ‘CSS’ is closed to new topics and replies.