Jump to content


Photo
- - - - -

Text on the boxes images?

fboxes

  • Please log in to reply
7 replies to this topic

#1 bobbekaer

bobbekaer

    Advanced Member

  • Members

  • 89 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 24 June 2013 - 11:43 AM

Hi

 

I found this post on text + boxes: 

Please Login or Register to see this Hidden Content

and I have tried the suggested solution but can't get it to work.

 

I am working on:

Please Login or Register to see this Hidden Content

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

 

 

 

 



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 24 June 2013 - 08:59 PM

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?



#3 bobbekaer

bobbekaer

    Advanced Member

  • Members

  • 89 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 25 June 2013 - 12:33 PM

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 (

Please Login or Register to see this Hidden Content

) I put the image with text (and title) below.

 

What I would like it to look like : 

Please Login or Register to see this Hidden Content

 

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



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 June 2013 - 05:12 PM

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.



#5 bobbekaer

bobbekaer

    Advanced Member

  • Members

  • 89 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 27 June 2013 - 01:03 PM

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:

Please Login or Register to see this Hidden Content

 

This is what I have done so far (the adress is

Please Login or Register to see this Hidden Content

) I added the red frame just for guidance ;-)

Please Login or Register to see this Hidden Content

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....



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 27 June 2013 - 08:11 PM

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

 

This is the info you need:

Please Login or Register to see this Hidden Content

 

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.



#7 bobbekaer

bobbekaer

    Advanced Member

  • Members

  • 89 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 28 June 2013 - 06:20 AM

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

 

Thank you :-)

 



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 28 June 2013 - 02:04 PM

You're welcome.