Width percentage issue in CSS

kettle
kettle
edited August 2015 in Campaign Portal Building
Hey all,

I am having trouble with my hover CSS codes. The code is listed below. When I use percentiles for width and height the picture disappears so I am current forced to put the width and height in px. Can anyone tell me what I am doing wrong? The trouble is that by using px, the pictures do not shrink when the window changes size. I want to use percentiles so when the window is adjusted the size of the pictures will adjust.

.TEAM{
float: left;
margin-bottom: 10px;
width: 100%;
height: 100%;
display:block;
background:transparent url('https://db4sgowjqfwig.cloudfront.net/campaigns/121034/assets/498460/TEAM1.png') center top no-repeat;
}

.TEAM:hover {
background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/121034/assets/498461/TEAM2.png');
}

Thanks,

Kettle

"The Book of Taliesan":https://the-book-of-taliesin.obsidianportal.com/wikis/main-page

Comments

  • saethone
    saethone
    Posts: 153
    i believe it is because there is no content inside any of those elements. I can't remember whether the percentiles fill the width to the size of the parent element or the child element, but i'm pretty sure it has something to do with all the images being backgrounds and not inside the element itself. You could try creating an image of a completely transparent gif/png and put that in your anchor tag of each td, see if that works, though I'm not sure that has any benefit for you as it seems you want them dynamically sized
  • Unknown
    You can try media queries as well to handle it.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Without seeing this in the context of the page where it's used, it's tough to guess what the problem is. If you can link to a page where you're trying to use this, that would make it much easier to figure out for you. Particularly, it's important what type of tag you're applying the style to, and where it sits in the page structure.
  • kettle
    kettle
    Posts: 72
    Thanks for your help everyone.

    The page I am using the code on is the main page of the site "Main Wiki Page":https://the-book-of-taliesin.obsidianportal.com/wikis/main-page. Maybe I should not use the buttons as a background element as I did above. Does anyone have any code to create a hover effect that does not make the images background images?

    Thank you,

    Kettle

    "Rise of the Dead: Campaign of the Month June 2013":https://rise-of-the-dead.obsidianportal.com/wikis/main-page
    Currently playing "The Book of Taliesin":https://the-book-of-taliesin.obsidianportal.com/wikis/main-page
  • Unknown
    I have an effect that I use on my front page that I would be willing to share if you are interested. It doesn't do exactly what you are trying to do here, but it is a fancy little effect.

    --Alex
    Community Manager
    "Dragon Age: Requiem":https://da-requiem.obsidianportal.com/
  • kettle
    kettle
    Posts: 72
    @ alex_redeye

    Yes I would definetly like to see the code for your button. I like how they look. Maybe I can adapt them some how. Either post it here or you can PM me.

    Thanks

    Kettle

    "Rise of the Dead: Campaign of the Month June 2013":https://rise-of-the-dead.obsidianportal.com/wikis/main-page
    Currently playing "The Book of Taliesin":https://the-book-of-taliesin.obsidianportal.com/wikis/main-page
  • Unknown
    Tried to send it, HTML didn't want to go over, so check your PMs for more details.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited August 2015
    This is actually a tricky one to solve, because keeping things height-width proportional with dynamic sizing is something CSS is kind of terrible at in general. That said, there's a pretty easy way to make this work for you and give you full scaling of the icons with a little bit of CSS, and creative use of images.

    First off, you'll need to set everything up to size dynamically (right now, it's all keeping a fixed size determined by its contents). To do this, you'll need to:

    * Set the width of the table to 100% (so it completely fills the area of the grid)
    * Set the width of each table cell to 25% (so it takes up a fourth of the grid width)
    * Set the width of each a tag to 100% (so it completely fills its cell horizontally)

    But this alone will result in stretching, because the vertical doesn't re-size in proportion to the horizontal. To take care of this, you'll remove the set height form your a tag, and take advantage of a quirk of the img tag: when an image tag is sized in one direction and no size is set in the other, it retains the proportions of the image within it.

    In this case, within each of your a tags, simply place a square, completely transparent image. Since it's invisible, its size doesn't matter, so a 1px x 1px image like "this":http://omnichron.net/external/op/src/spacer.png is quick and easy. Then, set the width of that image to 100% so it fills the space available, and you're good to go! As the image is sized up to fill the width, its height will size up automatically, and keep things proportional.

    Finally, you'll need to make the background images you've got size to their container as well, which is as simple as including background-size:contain; in your CSS for the a tag.

    If you gave your table the class iconGrid, you'd use these CSS rules:

    bc. .iconGrid{ width:100%; } /* Sets the width of the table to fill its container (the content area) */
    .iconGrid td{ width:25%; } /* Sets each cell in the table to take up a quarter of the table's width */
    .iconGrid td a{ width:100%; background-size:contain; } /* Sizes the background image in each cell to fill the cell's whole width */
    .iconGrid td a img{ width:100%; } /* Sizes the spacer image in each link to fill the a tag's whole width */

    And each of your a tags should now contain a spacer like so:

    bc.

    Let me know if any of that needs clarification. :)
    Post edited by ChainsawXIV on
  • kettle
    kettle
    Posts: 72
    ChainsawXIV you are the man. That worked perfectly.

    Thank you all for your help.

    Kettle

    "Rise of the Dead: Campaign of the Month June 2013":https://rise-of-the-dead.obsidianportal.com/wikis/main-page
    Currently playing "The Book of Taliesin":https://the-book-of-taliesin.obsidianportal.com/wikis/main-page
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Happy to help.

    As a note, you may want to use an HTML image tag directly, rather than a textile image reference to insert your spacer image - using textile automatically gives the tag a title value the same as the file name, which is why you seed the little "empty1.png" balloon if you hold over the icons currently.
  • kettle
    kettle
    Posts: 72
    Chainsaw,

    Thanks an easy fix. I will definitely do that. Thanks again.

    Kettle

    "Rise of the Dead: Campaign of the Month June 2013":https://rise-of-the-dead.obsidianportal.com/wikis/main-page
    Currently playing "The Book of Taliesin":https://the-book-of-taliesin.obsidianportal.com/wikis/main-page
  • Unknown
    Nice, good stuff here ChainsawXIV!
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions