CSS Positioning Issue

HTML & CSS
1

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.
  1. 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. :slight_smile:

2

#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

Thanks you so much sidd! Perfect. :smiley:

4

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

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.

[HIGHLIGHT=“XHTML1.0Strict”]<body id=“collections_page”>


Replace the #collections_content_box div and it's contents with: 

[HIGHLIGHT="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:

#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;
}