- This topic is empty.
February 14, 2013 at 1:44 pm #42735
I’m in the middle of redesigning my homepage and I stumbled upon a problem. In Photoshop I mocked up a design where the title of my site was enclosed in some “racing stripes”. But when I started to convert the mockup into html/css I realised, that I couldn’t get them right.
Here’s a reduced test case. It works there nicely. But my ultimate goal was that the site’s background would be a texture and the header and other things on the site would be background-color: rgba(black, 0.4); so the texture would shine through a litte bit.
As I have implemented it now, a solid color on the h1 is necessary to hide the orange “racing stripe” underneath. Therefore I either need to wrap the title in an extra element that gets a solid color, or I need another approach to code those stripes. I have tried splitting the header in three parts (left stripe, h1, right stripe) and float those but that didn’t work out like I wanted.
Is there another (or more elegant) way of implementing those stripes? I’m still in the process of learning html and css (I built one fixed width website and recently started learning how to use preprocessors) and I just can’t think of a better way.February 14, 2013 at 1:48 pm #124613ksmithMember
It would be helpful to show a screen shot of the PS comp, if possible, to get a better idea of what you are after. Hard to say the best method without seeing it. I’m a super visual person.February 14, 2013 at 3:08 pm #124617Paulie_DMember
I think we’ve done something like this before that could be worked.February 14, 2013 at 4:11 pm #124620nordstromdesignParticipant
I reworked it a little for you:
Hopefully this will help get you moving on the right track.February 14, 2013 at 10:13 pm #124665David_LeitchParticipantFebruary 17, 2013 at 11:08 am #124958
Sorry for the late answer, but I was rather busy the last few days.
Thank you for your efforts, I’m going to fork your pens and play around with the code.February 22, 2013 at 8:40 am #125682
Here is a [pen](http://codepen.io/ephoenix/pen/BFwJe “Fluid Width Racing Stripe Header”) with my results.
Thanks again for pointing me into the right direction :)February 22, 2013 at 11:16 am #123759February 22, 2013 at 4:06 pm #121581
Thanks, but sadly that’s not what I was looking for. I want to create a fluid width design, with those “racing stripes”. But I don’t want them to touch the edges of the header or disappear entirely when the h1 takes up too much space.
I’m quite happy with my code now. I just wanted to post the results of my experimenting with the code Nordstrom and David gave me. I’m sorry if you misunderstood that as a cry for help.
- The forum ‘CSS’ is closed to new topics and replies.