www.webdeveloper.com
Results 1 to 2 of 2

Thread: How do I stop a popup from making nieghboring class (elements) go down ?

Hybrid View

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    How do I stop a popup from making nieghboring class (elements) go down ?

    I am assuming that this is a css problem as I am not sure that there is any html code that could help.

    I've tried to program a sales page, with 3 classes side by side. The problem that I have is in each class there is a rollover to display an example. When I mouse over to activate the rollover it makes the classes to the right go down the page. They return when the mouse is taken off the image.

    Is there a way to stop this?

    I have tried z-index and display: block but these haven't worked. The css code is;

    Code:
    #keyrings {Position: relative;  /* the container */
               top: 20px;
               left: -360px;
               max-width: 240px;
               height: auto;
               padding: 10px;
              border: 1px solid black;
              font-family: comic sans ms;
              font-size: 0.80em;
               color: black;
              padding-left: 10px;
              }
    
    .coast-1b {Position:relative;  /* main image */
               top: 5px;
               left: 10px;
               }
    
    .sunset {                      /* the rollover image */
      display: none;   
      }
    
    .keyring-1:hover + .sunset {    /* shows the hidden image */
      display: block;
      position: relative;
      top: 10px;
      left: 5px;
       box-shadow: 5px 5px 3px #888888;
         }
    The html used for the roll over is;

    HTML Code:
    <div id="keyrings">
    <div class="coast-1b">
    <img class="keyring-1" src="http://what-do-christians-believe.co.uk/wdcb-images/coasters/coaster-scan/sunset.png" alt="Photo: sunset over the frozen sea" />
    <img class="sunset" src="http://what-do-christians-believe.co.uk/wdcb-images/coasters/sunset.png" alt="sunset over the frozen sea">
    </div>
    </div>
    you can see what happens here. Need to scroll about halfway down the url.

  2. #2
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    I've managed to resolve this by searching the net. I needed to pull my hair out, change position: relative to absolute and reposition everything!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles