#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    8
    Rep Power
    0

    Help with aligning pictures


    I tried posting the urls to what I want but this wont let me

    I just want the 9 images spaced evenly and the ability to add text under the image.

    I have this as the css styles
    .leftbutton {
    float:left;
    margin:auto;
    display:block;
    }

    .middlebutton {
    margin:auto;
    display:block;

    }
    .rightbutton {
    float:right;
    margin:auto;
    display:block;

    }

    What should I do? Any ideas or suggestions?
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Good morning,

    Can you post your HTML also please? If you want text underneath the images though I would suggest putting the images within a div, that way the text underneath the image will always be aligned. I suppose you could put the text in a <p> tag, set it to the same width as the image, then lay them out the same.

    If you post me the HTML I might be able to come up with something for you.

    Kind regards,

    NM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    8
    Rep Power
    0
    Thanks for the help

    <div id="csbox">
    <div class="leftcolumn"><img class="leftbutton" src="PrivacyPolicyButton.gif" width="265" height="59" style="" /><br />
    <img class="leftbutton" src="PrivacyPolicyButton.gif" width="265" height="59" style="" /><br />
    <img class="leftbutton" src="PrivacyPolicyButton.gif" width="265" height="59" style="" />
    </div>
    <div class="middlecolumn">
    <img class="middlebutton" src="PrivacyPolicyButton.gif" width="265" height="59" /><br />
    <img class="middlebutton" src="PrivacyPolicyButton.gif" width="265" height="59" /><br />
    <img class="middlebutton" src="PrivacyPolicyButton.gif" width="265" height="59" />
    </div>
    <div class="rightcolumn">
    <img class="rightbutton" src="PrivacyPolicyButton.gif" width="265" height="59"/><br />
    <img class="rightbutton" src="PrivacyPolicyButton.gif" width="265" height="59"/><br />
    <img class="rightbutton" src="PrivacyPolicyButton.gif" width="265" height="59"/>
    </div>

    and the new css is

    .leftcolumn {
    width:300;
    float:left;
    }

    .rightcolumn {
    width:300;
    float:left;
    }

    .middlecolumn {
    width:300;
    float:left;
    }

    I havent added the text in yet. It will just be one or two sentences under each. I already tried a table and the spacing went weird on me.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    8
    Rep Power
    0
    As an update. I got the images spaced ok using padding. The problem I am now running into is the padding is throwing off the text. Any ideas on that one?
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Good evening tylerr,

    I'm working on it now, why are there 3 images within each div? Are they meant to represent text?

    Kind regards,

    NM.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    8
    Rep Power
    0
    Yes there is text. I am still working on it though, I have hit a new problem. There are three columns, each with three images going down, each image has two sentences underneath it. Everything is working ok now except the middle column. With the middle column the text is dropping about a line. It is just enough to throw off the column. The code is the same is the others so I don't know what the problem is. Here is the code.

    CSS-
    #csbox {
    background: #ffffff;
    width: 959px;
    height: 366px;
    margin-left: auto;
    margin-right: auto;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 2px 2px 3px 1px #000;
    box-shadow: 2px 2px 3px 1px #000;


    }
    #cstable {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }

    .leftbutton {
    float:left;
    margin:auto;


    }

    .middlebutton {
    margin-left: auto;
    margin-right: auto;


    }
    .rightbutton {
    float:right;
    margin:auto;

    }
    #banner {
    margin-left: auto;
    margin-right: auto;
    }

    .leftcolumn {
    width:275px;
    height:500px;
    float:left;
    padding-top:25px;
    padding-bottom:25px;
    padding-right:20px;
    padding-left:10px;
    }

    .rightcolumn {
    width:275;
    height:500px;
    float:left;
    padding-top:25px;
    padding-bottom:25px;
    padding-right:10px;
    padding-left:20px;
    }

    .middlecolumn {
    width:275;
    height:500px;
    float:left;
    padding-top:25px;
    padding-bottom:25px;
    padding-right:25px;
    padding-left:25px;
    }
    HTML-
    <div id="csbox">
    <div class="leftcolumn">
    <img class="leftbutton" src="PrivacyPolicyButton.gif" width="265" height="59" />
    <p>Here is one full sentence for the customer service page. This is the second full sentence for the customer service page.</p>
    <img class="leftbutton" src="PrivacyPolicyButton.gif" width="265" height="59" />
    <p>Here is one full sentence for the customer service page. This is the second full sentence for the customer service page.</p>
    <img class="leftbutton" src="PrivacyPolicyButton.gif" width="265" height="59" />
    <p>Here is one full sentence for the customer service page. This is the second full sentence for the customer service page.</p>
    </div>
    <div class="middlecolumn">
    <img class="middlebutton" src="PrivacyPolicyButton.gif" width="265" height="59" /><p>Here is one full sentence for the customer service page.<br /> This is the second full sentence for the customer service <br />page.</p>
    <img class="middlebutton" src="PrivacyPolicyButton.gif" width="265" height="59" /><p>Here is one full sentence for the customer service page.<br /> This is the second full sentence for the customer service<br /> page.<br /></p>
    <img class="middlebutton" src="PrivacyPolicyButton.gif" width="265" height="59" />
    <p>Here is one full sentence for the customer service page.<br /> This is the second full sentence for the customer service <br />page.</p>
    </div>
    <div class="rightcolumn">
    <img class="rightbutton" src="PrivacyPolicyButton.gif" width="265" height="59"/>
    <p>Here is one full sentence for the customer service page.<br /> This is the second full sentence for the customer service <br />page.</p>
    <img class="rightbutton" src="PrivacyPolicyButton.gif" width="265" height="59"/>
    <p>Here is one full sentence for the customer service page.<br /> This is the second full sentence for the customer service<br /> page.</p>
    <img class="rightbutton" src="PrivacyPolicyButton.gif" width="265" height="59"/>
    <p>Here is one full sentence for the customer service page.<br /> This is the second full sentence for the customer service<br> page.</p>
    </div>
    </div>
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Good evening tylerr,

    I have written this, have a look and see if it's near what you wanted.

    HTML:
    Code:
    <div id="csbox">
    <div class="leftcolumn">
    <img class="leftbutton" src="citywp.jpg" width="90%" height="59" />
    <p>Here is one full sentence for the customer service page. This is the second full sentence for the customer service page.</p>
    <img class="leftbutton" src="citywp.jpg" width="90%" height="59" />
    <p>Here is one full sentence for the customer service page. This is the second full sentence for the customer service page.</p>
    <img class="leftbutton" src="citywp.jpg" width="90%" height="59" />
    <p>Here is one full sentence for the customer service page. This is the second full sentence for the customer service page.</p>
    </div>
    <div class="rightcolumn">
    <img class="middlebutton" src="citywp.jpg" width="265" height="59" /><p>Here is one full sentence for the customer service page.<br /> This is the second full sentence for the customer service <br />page.</p>
    <img class="middlebutton" src="citywp.jpg" width="265" height="59" /><p>Here is one full sentence for the customer service page.<br /> This is the second full sentence for the customer service<br /> page.<br /></p>
    <img class="middlebutton" src="citywp.jpg" width="265" height="59" />
    <p>Here is one full sentence for the customer service page.<br /> This is the second full sentence for the customer service <br />page.</p>
    </div>
    <div class="middlecolumn">
    <img class="rightbutton" src="citywp.jpg" width="265" height="59"/>
    <p>Here is one full sentence for the customer service page.<br /> This is the second full sentence for the customer service <br />page.</p>
    <img class="rightbutton" src="citywp.jpg" width="265" height="59"/>
    <p>Here is one full sentence for the customer service page.<br /> This is the second full sentence for the customer service<br /> page.</p>
    <img class="rightbutton" src="citywp.jpg" width="265" height="59"/>
    <p>Here is one full sentence for the customer service page.<br /> This is the second full sentence for the customer service<br> page.</p>
    </div>
    </div>
    CSS:
    Code:
    #csbox {
    background: #ffffff;
    width: 959px;
    height: 366px;
    margin-left: auto;
    margin-right: auto;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 2px 2px 3px 1px #000;
    box-shadow: 2px 2px 3px 1px #000;
    
    
    }
    #cstable {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }
    
    #banner {
    margin-left: auto;
    margin-right: auto;
    }
    
    .leftcolumn {
    width:275px;
    height:500px;
    float: left;
    padding-top:25px;
    padding-bottom:25px;
    background: green;
    text-align: center;
    }
    
    .rightcolumn {
    width:275px;
    height:500px;
    float: right;
    padding-top:25px;
    padding-bottom:25px;background: blue;
    text-align: center;
    }
    
    .middlecolumn {
    width:275px;
    height:500px;
    margin: auto;
    padding-top:25px;
    padding-bottom:25px;
    background: red;
    text-align: center;
    }
    
    div#csbox > p
    {
    	width: 90%;
    }
    If you want your text to not be centered and to keep in their natural left aligned position, I can remove the text-align center declaration off the 3 divs and center the images in a different way.

    Kind regards,

    NM.
    Last edited by Nanomech; June 13th, 2013 at 03:09 PM.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    8
    Rep Power
    0
    That worked perfect. Thank you for all your help.

    For people interested in the solution there were two:

    1. My three column divs fit in the container ok but with padding they were too large.

    2. The right buttons were set to float right making them off a few pixels.
  16. #9
  17. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    No problem,

    Do you know how to set them back to how they were?

    Regards,

    NM.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    8
    Rep Power
    0
    Yup after two full days I finally have 9 buttons lined up. This is page 1 of a 10 page project. Hopefully I can start to go a little faster.
  20. #11
  21. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    That's good news.

    What kind of functionality are you going to have? Will it be a dynamic website or purely static html?

    If you need any help with anything we'll be more than happy to help.

    Kind Regards,

    NM.
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    8
    Rep Power
    0
    The site is all in dot net which I know nothing about. I am just doing the help/about us/contact us stuff. I know the basics but I am doing this from scratch so it is a little bit more of a challenge. I will probably have more questions though!
  24. #13
  25. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Good morning tyler,

    Ah I've never really studied .NET, I work for a website company which is written in C#. I watched our developer for a bit everyday and I think you literally put the static HTML inside a file and call the file with the C# code.

    Is someone else doing the programming?

    Kind regards,

    NM.
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    8
    Rep Power
    0
    Yeah someone else is doing the programming. From what I know about .net I would rather not learn it. I am looking at learning either sql or something in the lamp stack. .net doesn't seem to play well with others.
  28. #15
  29. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    7
    Rep Power
    0
    the better way is to understand how it works rather than using auto complete tools, to get the full control
    Last edited by Winters; June 24th, 2013 at 08:59 AM. Reason: Removed fake sig

IMN logo majestic logo threadwatch logo seochat tools logo