SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS and centering content

    I have been building an image gallery layout and used the Sitepoint book 'The CSS Anthology', I have the following css:

    Code:
    #albumlist {
    	list-style-type: none;
    	width: 500;
    	text-align: center;
    }
    #albumlist li {
    	float: left;
    	margin-right: 10;
    	margin-bottom: 10;
    	font: 11px Arial, Helvetica, sans-serif;
    	color: #000000;
    }
    #albumlist img {
    	display: block;
    	border: 1px;
    }
    the code I have for the images:

    Code:
    <div id='albumlist'>
    	<li><img src='../img/image1.jpg' alt='' width=150' height='100'/>image1.jpg</li>
    </div>
    <div id='albumlist'>
    	<li><img src='../img/image2.jpg' alt='' width=150' height='100'/>image2.jpg</li>
    </div>
    	<div id='albumlist'>
    	<li><img src='../img/image3.jpg' alt='' width=150' height='100'/>image3.jpg</li>
    </div>
    <div id='albumlist'>
    	<li><img src='../img/image4.jpg' alt='' width=150' height='100'/>image4.jpg</li>
    </div>
    I have tried placing the following:

    Code:
    margin-left: auto;
    margin-right: auto;
    into albumlist as follows (and the other styles):

    Code:
    #albumlist {
    	list-style-type: none;
    	width: 500;
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    }
    but it does nothing at all, anyone have any idea how I can center the images on the page?

    Thanks in advance.

  2. #2
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can only have one ID instance per page. You have several (albumlist).

    Try changing the ID to class.

    E1: also it should be...

    <div class="albumlist">

    not...

    <div class='albumlist'>

    E2: and there's no real need for the <li> tag as you're placing every image within it's own DIV. Besides, you should contain <li>s within <ul></ul> tags for correct markup.
    No, I REALLY dislike having to use Joomla.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     #albumlist {
      	list-style-type: none;
      	width: 500px;
      	text-align: center;
      	margin-left: auto;
      	margin-right: auto;
      }
     #albumlist li {
      	float: left;
      	margin-right: 10px;
      	margin-bottom: 10px;
      	font: 11px Arial, Helvetica, sans-serif;
      	color: #000000;
      }
     #albumlist img {
      	display: block;
      	border: 1px;
      }
    You need to add a unit type to your margins and width. Notice that I used pixels in the example above (the red and bold text). You can use whatever unit type is appropriate for the job, but I think in this case, pixels will work best for your purposes. The only time you do not need to specify a unit type is if the value is zero. Zero is zero, whether pixels, ems, percentage, or even Coke Zero.

    Also, as crowden said, you can only have one instance of an ID in your page at a time. While you can have an ID with the name of "albumlist" and another ID with the name of "listalbum" you cannot have two IDs with the name "albumlist" or "listitem"

    If you want to use the same name more than once in a HTML file, you have to use a class instead.
    Code:
      .albumlist {
      	list-style-type: none;
      	width: 500px;
      	text-align: center;
      	margin-left: auto;
      	margin-right: auto;
      }
     .albumlist li {
      	float: left;
      	margin-right: 10px;
      	margin-bottom: 10px;
      	font: 11px Arial, Helvetica, sans-serif;
      	color: #000000;
      }
     .albumlist img {
      	display: block;
      	border: 1px;
      }
    One other nit-pick. If you use the font shorthand property to specify a size, you have to declare a line-height as well. This is done by typing /14px (or another value) immediately after the font size (in your case, 11px). It will look like this:
    font: 11px/14px Arial, Helvetica, sans-serif;

    Hope that helps.

  4. #4
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input....

    The code I posted didn't have the px on the values but the actual code on my page did, I am setting the css values with php variables and when changing them for the post forgot to put them in.

    I have made the other changes but still it does not center on the page.

    Code:
    .albumlist {
    	list-style-type: none;
    	width: 500px;
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    }
    .albumlist li {
    	float: left;
    	margin-right: 5px;
    	margin-bottom: 5px;
    	font: 11px/14px Ariel, Helvetica, sans-serif;
    	color: #999999;
    }
    .albumlist img {
    	display: block;
    	border: 1px solid #000000;
    }
    also changed the <div> to include all the images

    Code:
    <div id='albumlist'>
    	<li><img src='../img/image1.jpg' alt='' width=150' height='100'/>image1.jpg</li>
    	<li><img src='../img/image2.jpg' alt='' width=150' height='100'/>image2.jpg</li>
    	<li><img src='../img/image3.jpg' alt='' width=150' height='100'/>image3.jpg</li>
    	<li><img src='../img/image4.jpg' alt='' width=150' height='100'/>image4.jpg</li>
    </div>
    BTW, if I enclose the <li>'s in <ul>'s then I get a dot at the start of every images and the layout breaks.

    Thanks again.

  5. #5
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I built an example for someone awhile back based off of that SitePoint book section you are referring to - with less markup - you are welcome to use it as a base:
    http://simbology.com/code-examples/l...-captions.html

    As far as centering the gallery, just center the list or list container with something like this:
    Code:
    margin: 0 auto;

  6. #6
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, it makes the css seem simpler, but...

    I used the margin: 0 auto; in the list:

    Code:
    ol li { float: left; margin: 0 6px 10px 0; margin: 0 auto; }
    and all it does is overide the previous margin settings which I guess it would of course (but still doesn't center the images), so then I added it to the container:

    Code:
    ol { list-style-type: none; width: 320px; margin: 0 auto; }
    and it seems to do nothing.

    Thanks anyway guys.

    I think I am going to stick to tables for this, they need to be written dynamically but it's simpler than this.

    BTW, even if margin is set to 0 the images seem to sit in from the edge of the page, with html tables I can get the content right up to the edge.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    BTW, if I enclose the <li>'s in <ul>'s then I get a dot at the start of every images and the layout breaks.
    You can't just make your own structure up! - No wonder your page doesn't work as you expect . li items must be enclosed within the parent ul or ol. You just set the list to list-style:none to kill the bullet.

    ul{list-style:none;}

    margin:auto will center elements that have a specified width but if you are using an invalid page with no doctype then IE won't center with that method. See the faq on centering for a better understanding.

    You must make sure your code is valid before you start complaining that it doesn't work.

    BTW, even if margin is set to 0 the images seem to sit in from the edge of the page, with html tables I can get the content right up to the edge.
    You would be able to do that with css as well if you do it correctly . You probably haven't catered for the default margins or padding that is applied to nearly every element.

    If you are floating your images then you cannot center the images themselves but you can center the block that holds the images assuming you have so many image per line. The containing block would need to have a width though for margin:auto to work and for ie without a doctype you would need to set text-align:center on a parent.

    We would need to see your whole page code to give specific help and a better idea of what you are trying to achieve. It may well be that a table is the only solution in this case.

    You can do things like this with css but you do have to understand the principles first.

    http://www.pmob.co.uk/temp/caption20.htm

    Or more simply:

    http://www.pmob.co.uk/temp/caption5.htm


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
  •