Archived

This topic is now archived and is closed to further replies.

  • 0

Text on the boxes images?


Question

Posted · Report post

Hi

 

I found this post on text + boxes: http://www.pagelines.com/forum/topic/27203-feature-text-style-on-boxes/ and I have tried the suggested solution but can't get it to work.

 

I am working on: http://version2manometer.wpforalle.dk

Trying to: move the infotext on top of the image (the pictures shown right now is showing how I want to text to be finally)

 

First I tried inserting 

 

#site .fboxinfo {

    margin-top: -100px;

    background: rgba(0, 0, 0, 0.0);

 

But nothing happened....then just for the fun of it I tried:

 

.fboxtitle h3 {

    font-size: 1.3em;

    padding: 0 0 0.4em;

    margin-top: -100px;

    background: rgba(0, 0, 0, 0.0);

}

 

Then all the text disappeared completely?

 

I hope one of you can help with this? :-D

 

Bolette

 

 

 

 

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

Hi there,

 

From what I remember on the previous post it was just the box title that was moved up and set like the features. If you can set your boxes out so the image is where you want then we can try and edit the css display to get the effect you want and advise for you.

 

So just to check you want the main text of the box, on top of the image with a semi transparent bg?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James,

 

I really appreciate the help :-) 

 

I am trying to put the infotext WITHOUT the title on top of the image- on a transparent bg.

 

On the dev-site (http://version2manometer.wpforalle.dk/) I put the image with text (and title) below.

 

What I would like it to look like : http://www.manometer.dk/job/PLOfrederiksberg/plo_forside.html

 

I had clients ask for this effect before (but managed to do something else) and would be really happy to find a way to do it :-) 

 

Best

Bolette

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you Rob

 

I think I am on the right way but I am not there yet...I added  classes to each of the boxes with the right padding and a bg image. And it works fine, the box to the left and in the middle looks just fine. But then I started working on the clickable bg image...and then the fun begins :-) I found this blogpost on the subject: http://ran.ge/2012/04/03/css-trick-turning-a-background-image-into-a-clickable-link-take-2/

 

This is what I have done so far (the adress is http://version2manometer.wpforalle.dk/ ) I added the red frame just for guidance ;-)

.fbox {
  
      border: 1px solid red;
      background-color:#ffffff;
  }
    
  .fboxtitle h3 {
      display: none;
  }
    
  .fboxinfo {
      padding: 20px 65px 0px 65px;
  }
    
  #box-login {
      background-image:url('./wp-content/uploads/2013/06/boks-med-pil-uden-symbol2.png');
      display:block;
      border: 0px solid red;
      height: 103px;
      width: 292px;
      overflow:hidden;
      text-indent:100%;
      white-space:nowrap;
     
  } 
    
  .box-sundhed {
      background-image:url('./wp-content/uploads/2013/06/midterboks-uden-tekst.png');
      display:block;
      border: 0px solid red;
      height: 103px;
      width: 292px;
      
     
  } 
    
  .box-diverse {
      background-image:url('./wp-content/uploads/2013/06/venstreboks-uden-tekst.png');
      display:block;
      border: 0px solid red;
      height: 103px;
      width: 292px;
      
     
  } 
    

I really need som help on this one - I simply can't figure out how to make the bg img clickable without ruining it all....

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Bolette,

 

I think the best solution is to not use the box image and try to move things about, but to create a background for boxes on that page, setting it behind the text. As a background image, the only things you'll need worry about are the spacing/alignment of text and a means of creating a link to fit the design of the background image.

Share this post


Link to post
Share on other sites

Posted · Report post

Okay, so now you need to properly position the background image, which simply appears out of alignment.

 

This is the info you need: http://www.w3schools.com/cssref/pr_background-position.asp

 

Just edit your code to position the background, taking care to use padding for the text, not the level where the background is located, and you should be fine.

Share this post


Link to post
Share on other sites

Posted · Report post

I will look into it and show next week what I have done.  

 

Thank you :-)

 

Share this post


Link to post
Share on other sites

Posted · Report post

You're welcome.

Share this post


Link to post
Share on other sites