Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Junior Member
    Join Date
    Nov 2011
    Posts
    2
    Member #
    29887
    The hopeful design for my page looks something like this. I somehow want a picture of me either standing up or sitting Indian style in the center of the page with my hands out and 1-2 buttons/images on top of each hand.

    I am able to get the image of myself centered onto the page, it's the whole thing of getting the buttons/images around my hands that is confusing me.

    Any ideas?
    Attached Images Attached Images

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You have a few options, ranging from "hard" to "pain in the a$$".

    Hard way: relatively positioned div containing your picture as the background with four absolutely positioned divs inside of it containing the buttons.

    Harder way: arranging the buttons in rows/columns, using a parent div with a series of divs inside of it with appropriate margins/padding.

    Pain in the a$$ way: image map. Mouseovers for a CSS image map are tricky, though.

    No matter how you choose to do this job, you're going to struggle with it even if you're pretty well-versed in CSS. If you're not an expert, this may not be something you want to take on.
    zeratas likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Nov 2011
    Posts
    2
    Member #
    29887
    Hmmmm, if someone that actually knows what they're talking about says that it may be hard....maybe I'll reconsider my idea lol. I'm going to try some of those options and just give it a shot lol.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    GAME's "hard way" really isn't that difficult, to be honest. It would just be tedious, because you'd have to position everything, and tweak it several times to get the positioning right.

    In fact, I'll write your HTML for you:
    Code:
    <div id="bg-photo">
    <ul class="nav">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    </ul>
    <ul class="nav">
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    </ul>
    </div>
    And here's the basic, untweaked CSS:
    Code:
    #bg-photo{
    background:url('images/bg-photo.jpg') no-repeat;
    position:relative;
    height:set-me;
    width:set-me;
    }
    .nav{
    position:absolute;
    top:tweak-me;
    left:tweak-me;
    margin-left:tweak-me;
    }
    .nav li{
    float:left;
    margin-left:tweak-me;
    height:set-me;
    width:set-me;
    }
    There you go. Just tweak and set the values in the CSS, set the background or whatever for the li elements.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    That's what makes it hard...the math and the constant tweaking.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Senior Member MHometchko's Avatar
    Join Date
    Oct 2011
    Posts
    106
    Member #
    29723
    Liked
    19 times
    Honestly if you aren't well versed in css just do an image map.

    This site should make this literally a 10 minute ordeal for you:
    http://www.image-maps.com/

    Game and Ronald...I've seen you guys all over the forums and know you guys are pretty damn good industry professionals. While we all have our strong suits, SURELY you guys have used image-maps or some other GUI-based image mapping software before?? It's so easy!

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by MHometchko, post: 224110
    Honestly if you aren't well versed in css just do an image map.

    This site should make this literally a 10 minute ordeal for you:
    http://www.image-maps.com/

    Game and Ronald...I've seen you guys all over the forums and know you guys are pretty damn good industry professionals. While we all have our strong suits, SURELY you guys have used image-maps or some other GUI-based image mapping software before?? It's so easy!
    Actually, I only used image maps once when I was originally learning HTML 4. To be honest, I'd rather go the CSS route. The code I wrote above took less than 5 minutes, and getting things positioned would take maybe another 5. It also has the advantage of being search engine friendly and the HTML can be restyled in a future redesign without any changes.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    What Ron said, but for slightly different reasons. I've used image maps, including in a project recently that required them because of the odd shapes associated with what was literally a map. You'll also see that it was the last option I mentioned.

    Rollovers, though? Tricky. I'm going to write a tutorial on it at some point because I did solve it, but it was all kinds of nasty.

    As far as anything GUI-based...for graphics, yes. For code, you'd have to remove my left eyeball with a rusty razor blade before I'll consider that.
    Ronald Roe likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Senior Member MHometchko's Avatar
    Join Date
    Oct 2011
    Posts
    106
    Member #
    29723
    Liked
    19 times
    Lol. While I do agree with both of you on a whole...I was under the impression the OP wanted something up and running quickly. It doesn't appear to be a large project...and being that he's asking this question I'd assume he's fairly new with development...so I figured a GUI-based approach was appropriate.

    While the code to position these elements with CSS literally is a 5 minute ordeal for you or me Ron, as Game stated it could be quite tricky for the less experienced. It's hard to remember but there was once a time where none of us knew the difference between margin's and padding.

    Anyway just my two cents...thanks for the responses.

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Hey, no problem, man. It's good to have a different take, and if there's a GUI tool to do something, it's not a half-bad idea for a newcomer in the very short run.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:39 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com