Moving sections HTML / CSS

[MarkBondi]

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

[Custard7A]

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.

[MarkBondi]

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?

[MarkBondi]

here's the link again...

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

[MarkBondi]

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; }

[Custard7A]

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'):

<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.

[MarkBondi]

man I hate to be a pain, but i'm not doing something right. anyone?

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