SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Singapore
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Positioning Issue

    Hi all, I am building a site for a friend and have a couple of sticky CSS positioning issues that I just can't get my head around.

    1. Matcho Suba [matchosuba.com] - Collections

    • The first issue is that the container div does not take notice of the child div elements in determining height so the height is not adjusting.
    • The second is the caption under each thumbnail. I try to get these to center below the image but just can't get them to move at all. Please note the borders on the p tags are there just to show the width of the block whilst I try to work with this.


    2. Matcho Suba [matchosuba.com] - Press

    • Whenever I add an additional news item the Twitter box drops by roughly the same amount, I assume the position is based on the height of the content on the left but not sure how I "decouple" them if it is at all possible.


    Appreciate any and all advice.

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #white_background_box {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #999999;
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
    }

    #2 : make text align for
    #collections_content_box p {
    font-family: 'verdana';
    font-size: 12px;
    line-height: 180%;
    margin: 20px;
    text-align: center;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Singapore
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks you so much sidd! Perfect.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Singapore
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, everything is pretty much done other than one final thing that's bugging me. I cannot seem to be able to center the thumbnails in the container div. Any thoughts please anyone?

    Matcho Suba [matchosuba.com] - Collections

  5. #5
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Here's one way, combined with suggested alternative markup.

    As the purpose of the thumbnails is to provide a list of links, swap the .float divs and the #collections_box div for an unordered list. Give the list and anchors a fixed width.

    The img elements need to be closed for XHTML i.e end with /> and including image width and height attributes is advisable. I hesitate to specify font size in pixels, but will skip that aspect for now.

    The "Collections" heading would best be a heading element with text, using an image replacement technique to overlay it with the image of text.

    Give the body tag an id. This allows you to target page-specific styles to common elements, such as headings, without needing to apply extra ids or classes to them. In this case it's used to target the h1.

    Code XHTML1.0Strict:
    <body id="collections_page">
    Replace the #collections_content_box div and it's contents with:

    Code XHTML1.0Strict:
    <h1>Collections<span></span></h1>
     
    <ul id="collections_box">
     
    <li>
    	<a href="collections_project_sophie.html">
    		<img src="photos/thumbnails/project%20sophie/project%20sophie%204.jpg" width="200" height="200" />
    		Project Sophie
    	</a>
    </li>
    <li>
    	<a href="collections_zuzana.html">
    		<img src="photos/thumbnails/zuzana/zuzana%209.jpg" width="200" height="200" />
    		Zuzana
    	</a>
    </li>
    <li>
    	<a href="collections_folkloria.html">
    		<img src="photos/thumbnails/folkloria/folkloria%204.jpg" width="200" height="200" />
    		Folkloria
    	</a>
    </li>
    <li>
    	<a href="collections_london_calling.html">
    		<img src="photos/thumbnails/london%20calling/london%20calling%204.jpg" width="200" height="200" />
    		London Calling
    	</a>
    </li>
    <li>
    	<a href="collections_show_me_the_way.html">
    		<img src="photos/thumbnails/show%20me%20the%20way/show%20me%20the%20way%206.jpg" width="200" height="200" />
    		Show me the way
    	</a>
    </li>
     
    </ul>
    Remove all current Collections Page CSS and replace with:

    Code CSS:
    #collections_page h1 {
    	position: relative;
    	left: 20px;
    	width: 320px;
    	padding: 11px 0;
    	font: bold 20px/26px verdana, arial, sans-serif;
    }
     
    #collections_page h1 span {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 300px;
    	height: 42px;
    	background: url(../images/collections_heading.jpg) 0 0 no-repeat;
    }
     
    #collections_box {
    	width: 750px;
    	overflow: hidden; /* contain floated children */
    	list-style:none;
    	margin: 0 auto; /* centers within parent */
    	padding:0; /* removes default left padding for some browsers */
    	border:1px red solid; /* shows boundary, for demo purposes */
    }
     
    #collections_box li {
    	display: inline; /* prevent staggering in IE6/7 */
    }
     
    #collections_box li a {
    	float: left;
    	width: 200px;
    	text-align: center;
    	color: black;
    	font: normal 12px/18px verdana, arial, sans-serif;
    	margin: 10px 25px;
    }
     
    *html #collections_box li a {
    	margin: 10px 24px; /* targeting IE6, to compensate for border being added to width */
    }
     
    #collections_box img {
    	border: 1px #000 solid;
    	vertical-align: top; /* hide anchor underline */
    	margin-bottom:8px;
    }


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
  •