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.
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 <p> with different ids? A <ul>? Two <div>? 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.
Chris, your pen looks good but it's cropping the image because you're applying the border-radius on the <img> tag. Isn't better to have a <div> as the "circle" instead?
@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.
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
<p>with different ids? A<ul>? Two<div>? And how can I put them between the image? Inside the#shoecontainer? Outside? Why?Well, very stupid questions, I know but I want to understand the right way of doing it.
Thanks in advance.
I'd say
ul. Give the secondlia special class.This is what I landed on:
http://codepen.io/ggilmore/pen/gzvtJ
Modified markup:
Removed the wrapping
#shoediv as it was unnecessary. By goinginline-blockon 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/Gray, why would you separate the text into multiple h2 elements? You can use just one.
http://codepen.io/chrisburton/pen/DdJim
Shamed: I didn't really read much of the original post. If it's a single tagline than that works perfectly.
@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
<img>tag. Isn't better to have a<div>as the "circle" instead?@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
Thanks a lot for the help, guys!