WordPress.com

1. secondhandplaces
   Member
   Aug 22, 2011, 2:33 AM

   Hi everyone. I've run into a problem that I've not been able to work through; even worse, I have a feeling the solution is simple. The problem is this:

   I have a series of aligned roll-over links with titles below; the titles are created by using a list and the page is here:
   http://secondhandplaces.com/work/

   Eventually, there will be rows and rows of these square image links but for now, this is it. As you can see, the titles for the two images on the second row below continue after the images, rather than below the images. What do I have to do to bump these guys into their correct spot?

   The CSS for the titles (called "workcaptions") is this:
   .page-id-8 #workcaptions {
   width:145px;
   padding-bottom:30px;
   font-size:11px;
   float:left;
   display:inline-block;
   font-weight:bold;
   border-bottom:1px solid #e9e9e9;
   vertical-align:top;
   margin:0 15px 15px 0;
   }

   .page-id-8 #workcaptions a:hover {
   color:#000;
   text-decoration:none;
   }

   If anyone sees this and can spot my mistake, or might turn me in a new direction, I would be so grateful for your help.

   The blog I need help with is secondhandplaces.com.

2. designsimply
   Staff
   Aug 22, 2011, 5:43 AM

   Try this:

   p {
   clear: both;
   overflow: hidden;
   }

3. secondhandplaces
   Member
   Aug 22, 2011, 11:25 AM

   It worked like a charm. Thank you so much!!! And now, I must go and figure out what I just did. ;)

4. secondhandplaces
   Member
   Aug 24, 2011, 2:28 AM

   Oh no. I'm back...
   I realized that I set up these roll-overs in a really dumb/heavy way (by having two images, the second affected by the hover). Instead, I changed the HTML on the page editor so that, from there, it sources only one image, and instead makes use of a background color and a lower-opacity image on the hover in the CSS (I'm slowly learning...). It works...yay...and I was able to streamline the CSS a bit.

   However, in doing so, I'm having the same problem as before -- that the text keeps wanting to "float", no matter that I still have the CSS code provided above that it's "cleared". I've been reading about floats/clears and have tried many settings based on these new bits of info, but to no avail. If anyone out there (again!) can redirect me, I would be so happy!

   Oh...link is here: http://secondhandplaces.com/work/

   Thanks in advance for your insight and help.

5. secondhandplaces
   Member
   Aug 24, 2011, 1:21 PM

   never mind...i got it!! (again, every day, i am learning so much, both in and out of this forum)

   if anyone has a similar problem and stumbles on this thread, i simply placed the following in my HTML editor *after* the content that I wanted to clear, effectively bumping what followed down the page. I think.

   <div style="clear:both;"></div>

   I don't know why the CSS code above stopped working when I "cleaned up" my CSS, but now it's good again.

6. designsimply
   Staff
   Aug 25, 2011, 8:49 PM

   Your site looks beautiful. :) I like how clean it is.

7. secondhandplaces
   Member
   Aug 28, 2011, 3:50 PM

   Wow! You totally just made my day! As I'm writing the first few posts, I've put it under a shroud of privacy protection, but hopefully it will be ready to roll out in the next few days. Thanks so much for your kind compliment, not to mention your help here and many, many other threads in the forum. I've benefited so much from your time, way beyond this measly thread.

   I feel like I want to do a cartwheel!!

Topic Closed

This topic has been closed to new replies.