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 15
  1. #1
    Junior Member Thundordan's Avatar
    Join Date
    Oct 2008
    Posts
    6
    Member #
    17625
    I'm building a pretty-looking website for a college project and am stalled or rather stuck with one issue..

    I've never tried this before and also haven't found any answers by googling..


    So, as I wrote down there, I have an "invisible" thumbnail which pops up a picture "under" it, on hover. Now, I want this invisible thumb and picture (<a>) to be under any text (<p>) I will write there.

    Unfortunately when the hover-image opens, it sticks below the text and not under it and at it's desired position..




    In short, what I want is to change the "order" of those elements: <a> behind <p>. "send" the thumb "behind text".

    Code:
    <style type="text/css">
    
    a.Web { 
    display: block;
    position: absolute;
    left: 951px;
    top: 504px;
    width: 329px;
    height: 366px;
    
    }
    
    a.Web:hover + span {
    display: block;
    foat: left;
    width: 800px;
    height: 600px;
    background: url( "Picture to pop up but under the text.jpg" ) no-repeat;
    }
    
    p.text { 
    font-family: Arial;
    font-size: large;
    line-height: 100%
    word-spacing: double;
    letter-spacing: 0.5ex;
    text-align: center;
    color: #292929;
    }
    
    </style
    
    
    <body background="Folder/Background.jpg"></body>
    
    <div>
    <p class="text"> <br><br> Random block of text that should remain over the new image.</p>
    </div>
    
        
    <div>
    <a id="Web" class="Web" href="Web.html"></a>     <span></span>
    </div>        
    </body>
    Don't ask me why It's simple but complicated


    Thanks in advance


    PS: The project rules are for me to use only html and css..

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    EDIT:

    original message removed.

    I miss-read the post ... I need to rethink this.


  4. #3
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    I don't know whether this is in your original document, but the end style tag </style> says </style.
    You may want to fix that and see if it does anything.


    I think there's something called a z-index in CSS.
    http://www.w3schools.com/Css/pr_pos_z-index.asp

    You may want to check that out.


    Hopefully I've read your post right.

    Try that for now and in the meantime I might work on it more for you, but remember as it's an assignment no-one here's gonna do it for you, we'll jsut give you a push in the right direction / examples.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Can the text be part of an image?


  6. #5
    Junior Member Thundordan's Avatar
    Join Date
    Oct 2008
    Posts
    6
    Member #
    17625
    Thanks for helping guys

    But the Z-index only works for elements with an absolute position.. And in my case, the hover image is placed over (or rather underneath) the thumbnail and is bigger than the thumbnail. For some reason if I use "position: absolute;" on both the thumb and the hover image it conflicts and the image blinks a lot.. If I write it as I did it works perfectly fine but I can't assign a position to the hover image.

    If you could somehow tip me into how can I make the thumb and hover image not conflict with eachother and both have a "position" assigned, it would be great.


    I've started the same thread on another forum and someone there explained when this blinking occurs: http://csscreator.com/node/32434



    Mlseim, I tried writing inside the hover image but it doesn't work very well. (see my other thread)

    As I mentioned there, in short, I want to write over a sort of image gallery. It's not exactly an assignment rule but it's how I designed my site..

    Thanks.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    And you're not allowed to use any Javascripting or PHP?

    That limitation sounds like an assignment to me.


  8. #7
    Junior Member Thundordan's Avatar
    Join Date
    Oct 2008
    Posts
    6
    Member #
    17625
    Well yes it is an assignment. I need to make a personal html&css website which uses an image gallery in an innovative way of my chosing..

    So I want to make the buttons change the "background" of the site when you hover over them. But I can't seem to write over these hovers so I can't add any text...

  9. #8
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Do you have a link where we can play? The markup is off in several places, and that could be part of the issue. Or at least a couple sketches?

    - the a and a:hover should be the same size
    - <body></body>
    - "+ span"
    Shani

    I have an eye for detail like you'd never believe.

  10. #9
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    There's a lot wrong with the script example he provided.

    I was hoping to see a working site in action.
    Without seeing what he's seeing ... it's too hard to do.


  11. #10
    Junior Member Thundordan's Avatar
    Join Date
    Oct 2008
    Posts
    6
    Member #
    17625
    Here you go, gents! I've uploaded one of my pages here: http://www.megaupload.com/?d=4W6CYCDT

    Just enter the security code, click Download, wait 40 sec, get it, and you'll see my idea..

    I know the images are rather large but I'll fix that.


    [EDIT] GUYS, I have to announce that I have been a COMPLETE IDIOT!
    I thought z-index does NOT work for Paragraphs /facepalm. All I had to do is: p.text {position: absolute; z-index: +1;}

    I was so deep into the thumb-hover conflict when both have position: absolute; that I wasn't thinking straight!

    Well now, please excuse my dumbness and lack of xp, and if there's any suggestions you would have, I'd be glad to hear them.


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

change image on mouse over to paragraph

,

css image is over paragraph fix

,
display paragraph on hover
,

display paragraph over image html

,
hover does not work on paragraph css
,
how to make the text display under the correct image when you hover over it in css
,
html image hover paragraph
,
make 2 paragraphs and have one display on hover
,
onhover paraggraph in html
,
paragraph stuck behind image in code
Click on a term to search for related topics.
All times are GMT -6. The time now is 09:11 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com