Want some advice regarding markup and layout

[rr]

Hey 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.

[chrisburton]

I’d say `ul`. Give the second `li` a special class.

[TheDoc]

This 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/

[chrisburton]

Gray, why would you separate the text into multiple h2 elements? You can use just one.

http://codepen.io/chrisburton/pen/DdJim

[TheDoc]

Shamed: I didn’t really read much of the original post. If it’s a single tagline than that works perfectly.

[rr]

@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?

[chrisburton]

@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.

http://codepen.io/chrisburton/pen/DdJim

[rr]

Thanks a lot for the help, guys!

[Author]

Posts