I need to know the best way to adjust the text spacing surrounding my images.
What I want to do is have the text on the top, right (Item Description) and bottom lined up as close as possible and as tightly against the image as possible.
I’m hoping this can be done in a generic way in the StyleSheet
You need to have a reset on your page. Such as *{margin:0;padding:0;}. That will remove the default margins and paddings on every element. However you may want to take the time and find Eric Meyers reset (easily found via a search). It’s a bit bloated but you can trim it down
You shouldn’t be using deprecated tags such as <center> but nevertheless. It’s working. I see the text centered. The width of <center> is wider than the image, so it’s centering within that space. You’d have to give those <center>'s a width and THEN it will center within that space
What’s wrong with the alignment? Where do you want it? Centered? If so check this out
Checked IE6/7/8/9 all against FF, and it’s appearing directly to the right.
UPDATE: Ok, I finally got most of this sucker to work and look identical in FF and IE
I had to use two div tags and an image caption setup with width specs as you suggested
for proper centering
Have ONE loose end which I need help with:
I need to be able to add the following two lines of text and have them appear to the right of the image
as two separate lines and positioned as close to the image as possible
Item Description:
Black Gucci Shoes
this has to look identical in FF and IE
ANY final advice on this last piece of the puzzle for me?
Well I’m not specifically advocating this specific HTML, but if you have like…
<p>text</p>
<p>more text</p>
That can represent your two separate lines. I’d float the image container left, and wrap those 2 lines of text in a <div> and float that div as well, allowing them to be on the same line with one another.
I’d give a more detailed answer, but I’m heading out the door now for a run. I’ll be back if you have any questions :).
<p><italic>Black Gucci Shoes</italic> content Black Gucci Shoes<br /><p>
Please let me know what mods you would make to that code to have these two lines of text positioned on the right-hand side
of the image pressed as close as possible to the image:
Item Description
Black Gucci Shoes
I actually need them to be two separate lines for image seo purposes
Hi, you misunderstood me. I mean have ONE div, that covers all of the two lines. For example
<div>
LINE #1
LINE #2
</div>
Now, you’ll need to float that div left.
You’ll also need to float the image left, but do those things, update the page, and if it’s not working, it’s a heck of a start. If it doesn’t work, it’ll most likely just be minor things you have to fix :).
You still haven’t wrapped a div around the two lines of text.
<p><i>Black Gucci Shoes</i> content Black Gucci Shoes<br></p>
I wrap a div around that, aka <div class=“sexy”> and then add float:left to the div containing the image. You don’t have a class on it otherwise I would tell you the specific code :). Last but not least, you need to go to the parent, and add overflow:hidden; to that to contain the now-floated-children.
That’d the element, and I added in the style=“overflow:hidden”. Move taht to the stylesheet and reference it another way (I’m guessing .post is too generic and post-73 won’t apply to all the other posts in the future, so add another class to it…)
getting the two lines of text on the right-hand side to shift further left closer to the image
I used the float:right on these two lines of text (Item Description / Black Gucci Shoes).
I just want to shift both lines of text on the right side of the image left closer to the image
Would be ideal if I could center these two lines vertically relative to the image like this:
With the text being too far away from the image. This may sound a bit complicated (my solution I mean) but it’s the best way, trust me :). Now, you have the text stuff floated right, which means that it’ll go as far right as possible. That’s basically why.
Here’s what you do, your <p> that’s floated right (also you have some invalid code there on that <p>. If you even glance at the HTML you’ll see it. It’s like ““margin-left:100px”;=”“”), switch that <p> with the div that holds the image in the HTML. Right now your source order is…
P(floated right)
div(with image)
Switch that up. Now, float that <div> which holds the image. Float that left. So now both the image div and the <p> should be floated left.
Now, after that <p> in the HTML, you need to either do one of two things.
Place a clearing div after it (dunno why you’d do this but it’s an option)
Aka. <div style=“clear:both;height:0;font-size:0;”></div>
The following <p> of text, make that clear:both; (have it act as the clearing div)
I tested this and it worked, so make sure you do everything correctly and it should be fine there :)…
