Wordpress column of images overlapping problem

18 replies [Last post]

Sun, 2008-11-09 00:15

jbcobbs

Offline

newbie

Last seen: 13 years 40 weeks ago

Joined: 2008-11-09

Posts: 8

Points: 0

In my posts id like there to be a column of several images to the left of the post. My problem is that the images are overlapping as you can see in this example. http://cobbsfriedman.com/island-water-sports-website-is-a-hit/ - on the left are two images overlapping. Heres my code:

.post{
		position: relative;
		background: #000000;
	}
 
		.entry{
			position: relative;
			float: right;
			padding: 20px 50px 20px 0;
			width: 578px;
			min-height: 220px;
			text-align: left;
			color: #222;	
		}
 
		.entry img{
 
			position: absolute;
			top: 0px;
			left: -300px;
			z-index: 1000;
 
 
		}
 
			.entry h2{
				position: relative;
				font-size: 1.8em;
				font-style: italic;
				padding-bottom: 14px;	
			}
 
			.entry p{
				position: relative;
				line-height: 1.5em;
				padding-bottom: 1em;	
			}
 
			.entry a{
				position: relative;
				color: #222;
				text-decoration: underline;
			}

<a href="http://cobbsfriedman.com/wp-content/uploads/2007/10/goabacoa.jpg"><img class="alignnone size-medium wp-image-30" title="Marine Business Advisors Website" src="http://cobbsfriedman.com/wp-content/uploads/2008/05/mba.jpg" alt="" width="250" height="127" /></a>
 
<a href="http://cobbsfriedman.com/wp-content/uploads/2007/10/goabacoa.jpg"><img class="alignnone size-medium wp-image-21" title="GoAbacoa.com Website" src="http://cobbsfriedman.com/wp-content/uploads/2007/10/goabacoa.jpg" alt="" width="250" height="296" /></a>
 
Island Water Sports has a thriving local retail business. They came to Cobbs &amp; Friedman wanting to expand their offerings in the way of a dynamic e-commerce website. We built them a site that is not only functional but graphically appeals to their target demographic and is search engine optimized to boot. Along with an aggresive search engine marketing campaign to boot, Island Water Sports increased their web reach and their sales.<!--more-->

Tags:

CSS Styling

Sun, 2008-11-09 00:33

Josh Connerty

Offline

Enthusiast

Wiltshire, England

Last seen: 11 years 24 weeks ago

Wiltshire, England

Joined: 2008-10-17

Posts: 268

Points: 23

What do you expect when you

What do you expect when you tell to images to absolutely positon in the same place.

Try giving them seperate clases and then seperately position them.
Or just float them to the left of a container and they should fall into place.

Website Design Wiltshire
My Blog

Sun, 2008-11-09 01:01

jbcobbs

Offline

newbie

Last seen: 13 years 40 weeks ago

Joined: 2008-11-09

Posts: 8

Points: 0

maybe im missing something

when i change the .entry img to just float left I lose the colum of images and they are in a row and they are placed wrong. Im no expert by any means so might need an etra push if you could. You can see my last results at http://cobbsfriedman.com/island-water-sports-website-is-a-hit/

Sun, 2008-11-09 01:12

Josh Connerty

Offline

Enthusiast

Wiltshire, England

Last seen: 11 years 24 weeks ago

Wiltshire, England

Joined: 2008-10-17

Posts: 268

Points: 23

I also see the images are

I also see the images are invading the text my advice would be to add the images to a seperate div and absolutely position the div into position on the left.

But make sure you set a width for the div else your images will force it too wide thus makeing them display inline.

Get back to me on it.

Website Design Wiltshire
My Blog

Sun, 2008-11-09 01:16

Josh Connerty

Offline

Enthusiast

Wiltshire, England

Last seen: 11 years 24 weeks ago

Wiltshire, England

Joined: 2008-10-17

Posts: 268

Points: 23

I'll be back in just a few

I'll be back in just a few minutes so stay online and I'll try and get it fixed.

Website Design Wiltshire
My Blog

Sun, 2008-11-09 01:22

jbcobbs

Offline

newbie

Last seen: 13 years 40 weeks ago

Joined: 2008-11-09

Posts: 8

Points: 0

Thanks

Thanks - Im at the point where im just trying every kind of code I know hoping something works but nothing is so far.

Sun, 2008-11-09 01:35

Josh Connerty

Offline

Enthusiast

Wiltshire, England

Last seen: 11 years 24 weeks ago

Wiltshire, England

Joined: 2008-10-17

Posts: 268

Points: 23

I see what you are doing and

I see what you are doing and you are along the right lines but you must position the div as absolute so as not to effect the other content.
this will allow the text to the right to come back up to the top.

So change:

position: relative;

To:

position: absolute;

Website Design Wiltshire
My Blog

Sun, 2008-11-09 01:38

jbcobbs

Offline

newbie

Last seen: 13 years 40 weeks ago

Joined: 2008-11-09

Posts: 8

Points: 0

Heres where im at

.post{
		position: relative;
		background: #000000;
	}
 
		.entry{
			position: relative;
			float:right;
			padding: 20px 50px 20px 0;
			width: 578px;
			min-height: 220px;
			text-align: left;
			color: #222;	
		}
 
		.entry img{
		position:absolute;
			z-index: 1000;
			left:-300px;
			width:250px;
 
 
			}
				.postimages{
				position:absolute;
				left:-300px;
			float:left;
			width:250px;
 
			}

<div id="postimages"><a href="http://cobbsfriedman.com/wp-content/uploads/2007/10/goabacoa.jpg"><img class="alignnone size-medium wp-image-30" title="Marine Business Advisors Website" src="http://cobbsfriedman.com/wp-content/uploads/2008/05/mba.jpg" alt="" width="250" height="127" /></a>
 
<a href="http://cobbsfriedman.com/wp-content/uploads/2007/10/goabacoa.jpg"><img class="alignnone size-medium wp-image-21" title="GoAbacoa.com Website" src="http://cobbsfriedman.com/wp-content/uploads/2007/10/goabacoa.jpg" alt="" width="250" height="296" /></a></div>
 
Island Water Sports has a thriving local retail business. They came to Cobbs &amp; Friedman wanting to expand their offerings in the way of a dynamic e-commerce website. We built them a site that is not only functional but graphically appeals to their target demographic and is search engine optimized to boot. Along with an aggresive search engine marketing campaign to boot, Island Water Sports increased their web reach and their sales.<!--more-->

Sun, 2008-11-09 01:40

Josh Connerty

Offline

Enthusiast

Wiltshire, England

Last seen: 11 years 24 weeks ago

Wiltshire, England

Joined: 2008-10-17

Posts: 268

Points: 23

Ok yes thats basicly it just

Ok yes thats basicly it just a few things.

You need to delete the .entry img block this is what is not allowing you to see both images and also on your #postimages you do not need the float as this doesn't do anything because of absolute positioning.

Website Design Wiltshire
My Blog

Sun, 2008-11-09 01:43

jbcobbs

Offline

newbie

Last seen: 13 years 40 weeks ago

Joined: 2008-11-09

Posts: 8

Points: 0

still off a bit

Better but now I need the images to be on the left of the post

Sun, 2008-11-09 01:57

#10

Josh Connerty

Offline

Enthusiast

Wiltshire, England

Last seen: 11 years 24 weeks ago

Wiltshire, England

Joined: 2008-10-17

Posts: 268

Points: 23

Remove the div from the

Remove the div from the entry wrapper.

And then put it in the post clearfix wrapper.

Then delete all of your css for this div and start again.

Copy and paste this in instead:

postimages {
float: left;
}

Website Design Wiltshire
My Blog

Sun, 2008-11-09 02:00

#11

jbcobbs

Offline

newbie

Last seen: 13 years 40 weeks ago

Joined: 2008-11-09

Posts: 8

Points: 0

Almost there but now one more problem

Almost there I think. Just the graphics bleed over into the next section. This is what I got...

.post{
		position: relative;
		background: #000000;
	}
 
		.entry{
			position: relative;
			float:right;
			padding: 20px 50px 20px 0;
			width: 578px;
			min-height: 220px;
			text-align: left;
			color: #222;	
		}
 
				#postimages{
				position:absolute;
				left:-300px;
			width:250px;
			z-index:1000;
 
			}

<div><a href="http://cobbsfriedman.com/wp-content/uploads/2007/10/goabacoa.jpg"><img class="alignnone size-medium wp-image-30" title="Marine Business Advisors Website" src="http://cobbsfriedman.com/wp-content/uploads/2008/05/mba.jpg" alt="" width="250" height="127" /></a>
 
<a href="http://cobbsfriedman.com/wp-content/uploads/2007/10/goabacoa.jpg"><img class="alignnone size-medium wp-image-21" title="GoAbacoa.com Website" src="http://cobbsfriedman.com/wp-content/uploads/2007/10/goabacoa.jpg" alt="" width="250" height="296" /></a></div>
Island Water Sports has a thriving local retail business. They came to Cobbs &amp; Friedman wanting to expand their offerings in the way of a dynamic e-commerce website. We built them a site that is not only functional but graphically appeals to their target demographic and is search engine optimized to boot. Along with an aggresive search engine marketing campaign to boot, Island Water Sports increased their web reach and their sales.<!--more-->

Sun, 2008-11-09 02:11

#12

jbcobbs

Offline

newbie

Last seen: 13 years 40 weeks ago

Joined: 2008-11-09

Posts: 8

Points: 0

A little clarification

Sorry if this is starting to be a pain but... Remove the div in the post html? What/where is the post clearfix wrapper?

Sun, 2008-11-09 02:15

#13

jbcobbs

Offline

newbie

Last seen: 13 years 40 weeks ago

Joined: 2008-11-09

Posts: 8

Points: 0

pm

I wrote you a pm

Sun, 2008-11-09 02:15

#14

Josh Connerty

Offline

Enthusiast

Wiltshire, England

Last seen: 11 years 24 weeks ago

Wiltshire, England

Joined: 2008-10-17

Posts: 268

Points: 23

Ok copy these exactly don't

Ok copy these exactly don't just take a section take the whole thing and overwrite the documents BUT back the originals up 1st.

style.css:

/*
 
Theme Name: 
Theme URI: 
Description:
Version:
Author: 
 
*/	
 
 
			/* Global Layout */
 
 
body 
{
font-size: .75em;
margin: 0px;
text-align: center;
background: #C8C0C0 url(img/shadows.png) top center no-repeat;
color: #125E3D;
font-family: Georgia, Arial, Helvetica, sans-serif;
}
 
#wrap{
	position: relative;
	margin: auto;
	width: 929px;
	padding: 0 0px 0 0px;
	/*background: url(img/pbg.gif) top left repeat-y;*/
	background-color: #CCCCCC;
}
 
	#head{
		position: relative;
		height: 144px;
		background: #fff;
	}
 
		#tag{
			position: absolute;
			top: 58px;
			left: 60px;
			height: 23px;
			width: 342px;
			text-indent: -9999em;
			background: url(img/tagline.gif) top left no-repeat;
		}
 
		#logo{
			position: absolute;
			top: 33px;
			right: 60px;
			height: 76px;
			width: 290px;
			background: url(img/logo.gif) top left no-repeat;
			text-indent: -9999em;
		}
 
		#top-links{
			position: relative;
			float: left;
			padding-left: 61px;
			height: 25px;	
		}
 
			#top-links li{
				position: relative;
				float: left;
				height: 25px;	
			}
 
			#top-links a{
				position: relative;
				float: left;
				height: 25px;
				text-indent: -9999em;
			}
 
			#tn1{
				width: 114px;
				background: url(img/tn1.gif) top left;
			}
 
 
			#tn2{
				width: 50px;
				background: url(img/tn2.gif) top left;
			}
 
 
			#tn3{
				width: 95px;
				background: url(img/tn3.gif) top left;
			}
 
	#nav{
		position: relative;
		padding-left: 18px;
		height: 26px;	
		background: #fff;
		font-family: Arial, Helvetica, sans-serif;
	}
 
		#nav li{
			position: relative;
			float: left;	
		}
 
		#nav li a{
			position: relative;
			float: left;
			margin-top: 4px;
			padding: 4px 16px 0 16px;
			color: #fff;
			height: 18px;
			font-size: 1.2em;
			background: #000;
			text-transform: lowercase;
		}
 
		#nav li.active a{
			margin-top: 0px;
			padding-top: 8px;			
		}
 
		#nav li a:hover{
			color: #222;
			text-decoration: none;
		}
 
		#nav li.active a:hover{
			color: #fff;
		}
 
		#nav li.active a .sl{
			position: absolute;
			z-index: 1000;
			bottom: 0px;
			top: 0;  /* this is handy, keeps it from showing in ie6 */
			left: -5px;
			width: 5px;
			background: url(img/lshim.png) top left no-repeat;
		}
 
		#nav li.active a .sr{
			position: absolute;
			z-index: 1000;
			bottom: 0px;
			top: 0;  /* this is handy, keeps it from showing in ie6 */
			right: -5px;
			width: 5px;
			background: url(img/rshim.png) top left no-repeat;
		}
 
		#nav li#n1 a{
			background: #000;
		}
 
		#nav li#n2 a{
			background: #00D3BD;
		}
 
		#nav li#n3 a{
			background: #48D131;
		}
 
		#nav li#n4 a{
			background: #FA5656;
		}
 
		#nav li#n5 a{
			background: #A699C5;
		}
 
		#nav li#n6 a{
			background: #952B5D;
		}
 
		#nav li#n7 a{
			background: #F951A0;
		}
 
 
 
 
	/* posts and pages */
 
	.post{
		position: relative;
		background: #000000;
	}
 
		.entry{
			position: relative;
			float:right;
			padding: 20px 50px 20px 0;
			width: 578px;
			min-height: 220px;
			text-align: left;
			color: #222;	
		}
 
			#left_images {
				float: left;
				width: 200px;
			}
 
 
			.entry h2{
				position: relative;
				font-size: 1.8em;
				font-style: italic;
				padding-bottom: 14px;	
			}
 
			.entry p{
				position: relative;
				line-height: 1.5em;
				padding-bottom: 1em;	
			}
 
			.entry a{
				position: relative;
				color: #222;
				text-decoration: underline;
			}
 
			.entry blockquote{
				padding: 10px;
				background: #f3f3f3;
				font-style: italic;
			}
 
			.entry ul{
				position: relative;
				list-style: inside disc;
				padding-bottom: 1em;	
			}
 
 
		.post-image{
			position: absolute;
			bottom: -165px;
			left: 40px;
			z-index: 1000;
		}
 
		.post-extra{
			position: relative;
			min-height: 180px;
			padding-left: 300px;
			text-align: left;
			color: #222;
			background: #fff;
		}
 
			.post-extra-box{
				position: relative;
				float: left;
				width: 44.9%;
				padding-bottom: 15px;
			}
 
			.post-extra h2{
				position: relative;
				font-size: 1.8em;
				padding-top: 15px;
				font-style: italic;
				padding-bottom: 14px;	
			}
 
			.post-extra p{
				position: relative;
				line-height: 1.5em;
				padding-bottom: 1em;	
			}
 
			.post-extra a{
				position: relative;
				color: #222;
				text-decoration: underline;
			}
 
			.post-extra ul{
				position: relative;
			}
 
			.post-extra li{
				position: relative;
				padding: 4px 0 4px 0;
			}
 
 
		/* post colors */
 
		.type1 .post{
			background: #00D3BD;
		}
 
			.type1 .post-extra{
				background: #03AB9A;
			}
 
		.type2 .post{
			background: #48D131;
		}
 
			.type2 .post-extra{
				background: #03AB9A;
			}
 
		.type3 .post{
			background: #FA5656;
		}
 
			.type3 .post-extra{
				background: #03AB9A;
			}
 
		.type4 .post{
			background: #A699C5;
		}
 
			.type4 .post-extra{
				background: #03AB9A;
			}
 
		.type5 .post{
			background: #952B5D;
		}
 
			.type5 .post-extra{
				background: #03AB9A;
			}
 
		.type6 .post{
			background: #F951A0;
		}
 
			.type6 .post-extra{
				background: #03AB9A;
			}
 
 
 
	#post-feature{
		position: relative;
		padding: 0 7px 9px 7px;
		background: #000;	
		height: 499px;
		overflow: hidden;
		border-top: 6px solid #000;
	}
 
		#post-feature img{
			position: absolute;
			top: 2px;
			left: 7px;
		}
 
		#tab{
			position: absolute;
			top: 232px;
			right: 7px;
			text-indent: -99999em;
			height: 34px;
			width: 30px;
			background: url(img/tab.gif) top right no-repeat;
		}
 
		#feature-text{
			position: absolute;
			top: 75px;
			left: 0px;
			height: 335px;
			padding: 22px 20px 0 20px;
			width: 357px;
			border: 0px 1px 1px 1px solid #f3f3f3;
			text-align: left;
			color: #fff;
		}
 
			#feature-text-trans /* extra div for ie */{
				position: absolute;
				top: 0px;
				left: 0px;
				height: 357px;
				width: 397px;
				background: url(img/trans.png) top left;
			}
 
			#feature-text h1{
				position: relative;
				font-size: 3.1em;
			}
 
				#feature-text h1 a{
					color: #fff;
					text-decoration: none;
				}
 
			#feature-text p{
				position: relative;
				padding-top: 2em;
				line-height: 1.5em;
				font-size: .9em;
				color: #00d3bd;
			}
 
	#three{
		position: relative;
		color: #121212;
		text-align: left;
		font-size: .9em;
		padding: 20px 0 20px 0;	
	}
 
		#three li{
			position: relative;
			float: left;
			width: 245px;
			padding: 0 32px 0 32px; 
		}
 
		#three h2{
			position: relative;
			font-size: 1.8em;
		}
 
		#three p{
			position: relative;
			line-height: 1.4em;
			padding-top: 1.2em;
		}
 
		#three a{
			color: #121212;
		}
 
		#three h2 a{
			color: #121212;
			text-decoration: none;
		}
 
	#swatch-list{
		position: relative;
		color: #121212;
		text-align: left;
		font-size: .9em;
		padding: 20px 0 20px 140px;
		background: url(img/swatch.jpg) left center no-repeat; 
	}
 
		#swatch-list li{
			position: relative;
			float: left;
			width: 230px;
			padding: 0 15px 0 15px; 
		}
 
		#swatch-list h2{
			position: relative;
			font-size: 1.8em;
		}
 
		#swatch-list p{
			position: relative;
			line-height: 1.4em;
			padding-top: 1.2em;
		}
 
		#swatch-list a{
			color: #121212;
		}
 
		#swatch-list h2 a{
			color: #121212;
			text-decoration: none;
		}	
 
 
	#foot{
		position: relative;
		height: 71px;
		text-align: left;
		background: #fff;	
	}				
 
		#f-logo{
			position: absolute;
			bottom: 4px;
			right: 48px;
			height: 47px;
			width: 165px;
			text-indent: -9999em;
			background: url(img/bottom-logo.gif) top left no-repeat;
		}
 
		#f-info{
			position: relative;
			float: left;
			padding: 20px 0 0 25px;
			font-size: .9em;
			color: #C6C6C6;
		}
 
 
.commentlist li{
	position: relative;
	margin-bottom: 10px;
	padding: 10px;
	background: #f3f3f3;
	border: 1px solid #dadada;
}
 
.avatar{
	float: right;
	border: 1px solid #dadada;
}
 
.entry input{
	padding: 3px;	
}
 
#comment{
	width: 450px;
}
 
#comwrap h3{
	position: relative;
	font-size: 1.2em;
	font-weight: bold;
}
 
.pagetitle{
	position: relative;
	color: #121212;
	text-align: left;
	font-size: 1.5em;
	padding: 15px 0 15px 30px;
}
 
#arc{
	position: relative;
	background: #fff;
	border-bottom: 2px solid #ddd;
}
 
#arc #three li{
	height: 200px;
}

HTML Document (You might have to just take the wrapper out and put it in.):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
 
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>Cobbs + Friedman Marketing and Advertising  &raquo; Blog Archive   &raquo; Cobbs &#038; Friedman Brings Island Water Sports to the Web.</title>
 
<link rel="stylesheet" href="http://cobbsfriedman.com/wp-content/themes/cobbs/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://cobbsfriedman.com/wp-content/themes/cobbs/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="Cobbs + Friedman Marketing and Advertising RSS Feed" href="http://cobbsfriedman.com/feed/" />
<link rel="pingback" href="http://cobbsfriedman.com/xmlrpc.php" />
 
 
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://cobbsfriedman.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://cobbsfriedman.com/wp-includes/wlwmanifest.xml" /> 
 
<meta name="generator" content="WordPress 2.6.3" />
 
<style type="text/css">.recentcomments a{display:inline !important;padding: 0 !important;margin: 0 !important;}</style>
</head>
<body>
 
<div id="wrap">
 
	<div id="head">
		<ul id="top-links">
			<li><a href="http://cobbsfriedman.com/contact/" id="tn1">Contact us now</a></li>
			<li><a href="http://cobbsfriedman.com/category/news/" id="tn2">News</a></li>
 
			<li><a href="http://cobbsfriedman.com/category/testimonial" id="tn3">Testimonials</a></li>
		</ul>
 
		<a href="http://cobbsfriedman.com" id="tag">You Dream it. We'll do the rest.</a>
 
		<a href="http://cobbsfriedman.com" id="logo">Cobs &amp; Friedman - Creative and techinical direction and production</a>	</div>
 
	<ul id="nav">
 
		<li id="n1"><a href="http://cobbsfriedman.com"><span class="sl"></span>Home<span class="sr"></span></a></li>		
		<li id="n2"><a href="http://cobbsfriedman.com/online/"><span class="sl"></span>Online<span class="sr"></span></a></li>
		<li id="n3"><a href="http://cobbsfriedman.com/application-development/"><span class="sl"></span>Application Development<span class="sr"></span></a></li>
		<li id="n4"><a href="http://cobbsfriedman.com/multimedia/"><span class="sl"></span>Multimedia<span class="sr"></span></a></li>
		<li id="n5"><a href="http://cobbsfriedman.com/print/"><span class="sl"></span>Print<span class="sr"></span></a></li>
		<li id="n6"><a href="http://cobbsfriedman.com/media-placement/"><span class="sl"></span>Media Placement<span class="sr"></span></a></li>
 
		<li id="n7"><a href="http://cobbsfriedman.com/brand-development/"><span class="sl"></span>Brand Development<span class="sr"></span></a></li>
	</ul>
 
	<div id="post" class="type1">
 
 
		<div class="post clearfix">
        	<div id="left_images">
            <a href="http://cobbsfriedman.com/wp-content/uploads/2007/10/goabacoa.jpg"><img class="alignnone size-medium wp-image-30" title="Marine Business Advisors Website" src="http://cobbsfriedman.com/wp-content/uploads/2008/05/mba.jpg" alt="" width="250" height="127" /></a>
            <a href="http://cobbsfriedman.com/wp-content/uploads/2007/10/goabacoa.jpg"><img class="alignnone size-medium wp-image-21" title="GoAbacoa.com Website" src="http://cobbsfriedman.com/wp-content/uploads/2007/10/goabacoa.jpg" alt="" width="250" height="296" /></a></div>
 
			<div class="entry">
				<h2>Cobbs &#038; Friedman Brings Island Water Sports to the Web.</h2>
<p>Island Water Sports has a thriving local retail business. They came to Cobbs &amp; Friedman wanting to expand their offerings in the way of a dynamic e-commerce website. We built them a site that is not only functional but graphically appeals to their target demographic and is search engine optimized to boot. Along with an aggresive search engine marketing campaign to boot, Island Water Sports increased their web reach and their sales.<span id="more-33"></span></p>
 
 
				<div id="comwrap">
 
<!-- You can start editing here. -->
 
 
			<!-- If comments are open, but there are no comments. -->
 
 
 
 
<h3 id="respond">Leave a Reply</h3>
 
 
<form action="http://cobbsfriedman.com/wp-comments-post.php" method="post" id="commentform">
 
 
<p><input type="text" name="author" id="author" value="" size="22" tabindex="1"  />
<label for="author"><small>Name </small></label></p>
 
<p><input type="text" name="email" id="email" value="" size="22" tabindex="2"  />
<label for="email"><small>Mail (will not be published) </small></label></p>
 
<p><input type="text" name="url" id="url" value="" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
 
<!--<p><small><strong>XHTML:</strong> You can use these tags: [geshifilter-code]&amp;lt;a href=&amp;quot;&amp;quot; title=&amp;quot;&amp;quot;&amp;gt; &amp;lt;abbr title=&amp;quot;&amp;quot;&amp;gt; &amp;lt;acronym title=&amp;quot;&amp;quot;&amp;gt; &amp;lt;b&amp;gt; &amp;lt;blockquote cite=&amp;quot;&amp;quot;&amp;gt; &amp;lt;cite&amp;gt; &amp;lt;code&amp;gt; &amp;lt;del datetime=&amp;quot;&amp;quot;&amp;gt; &amp;lt;em&amp;gt; &amp;lt;i&amp;gt; &amp;lt;q cite=&amp;quot;&amp;quot;&amp;gt; &amp;lt;strike&amp;gt; &amp;lt;strong&amp;gt;

