Grow your CSS skills. Land your dream job.

Want some advice regarding markup and layout

  • # 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](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:

    ![](http://dl.dropbox.com/u/3420025/Images/CodePen/forum/layout-issue.jpg)

    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:

    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

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

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

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

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

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

*May or may not contain any actual "CSS" or "Tricks".