Go Back   WAHM Forums - WAHM.com > >

Welcome to the WAHM Forums - WAHM.com.

Welcome to WAHM Forums

Already registered? Login above 

OR

To take advantage of all the site's features, become a member of the largest community of Work-At-Home Moms.

The advertising to the left will not show if you are a registered user.


Reply
 
Thread Tools Search this Thread
  #1 (permalink)  
Old 10-10-2009, 02:54 AM
AlisonMSmith's Avatar
WAHM Fanatic
Thread Starter
 
Join Date: Aug 2007
Location: United States
Posts: 1,811
Default CSS question

Hi all. Trying to fix a little CSS issue, could use some help.

I'm trying to get the TOP of some images to align with the TOP of particular, adjacent text.

See this annoying home features blog article. The top of the first picture (yes, it's a real product!) aligns with the top of the first paragraph text.

The next picture messes up the ordered list number, adds a big gap between paragraphs, etc.

What I'm looking for is for the top of the picture to align with the top of the section title (or the top of the first line of the first paragraph). I've tried some alternate placements of the image code, but no matter where I try, it screws up the alignment.

I do want the photos on the right with text wrapped around them.

Thanks for any help.
Reply With Quote
Sponsored Links
  #2 (permalink)  
Old 10-10-2009, 07:56 AM
Sophia's Avatar
Awesome WAHM
 
Join Date: Jul 2007
Location: United States
Posts: 555
Default

I would remove both the image file and the '<br/>' tags out of the title tag and place the image file at the beginning of the item's content with a floating class.
Reply With Quote
  #3 (permalink)  
Old 10-10-2009, 08:17 AM
mybrokengnome's Avatar
WAHM Regular
 
Join Date: May 2009
Location: United States
Posts: 88
Default

CSS Tutorial - Float try that
Reply With Quote
  #4 (permalink)  
Old 10-10-2009, 12:47 PM
Susie N's Avatar
Super WAHM
 
Join Date: Sep 2006
Location: United States, Ohio
Posts: 403
Default

I agree with Sophia. I played with it (using Firefox's developer toolbar.... Miscellaneous > Edit HTML) and this should work for you:

<h2>Open Master Suite</h2>
<img src="http://pix2brix.com/wp-content/uploads/open-bathroom.JPG" alt="open-bathroom" title="open-bathroom" class="alignright size-full wp-image-885" width="150" height="200">
<p>We just moved into a rental house that has a master bedroom that connects (with no door) to the master bath. This, in turn, connects (again with no door) to the master closet. I honestly didn’t even notice it when we looked at the house, but this “feature” drives me nutty!</p>
Reply With Quote
  #5 (permalink)  
Old 10-14-2009, 04:57 PM
AlisonMSmith's Avatar
WAHM Fanatic
Thread Starter
 
Join Date: Aug 2007
Location: United States
Posts: 1,811
Default

Thank you all so much for your help.

I'm confused. Can you clarify? I don't have a </br> tag in the title tag. Hm. OK, I do. But it doesn't show up in the WordPress admin page, even on HTML setting. And in that screen there is no carriage return there either. Weird.

Sheesh. I had tried that placement before and thought I had a spacing problem with it, also. But looking at it now, I think it's just because the paragraph spacing is different from the list item spacing. I thought the image was causing that, but looking closer that's not true.

Thanks to all of you for your expertise. Looks much better now!
Reply With Quote
 
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off