2012-01-10 2 views
-1

간과 한 작은 문제라고 생각하지만 도움을받을 수 있습니다.Div 's를 서로 위에 놓을 수는 없습니다

아래 코드 (일부는 내 것임)에서 "래퍼"div 위의 "twitter"div를 배치하려고합니다. 나는 Z- 인덱스와 같은 다른 것들을 시도했지만 성공하지는 못했습니다. 누군가이 두 div의 위치를 ​​서로 도울 수 있습니까? - 감사

코드 :

<head> 
<title>Proto Format, grafisch ontwerp &amp; concept.</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<link href="Proto2.css" rel="stylesheet" type="text/css"> 

<style type="text/css"> 
#twitter { 
height:auto; 
width:auto; 
z-index:100; 
margin-left:500px; 
margin-top:100px; 
} 

#wrapper{ 

margin-left: auto; 
margin-right:auto; 
z-index:auto; 
} 

#content{ 
margin-left:auto; 
margin-right:auto; 
height:800px; 
} 


</style> 

</head> 


<body bgcolor="#BA830E" link="#006C8C" vlink="#006C8C" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 

<div id="content"> 

<div id="twitter"> 
<script src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
new TWTR.Widget({ 
    version: 2, 
    type: 'profile', 
    rpp: 1, 
    interval: 30000, 
    width: 250, 
    height: 300, 
    theme: { 
    shell: { 
     background: '#ffffff', 
     color: '#666666' 
    }, 
    tweets: { 
     background: '#', 
     color: '#666666', 
     links: '#006C8C' 
    } 
    }, 
    features: { 
    scrollbar: false, 
    loop: false, 
    live: false, 
    behavior: 'all' 
    } 
}).render().setUser('chantalheeg').start(); 
</script> 
</div> 

<div id="wrapper"> 
<!-- ImageReady Slices (visie.psd) --> 
<table width="989" height="1012" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabel_01"> 

    <tr> 
     <td height="132" colspan="5" background="afbeeldingen/klein-2kolom_01.gif">&nbsp;</td> 
     <td width="198" height="811" rowspan="5" background="afbeeldingen/klein-2kolom_02.gif">&nbsp;</td> 
     <td> 
      <img src="afbeeldingen/spacer.gif" width="1" height="132" alt=""></td> 
    </tr> 

    <tr> 
     <td width="235" height="366" rowspan="3"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="235" height="366"> 
      <param name="movie" value="afbeeldingen/menu-links/menulinks-visie.swf"> 
      <param name="quality" value="high"> 
      <embed src="afbeeldingen/menu-links/menulinks-visie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="235" height="366"></embed> 
     </object></td> 
     <td height="117" colspan="4" background="afbeeldingen/klein-2kolom_04.gif">&nbsp;</td> 
     <td> 
      <img src="afbeeldingen/spacer.gif" width="1" height="117" alt=""></td> 
    </tr> 
    <tr> 
     <td height="69" colspan="4" background="afbeeldingen/klein-2kolom_05.gif">&nbsp;</td> 
     <td> 
      <img src="afbeeldingen/spacer.gif" width="1" height="69" alt=""></td> 
    </tr> 
    <tr> 

     <td width="12" height="493" rowspan="2" background="afbeeldingen/klein-2kolom_06.gif">&nbsp;</td> 
     <td width="260" height="493" rowspan="2" align="left" valign="top" background="afbeeldingen/essentie6.gif"> 

     <span class="titeltekst"><br><br>Visie Proto Format</span><span class="tekst"><br> 
      <br> 
     </span> 
      <span class="tekst">Proto Format maakt in opdracht reclame en promotiemiddelen voor verschillende 
      bedrijven en instanties. We zijn altijd op zoek naar de juiste manier om een bedrijf of product te promoten en ontwikkelen een werkwijze om hieraan vorm te geven. We houden niet van standaardwerk en spannen ons er dan ook altijd voor in 
      om, veelal samen met de klant, tot iets te komen dat net even dat stukje extra geeft. 
      <br> 
      <br> 
     </span> 


     </td> 
     <td width="13" height="493" rowspan="2" background="afbeeldingen/essentie7.gif">&nbsp; 
      </td> 
     <td width="270" height="493" rowspan="2" align="left" valign="top" background="afbeeldingen/essentie8.gif">  <span class="tekst"><br><br><br> 
      <br>Wij vinden het niet belangrijk om ons eigen stempel ergens op te drukken. Het gaat erom dat de klant iets krijgt waar hij trots op is en wat natuurlijk aansluit bij de betreffende doelgroep. 
      <br>In onze uitingen zorgen we er voor dat de boodschap zo helder mogelijk naar buiten wordt gebracht.<br> 
     We houden niet van onnodige opschmuk. De essentie moet communiceren.<br><br></span></td> 


     <td> 
      <img src="afbeeldingen/spacer.gif" width="1" height="180" alt=""></td> 



    </tr> 



    <tr> 
     <td width="235" height="514" rowspan="2" background="afbeeldingen/klein-2kolom_10.gif">&nbsp;</td> 
     <td> 
      <img src="afbeeldingen/spacer.gif" width="1" height="313" alt=""></td> 

    </tr> 
    <tr> 

     <td height="201" colspan="5" background="afbeeldingen/klein-2kolom_11.gif">&nbsp;</td> 
     <td> 
      <img src="afbeeldingen/spacer.gif" width="1" height="201" alt=""></td> 
      <span class="twitter"> 

    </tr> 



</table> 
</div></div> 
<!-- End ImageReady Slices --> 


</body> 
</html> 

답변

1

설정에 대한을

position: relative 
z-index: 100 

# 트위터 세트

position: absolute 
z-index: 110 

위치를 설정하려면 래퍼에 Left와 Top도 설정해야합니다. 귀하의 HTML (또는 렌더링 된 HTML)에서

<div id='wrapper'> 
    <div id='twitter'> 
    </div> 
</div> 

희망이 있습니다.

데이브

+0

이것은 문제의 일부이기도합니다. 덕분에 해결되었습니다! – kim

0

이 ... 테두리 색상은 단지 참고 용 ...이 반드시 작동되는이

#twitter { 
height:auto; 
width:auto; 
z-index:100; 
margin-left:500px; 
margin-top:100px; 
border:solid 2px red; 
} 

#wrapper{ 
margin-left: auto; 
margin-right:auto; 
border:solid 2px green; 
} 

와 CSS를 대체 ​​

+0

직접 해결책이 아니었지만 먼저이를 수행 한 다음 래퍼에 높이와 너비를 지정했습니다. 귀하의 답변 주셔서 감사합니다! – kim

0

시도 #twitter div에 position:absolute;을 추가하십시오.

+0

시도했지만 성공하지 못했습니다. 이미 해결했습니다! 당신의 도움을 주셔서 감사합니다! – kim

0

위치 속성을 추가해보세요. Z- 색인은 위치 요소 (위치 : 절대, 위치 : 상대 또는 위치 : 고정)에서만 작동합니다. 이 도움이 http://www.gobdg.com/blog/2009/04/positionrelative-z-index-ie-bug/

희망 :

또한 IE는 Z- 인덱스의 참조와 함께 할 몇 가지 버그가 Heres는 D

일부 CSS #wrapper를 들어 당신

<style type="text/css"> 
#twitter { 
z-index:1; 
position:absolute; 
left:500px; 
top:100px; 
} 

#wrapper{ 
margin: auto; 
} 

#content{ 
margin:auto; 
height:800px; 
} 
</style> 
+0

답장을 보내 주셔서 감사합니다. 이미 해결했습니다! :) – kim

관련 문제