Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    This SHOULD be simple - centering image containers in a horizontal row

    Edited to read better:

    I have this code:

    Code:
    <body>
    <div style="width: 150px; height:150px; border:1 solid red; float: left">111</div> 
    <div style="width: 150px; height:150px; border:1 solid red; float: left">222</div> 
    <div style="width: 150px; height:150px; border:1 solid red; float: left">333</div>
    </body>
    What you see are three fixed-size DIVs on the same row but aligned to the left. I need the same effect (using any method) that has those three boxes centred on the page.

    It must also fulfill this criteria:

    1) Be on the same line

    2) Be fixed-size

    3) Be a unique element for each in terms of code, as each box is dynamically generated using a loop

    4) Work for any number of boxes (rules out editing of margins to hack it visually)

    You don't have to use DIVs - anything will do (tables, pure CSS). But I've not been able to find a way of doing it.
    Last edited by DeaDLocK; 12-05-2006 at 06:33 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello DeaDLocK,
    See if this doesn't work...
    markup:

    Code:
    <div class="float"><a href="http://link.htm"><img src="picture.jpg" border="0"></a><br />could be a title here
    </div>
    CSS:
    Code:
    .float {
    	float: left;
    	margin-top: 15px;
    	margin-bottom: 2px;
    	margin-left: 2%;
    	font-family: "Comic Sans MS";
    	font-size: 1em;
    	color: #FFFFFF;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Nope, still sticks to the left. Left margin changes when window is resized, but the div is still on the left and is not centered.

    Thanks.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    How do you expect us to help if you haven't posted any code or a link? We aren't psychic you know. Help us help you.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Dec 2006
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry - I thought my explanation and picture would suffice. Here's some basic code to demonstrate what I'm trying to do.

    Code:
    <body>
    <div style="width: 150px; height:150px; border:1 solid red; float: left">111</div> 
    <div style="width: 150px; height:150px; border:1 solid red; float: left">222</div> 
    <div style="width: 150px; height:150px; border:1 solid red; float: left">333</div>
    </body>
    What you see are three fixed-size DIVs on the same row but aligned to the left. I need the same effect (using any method) that has those three boxes centred on the page.

    It must also fulfill this criteria:

    1) Be on the same line

    2) Be fixed-size

    3) Be a unique element for each in terms of code, as each box is dynamically generated using a loop

    You don't have to use DIVs - anything will do. But I've not been able to find a way of doing it.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    DeaDLocK it sticks to the left because that's the way it's styled right now.

    I just gave you the example so you would have a class that you could style to your liking.
    Try changing margin or padding on .float and see how that works for you.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Dec 2006
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ah, sorry Excavator.

    Using margins wouldn't work though as the number of images changes dynamically based on how many items there are in a client-edited XML file.

    So whether there are two divs in there or five, I need them so center horizontally. So only something that actually centers it would work, and visual hacks won't.

    Sorry I should have made that clear.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Ok, I re-read your description. The "Be on the same line" may be what threw me...

    Try this:
    Code:
    <style type="text/css">
    html, body {
    	text-align: center;
    	margin: 0px;
    	padding: 0px;
    }
    #wrapper {
    	height: 152px;
    	width: 456px;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    }
    body {
    	text-align: center;
    	margin: 0px;
    	padding: 0px;
    }
    .pic {
    	float: left;
    	height: 150px;
    	width: 150px;
    	border: 1px solid #CC0000;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    <div class="pic"></div>
    <div class="pic"></div>
    <div class="pic"></div>
    </div>
    </body>
    </html>
    You could add a red border to the wrapper so all the borders would appear the same...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Dec 2006
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks so much for the effort Excavator, but in this example the "pic" divs are all against the left wall of the "wrapper" div.

    If you can get them to be centred within the wrapper div then you've cracked it. The benchmark for this is when a div needs to wrap to the next line - does it appear left-aligned with all the others, or is it in the centre? f you can get it to shift to the centre, you are a genius.

    Thanks again.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hahaha, I'm surely no genius - I think I'm proving that now!

    Try this - used a min-width hack...

    Code:
    <style type="text/css">
    html, body {
    	text-align: center;
    	margin: 0px;
    	padding: 0px;
    }
    .wrapper {
    	width:50%; 
    	min-width:400px; 
    	margin:0 auto;
    }
    /* hack for IE6  */
    * html .minwidth {
    	border-left:400px solid #fff; 
    	position:relative; 
    	float:left; 
    	z-index:1;}
    * html .container {
    	margin-left:-400px; 
    	position:relative; 
    	float:left; 
    	z-index:2; 
    	text-align:left;}
    .pic {
    	height: 150px;
    	width: 150px;
    	border: 1px solid #CC0000;
    	display: inline-block;
    	float: left;
    	margin-left: 5px;
    }
    </style>
    </head>
    
    <body>
    <div class="wrapper">
    <div class="minwidth">
    <div class="container">
    <div class="pic"></div>
    <div class="pic"></div>
    <div class="pic"></div>
    </div>
    </div>
    </div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .piccontain {
    width:450px;
    margin:0 auto;
    padding:0;
    list-style:none;
    }
    .piccontain li {
    width:150px;
    height:150px;
    line-height:150px;
    text-align:center;
    background:#F00;
    float:left;
    }
    </style>
    </head>
    <body>
    <ul class="piccontain">
    	<li>111</li>
    	<li>222</li>
    	<li>333</li>
    </ul>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hi _Aerospace_Eng_,
    You did the same thing I did... that works fine till you put more images in.

    4) Work for any number of boxes (rules out editing of margins to hack it visually)
    This is kind of fun!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New Coder
    Join Date
    Dec 2006
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Try this - used a min-width hack...
    Nope - same problem. It left-aligns against a centred object.

  • #14
    New Coder
    Join Date
    Dec 2006
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm beginning to think that this is impossible even though what I want to acheive visually should be really simple.

    Thanks aerospace, but with your code and this body:

    Code:
    <ul class="piccontain">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    </ul>
    I end up with this:


    Code:
    --------------------------------
    |                              |
    |    ----------------------    |
    |    |      |      |      |    |
    |    | 111  | 222  | 333  |    |
    |    |      |      |      |    |
    |    ----------------------    |
    |    |      |      |           |
    |    | 444  | 555  |           |
    |    |      |      |           |
    |    ---------------           |
    |                              |
    --------------------------------
    When what I need is:


    Code:
    --------------------------------
    |                              |
    |    ----------------------    |
    |    |      |      |      |    |
    |    | 111  | 222  | 333  |    |
    |    |      |      |      |    |
    |    ----------------------    |
    |       |      |      |        |
    |       | 444  | 555  |        |
    |       |      |      |        |
    |       ---------------        |
    |                              |
    --------------------------------
    Basically it has the same problem as Excavator's wrapping solution above - the boxes are not getting centred; they are just being anchored to the left of an object that is centred.

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Ok, I think I've got it.
    Check out http://www.nopeople.com/CSS/thumbnail%20presentation/

    It validates except for the inline-block switch that W3C doesn't like yet...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •