Need Help Adjusting image/ text spacing

[gmr324]

I need to know the best way to adjust the text spacing surrounding my images.

1) 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

Here is the post in question:
http://www.hottestshoes.org/black-gucci-shoes-2/

2) The center tag on the text above and below the image seems to have no effect

3) Also, how do I fix the alignment of the links in the light blue page navigation bar under the header with Home About Us, etc

4) Item Description text appears at bottom of image in IE and to the right of image in FF / I need it to appear immediately to the right

Much Appreciated

George

[RyanReese]

1) 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

2) 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

3) What's wrong with the alignment? Where do you want it? Centered? If so check this out

4) Checked IE6/7/8/9 all against FF, and it's appearing directly to the right.

[gmr324]

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?


Thanks for all your help!

George

[RyanReese]

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 .

[gmr324]

Hi Ryan,

Thanks for the tip. I'd love to drill down and get specifics of that strategy in the context of the exsting code which is this:

--------------------------

<div style="width:400px; font-size:15px; font-weight:bold; text-align:center;"><h2>Black Gucci Shoes</h2></div>

<div style="width:400px; font-size:15px; font-weight:bold; text-align:center;"><a href="http://www.hottestshoes.org" rel="nofollow"><img src="http://www.hottestshoes.org/images/gucci/black-gucci-shoes.jpg" alt="black gucci shoes" title="black gucci shoes" width="400px" style="padding-bottom:0.1em "padding-top:0.1em"; /></a><br clear="all">Black Gucci Shoes</div>

<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


Looking forward to your response

George

[RyanReese]

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 .

[RyanReese]

In regards to the PM

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.

<div class="post" id="post-73" style="
    overflow: hidden;
">

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...)

[gmr324]

Hi Ryan,

Once again, thanks for sharing your wisdom

You still haven't wrapped a div around the two lines of text.
Code: <p><i>Black Gucci Shoes</i> content Black Gucci Shoes<br></p>

So, I'm not concerned so much with this text relative to the image. It's just used as a place holder for post content right now.

add float:left to the div containing the image

Done and worked great

-------------

So, with your help, I actually have the image/text layout working fine with the image surrounded tightly by text on the top, bottom and right.

So, on this post: http://www.hottestshoes.org

Only remaining loose end issue is:

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:

gucci-high-heels-text.jpg



Thanks Again!

Geo

[RyanReese]

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.

1) 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>

2) 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 ..