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.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Apr 2010
    Posts
    3
    Member #
    21764
    hi

    im having some problems with css positioning. one of my div boxes is affected by parent div boxes, and i dont see the connection and how to fix the problem.

    this is how it looks like:

    http://www.xgs-gaming.com/project/

    and its code:

    Code:
    <body>
    
    <div class="wrapper">
       <div class="picFrameContainer3x">
          <div class="picFrame1">
    
             <div class="pic"></div>
             <div class="toolTipHover">
                <div class="top">
                   <div class="floatlft1"></div>
                   <div class="floatlft2">Tyrjente,&nbsp;26&nbsp;år&nbsp;<br>Skedsmo,&nbsp;Akershus</div>
                </div>
    
             </div>
          </div>
          <div class="picFrame2">
             <div class="pic"></div>
          </div>
          <div class="picFrame3">
             <div class="pic"></div>
          </div>
       </div>
    
    </div>
    
    <div class="toolTipHover">
       <div class="top">
          <div class="floatlft1"></div>
          <div class="floatlft2">Tyrjente,&nbsp;26&nbsp;år&nbsp;<br>Skedsmo,&nbsp;Akershus</div>
       </div>
    </div>
    
    </body>
    its css:

    Code:
    .wrapper {
       background-color: red;
       width: 285px;
       height: 335px;
       margin: 100px 0px 0px 0px;
    }
    .picFrameContainer3x {
       width: 285px;
       height: 83px;
       background-color: yellow;
       margin: 0px 0px 10px 0px;
       padding: 9px 0px 9px 0px;
    }
    .picFrame1 {
       z-index: 2;
       position: relative;
       float: left;
       width: 81px;
       height: 81px;
       border: 1px solid #a2a0a0;
       /* background-color: green; */
       margin: 0px 0px 0px 9px;
    }
    .picFrame2 {
       z-index: 0;
       position: relative;
       float: left;
       width: 81px;
       height: 81px;
       border: 1px solid #a2a0a0;
       /* background-color: green; */
       margin: 0px 0px 0px 9px;   
    }
    .picFrame3 {
       z-index: 0;
       position: relative;
       float: left;
       width: 81px;
       height: 81px;
       border: 1px solid #a2a0a0;
       /* background-color: green; */
       margin: 0px 0px 0px 9px;   
    }
    .pic {
       width: 75px;
       height: 75px;
       border: 0px;
       margin: 3px;
       background-color: green;
    }
    .toolTipHover {
       z-index: 1;
       position: absolute;
       top: 50px;
       left: 50px;
       background-color: #fff;
       border: 1px solid #a2a0a0;
       color: #403f3f;
    }
    .top {
       overflow: hidden;
       background-color: red;
    }
    .floatlft1 {
       float: left;
       width: 20px;
       height: 20px;
       background-color: green;
    }
    .floatlft2 {
       float: left;
       background-color: yellow;
    }
    im totally clueless on this one, any suggestions what i could do to avoid this?

    if i remove the position: relative; from .picFrame1 then it displays right, but then the positioning is not relative to .picFrame1, but the html element instead.

    hope someone knows what the issue here is

    best of regards,
    alex

  2.  

  3. #2
    Junior Member
    Join Date
    Apr 2010
    Posts
    3
    Member #
    21764
    if i change the width of .picFrame1 to 200px it shows right , something tells me the parent elements width and hight needs to be greater than the child element in order for it to display right.

    and if i specify the width and height of .toolTipHover it works, but then it wont be dynamic, i dont want one spesific height and width , i want it to be able to stretch since im going to get the data from a db.

    any tips of how to do this?

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Can you qualify what is `right' in this case? What are you trying to achieve vs what is happening?


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
  •  
All times are GMT -6. The time now is 03:38 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com