SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    0 Post(s)
    0 Thread(s)

    Bubble side bit positioning help

    In the image in the attachment you can see the poup info box. where the arrow is pointing is what i want to sort out. It is currently displaceing the rest of the content. below is the code:

    The CSS for the drop shadow part.
    Code CSS:
    .shadowbox2 {position: absolute;
    			background: url(/images/shadow.png) repeat;
    			top: 40px;
    			right: 4%;
    		.shadowcontent, .shadowcontent2 {position: relative;
    			padding: 5px; 
    			top: -3px; /* these two define the shadow 'offset'*/
    			left: -3px; /*...*/
    			background: #ffffff;
    			color: black;
    			border: 1px solid #777777;

    And the html:
    Code HTML4Strict:
    <div id="test'.$number.'" onmouseover="keepthediv(\'test'.$number.'\');" onmouseout="hidethediv(\'test'.$number.'\');" style="position:relative; top:-86px; left:500px; width:260px; display:none;">
    <div class="shadowbox2" style="background-color:#FFFFFF; border:1px solid #000000;" >
    <div class="shadowcontent">
    <div style=" display:inline; position:relative; left:-15px;  top:13px;"><img src="/images/leftbit.png" /></div>
    <div style="color:#6086b4; font-weight:bold;"> <img align="absmiddle" src="/images/icons/information.png" /> Anime Info Box</div>
    This is the seconed test.
    test<br />test<br />test<br />test<br />test<br />
    <div style="background-color:#E9E8FF; width:100%">test</div>

    In the html the code this is what is used to place the side bit on the info box.

    Code HTML4Strict:
    <div style=" display:inline; position:relative; left:-15px;  top:13px;"><img src="/images/leftbit.png" /></div>

    Sorry if i havent made myself clear.
    Attached Images Attached Images

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Newcastle, Australia
    0 Post(s)
    0 Thread(s)
    When you position something relatively, you only offset where it is rendered - the object still occupies the original position (in your case, the area just above the information graphic. Try using absolute position instead - you will have to set the position of .shadowbox2 to relative so that the absolutely-positioned arrow will be positioned relative to .shadowbox2.

    Also, there is no need to put the arrow graphic in a div - it can be styled and positioned directly.


Posting Permissions

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