Grow your CSS skills. Land your dream job.

Images not indenting when aligned to left.

  • Anonymous
    # February 15, 2011 at 11:07 pm

    See: http://aarongmoore.com/video/

    Alright so what I want is each image to appear under the other, with the text to the right. I’m not sure why it’s displaying like it is. Also, it seems that the spacing is different from Firefox to Chrome/Safari.

    How do I fix this?

    # February 15, 2011 at 11:22 pm

    Well if you’re going to list videos like that I would put each one in an unordered list and style it with CSS, much easier. I would also refrain from styling paragraph tags in your HTML.

    Anonymous
    # February 15, 2011 at 11:25 pm

    I don’t think I’ve worked with anything like that before, sounds more efficient though. I would appreciate it if you would explain a bit more on how I would use an unordered list styled with CSS to create what I’m trying to do. Thanks.

    # February 15, 2011 at 11:55 pm

    Well think of it like this. Look at your design, are you listing multiple things without them being in order ( 1. 2. 3. ), Yes. Therefore, we will use an unordered list

      There are multiple ways of doing this including scrapping the idea of using ul’s and instead using div’s. But I think using ul’s would be the correct way.




        Swimming Lessons (2010)


        blahblahblahblah

      Idk, something like that.

      Anonymous
      # February 16, 2011 at 12:04 am

      What would I do in the css with swimming-lessons to get it to align to the left of the text?

      # February 16, 2011 at 12:07 am

      Can you do me a favor and just post that code along with using the correct links and paths to the images? From there I will style it and then explain it to you.

      Anonymous
      # February 16, 2011 at 12:29 am

      Sure, I think it would be:




        Swimming Lessons (2010)


        blahblahblahblah

      The rel is for the MediaBoxAdvanced lightbox code.

      # February 16, 2011 at 12:35 am

      Keep in mind that it wouldn’t be the h1 tag – that is reserved for the title of the page.

      # February 16, 2011 at 12:36 am

      @TheDoc – good call.

      @aarongmoore – use h2 instead

      I also meant for you to post the code on your site so I can use developer tools to style it while its live.

      Anonymous
      # February 16, 2011 at 12:48 am

      Oh. One second.

      Alright, the following is now posted and live on my site:




        Swimming Lessons (2010)


        This video short is about a man trying to say goodbye to his past. Based on the screenplay by David Oliver. This is the last dramatic project I made as part of my BFA.



        A Star Crossed Echo (2009)


        Part psychological thriller, part ghost story. This video short follows a man who is haunted by the memory of a lover who left his life.This is my BFA third year project.

      # February 16, 2011 at 12:54 am

      Also, that HTML is invalid.

      Unordered lists always have List Items as children.

      The general syntax is:





      A valid example of the above would be:




      • Swimming Lessons (2010)


        blahblahblahblah



      Anonymous
      # February 16, 2011 at 1:00 am

      Alright, updated to:





      • Swimming Lessons (2010)


        This video short is about a man trying to say goodbye to his past. Based on the screenplay by David Oliver. This is the last dramatic project I made as part of my BFA.



      • A Star Crossed Echo (2009)


        Part psychological thriller, part ghost story. This video short follows a man who is haunted by the memory of a lover who left his life.This is my BFA third year project.


      # February 16, 2011 at 1:01 am

      CSS

      ul.video li {
      min-height: 100px;
      padding: 20px 0;
      list-style: none;
      }

      ul.video li a {
      float: left;
      }

      /** Add This To Your Reset **/
      .clear {clear: both;}

      HTML
      Now clear the float right above your wrapper and copy




      # February 16, 2011 at 1:21 am

      updated

      # February 16, 2011 at 1:35 am

      Your page is giving errors, I would clean some of that up.

    Viewing 15 posts - 1 through 15 (of 17 total)

    You must be logged in to reply to this topic.

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