WordPress.com

1. brinded
   Member
   Feb 12, 2013, 2:33 PM

   I'm struggling to float text upon relevant areas of a background image. The CSS tutorial has been extremely helpful, and I think I'm going about things the right way by using a combination of CSS and HTML. Trouble is, it's not always behaving the way I'd like.

   Specifically, I'd like 'navigation' to float over the display of tablet (as drawn in background image), 'navigation2' to float over the display of phone (in background image), and 'content' to occupy screen of laptop (in background image).

   Any ideas?

   Thanks in advance.

   CSS as currently drafted:

   #navigation {
   float: left;
   width: 10em;
   }

   #navigation2 {
   float: right;
   width: 10em;
   }

   #content {
   float: center;
   width: 10em;
   }

   h2 {
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10pt;
   color: navy;
   }

   The blog I need help with is brinded.wordpress.com.

2. brinded
   Member
   Feb 12, 2013, 2:43 PM

   ps - h2 is not conforming to style defined by CSS either. It needs to be much smaller than currently displayed but I can't get CSS to deliver smaller font size.

3. justpi
   Member
   Feb 13, 2013, 1:35 PM

   a) Float left/right doesn't really mean position left/right, and there's no float center (if you used floats, three columns side by side could be float left-left-right). And when you use floating, you also have to clear it where appropriate, otherwise you'll see other stuff wrapping around. Also, your image had a fixed width while em is a relative unit.

   You'd need to define widths in pixels, add the image to the content of the page, not as a bg to the theme, and probably use absolute positioning instead of floats.

   b) You can't adjust the font size because on Coraline the selector for an h2 in the content of a post or static page isn't just h2, it's:
   .entry-content h2

4. brinded
   Member
   Feb 14, 2013, 5:46 PM

   justpi,

   Great advice - thank you again. (bg image now on page, positioning absolute and pixel defined.)

   Having achieved my initial objectives, I've now encountered a new problem!

   Specifically, I failed to anticipate that text would shift whenever window is re-sized (which of course is desired, predictable behaviour - and no doubt obvious to all seasoned designers).

   What I'd like to achieve is text that stays nailed to the underlying image.

   Any suggestions?

   ps I'm still considering your advice (posted elsewhere) to photshop the text onto the image, but then how would I make hyperlinks?

5. justpi
   Member
   Feb 15, 2013, 1:02 AM

   a) Sorry, I forgot that Coraline has flexible width. You can make the text blocks remain approximately in the same areas in relation to the shrinking image if you express the horizontal positioning and the widths in percentages. But the narrower they become, the longer they'll become, so the #navigation3 text might flow past the bottom of the monitor sketch. So you need to use a fixed-width theme (or turn the width of Coraline to fixed).

   b) If you turn everything into an image, you can create links by using image mapping. You can generate the code here:
   http://www.isdntek.com/tagbot/imap.htm
   Again you need a fixed-width theme.

Topic Closed

This topic has been closed to new replies.