DIV positionierung von jens, 23.01.2006 07:56

DIV positionierung

jens 23.01.2006 07:56

Guten Tag,

ich habe folgenden Quelltext :

<body>
<table width="100%" height="100%" border="0">
<tr>
<td>
<div class="SSW19 ">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td><u>SSW 19</u></td>
  </tr>
  <tr>
   <td><font size="-1">AQ11</font></td>
  </tr>
  <tr>
   <td><font size="-1">Inselbus: 206</font></td>
  </tr>
  <tr>
   <td><font size="-1">Modem: 7</font></td>
  </tr>
  <tr>
   <td><font size="-1">DA: 15</font></td>
  </tr>
       </table>
</div>
<div class="SSW22 ">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td><u>SSW 22</u></td>
  </tr>
  <tr>
   <td><font size="-1">AQ8</font></td>
  </tr>
  <tr>
   <td><font size="-1">Inselbus: 206</font></td>
  </tr>
  <tr>
   <td><font size="-1">Modem: 7</font></td>
  </tr>
  <tr>
   <td><font size="-1">DA: 15</font></td>
  </tr>
</table>
</div>
<table>
<tr>
  <td><img border="0" src="usaged/pics/vba_west.jpg"></td>
</tr>
</table>
</td></tr>
</table>

und folgendes Stylsheet:

.SSW19{
   border: 1px solid #000000;
   padding: 3px;
   color: #663300;
   background-color: #FFEECC;
   width:100px;
   height:80px;
   position:absolute; left:430px; top:860px;
   z-index: 1;
}
.SSW22{
   border: 1px solid #000000;
   padding: 3px;
   color: #663300;
   background-color: #FFEECC;
   width:100px;
   height:80px;
   position:absolute; left:370px; top:520px;
   z-index: 1;
}

Mein Problem:

die funktioniert nur bei einer bestimmten auflösung, wenn die Auflösung größer wird, dann verschieben sich die DIV's.

Wenn ich die DIV's mit relative ausstatte, stehen die DIV's untereinander.

Mein Ziel:

Ich habe ein Bild als Hintergrund und will dort bestimmte stellen mit den DIV's markieren.

Was mache ich falsch? Bei Relative müssen die DIV's doch von sich selbst ausegehen?

Danke Jens

Beitrag melden

– Informationen zu den Bewertungsregeln

DIV positionierung
Markus 23.01.2006 08:08

css
−1 Informationen zu den Bewertungsregeln
sowas hab ich schonmal gemacht...
hier mal der source und das CSS und das Image:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">
<HTML>
<HEAD>
<TITLE>www.frima.name</TITLE>
<META NAME="Author" CONTENT="Markus Hilker">
</HEAD>

<link rel="stylesheet" href="index.css">

