2012-01-10 4 views
-1

Я думаю, что это небольшая проблема, которую я пропустил, но я могу воспользоваться некоторой помощью.Div не могут быть установлены друг на друга

В приведенном ниже коде (который является частью моей) я пытаюсь разместить div «twitter» над div «обертки». Я пробовал разные вещи, такие как z-index, но без каких-либо успехов. Может ли кто-нибудь помочь мне разместить эти два дивы друг над другом? - Благодаря

код:

<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

Для #wrapper набора

position: relative 
z-index: 100 

Для набора #twitter

position: absolute 
z-index: 110 

Вам также необходимо установить Left и Top в обертку, чтобы установить его положение. В вашем HTML (или визуализированном HTML)

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

Надеюсь, что это поможет.

Dave

+0

Это тоже было частью проблемы, спасибо, решила! – kim

0

заменить CSS с этими

#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; 
} 

граница цвета только для справки ... это, конечно, работать ...

+0

это не прямое решение, но я решил ее, делая это первый, а затем дать некоторую высоту и ширину в обертке. Спасибо за Ваш ответ! – kim

0

Try добавив position:absolute; в div #twitter.

+0

Пробовал, но не успел, я уже решил! Спасибо за вашу помощь! – kim

0

Попробуйте добавить свойство позиции. z-index работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная или позиция: фиксированная).

Также IE имеет некоторые ошибки, чтобы сделать с г-индексного Престола: http://www.gobdg.com/blog/2009/04/positionrelative-z-index-ie-bug/

Надежда это помогает: D

Heres некоторые CSS для вас

<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

Смежные вопросы