- This topic is empty.
-
AuthorPosts
-
February 12, 2013 at 11:48 pm #42697
rr
ParticipantHey guys. So, from all the open standards thing, CSS is being the most painful one for me. With lots of effort and study I’m getting better but there’s still a long ride.
So, I’m creating this thing and I want some advice on the markup I’m using and the CSS techniques I’m using. [I’ve put a snippet on CodePen so you guys can take a look](http://cdpn.io/uebCL).
What do you guys think?Another thing is that I want to add two labels as a slogan with the image in between. It should look like this:

What is the best markup to do it? Two `
` with different ids? A `
- `? Two `
`? And how can I put them between the image? Inside the `#shoe` container? Outside? Why?Well, very stupid questions, I know but I want to understand the right way of doing it.
Thanks in advance.
February 12, 2013 at 11:51 pm #124338chrisburton
ParticipantI’d say `ul`. Give the second `li` a special class.
February 13, 2013 at 12:28 am #124340TheDoc
MemberThis is what I landed on:
http://codepen.io/ggilmore/pen/gzvtJ
Modified markup:
Foo
Bar
Removed the wrapping `#shoe` div as it was unnecessary. By going `inline-block` on all of the elements you can easily align them together – just remember to use all of the proper fallbacks for it: http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
February 13, 2013 at 12:40 am #124342chrisburton
ParticipantGray, why would you separate the text into multiple h2 elements? You can use just one.
February 13, 2013 at 12:43 am #124343TheDoc
MemberShamed: I didn’t really read much of the original post. If it’s a single tagline than that works perfectly.
February 13, 2013 at 12:59 am #124344rr
Participant@chrisburton @TheDoc thanks for the help, guys! Really appreciate this.
Chris, your pen looks good but it’s cropping the image because you’re applying the border-radius on the `
` tag. Isn’t better to have a `
` as the “circle” instead?February 13, 2013 at 1:04 am #124346chrisburton
Participant@rafaelrinaldi I can’t take credit for that. That was all @TheDoc’s code. I literally changed a few lines. I added in a span to take care of that cropped issue.
February 13, 2013 at 1:10 am #124347rr
ParticipantThanks a lot for the help, guys!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.