Jump to content


Photo

How to make Feature Media full height.


  • Please log in to reply
22 replies to this topic

#1 shaznyc

shaznyc

    Advanced Member

  • Members
  • 70 posts

Posted 25 February 2011 - 12:00 AM

Hi, I am work with StationPro3. if you go to this link: http://shaznyc.com/reviews/ and look at the first Feature (Feature 1) you will see that I have placed 2 copys of the same image, one on top of the other. I got the Bockground image touching all corners. But the foreground image / Feature media (the image on top of the background) is touching on the right side and bottom edges, but not on the top edge. I would like to have the Feature Media - top/foreground image touching at all 3 corners (Top, Bottom And Right side). How can I do that. What are the codes. I have placed a background and a Feafure image = (foreground image) in Feature 1 as an example so you can see what I am talking about. The other Features, 2,3 and 4 only have background images, for now. ----- After posting the above on another thread, I got this response from Cmunns: "..some css would get the foreground image full height." #feature .fmedia { padding:0px; } ------- My new question is: where do I put the Codes that Cmunns just gave me. I have tried putting the Codes in the StationPro3 Theme Options > Custom Code > Custom CSS, but that does not work. What am I doing wrong. Thank you, SHAZ.

#2 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 25 February 2011 - 01:50 AM

Try Custom CSS again, but with this updated code:

`
body #feature .fmedia {
padding:0px;
}
`
I believe specificity was the problem; learn more here:

http://www.smashingm...ou-should-know/

Thanks, Bryan

#3 shaznyc

shaznyc

    Advanced Member

  • Members
  • 70 posts

Posted 25 February 2011 - 05:32 AM

Hi Bryan, Your Codes works fine for the height, but now both the Feature Media and the Background image have moved away from the right edge. Also, after I entered your Codes, all the Backgrounds of all the Features are loading (coming up short) on the right side edge, where as before the Backgrounds were all touching all 4 corners. You can see the results here: http://shaznyc.com/reviews/ Thanks, SHAZ.

#4 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 25 February 2011 - 06:02 AM

It looks like your images should be 960 x 375 pixels. Can you try that? Also, if you haven't checked out Firebug, it's a great tool for diving into your CSS: http://www.pagelines...ng-colors-fonts And a cool onscreen measuring tool to get exact measurements here: http://www.iconico.c...Calipersv15.zip Thanks, Bryan

#5 petegarnish

petegarnish

    Advanced Member

  • Members
  • PipPipPip
  • 46 posts
  • Country: Country Flag

Posted 01 March 2011 - 12:17 AM

Sharron can you share how you were able to make the feature image fill the entire box, I can't seem to get it, or find the post you referred to. What i've ended up with is the feature image below the text: productionvideo.com.au/index.php

#6 shaznyc

shaznyc

    Advanced Member

  • Members
  • 70 posts

Posted 04 March 2011 - 04:40 AM

Hi Pete, What I ended up doing was: 1- leaving the - "Feature Media" blank. 2- Placing a linked image in the -"Feature Background". Size = 960 x 375 pixels. The Text will automatically go on top. I hope that helps, Shaz.

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 04 March 2011 - 09:19 AM

Sharron, do you still need assistance with the Feature Media area?

#8 shaznyc

shaznyc

    Advanced Member

  • Members
  • 70 posts

Posted 05 March 2011 - 01:27 AM

Hi Catrina, I could not get both the Feature Media and the Feature Background to be full Hight and or width at the same time. When I fix one the other would fall out of whack. So I've left the Feature Box with just the Background and no Media. As you can see, even with the Feature Background alone, it is still not touching all corners, the right side is a few pixels short. Thanks, SHAZ.

#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 05 March 2011 - 06:29 PM

Do you still want to tweak the code or are you satisfied with how it is for now?

#10 shaznyc

shaznyc

    Advanced Member

  • Members
  • 70 posts

Posted 06 March 2011 - 08:25 PM

Hi Catrina, If there are Codes that will fix the issue I would love to have them.

#11 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 07 March 2011 - 02:04 AM

Sharron could you send us a new link to you issue, I'm not seeing features on your reviews page.

#12 shaznyc

shaznyc

    Advanced Member

  • Members
  • 70 posts

Posted 08 March 2011 - 01:18 AM

Hi Jimmy, Here is a link to my Home page - http://shaznyc.com/ (see the first Feature Slider "HI") Thanks, SHAZ.

#13 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 08 March 2011 - 02:46 AM

Other than the CSS I already provided, I don't have other CSS to add. Your other slide look great, is there any reason you don't do your first slide like the others. It appears that you're just try to stack the same image on top of the same background image? Perhaps if you explain what the goal is here there might be a better solution... Thanks, Bryan

#14 shaznyc

shaznyc

    Advanced Member

  • Members
  • 70 posts

Posted 08 March 2011 - 03:43 AM

Hi Bryan, All the others slides are incomplete, they only have the Background image for now until I sort out this problem. I did not add a Feature Media to the other slides because they will just look like the first one. I am using the first slid as an example of how I want the Feature to have a Feature Background Image and a Feature Media. I would like the Feature Media (the top image) not to be a floater and to touch the top, bottom and right side of the box. Hence, No Padding. I mode it the same height as the Background with no avail. Thanks, SHAZ.

#15 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 08 March 2011 - 06:48 AM

The CSS I provided works for me, where did you try putting it? Thanks, Bryan

#16 shaznyc

shaznyc

    Advanced Member

  • Members
  • 70 posts

Posted 08 March 2011 - 04:02 PM

Hi Bryan, I have tried putting the Codes in the StationPro3 Theme Options > Custom Code > Custom CSS, but that does not work. What else could I doing wrong? Thanks, SHAZ.

#17 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 08 March 2011 - 08:17 PM

I don't see it coming up at all when I inspect the page. Are all of the brackets closed for the css in your custom code area?

#18 shaznyc

shaznyc

    Advanced Member

  • Members
  • 70 posts

Posted 09 March 2011 - 04:43 AM

Hi cmunns, I removed the Codes Bryan gave me because it's messing up all the Feature Backgrounds, even the ones that does not have a Feature medias. I was waiting for the fix. Is the Codes working on your end? Thank you, SHAZ.

#19 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 09 March 2011 - 05:40 AM

At this point I think I'll have you post all the CSS that you have in Custom CSS to check for errors.

You could also run your site through:

http://jigsaw.w3.org/css-validator/

Thanks, Bryan

#20 petegarnish

petegarnish

    Advanced Member

  • Members
  • PipPipPip
  • 46 posts
  • Country: Country Flag

Posted 11 March 2011 - 02:27 PM

Thanks Shaz, Solved my problem (text displaying over full size picture). But now, like you I have a border at the right side of the feature box, (approx 2 pixels?) the feature image will not fill the feature box. I have tried enlarging the feature image to 962pixels wide thinking that it was too small, however that didn't solve it.