<BODY>
<table>
  <tr>
   <td class="topbg">
    <table style="border: 1px solid black; width: 800px; height:260px;">
     <tr>
      <td style="width: 199px;">
       <div style="border: 1px solid black; width:100px; height:80px; padding-top: 20px; text-align: center; font-family: Verdana, Tahoma, Arial; font-size:20px;">LOGO Here!</div>
      </td>
      <td style="padding-top: 15px;">
       <map name="Landkarte">
         <area shape="circle" coords="5,47,10" href="#"
         onmouseover="document.getElementById('box1').style.visibility = 'visible';"
         onmouseout="document.getElementById('box1').style.visibility = 'hidden';">
         <area shape="circle" coords="16,93,10" href="#"
         onmouseover="document.getElementById('box2').style.visibility = 'visible';"
         onmouseout="document.getElementById('box2').style.visibility = 'hidden';">
         <area shape="circle" coords="35,144,10" href="#"
         onmouseover="document.getElementById('box3').style.visibility = 'visible';"
         onmouseout="document.getElementById('box3').style.visibility = 'hidden';">
         <area shape="circle" coords="57,171,10" href="#"
         onmouseover="document.getElementById('box4').style.visibility = 'visible';"
         onmouseout="document.getElementById('box4').style.visibility = 'hidden';">
         <area shape="circle" coords="207,157,10" href="#"
         onmouseover="document.getElementById('box5').style.visibility = 'visible';"
         onmouseout="document.getElementById('box5').style.visibility = 'hidden';">
         <area shape="circle" coords="275,105,10" href="#"
         onmouseover="document.getElementById('box6').style.visibility = 'visible';"
         onmouseout="document.getElementById('box6').style.visibility = 'hidden';">
         <area shape="circle" coords="349,197,10" href="#"
         onmouseover="document.getElementById('box7').style.visibility = 'visible';"
         onmouseout="document.getElementById('box7').style.visibility = 'hidden';">
         <area shape="circle" coords="349,110,10" href="#"
         onmouseover="document.getElementById('box8').style.visibility = 'visible';"
         onmouseout="document.getElementById('box8').style.visibility = 'hidden';">
         <area shape="circle" coords="359,42,10" href="#"
         onmouseover="document.getElementById('box9').style.visibility = 'visible';"
         onmouseout="document.getElementById('box9').style.visibility = 'hidden';">
         <area shape="circle" coords="215,49,10" href="#"
         onmouseover="document.getElementById('box10').style.visibility = 'visible';"
         onmouseout="document.getElementById('box10').style.visibility = 'hidden';">
        </map>
        <div class="hiddenfield" style="background-color: #fdc427; color: #202020; position: absolute; top:47px; left:205px; visibility: hidden;" id="box1">
        Link1
        </div>
        <div class="hiddenfield" style="background-color: #f9b024; color: #202020; position: absolute; top:93px; left:216px; visibility: hidden;" id="box2">
        Link2
        </div>
        <div class="hiddenfield" style="background-color: #f69b20; color: #202020; position: absolute; top:144px; left:235px; visibility: hidden;" id="box3">
        Link3
        </div>
        <div class="hiddenfield" style="background-color: #f2861c; color: #000000; position: absolute; top:171px; left:257px; visibility: hidden;" id="box4">
        Link4
        </div>
        <div class="hiddenfield" style="background-color: #ee7119; color: #000000; position: absolute; top:157px; left:407px; visibility: hidden;" id="box5">
        Link5
        </div>
        <div class="hiddenfield" style="background-color: #ea5c15; color: #cfcfcf; position: absolute; top:105px; left:475px; visibility: hidden;" id="box6">
        Link6
        </div>
        <div class="hiddenfield" style="background-color: #e74711; color: #dfdfdf; position: absolute; top:197px; left:549px; visibility: hidden;" id="box7">
        Link7
        </div>
        <div class="hiddenfield" style="background-color: #e3320e; color: #dfdfdf; position: absolute; top:110px; left:549px; visibility: hidden;" id="box8">
        Link8
        </div>
        <div class="hiddenfield" style="background-color: #df1d0a; color: #efefef; position: absolute; top:42px; left:559px; visibility: hidden;" id="box9">
        Link9
        </div>
        <div class="hiddenfield" style="background-color: #db0806; color: #efefef; position: absolute; top:49px; left:415px; visibility: hidden;" id="box10">
        Link10
        </div>
       <img src="Image11.png" usemap="#Landkarte" style="border: 0px;">
      </td>
      <td style="vertical-align: bottom;">
       <div id="bild1">

</div>
      </td>
     </tr>
    </table>

</td>
  </tr>
</table>
<table>
<tr>
  <td id="zeile" colspan="2" style="background-color: #a3a0ab; width: 800px;">
  <div id="statusline">content</div>
  </td>
</tr>
<tr style="height: 400px;">
  <td id="spalte" style="background-color: #a3a0ab; width:199px; border-top: 1px solid black; border-right: 1px solid black;">
  content
  </td>
  <td id = "content" style="background-color: #efefef; border-top: 1px solid black; border-right: 1px solid black; padding: 3px;">
   content

</td>
</tr>
</table>
</BODY>
</HTML>

CSS
body {
background-color: #efefef;
margin: auto;
}

table {
width:800px;
border: 0px;
border-collapse: collapse;
padding: 0px;
}

td.topbg {
background-image: url(header.jpg);
width:800px;
height: 260px;
vertical-align: top;
}

td {
padding: 0px;
vertical-align: top;
font-family: Verdana, Tahoma, Arial;
font-size: 11px;
}

.hiddenfield
{
margin: 0px;
font-family: Microsoft Sans Serif;
font-size: 11px;
border: 1px solid black;
padding: 2px;
z-index: 2;
}

http://pixlomat.com/Image11.png
http://pixlomat.com/header.jpg

vielleicht hilft's ja?!
Beitrag melden

−1
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

jens: DIV positionierung