Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2012
    Location
    Nashville, TN
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Moving sections HTML / CSS

    Hey all. I am a total newbie when it comes to coding. Mostly I can edit stuff, and that's about it.

    I'm hoping someone can help me out with moving sections. I've attached the link below. I want to move the Portfolio section to underneath the 'My Skill Set' section.

    3 thumbnails across, 4 down

    then I would just move the bottom 2 sections up. any help would be great!

    http://www.bondicreative.com/Resume/index.html

    Mark
    Attached Files Attached Files

  • #2
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    Right, I think I understand what you want to do, it should fit nicely. It would be a matter of moving the HTML elements to inside of that first "grid_10" div, and then making the widths compatible in the CSS.

    For the images themselves, you would then put them in four "ul" elements, instead of two. Judging by what you've done so far, you should be fine managing that. It's quite an nice class and ID system you have. The only concern there might be is those images not slotting in correctly, if they don't then have a play with the widths and paddings.

    The bottom 2 sections should move up once the Portfolio section is in that column, but be careful to clean up any stray spacer elements if it's not moving all the way up!

    Edit: If you want a bit more info, just shout out. I was perhaps a bit rushed.
    Last edited by Custard7A; 10-27-2012 at 01:12 PM.

  • Users who have thanked Custard7A for this post:

    MarkBondi (11-03-2012)

  • #3
    New Coder
    Join Date
    Apr 2012
    Location
    Nashville, TN
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok cool. i'm getting close. moved the portfolio section up, but having issues aligning the images. i've uploaded the CSS. can you look at it and give me a heads up on what I need to change widths and padding?
    Attached Files Attached Files

  • #4
    New Coder
    Join Date
    Apr 2012
    Location
    Nashville, TN
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts

  • #5
    New Coder
    Join Date
    Apr 2012
    Location
    Nashville, TN
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    it's this I have to change but not sure what.

    /* ===jQuery lightBox plugin - Gallery style ===*/

    #gallery {
    padding: 25px 6px;
    width: 960px;
    }
    #gallery2 {
    width: 100%;
    padding: 10px 0 10px;
    }
    #gallery img{ padding:0px;}
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
    border: 1px solid #CFD0CB;
    background-color:#fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 6px 6px -5px #727274;
    }
    #gallery ul a:hover img {
    border: 1px solid #CFD0CB;
    }
    #gallery ul a:hover { color: #fff; }

  • #6
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    You could make it a lot easier on yourself with a few structure changes. I'd suggest removing the "gallery2" element, and putting those last two rows directly in the "gallery" element. It should be like this (With your code in the 'list items'):

    Code:
    <div id="gallery">
    
      <ul>
        <li> Link / Photo </li>
        <li> Link / Photo </li>
        <li> Link / Photo </li>
      </ul>
    
      <ul>
        <li> Link / Photo </li>
        <li> Link / Photo </li>
        <li> Link / Photo </li>
      </ul>
    
      <ul>
        <li> Link / Photo </li>
        <li> Link / Photo </li>
        <li> Link / Photo </li>
      </ul>
    
      <ul>
        <li> Link / Photo </li>
        <li> Link / Photo </li>
        <li> Link / Photo </li>
      </ul>
    
    </div>
    You may want to change the structuring CSS to something like this:

    #gallery { padding: 25px 0px; }
    By the looks of the page you would want the images themselves to be aligning to the left side of that column, zeroing the left/right padding would help.

    #gallery ul li { margin-left: 20px; }
    The distance between images can be set like this, it's a bit more specific than simply li { margin: ect; }.
    It's good practice to not override the default elements' style for a sub-project, in-case you want to use it later elsewhere.


    #gallery ul:first-child { margin-left: 0px; }
    To eliminate the "spacer" for the first images in each row. For our purposes a 'ul' element essentially equals a row.

    That should pretty much be all you need, when used with your existing code!

    Edit: Actually, it might be: #gallery ul li:first-child { margin-left: 0px; }. I tell you this all works fine in my head! Famous last words.
    Last edited by Custard7A; 11-03-2012 at 07:07 PM.

  • #7
    New Coder
    Join Date
    Apr 2012
    Location
    Nashville, TN
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    man I hate to be a pain, but i'm not doing something right. anyone?

    http://www.bondicreative.com/Resume/index.html


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •