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 & 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-->
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.
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/
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.
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.
Thanks
Thanks - Im at the point where im just trying every kind of code I know hoping something works but nothing is so far.
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;
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 & 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-->
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.
still off a bit
Better but now I need the images to be on the left of the post
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; }
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 & 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-->
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?
pm
I wrote you a pm
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 » Blog Archive » Cobbs & 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 & 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 & Friedman Brings Island Water Sports to the Web.</h2> <p>Island Water Sports has a thriving local retail business. They came to Cobbs & 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]&lt;a href=&quot;&quot; title=&quot;&quot;&gt; &lt;abbr title=&quot;&quot;&gt; &lt;acronym title=&quot;&quot;&gt; &lt;b&gt; &lt;blockquote cite=&quot;&quot;&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=&quot;&quot;&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=&quot;&quot;&gt; &lt;strike&gt; &lt;strong&gt;
Lol nearly ther but I think
Lol nearly ther but I think you still havethe images in the wrapper.
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;">
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
Well I'm glad these forums
Well I'm glad these forums have helped, that's what there here for :thumbsup: