0

I admit, I'm not that good at CSS. Must be my lack of design skills. So I am trying to accomplish four small tasks.

  1. Move the time box (i.e '01:04' and '12:13') so it floats to the right top edge of the image?
  2. Move the description of the workout to display to the right of the image beneath the time box and the routineID?
  3. Allow the bottom border of class 'routine' to always be right beneath the image just like it is to the top of the image.
  4. keep class 'routine' the same size even if more text in description is added. I want every 'routine' to have the same width and height dimensions.

I have everything layed out here: http://jsfiddle.net/n2learning/xMsrN/

Sorry to be that annoying guy with four questions in one question. Any help is appreciated!

Here is an updated jsfiddle link: http://jsfiddle.net/n2learning/xMsrN/22/ Follow up questions and comments -

  1. The 'workout description' is still jacked up. Trying to get this to display beneath the top row, which includes the 'time' and 'ID'. The top row will also (eventually) include small image symbols.
  2. I just noticed that the image sizes are different. I tried modifying '.routineImage' to give it a width and height property, but doing that screwed things up. How/where do I standardize the size of each image? (the images are coming from youtube and other video sources)
Derek
  • 475
  • 1
  • 9
  • 18

1 Answers1

1
<ul id="routinefilter">
    <li  class='routine' data-id="15">
        <div class='routineImage'><img src=http://img.youtube.com/vi/UheCchftswc/2.jpg></div>
        <div class="routineTimeID"> <!-- added wrapper to keep it a single row -->
            <div class='routineID'>16</div>
            <div class='routineTime'>01:04</div>
        </div>
        <div class='routineDesc'>Use lighter weights on a barbell due to higher counts</div>
    </li>
</ul>

CSS

#routineframe {
    height: 400px;
    border: dashed;
    font-family: Arial,helvetica,sans-serif;
    cursor: pointer;
    width: 60%;
    overflow: auto;
    }

#routinefilter {
    list-style: none;
    clear: both; /*keeps each <ul> seperate*/
    }

.routine{
    background: #F4F4F4;
    color: #41383C;
    font-size: 18px;
    border:2px solid #666;
    margin:5px;
    padding:5px;
    width: 95%;
    overflow: hidden; /*allows this to contain the floats*/
    }

.routine .routineImage{
    position: relative;
    float: left;
    display: inline;
    margin-left: auto;
    margin-right: auto;
    }

.routine .routineTime{
    position: relative;
    top: 0;
    float: left; /*this was floated the wrong way*/
    margin-left: auto;
    margin-right: 3px;
    border: 1px solid #666;
    background: white;
    color: navy;
    }

.routineTimeID { /*class added to keep the description from being in between the two elements*/
    width:140px;
    float: left;
    }

.routine .routineID{
    top: 0;
    float: right;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #666;
    background: white;
    }

.routine .routineDesc{
   top: 0;
   margin-left: auto;
   margin-right: auto;
   font-size: 16px;
   }

I tried to notate all the changes I made and why. I think i got all of them...

For the last question, though, you can't do this with CSS. As I understand it, you want the text size to automatically shrink if more text is added? That will have to be done with JavaScript, solution here

Community
  • 1
  • 1
kristina childs
  • 2,190
  • 1
  • 20
  • 19
  • Why not just set `.routine` to have fixed width and height and give the content div `overflow: auto` to give it a scrollbar when the content goes taller than the fixed height? – Wex Jun 22 '12 at 18:59
  • Hey Kristina, this looks good. I just added margin-right: 2px; to .routineImage so it has a little space. The 'description' in your example is still displaying beneath the image. I would prefer it to display to the right of the image, but beneath the 'routine time' and 'ID' values. I'll look at your JS example. I'll probably add something like "more..." and allow the user to click to preview more info. – Derek Jun 22 '12 at 19:05
  • Oops, yeah the clear: both; shouldn't be there. don't know how that got in there! remove that from the `.routineDesc` and that will fix it. Adding a "more" link is probably the better way to go. Most people expect excerpts for small bits like this anyway. – kristina childs Jun 22 '12 at 19:15
  • Getting closer...sort of. Here is an updated jsfiddle link using your suggestions: http://jsfiddle.net/n2learning/xMsrN/21/ I think the image is what is throwing things off. Notice how the image is now over the .routine border. The workout description is still a little off. – Derek Jun 22 '12 at 19:24
  • First you need to remove the comments :) they're not in real CSS comment form, but I wrote them that way so it was easier to see them :) But you are right, it's the image that's throwing it off. Since there is a hard width on the `.routineTimeID`, if the image next to it is too wide, the browser will push it to the next line. If you know all the images are going to be the same size, throw in something like this `.routineImage img { width: 120px;}`. (comments now in proper CSS comment form) – kristina childs Jun 22 '12 at 22:01
  • Also change `overflow:visible;` to `overflfow:hidden;` on `.routine` – kristina childs Jun 22 '12 at 22:03
  • Description is still off. I just added a
    in html and added left: 45% in css. Thanks for helping me with this!     – Derek Jun 24 '12 at 22:51