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.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centered, wrapping grid - help

    Hello,

    I know basic css and html, but not much more than that. However, the site I am attempting to build is very simple, so hopefully someone here can help me stumble my way through the process.

    Here is an example of what I want:


    ...and when I add new content:


    I want a css grid of identical square containers, with a thumbnail in each one. The tricky part is getting the differently-sized thumbnails to be vertically centered in the containers without having to set each one by hand.

    This is where I have gotten so far-
    http://jimtierneyart.com/test/test.html

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
            
    <html>
    	<head>
    		<style type="text/css"> 
    		
    		body {
    			margin : auto;
    		}
    		
    		.wrapper {
    			width: 900px;
    			border: 1px solid #bbbbbb;
    			margin: 50 auto;
    		}
    		
    		.item {
    			
    			line-height: 223;
        		text-align: center;
        		float: left;
    			width: 223px;
    			height: 223px;
    			border: 1px solid #dddddd;
    			background: #EBEBEB;
    		}
    		
    		img.a {
    			margin: auto; 
    			max-width:120px;  
    			border:0; 
    			max-height:175px; 
    		}
    		
    		
    
    </style>
    
    		
    		
    		
    	</head>
    
    	<body>
    		<div class="wrapper">
    
    			header
    
    			<BR>
    			<BR>
    
    
    
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    			
    				<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    			
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    
    		</div>
    	</body>
    </html>
    I need 2 things to happen:

    1. The parent container must be centered on the page (this worked fine until I added the Doctype tags.
    2. the thumbnails must be vertically centered within the child containers.

    Can anyone point me in the right direction?
    I would really appreciate some help.

  • #2
    New Coder
    Join Date
    Aug 2011
    Location
    The Universe
    Posts
    34
    Thanks
    0
    Thanked 11 Times in 11 Posts
    Ooh, vertical centering? That's been a tough one for a while. The best guide I've found so far is http://www.jakpsatweb.cz/css/css-ver...-solution.html (use the first code, not the second), but yeah, there's no "simple" solution.

    Hope that helps.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help. I guess I might just end up centering each thumbnail on a case-by-case basis.

    However, I still don't know whey the auto margins on the main container div are not working to center the grid... any ideas on that?

  • #4
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    get rid of the margin:auto assigned to your body element. Doing that will allow your .wrapper to be centered.

  • #5
    New Coder
    Join Date
    Aug 2011
    Location
    The Universe
    Posts
    34
    Thanks
    0
    Thanked 11 Times in 11 Posts
    Quote Originally Posted by resdog View Post
    get rid of the margin:auto assigned to your body element. Doing that will allow your .wrapper to be centered.
    I think he's trying to center the colored boxes, not the overall div.

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,776
    Thanks
    41
    Thanked 196 Times in 195 Posts
    Quote Originally Posted by resdog View Post
    get rid of the margin:auto assigned to your body element. Doing that will allow your .wrapper to be centered.
    in addition (and with regards to your vertical "centered" problem)
    If I am reading this correctly you are vertical-align:middle; -ing images correct? I am pretty sure that is one of the only things vertical-align actually works fluidly on... (could be wrong, I almost never center vertically- worth a try)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    maybe, but the site I saw had that all figured out, and he addressed the vertical boxes issue before asking the question about the "main container div", so thought I would supply a response to that.

  • #8
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    in addition (and with regards to your vertical "centered" problem)
    If I am reading this correctly you are vertical-align:middle; -ing images correct? I am pretty sure that is one of the only things vertical-align actually works fluidly on... (could be wrong, I almost never center vertically- worth a try)
    I was able to easily re-center the wrapper, but adding "vertical-align:middle;" to the images didn't help.

    Here's an update on my code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
            
    <html>
    	<head>
    		<style type="text/css"> 
    		
    		
    		.wrapper {
    			width:900px;
    			border:1px solid #bbbbbb;
    			margin:50px auto;
    		}
    		
    		.item {
    			display:table-cell;
    			text-align:center;
        			float:left;
    			line-height:100px;
    			width:223px;
    			height:223px;
    			border:1px solid #dddddd;
    			background:#EBEBEB;
    		}
    		
    		img.a {
    			vertical-align:middle;
    			max-width:120px;  
    			border:0; 
    			max-height:175px; 
    		}
    		
    		
    
    </style>
    
    		
    		
    		
    	</head>
    
    	<body>
    		<div class="wrapper">
    
    			header
    
    			<BR>
    			<BR>
    
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    			
    				<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    			
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    			<div class="item">
    			<img class="a" src="image.gif">
    			</div>
    
    
    		</div>
    	</body>
    </html>

  • #9
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,776
    Thanks
    41
    Thanked 196 Times in 195 Posts
    vertical-align needs to be on the parent element

    Code:
    <div style="vertical-align:middle;">
      <img src="blah" />
    </div>
    again, i do not do a whole h*ll of a lot of vertical "centering" and what I have done has been bored "toying" so idk if it will work or not; but to the best of my knowledge the vertical-align is designed for use with images

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #10
    New Coder
    Join Date
    Aug 2011
    Location
    The Universe
    Posts
    34
    Thanks
    0
    Thanked 11 Times in 11 Posts
    Vertical-align doesn't usually work on images. It's usually used to vertically align text relative to inline images, which isn't the case here. Have you tried http://www.jakpsatweb.cz/css/css-ver...-solution.html?

  • #11
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    vertical-align needs to be on the parent element

    Code:
    <div style="vertical-align:middle;">
      <img src="blah" />
    </div>
    again, i do not do a whole h*ll of a lot of vertical "centering" and what I have done has been bored "toying" so idk if it will work or not; but to the best of my knowledge the vertical-align is designed for use with images

    I've taken vertical-align out of the img tag, and added it to the "item" div, but still nothing.

    On another note, I was successful in vertically centering the images, but the grid no longer wraps after 4 columns:

    http://jimtierneyart.com/test/test2.html

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
            
    <html>
    	<head>
    		<style type="text/css"> 
    		
    		
    		.wrapper {
    			width:900px;
    			border:1px solid #bbbbbb;
    			margin:50px auto;
    		}
    		
    		.item {
    			display: table-cell;
        			text-align: center;
        			vertical-align: middle;
    			width:223px;
    			height:223px;
    			border:1px solid #dddddd;
    			background:#EBEBEB;
    		}
    			
    
    		
    
    
    		.item * {
       			vertical-align: middle;
    		}
    
    /*\*//*/
    		.item {
    			display: block;
    		}
    
    
    		.item span {
    			display: inline-block;
        			height: 100%;
        			width: 1px;
    }
    /**/
    </style>
    <!--[if lt IE 8]><style>
    .item span {
        display: inline-block;
        height: 100%;
    }
    </style><![endif]-->
    
    
    
    		
    	
    		
    		
    
    </style>
    
    		
    		
    		
    	</head>
    
    	<body>
    		<div class="wrapper">
    
    			header
    
    			<BR>
    			<BR>
    
    
    			<div class="item"><span></span>
    			<img src="image2.gif">
    			</div>
    
    			<div class="item"><span></span>
    			<img src="image2.gif">
    			</div>
    
    			<div class="item"><span></span>
    			<img src="image2.gif">
    			</div>
    
    			<div class="item"><span></span>
    			<img src="image2.gif">
    			</div>
    
    			<div class="item"><span></span>
    			<img src="image2.gif">
    			</div>
    
    			<div class="item"><span></span>
    			<img src="image2.gif">
    			</div>
    			
    		</div>
    	</body>
    </html>



    It seems the "float:left" needs to be deleted in order for them to center...but I want both! Any way to do this?


  •  

    Tags for this Thread

    Posting Permissions

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