Div не могут быть размещены друг над другом - PullRequest
0 голосов
/ 10 января 2012

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

В приведенном ниже коде (часть которого принадлежит мне) я пытаюсь разместить div «twitter» над div «wrapper». Я пробовал разные вещи, такие как z-index, но безуспешно. Может кто-нибудь помочь мне поместить эти два 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>

Ответы [ 4 ]

1 голос
/ 10 января 2012

Для #wrapper set

position: relative
z-index: 100

Для #twitter set

position: absolute
z-index: 110

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

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

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

Dave

0 голосов
/ 10 января 2012

Попробуйте добавить position:absolute; к разделу #twitter.

0 голосов
/ 10 января 2012

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

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

Надеюсь, это поможет: D

Вот немного 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 голосов
/ 10 января 2012

замените ваши 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;
}

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...