12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Need help with a CSS Styles sheet edit. (height)

by nicolas simpson
10 replies
  • WEB DESIGN
    • |
I want to edit the height of my featured image area so that it automatically change depending on the height of the size image placed there.

Currently the size is static, dont change..

if i could get it to be 5px off the top and bottom of the image that will be great...

I want to make this change because i use a banner rotator, banners i rotate are of different sizes.. i use WP bannerize..

See attached image below.

I can currently edit the height here:

headerfullwidth {
background:url(images/headerbg.gif) repeat center 0px;
min-height:664px;
}
#header {
clear:both;
}
#css #edit #height #sheet #styles
  • Profile picture of the author David V
    Set width only. Don't set a specific height.
    Something like:

    .my-cool-banner-area {
    width: 940px;
    height: auto;
    max-height: 300px;
    }

    Obviously change the class name to yours, and the px sizes.

    EDIT: I must be blind tonight..... I didn't even see the code you posted.

    So do something like this:
    Code:
    .headerfullwidth {
background:url(images/headerbg.gif) repeat center 0px;
height: auto;
max-height:664px;
}
#header {
clear:both;
}
    {{ DiscussionBoard.errors[8174423].message }}
  • Profile picture of the author nicolas simpson
    Sorry i actually inserted the good after i publish so.. the good news is that your eye should be ok, however the fix you gave me dont seems to work..

    Thanks for your response.
    Signature
    Discover Reggae | Dancehall [Jamaica]
    {{ DiscussionBoard.errors[8174482].message }}
  • Profile picture of the author David V
    Do you have a url instead of an image? Be a LOT easier.

    EDIT: I figured out it's your sig....
    {{ DiscussionBoard.errors[8174543].message }}
  • Profile picture of the author David V
    Actually it does work. You don't have a banner in there.
    The 664px I just made up. You need to adjust that.
    520px looks about right.
    {{ DiscussionBoard.errors[8174561].message }}
  • Profile picture of the author nicolas simpson
    YardHype | Dancehall | Reggae | Entertainment
    Signature
    Discover Reggae | Dancehall [Jamaica]
    {{ DiscussionBoard.errors[8174688].message }}
  • Profile picture of the author David V
    You should be good to go.. Just change that min-height to 520px or so, then it will collapse when there's no banner present.
    Code:
    .headerfullwidth {
background: url(images/headerbg.gif) repeat center 0px;
height: auto;
min-height: 520px;
}
    You'll want to position your search as well, line 556:
    Code:
    #topsearch {
float: right;
margin: 59px -8px 0 20px;
height: 30px;
padding: 10px 0;
position: relative;
}
    {{ DiscussionBoard.errors[8174810].message }}
    • Profile picture of the author nicolas simpson
      Thanks , This did solve my problem.
      Originally Posted by David V View Post

      You should be good to go.. Just change that min-height to 520px or so, then it will collapse when there's no banner present.
      Code:
      .headerfullwidth {
background: url(images/headerbg.gif) repeat center 0px;
height: auto;
min-height: 520px;
}
      You'll want to position your search as well, line 556:
      Code:
      #topsearch {
float: right;
margin: 59px -8px 0 20px;
height: 30px;
padding: 10px 0;
position: relative;
}
      Signature
      Discover Reggae | Dancehall [Jamaica]
      {{ DiscussionBoard.errors[8836685].message }}
  • Profile picture of the author BLM
    you need to add some margin for that. if you want 5px on top and bottom add this.

    margin-top:5px;
    margin-bottom:5px;
    {{ DiscussionBoard.errors[8182308].message }}
  • Profile picture of the author webworksbd
    are you still facing the problem? I just check the site and I think it's already fixed.
    Signature

    Need a WordPress Developer? View my gigs at Fiverr.com

    {{ DiscussionBoard.errors[8182346].message }}
  • Profile picture of the author sham2
    You should give width only height is not needed. Because the height will be increase or decrease with width. If you still facing the problem then post here your web site URL and i will fix it.
    {{ DiscussionBoard.errors[8872234].message }}

Trending Topics