- This topic is empty.
January 30, 2014 at 10:00 am #161438
So I’m designing/coding an infographic for a web site with a responsive layout, and I’m still a little new with html/css. I used a responsive table to structure the information, and in the right-hand column I need there to be an arrow that aligns with bits of information in the left-hand column. I know how to code the arrow top and arrow bottom, but I need a nice stretchy middle that will fill the height of the article as it changes, keeping the top of the arrow aligned with the top row, and the bottom part of the arrow aligned with the bottom row.
Is there a solution for this that I’m missing?? For some reason putting “height:100%;” in the CSS for the middle bit of the arrow isn’t working.
Thanks!!January 30, 2014 at 12:02 pm #161451Paulie_DModerator
Do you have an image of what you are trying to achieve?January 30, 2014 at 12:16 pm #161453
Yes, thanks. I put black border around each of the ‘s so it’s more clear. So basically, it’s a list of Google’s robots . On the left you can see the blurbs with each robot and the description of each. On the right, you can see where it says “Tolerable” and then the numbers in that column lining up with each blurb. I want to put a flexible, verticle arrow in this column placed underneath the numbers. Does this make sense? The scale goes from “Tolerable” to “Terrifying” rating each robot from least to most scary. It’s important to have the table just so when the screen’s resized everything’s still neatly aligned.January 30, 2014 at 1:42 pm #161464Paulie_DModerator
Ok…now can you make a Codepen of what you have already?
HTML & CSS.January 30, 2014 at 2:04 pm #161467
- The forum ‘CSS’ is closed to new topics and replies.