SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centered Left-Aligned List

    Hi Everyone,


    The following <ul> is left-aligned and I'm trying to centre it within the #category_list div but I can't seem to get it right.

    I think the problem is that the <ul> doesn't wrap around its content but expands to full width.

    What am I missing here?


    Thanks for your help.




    HTML Code:
    			<div id="category_list">
    				<ul>
    				<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    				<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    				<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    				<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    				<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    				<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    				</ul>
    			</div>
    Code CSS:
    #category_list {
    	padding: 1em 0 2em;
    	text-align:center;
    }
     
    #category_list ul{
    	padding: 0;
    	display:inline-block;
    	text-align: left;
    	border: 1px solid red;
    	margin: 0 auto;
    }
     
    #category_list li{
    	display:inline-block;
    	width: 13.75em;
    	padding: 1em 0;
    	margin: 0 .5em 1em;
    	border-bottom: 1px solid #aaaaaa;
    }
     
    #category_list h2{
    	text-align: left;
    	margin: 0;
    	font: 1em "Georgia", Serif;
    	font-style: italic;
    }
    #category_list p{
    	text-align: left;
    	margin: 0;
    	font: .75em "Georgia", Serif;
    	font-style: italic;
    }
    #category_list img{
    	margin: .5em 0;
    }

  2. #2
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Just an update

    I though it would be matter of adapting the code dresden_phoenix helped me with below but it doesn't seem to work:
    http://www.sitepoint.com/forums/show...=1#post5255711

    The folks at don't seem to think it's possible without js but surely that's not the case especially considering it was possible with a justified list:
    http://stackoverflow.com/questions/1...in-wrapper-div

    HTML Code:
    <html>
    	<head>
    		<style>
    
    		#wrapper {
    			padding: 1em 0 2em;
    			text-align:center;
    		}
    		#category_list{
    			margin: 0 auto 0 auto;
    			text-align: left;
    			width: 100%;
    		}
    
    		#category_list ul{
    			padding: 0;
    			display:inline;
    			margin: 0;
    		}
    
    		#category_list li{
    			display:inline-block;
    			width: 13.75em;
    			padding: 1em 0;
    			list-style: none;
    			margin: 0 .5em 1em;
    			border-bottom: 1px solid #aaaaaa;
    		}
    
    		#category_list h2{
    			text-align: left;
    			margin: 0;
    			font: 1em "Georgia", Serif;
    			font-style: italic;
    		}
    		</style>
    	</head>
    	
    	
    	<body>
    		<div id="wrapper">
    		<div id="category_list">
    			<ul>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			</ul>
    		</div></div>
    	</body>
    </html>
    This is something similar to what I'm trying to achieve.
    centreleftlist.jpg

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The ul seems to be nicely centered within #category_list if the window is wide enough. So, I'm not exactly sure what you mean. If you want want a vertical list that is centered, then display the list items as blocks.
    Code:
    #category_list li{
    	display:block;         /* was display:inline-block */
    	width: 13.75em;
    	padding: 1em 0;
    	margin: 0 .5em 1em;
    	border-bottom: 1px solid #aaaaaa;
    }
    If you want the individual list items to center as they wrap at narrower window widths, then a couple of small changes in your present css is all that takes.
    Code:
    #category_list ul{
    	padding: 0;
    	display:inline-block;
    	text-align:center;     /* was text-align:left */
    	border: 1px solid red;
    	margin: 0 auto;
    }
    #category_list li{
    	display:inline-block;
    	width: 13.75em;
    	text-align:left;       /* added */
    	padding: 1em 0;
    	margin: 0 .5em 1em;
    	border-bottom: 1px solid #aaaaaa;
    }
    hope this helps.

  4. #4
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    The ul seems to be nicely centered within #category_list if the window is wide enough. So, I'm not exactly sure what you mean.
    Thanks for your help Ronpat. For some reason I didn't notice this.

    The problem is that once the browser window is shorter than the width of the list on a single line the <ul> boundary expands to the window width rather than the width of the <li>'s and as a result no longer centres. I need it to also centre once wrapping occurs when the window shrinks.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Dunno. It seems to work nicely for me in IE8 and Firefox. Always remains centered.

    Do you have a doctype at the top of your test page?

    What browser are you using?

    This is my test sheet. Your code plus the second set of changes suggested above. It seems to work according to your wishes. Always centered.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?934230-Centered-Left-Aligned-List
    Thread: Centered Left-Aligned List
    2012.12.07 06:58
    RyanKing1809
    -->
    <head>
        <title>Centered List Items</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    #category_list {
        outline:1px solid magenta;
        padding: 1em 0 2em;
        text-align:center;
    }
    
    #category_list ul {
        padding: 0;
        display:inline-block;
        text-align:center;
        border: 1px solid red;
        margin: 0 auto;
    }
    
    #category_list li {
        display:inline-block;
        width: 13.75em;
        text-align:left;
        padding: 1em 0;
        margin: 0 .5em 1em;
        border-bottom: 1px solid #aaaaaa;
    }
    
    #category_list h2 {
        text-align: left;
        margin: 0;
        font: 1em "Georgia", Serif;
        font-style: italic;
    }
    #category_list p {
        text-align: left;
        margin: 0;
        font: .75em "Georgia", Serif;
        font-style: italic;
    }
    #category_list img {
        margin: .5em 0;
    }
    
        </style>
    </head>
    <body>
    
    <div id="category_list">
        <ul>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        <li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
        </ul>
    </div>
    
    </body>
    </html>
    Last edited by ronpat; Dec 7, 2012 at 19:43. Reason: Add the test sheet code.

  6. #6
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Dunno. It seems to work nicely for me in IE8 and Firefox. Always remains centered.

    This is my test sheet. Your code plus the second set of changes suggested above. It seems to work according to your wishes. Always centered.
    Sorry Ron I mustn't have explained myself clearly - I would like the li's to remain left aligned but the ul to be centered. I'm not sure why it breaks when the window width cause it to wrap.

    Maybe this image will help explain what I'm trying to acheive:

    Screen_Shot_2012_12_08_at_12_34_06_PM.jpg

    HTML Code:
    <html>
    	<head>
    		<style>
    
    		#category_list {
    			padding: 1em 0 2em;
    			text-align:center;
    		}
    
    		#category_list ul{
    			padding: 0;
    			display:inline-block;
    			text-align: left;
    			border: 1px solid red;
    			margin: 0 auto;
    		}
    
    		#category_list li{
    			display:inline-block;
    			width: 13.75em;
    			padding: 1em 0;
    			margin: 0 .5em 1em;
    			border-bottom: 1px solid #aaaaaa;
    		}
    
    		#category_list h2{
    			text-align: left;
    			margin: 0;
    			font: 1em "Georgia", Serif;
    			font-style: italic;
    		}
    		</style>
    	</head>
    	
    	
    	<body>
    		<div id="wrapper">
    		<div id="category_list">
    			<ul>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			</ul>
    		</div></div>
    	</body>
    </html>

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You need to give the <ul> a desired width for the centering to take effect. For example:

    Code:
    #category_list ul {
    padding: 0;
    display: inline-block;
    text-align: left;
    border: 1px solid red;
    margin: 0 auto;
    width: 60em;
    }
    Also, I'd suggest you lose the display: inline-block on the <ul>, as it's not needed. That's just for the <li>s.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Ah, after looking at stackoverflow I see what you mean. Sorry for being a little slow on the uptake. I'm not sure that such an effect is possible with css alone. Still looking, though.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    I'm not sure that such an effect is possible with css alone
    You must be seeing something I'm not. Looks like a simple matter of centering the UL with a width to me, as I posted above.

  10. #10
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You need to give the <ul> a desired width for the centering to take effect. For example:

    Code:
    #category_list ul {
    padding: 0;
    display: inline-block;
    text-align: left;
    border: 1px solid red;
    margin: 0 auto;
    width: 60em;
    }
    Also, I'd suggest you lose the display: inline-block on the <ul>, as it's not needed. That's just for the <li>s.
    Thanks Ralph - 60em happens to conveniently work with the width of my li's - however if you try 54em - the li's aren't centred.
    I would also like it to wrap on window resize. So something like width:80% makes sense but the li's also aren't centred.

    Maybe it would be easier to modify the li width with media queries and percentages rather than getting the ul width working?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    O, right, I see. Yes, perhaps @media rules would be a good way to go. Here's a possible (albeit imperfect) starting point for desktop:

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<style>
    
    		#category_list {
    			padding: 1em 0 2em;
    			text-align:center;
    		}
    
    		#category_list ul{
    			padding: 0;
    			text-align: left;
    			border: 1px solid red;
    			margin: 0 auto;
    			width: 80%;
    			list-style: none;
    			overflow: hidden;
    		}
    
    		#category_list li{
    			float: left;
    			width: 23%;
    			padding: 1em 0;
    			margin: 0 1% 1em;
    			border-bottom: 1px solid #aaaaaa;
    		}
    
    		#category_list h2{
    			text-align: left;
    			margin: 0;
    			font: 1em "Georgia", Serif;
    			font-style: italic;
    		}
    		</style>
    	</head>
    	
    	
    	<body>
    		<div id="wrapper">
    		<div id="category_list">
    			<ul>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			<li><h2>Title</h2><img src="_images/categories/img.jpg"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></li>
    			</ul>
    		</div></div>
    	</body>
    </html>
    With media queries, at certain widths change the widths of the <li>s to different %s, like 31% etc.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    RyanKing1809, if you are in an experimental mode, Paul posted a very heady hack a few months ago that you might enjoy visiting. Just for fun.

    http://www.sitepoint.com/forums/show...60#post5194960

  13. #13
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    O, right, I see. Yes, perhaps @media rules would be a good way to go. Here's a possible (albeit imperfect) starting point for desktop:

    With media queries, at certain widths change the widths of the <li>s to different %s, like 31% etc.
    Thanks Ralph - I've been on the hunt for responsive gallery sites and this is how they appear to do things.

    Quote Originally Posted by ronpat View Post
    RyanKing1809, if you are in an experimental mode, Paul posted a very heady hack a few months ago that you might enjoy visiting. Just for fun.

    http://www.sitepoint.com/forums/show...60#post5194960
    Thanks Ron, I might be able to use a touch of Paul's wizardry in another part of my site.


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
  •