WordPress.org

1. David Borrink
   Member
   Posted 3 years ago #

   I have a graphic to place next to my sidebar headers. If the header is more than one line tall, the full graphic appears to the left, centered vertically next to the header. The graphic is about 20px tall.

   But if the header is only one line, the top and bottom of the image is cut off. I notice if I enlarge the font-size, the full graphic can be seen, but I don't want my fonts that large. Is there a way to make a full graphic appear next to a smaller font size? Am I overlooking some CSS that could be used?

   I've looked for a solution here and on the web but I'm not finding anything that would give me a clue as to how to make the full graphic appear when next to a one line header. I'd prefer not to shrink my graphic to the height allowed by my current font size.

2. @mercime
   Member
   Posted 3 years ago #

   site url? or link to screenshot? there could be a large number of reasons a variety of solutions.

3. ClaytonJames
   Member
   Posted 3 years ago #

   I think this might be him...

   http://dev.artsandletters.biz/arts

   [EDIT] maybe not.. :-)

4. David Borrink
   Member
   Posted 3 years ago #

   Yes, that is the link.

   http://dev.artsandletters.biz/arts

   I had to update the theme to that public location. Now you can see it.

   You can see that the pushpin gets cut off on the one-line headers, but is full on the top header.

   I'm also trying to figure out how to get the left side of the graphics to float out of the sidebar. I'm wondering if negative margins or negative padding would work. You can see the edge of the sidebar in my pushpin graphic which is now right at the left edge of the sidebar.

   I'll need to get the header text over to the right of the pushpin. I know I can add some padding there to push it right out of the graphic.

5. @mercime
   Member
   Posted 3 years ago #

   @DavidBorrink: there's no postpin visible in FF. I checked in IE and now I see it. Plus, comparing the layout in the two browsers, there's around 100px between sidebar and main content in FF plus no colored backgrounds. While in IE, the space between sidebar and main content is around 20px and you have brown background in sidebar and tan background in main content.

   To take care of sidebar h2 image
   #sidebar h2 { line-height: 25px; height: 25px; padding-left: 25px; background: transparent url(images/pushpin.jpg) center left; }

6. David Borrink
   Member
   Posted 3 years ago #

   @mercime:

   Thanks for the headsup about FF. I'm on a Mac and it's visible. I'll check on my wife's PC FF to verify.

   The 100 px between sidebar and content is accidental due to sidebar experiements. I'll fix that.

   Thanks for the tip about using line-height AND height in the same line. I hadn't considered that.

7. David Borrink
   Member
   Posted 3 years ago #

   I checked FF on PC and it's fine. So I'm not sure why you're seeing what you're seeing.

8. @mercime
   Member
   Posted 3 years ago #

   Well it's showing the pushpins and the background colors of your sidebars and post entries now in both browsers. I just reported what I saw yesterday.

9. David Borrink
   Member
   Posted 3 years ago #

   Thanks. I'm not sure what happened.

Topic Closed

This topic has been closed to new replies.