Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Junior Member
    Join Date
    Mar 2009
    Posts
    12
    Member #
    18474
    I am trying to realize something fairly simple, and there's one pitfall i seem not to be able to avoid any time. I suspect that the issue is about CSS positioning :

    What i want to do is to have a rollover image, which when moused-over, turns transparent in places and reveals an underlying text - the underlying text being masked beneath the non-moused over image.

    So far so good, i managed the rollover code, used a
    z-index to put the text underneath; when i mouse over, some parts of the initial image turn transparent (they're gifs) and it works fine.

    I created two divs (i called them logo and text, to differenciate) for the z-index to apply to the text and not the image. I gave the image a fixed size (800x500) so for it to fit in any browser window, at any resolution. I put a table into my text div to make sure that my text (which is pretty short and wouldn't even need scrolling) wouldn't exceed 800 in width either, and i set the font in absolute values as well.

    My issue goes as follows : for the text and the logo to be on top of each other i used some absolute positioning - 40 px above the bottom - in the CSS for both divs.

    What it leads to, is my rollover+text compound to be set at the bottom of the screen indeed, but at the bottom LEFT, while i would want it vertically centered. So i tried several things - using <center> tags in the html, but it didnt work. I tried creating another div (i called it all) to put both my divs (image and text) within, and i declared it with margin: auto in the CSS. It doesn't work either.

    I wouldn't mind if the compound was vertically centered, or closer to the bottom of the screen - but i need it horizontally centered, too - and i see how a contradiction would arise between needing to position absolutely in one dimension and relatively in the other. But is there a way around that ?

    And more generally, is what i'm doing entire nonsense, and should i address the issue in a totally different way ? Because I am aware that it won't display proper on really small screens, or when users have their font size fixed by their browser, and when they don't have javascript enabled (because of the rollover.) But it was seeming to me to be a kinda elegant solution to the problem, with little code weight, loading time etc. Basically if someone can give me pointers into an entirely different way to tackle the problem, i can go and look into it by myself, and i'm totally not hellbent into having it done this specific way.

    But it's kinda frustrating now, because everything is in place, and works fine - save for the horizontal centering.

    Thank you a lot in advance !

    PS : so far, my css looks like this (the #all div is useless and can be taken out too) :

    <style type="text/css">
    body {
    background-color: #000 }

    #all {
    margin : auto 0;
    width:800px
    }

    #logo {
    position:absolute;
    bottom:30px;
    }

    #text {
    position:absolute;
    bottom:30px;
    z-index:-1;
    }

    p{
    color: #FFF;
    font-family: arial;
    font-size:12px
    }
    </style>

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Is the only thing you are showing/hiding text? Can we see the page somewhere?

  4. #3
    Junior Member
    Join Date
    Mar 2009
    Posts
    12
    Member #
    18474
    Quote Originally Posted by Shadowfiend
    Is the only thing you are showing/hiding text? Can we see the page somewhere?
    Yes, text only, but with a few links in it.

    And i'd rather not show the page (i'm keeping that one kinda hush hush right now) but maybe later i can make another one of the sort with different images and text in it, if you want me to ?

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    That works. Just need to see what you're trying to achieve so we can play with it.

  6. #5
    Junior Member
    Join Date
    Mar 2009
    Posts
    12
    Member #
    18474
    Quote Originally Posted by Shadowfiend
    That works. Just need to see what you're trying to achieve so we can play with it.
    I totally get it - i'll be giving you guys something to chew upon later in the day

    (and thanks a lot already)

  7. #6
    Junior Member
    Join Date
    Mar 2009
    Posts
    12
    Member #
    18474
    edit : and while making that, i got aware that apparently i'm running into another problem, cause the links don't seem to work there :/

  8. #7
    Junior Member
    Join Date
    Mar 2009
    Posts
    12
    Member #
    18474
    I've attached a zip with the code + the 2 images i use for the rollover. Right now the CSS is in the head of the .htm page, but i'll eventually split it up.

    Thanks a lot !

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Ah. I see. Why not just make the relevant element display: none on :hover?

  10. #9
    Junior Member
    Join Date
    Mar 2009
    Posts
    12
    Member #
    18474
    Quote Originally Posted by Shadowfiend
    Ah. I see. Why not just make the relevant element display: none on :hover?
    Because i still want the cityscape to be displayed.

    I get that i could have it displayed and fixed anyway, and then only the "sky's the limit" part disappearing and revealing the text - but would that solve anything in matters of horizontal centering, or making the links active ?

  11. #10
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Yeah, it would. The problem with a masking image is that it also masks mouse clicks from getting to the links beneath. The correct approach here would be to make the sky's the limit part a separate image from the cityscape, and then make the sky's the limit part go display: none when it is hovered. In fact, it would be even easier to have the element with the links in it be a child of the sky's the limit part. Then the image would be a background image and the children would by default be display: noned. Then, when the element is hovered, the child elements are display: blocked or whatever, and the background image is cleared.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

css absolute positioning in one dimension
,

css horizontal absoluate vertical relative

,

css only horizontal absolute

,

css position absolute horizontal only

,
css position fixed horizontal
,

css position fixed vertical only

,
css set absolute only horizontally
,
fixed verticle absoulte horizontal css
,
html absolute vertical relative horizontal
,
make something horizontally relative in css
Click on a term to search for related topics.
All times are GMT -6. The time now is 11:37 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com