SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center Div's in The Same Line

    My HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Ian Gonsalez</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script> 
    	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script> 
    	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" /> 
     	<link rel="stylesheet" href="style.css" /> 
    <script type="text/javascript"> 
    		$(document).ready(function() {
    			/*
    			*   Examples - images
    			*/
     
    			$("a#example1").fancybox({
    				'titleShow'		: false
    			});
     
    			$("a#example2").fancybox({
    				'titleShow'		: false,
    				'transitionIn'	: 'elastic',
    				'transitionOut'	: 'elastic'
    			});
     
    			$("a#example3").fancybox({
    				'titleShow'		: false,
    				'transitionIn'	: 'none',
    				'transitionOut'	: 'none'
    			});
     
    			$("a#example4").fancybox();
     
    			$("a#example5").fancybox({
    				'titlePosition'	: 'inside'
    			});
     
    			$("a#example6").fancybox({
    				'titlePosition'	: 'over'
    			});
     
    			$("a[rel=example_group]").fancybox({
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none',
    				'titlePosition' 	: 'over',
    				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
    					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    				}
    			});
     
    			/*
    			*   Examples - various
    			*/
     
    			$("#various1").fancybox({
    				'titlePosition'		: 'inside',
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none'
    			});
     
    			$("#various2").fancybox();
     
    			$("#various3").fancybox({
    				'width'				: '75%',
    				'height'			: '75%',
    				'autoScale'			: false,
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none',
    				'type'				: 'iframe'
    			});
     
    			$("#various4").fancybox({
    				'padding'			: 0,
    				'autoScale'			: false,
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none'
    			});
    		});
    	</script> 
    
    </head>
    
    <body>
    	<div id="head" >
    <a <a href="/"><img src="images/logo.png"</a>
    	</div>
    	<div id="content" >
    <div align="center"><h2>My Latest Works</h2></div>
    	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp
    	
    	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp
    
    	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp
    
    	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp
    
    	<div id="subs"><a id="example1" href="images/lp1.png"><img alt="example1" src="images/thumb1.png" /></a> <br /> This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</div>&nbsp
    
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>HELLO  TESTING!
    	</div>
    <div id="footer" >
    <div align="center"><h2>Footer, yo.</h2></div>
    
    </ br>
    I like doin, flip n ****. Copyright
    </ br>
    
    	</div>
    </body>
    </html>
    My CSS
    Code:
    /* Hand coded by Chris Yee */ 
    html, body{ 
    	margin:0; 
    	padding:0; 
    	text-align:center; 
    	background-color:#FFFFFF;
    	background-repeat:repeat;
    	background-position:center;
    
    } 
     
    #head{ 
    	width:100%;
    	margin-left:auto; 
    	margin-right:auto; 
    	background-color:#242424;
    	text-align:left; 
    	color:#FFFFFF;
    } 
    
    #content{ 
    
    	width:850px;
    	text-align:center;  
    	margin-left:auto; 
    	margin-right:auto; 
    	background-color:#efefef; 
    	color:#808080;
    	font-family:arial;
    	font-size:8pt;
    } 
     
    #subs{ 
    	margin:5px;
    	float: left;
    	width:150px;
    	padding:5px; 
    	text-align:center;  
    	background-color:#f6f6f6; 
    	color:#808080;
    	font-family:arial;
    	font-size:8pt;
    	border-style:solid;
    	border-width:1px;
    	border-color:white;
    } 
    
    #footer{ 
    	width:790px;
    	padding:5px; 
    	text-align:center;  
    	margin-left:auto; 
    	margin-right:auto; 
    	background-color:#ebebeb; 
    	color:#000000;
    	font-family:arial;
    	font-size:8pt;
    	font-weight:bold;
    }
    I'm trying to get those divs centered so its like a gallery.

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is that the subs divs you want centered? could try giving them a width and margin: 5px auto. Why are they floating? are you intending on adding a sidebar at some point?
    Generally it is a good idea to get the align=center business out of the html and into the css file to really separate form from content.

  3. #3
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to make that a list of inline-block list items. See Inline-block Gallery demo and tutorial.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    We had one of these yesterday

    Using the methods mentioned in Gary's link you could do something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Ian Gonsalez</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" >
    <link rel="stylesheet" href="style.css">
    <style type="text/css">
    /* Hand coded by Chris Yee */ 
    html, body {
        margin:0;
        padding:0;
        text-align:center;
        background-color:#FFFFFF;
        background-repeat:repeat;
        background-position:center;
    }
    #head {
        width:100&#37;;
        background-color:#242424;
        text-align:left;
        color:#FFFFFF;
    }
    h1, h2 {
        text-align:center
    }
    #content {
        width:850px;
        text-align:center;
        margin-left:auto;
        margin-right:auto;
        background-color:#efefef;
        color:#808080;
        font-family:arial;
        font-size:8pt;
    }
    #subs {
        margin:0;
        padding:0;
        list-style:none;
        width:100%;
        text-align:center;
    }
    #subs li {
        display:-moz-inline-box;/* vendor extension for FF2 support - won't validate but a valid construct*/
        display:inline-block;
        margin:5px 10px 10px;
        width:160px;
        text-align:justify;
        ;
    }
    #subs li a {
        width:150px;
        padding:5px;
        text-align:center;
        background-color:#f6f6f6;
        color:#808080;
        font-family:arial;
        font-size:8pt;
        border:1px solid #fff;
        display:block;
    }
    #footer {
        width:790px;
        padding:5px;
        text-align:center;
        margin-left:auto;
        margin-right:auto;
        background-color:#ebebeb;
        color:#000000;
        font-family:arial;
        font-size:8pt;
        font-weight:bold;
    }
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
    ul#subs li{display:inline}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="head"><a href="/"><img src="images/logo.png" alt=""></a></div>
    <div id="content" >
        <h1>My Latest Works</h1>
        <ul id="subs">
            <li><a  href="images/lp1.png"><img alt="example1" src="images/thumb1.png"></a> <br>
                This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</li>
            <li><a  href="images/lp1.png"><img alt="example1" src="images/thumb1.png"></a> <br>
                This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</li>
            <li><a href="images/lp1.png"><img alt="example1" src="images/thumb1.png"></a> <br>
                This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</li>
            <li><a  href="images/lp1.png"><img alt="example1" src="images/thumb1.png"></a> <br>
                This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</li>
            <li><a  href="images/lp1.png"><img alt="example1" src="images/thumb1.png"></a> <br>
                This is one of my first pieces made in Cinema 4D which is a 3D rendering program. The "GF" stands for Gra-fix.net which is where I spent a lot of time learning basic graphics.</li>
        </ul>
        <div id="footer" >
            <h2>Footer, yo.</h2>
            <p> I like doin, flip n ****. Copyright</p>
        </div>
    </div>
    </body>
    </html>
    Note that you don't self- close tags in html and ids must be unique (the above code is now valid).

    If you don't want to use inline block or if you want the row centered but the orphans left aligned then you would need to work out the width of the row exactly and use auto margins on the parent of each row to center it and then float the items 4 across inside the parent. Then do the same for each row of 4 all held in the same parent which is auto centred and set to clear:both so that it doesn't snag on any higher floats.


Bookmarks

Posting Permissions

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