Give help. Get help.

  • # February 12, 2013 at 11:48 pm

    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](
    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

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

    # February 13, 2013 at 12:28 am

    This is what I landed on:

    Modified markup:



    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:

    # February 13, 2013 at 12:40 am

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

    # February 13, 2013 at 12:43 am

    Shamed: 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

    @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

    @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

    Thanks a lot for the help, guys!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.