</small></p>--> <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p> <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /> <input type="hidden" name="comment_post_ID" value="33" /> </p> </form> </div> </div> <div class="post-image"> </div> </div> </div> <ul id="swatch-list" class="clearfix"> <li> <h2><a href="http://cobbsfriedman.com/color-and-your-website/" rel="bookmark" title="Permanent Link to Color and Your Website.">Color and Your Website.</a></h2> <p>Color plays a very important role in your website. Without it, your site would just be, well blah. But even more than its aesthetic value, colors play a very important subconcious role as well. Color can…</p> <p><a href="http://cobbsfriedman.com/color-and-your-website/">Read More ...</a></p> </li> <li> <h2><a href="http://cobbsfriedman.com/cobbs-friedman-launches-new-website/" rel="bookmark" title="Permanent Link to Cobbs & Friedman Launches New Website">Cobbs & Friedman Launches New Website</a></h2> <p>Simple, colorful and organized. These three words are the overall theme of the redesigned Cobbs & Friedman website. The site uses a Wordpress content management system.</p> <p><a href="http://cobbsfriedman.com/cobbs-friedman-launches-new-website/">Read More ...</a></p> </li> <li> <h2><a href="http://cobbsfriedman.com/test-application-page-post/" rel="bookmark" title="Permanent Link to Test Application Page Post">Test Application Page Post</a></h2> <p>Just a test. Lets see if it works.</p> <p><a href="http://cobbsfriedman.com/test-application-page-post/">Read More ...</a></p> </li> </ul> <div id="foot"> <p id="f-info"> 415 West Ocean Ave <br /> Lantana, Florida 33462 </p> <a href="#" id="f-logo">Cobbs Friedman</a> </div> </div> </body> </html> [/geshifilter-code]

Website Design Wiltshire
My Blog

Sun, 2008-11-09 02:23

#15

Josh Connerty

Offline

Enthusiast

Wiltshire, England

Last seen: 11 years 24 weeks ago

Wiltshire, England

Joined: 2008-10-17

Posts: 268

Points: 23

Lol nearly ther but I think

Lol nearly ther but I think you still havethe images in the wrapper.

Website Design Wiltshire
My Blog

Sun, 2008-11-09 04:08

#16

Josh Connerty

Offline

Enthusiast

Wiltshire, England

Last seen: 11 years 24 weeks ago

Wiltshire, England

Joined: 2008-10-17

Posts: 268

Points: 23

Very frustrating problem but

Very frustrating problem but it IS solved.

We just had to put the images in a div and use the HTML style attribute like this:

<div style="position: relative; left: -300px; float: right; width: 100px;">

Website Design Wiltshire
My Blog

Sat, 2008-11-15 23:54

#17

Gomez

Offline

newbie

Last seen: 13 years 39 weeks ago

Joined: 2008-11-15

Posts: 1

Points: 0

Re:Wordpress column of images overlapping problem

Thanks a lot.....
This image overlapping problem is very useful for my MS project the coding are easy way to execute... :thumbsup:
----------
Gomez
north dakota drug rehab

Tue, 2008-11-25 11:13

#18

Josh Connerty

Offline

Enthusiast

Wiltshire, England

Last seen: 11 years 24 weeks ago

Wiltshire, England

Joined: 2008-10-17

Posts: 268

Points: 23

Well I'm glad these forums

Well I'm glad these forums have helped, that's what there here for :thumbsup:

Website Design Wiltshire
My Blog

Wordpress column of images overlapping problem

What do you expect when you

maybe im missing something

I also see the images are

I'll be back in just a few

Thanks

I see what you are doing and

Heres where im at

Ok yes thats basicly it just

still off a bit

Remove the div from the

Almost there but now one more problem

A little clarification

pm

Ok copy these exactly don't

Lol nearly ther but I think

Very frustrating problem but

Re:Wordpress column of images overlapping problem

Well I'm glad these forums

User login

Navigation