we need to design a page layout that supports pics of staff/board member. both pages can be exact same layout, just diff copy. use what youve already been doing for a starting template. just use some FPO image for staff/board for now, but the names/copy are good on the existing page.
dont need to overlay the images/names nessicarily, but just similar size image grid, name either above/below image or overlap image like webb
Taylor Bernard on September 8, 2015:
theres 20 board members so i did a different layout than the staff. on the staff theres only 4, but wanted to mix it up and have a more interactive section when someone clicked on a person it would show a title/bio/contact info right there. kinda still rough on that one
board member page is great, go ahead and chop that up. just make one set of copy/image and duplicate it. try to just make one individual element, then float it left, dont make rows or anything. that way i can more easily make it responsive later. you can see how i did that here http://client.fleeangrybear.com/webb/about/ with 'our_people' as a container and 'people' as floated elements
Justin Bernard on September 9, 2015:
i'll make some notes on the staff page later , its close to done
Taylor Bernard on September 9, 2015:
k got it laid out in css and modular.
found out you can make a border on one side of a div in css, which is a nice touch, but you cant make it inset. can only make shadows inset on one side. would have worked nice for this, since im trying to hide that strip behind the photo without using another div, but no way around it. had to abs it
totally on the borders, i have redone a lot of your stuff using one side borders. never ever use like a png to make a divider line, jsut use border-left/right/top/bottom, super easy
then all you have to do is give that left red border to 'board_member_info'
Justin Bernard on September 9, 2015:
you wont have to float board_member_img or board_memmber_info, just let them fall stacked inline within board_member. then just float board_member
Taylor Bernard on September 9, 2015:
problem with border is that you cant have it inset. so its adding border into the margin area. which messes up spacing, cause if you had width and margins setup to fill an area say 500px widget width, then add the border, thats now 505px and messes up the math for distribution. on a lot of stuff it doesnt matter, but on this, even if i re-did the math, i'd have to hide the top of the border by doing like -5px margin left on the member photo to put it out of the container and to mask over the left border. kinda ghetto. just ended up floating a left 5px div abs then everythign else is floating over it.
Comments
Justin Bernard on September 8, 2015:
http://www.craftcreativitydesign.org/about-us/staff/
http://www.craftcreativitydesign.org/about-us/board/
we need to design a page layout that supports pics of staff/board member. both pages can be exact same layout, just diff copy. use what youve already been doing for a starting template. just use some FPO image for staff/board for now, but the names/copy are good on the existing page.
can do something maybe simlar to what webb has
http://client.fleeangrybear.com/webb/about/
dont need to overlay the images/names nessicarily, but just similar size image grid, name either above/below image or overlap image like webb
Taylor Bernard on September 8, 2015:
on the staff theres only 4, but wanted to mix it up and have a more interactive section when someone clicked on a person it would show a title/bio/contact info right there.
kinda still rough on that one
Justin Bernard on September 9, 2015:
with 'our_people' as a container and 'people' as floated elements
Justin Bernard on September 9, 2015:
i'll make some notes on the staff page later , its close to done
Taylor Bernard on September 9, 2015:
found out you can make a border on one side of a div in css, which is a nice touch, but you cant make it inset. can only make shadows inset on one side.
would have worked nice for this, since im trying to hide that strip behind the photo without using another div, but no way around it. had to abs it
Justin Bernard on September 9, 2015:
totally on the borders, i have redone a lot of your stuff using one side borders. never ever use like a png to make a divider line, jsut use border-left/right/top/bottom, super easy
just go like - border-left: red 2px solid;
no need for abs
just make a div structure like this:
<div class="board_member">
<div class="board_member_img>
<img src="">
</div>
<div class="board_member_info">
<div class="name">lorem ispum</div>
<div class="title">lorem ipsum</div>
</div>
</div>
then all you have to do is give that left red border to 'board_member_info'
Justin Bernard on September 9, 2015:
Taylor Bernard on September 9, 2015:
so its adding border into the margin area. which messes up spacing, cause if you had width and margins setup to fill an area say 500px widget width, then add the border, thats now 505px and messes up the math for distribution.
on a lot of stuff it doesnt matter, but on this, even if i re-did the math, i'd have to hide the top of the border by doing like -5px margin left on the member photo to put it out of the container and to mask over the left border. kinda ghetto.
just ended up floating a left 5px div abs then everythign else is floating over it.
Justin Bernard on September 9, 2015:
margin goes outside border, padding goes inside
Taylor Bernard on September 9, 2015:
lookover how i did code there.
Justin Bernard on September 10, 2015:
thx
Taylor Bernard on September 10, 2015: