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 11
  1. #1
    Junior Member
    Join Date
    Nov 2011
    Posts
    18
    Member #
    29982
    Im an amatuer web designer and I work for a small development firm, and im needing some help. On my current project I am required to put 3 text boxes side by side in the bottom of the page. These boxes will be describing different versions of the product that the company is selling. The boxes will need to be about 2 inches wide and about 4 inches tall and they need to sit side by side horizontally. What would be the best way to accomplish this look. Im fairly new to CSS so please take it easy on me lol. Im sure its an easy solution.

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Are you doing this in WordPress? If so, what theme are you using? A lot of how you'll get this done will depend on what you're already working with.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    A bit like so, though I wouldn't know how to work it down to inches:
    HTML Code:
    <div class="wrapper">
    <div class="inside">CONTENT</div>
    <div class="inside">CONTENT</div>
    <div class="inside">CONTENT</div>
    </div>
    And CSS:
    Code:
    .wrapper{
    height:#px; /*height of the whole thing*/
    width:#px; /*width of the whole thing*/
    }
    .inside{
    float:left; /*puts them side-by-side*/
    height:#px; /*the height*/
    width:#px; /*probably 1/3 the width of the whole thing*/
    }
    You may use 33% for the width of the 3 boxes, but beware that borders, padding and margin add to that, so they'd cause them to expand.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Junior Member
    Join Date
    Nov 2011
    Posts
    18
    Member #
    29982
    Im building this site in the twenty eleven theme in wordpress. Im not allowed to show a comp of the finished website for legal reasons (the site isnt to be made public until launch). I will work on this and get back to you all. Thanks for the suggestion =)

  6. #5
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    In Twenty-eleven, the footer is widgetized. Go to the widgets link in your dashboard and you can put text widgets into each of the three. They should be fairly well aligned already, but you can edit your CSS if necessary for tweaks to the layout. Here's a screenshot of the dashboard...

    Attachment 2431
    Attached Images Attached Images
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  7. #6
    Junior Member
    Join Date
    Nov 2011
    Posts
    18
    Member #
    29982
    @RonaldRoe- I just wanted to say thanks for the code. I used the code you gave me plus a little research and accomplished the look i needed. Im still quite new to web design and this internship is teaching me quite a few things. One thing I did not know of was the float: left and exactly what it does. Once i had the general structure of the div tags my build flew by. Easy squeezy once you know what youre doing lol.

    @alphamare- I was going to use your suggestion but I need the footer to be standard on each page and easily changable. The footer is going to be a menu of the entire site basically and the content i needed in boxes was only for one page. The website should be going live within the next 2 weeks. Ill be notifying you guys if i have any more issues.

    Thanks for the help.

  8. #7
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Glad you solved the issue - I didn't realize that you wanted the boxes only on one page. There is another way to do that, and that is to make a new page template, but I think for a beginner, RR's way is easier. I hope you will post the site in our Ratings and Reviews board when it is done - I'm looking forward to seeing it!
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  9. #8
    Junior Member
    Join Date
    Nov 2011
    Posts
    18
    Member #
    29982
    Got another issue. It involves cross browser support. Ive got rounded edges on the boxes for my menu tabs and they look just fine in firefox and also chrome. But they look bad. In internet explorer 8 its squaring off the corners.

    Also another issue is when i manually resize the windows by clicking the corner of the browser and pulling it in, everything gets distorted and moves around the screen. Any way to fix this and make the site look the same no matter what the window size is of the browser?

  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    The rounded corner is a known issue with IE. Versions before 9 don't support border-radius. There are workarounds, and a lot of opinions on whether or not to bother.

    Need to see what's going on to help with the other problem, though I suspect you're using AP divs. If so, don't use AP divs. Use margin, padding and offset (with relative positioning) to move things into place.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    Junior Member
    Join Date
    Nov 2011
    Posts
    18
    Member #
    29982
    fixed the second issue. All i did was put a min-width: 1000px property in the #page id. now as far as the rounded edges for IE im not exactly sure what im going to do. need to be talking with the boss on this one.


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 11:16 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com