XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Text in div positionieren (http://xhtmlforum.de/showthread.php?t=61162)

KeithKeith 16.05.2010 21:16

Text in div positionieren
 
Hallo Ihr freundlichen Helferlein,
leider komme ich mit meiner Bildergalerie nicht weiter.
Ich kann den Text im div-container nicht unten positionieren.
die kleinen bilder sind die navigation, sobald die maus drauf kommt, "öffnet" sich das hauptbild und der dazu gehörende Text, allerdings eben oben und nicht unten.
hat da jemand eine idee ?
HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>

  <style type="text/css">
      <!--
    .galerie{
        font-size:1em;
        width:730px;
        height: 700px;
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    border:1px;
    }
    .pic-navi{
        padding:0px 0px 0px 0px;
        width:750px;
            height:600px;
        float:left;
                border:1px;
    }
    .pic-navi a img{
      width:90px;
          height:70px;
      padding:0px 0px 0px 0px;
      margin:0px 0px 0px 0px;
      border:0px;

    }
    .pic-navi a:hover img{
      border:0px;
    }
    div.pic-navi a{
      padding:0px 0px 0px 0px;
      margin:0px 0px 0px 0px;
          border:0px;
    }
    div.pic-navi a span {
      display: none;
      color:#ff0000;
      background:#efefef;
          border:0px;
    }

  div.pic-navi a:hover span{
      display: block;
      position: absolute;
          width:489px;       
          height:389px;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      z-index: 100;
      border:1px solid #000000; 

      /* aussehen der box */
      color: #000000;
      font: 0.92em verdana, sans-serif;
      text-align: left;
          border:1px solid #000000;
          left: 8px;
      top: 88px;
          padding:0px 0px 0px 0px;
      margin:0px 0px 0px 0px;

      /* position des hintergrund */
      background-color:#ffffff;
      background-position: 0px 0px;
      background-repeat: no-repeat;
  }
  a#pic1:hover span{background-image:url(kat1_gfx/Bild1.jpg);}
  a#pic2:hover span{background-image:url(kat1_gfx/Bild2.jpg);}
  a#pic3:hover span{background-image:url(kat1_gfx/Bild3.jpg);}
  a#pic4:hover span{background-image:url(kat1_gfx/Bild4.jpg);}
  a#pic5:hover span{background-image:url(kat1_gfx/Bild5.jpg);}
  a#pic6:hover span{background-image:url(kat1_gfx/Bild6.jpg);}
  a#pic7:hover span{background-image:url(kat1_gfx/Bild7.jpg);}

  div.pic-navi a:hover span strong{
      background:url(kat1_gfx/Bild1_th.jpg) no-repeat;
      width: 290px;
      padding: 194px 15px 9px 0px;
      margin:-203px 0 0 -1px;
      display:block;
      font-weight:normal;}

    div.helloworld{
        position: absolute;
        width:489px;       
        height:389px;
        margin:0px 0px 0 0;
        padding:0px 0px 0px 0px;
        color:#858445;
        background:#f6f6f6 url(kat1_gfx/Bild1.jpg) no-repeat 0px 0px;
        border:1px solid #000000;
          left: 8px;
      top: 88px;

    }
    #content div.helloworld p{
      padding:0;
      font: 0.85em verdana, sans-serif;
      text-align: left;
         
    }

    #content p.subtitle{
        font-size:0.85em;
        }

    /** [ right **/
    #galerie-right .pic-navi{
        width:90px;
        float:right;
        margin-left:0px;
    }
    #galerie-right .pic-navi div.helloworld{
        float:left;
        margin:0px 0px 0 0;
    }
    #galerie-right div.pic-navi a:hover span{
      padding: 213px 15px 6px 20px;
      margin: 0px 0 0 -380px;
    }
    #galerie-right div.helloworld{
      background: #f6f6f6 url(kat1_gfx/Bild1.jpg) no-repeat 0px 0px;
    }
       
      -->

  </style>

</head>

<body>
  <div class="galerie">
    <div class="pic-navi">
               
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><a id="pic1" href="#">
                  <img src="kat1_gfx/Bild1_th.jpg" alt="" title="" /><span>Text 1</span></a></td>
          <td width="10"></td>
          <td><a id="pic2" href="#">
                  <img src="kat1_gfx/Bild2_th.jpg" alt="" title="" /><span>Text 2</span></a></td>
          <td width="10"></td>
          <td><a id="pic3" href="#">
                  <img src="kat1_gfx/Bild3_th.jpg" alt="" title="" /><span>Text 3</span></a></td>
          <td width="10"></td>
          <td><a id="pic4" href="#">
                  <img src="kat1_gfx/Bild4_th.jpg" alt="" title="" /><span>Text 4</span></a></td>
          <td width="10"></td>
          <td><a id="pic5" href="#">
                  <img src="kat1_gfx/Bild5_th.jpg" alt="" title="" /><span>Text 5</span></a></td>
          <td width="10"></td>
          <td><a id="pic6" href="#">
                  <img src="kat1_gfx/Bild6_th.jpg" alt="" title="" /><span>Text 6</span></a></td>
          <td width="10"></td>
          <td><a id="pic7" href="#">
                  <img src="kat1_gfx/Bild7_th.jpg" alt="" title="" /><span>Text 7</span></a></td>
        </tr>
        <tr>
          <td height="10" colspan="13"></td>
        </tr>
        <tr>
          <td colspan="9" rowspan="9" ><div class="helloworld"><span class="bottom">Text 1</span></div></td>
          <td rowspan="9"></td>
          <td><a id="pic8" href="#"><img src="kat1_gfx/Bild8_th.jpg" alt="" title="" /><span>Text 8</span></a></td>
          <td></td>
          <td><a id="pic9" href="#"><img src="kat1_gfx/Bild9_th.jpg" alt="" title="" /><span>Text 9</span></a></td>
        </tr>
        <tr>
          <td height="10" colspan="3"></td>
        </tr>
        <tr>
          <td><a id="pic10" href="#"><img src="kat1_gfx/Bild10_th.jpg" alt="" title="" /><span>Text 10</span></a></td>
          <td></td>
          <td><a id="pic11" href="#"><img src="kat1_gfx/Bild11_th.jpg" alt="" title="" /><span>Text 11</span></a></td>
        </tr>
        <tr>
          <td height="10" colspan="3"></td>
        </tr>
        <tr>
          <td><a id="pic12" href="#"><img src="kat1_gfx/Bild12_th.jpg" alt="" title="" /><span>Text 12</span></a></td>
          <td></td>
          <td><a id="pic13" href="#"><img src="kat1_gfx/Bild13_th.jpg" alt="" title="" /><span>Text 13</span></a></td>
        </tr>
        <tr>
          <td height="10" colspan="3"></td>
        </tr>
        <tr>
          <td><a id="pic14" href="#"><img src="kat1_gfx/Bild14_th.jpg" alt="" title="" /><span>Text 14</span></a></td>
          <td></td>
          <td><a id="pic15" href="#"><img src="kat1_gfx/Bild15_th.jpg" alt="" title="" /><span>Text 15</span></a></td>
        </tr>
        <tr>
          <td height="10" colspan="3"></td>
        </tr>
        <tr>
          <td><a id="pic16" href="#"><img src="kat1_gfx/Bild16_th.jpg" alt="" title="" /><span>Text 16</span></a></td>
          <td></td>
          <td><a id="pic17" href="#"><img src="kat1_gfx/Bild17_th.jpg" alt="" title="" /><span>Text 17</span></a></td>
        </tr>
        <tr>
          <td height="10" colspan="13"></td>
        </tr>
        <tr>
          <td><a id="pic18" href="#"><img src="kat1_gfx/Bild18_th.jpg" alt="" title="" /><span>Text 18</span></a></td>
          <td></td>
          <td><a id="pic19" href="#"><img src="kat1_gfx/Bild19_th.jpg" alt="" title="" /><span>Text 19</span></a></td>
          <td></td>
          <td><a id="pic20" href="#"><img src="kat1_gfx/Bild20_th.jpg" alt="" title="" /><span>Text 20</span></a></td>
          <td></td>
          <td><a id="pic21" href="#"><img src="kat1_gfx/Bild21_th.jpg" alt="" title="" /><span>Text 21</span></a></td>
          <td></td>
          <td><a id="pic22" href="#"><img src="kat22_gfx/Bild1_th.jpg" alt="" title="" /><span>Text 22</span></a></td>
          <td></td>
          <td><a id="pic23" href="#"><img src="kat1_gfx/Bild23_th.jpg" alt="" title="" /><span>Text 23</span></a></td>
          <td></td>
          <td><a id="pic24" href="#"><img src="kat1_gfx/Bild24_th.jpg" alt="" title="" /><span>Text 24</span></a></td>
        </tr>
      </table>
</div>
      <br style="clear:both;" />
          </div>
</body>
</html>

LG Keith

KeithKeith 16.05.2010 22:37

Hab's mal bisschen gekürzt.
HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>

  <style type="text/css">
      <!--

    .pic-navi{
        padding:0px 0px 0px 0px;
        width:750px;
            height:600px;
        float:left;
                border:1px;
    }
    .pic-navi a img{
      width:90px;
          height:70px;
      padding:0px 0px 0px 0px;
      margin:0px 0px 0px 0px;
      border:0px;

    }
    .pic-navi a:hover img{
      border:0px;
    }
    div.pic-navi a{
      padding:0px 0px 0px 0px;
      margin:0px 0px 0px 0px;
          border:0px;
    }
    div.pic-navi a span {
      display: none;
      color:#ff0000;
      background:#efefef;
          border:0px;
    }

  div.pic-navi a:hover span{
      display: block;
      position: absolute;
          width:489px;       
          height:389px;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      z-index: 100;
      border:1px solid #000000; 
      color: #000000;
      font: 0.92em verdana, sans-serif;
      text-align: left;
          border:1px solid #000000;
          left: 8px;
      top: 88px;
          padding:0px 0px 0px 0px;
      margin:0px 0px 0px 0px;
      background-color:#ffffff;
      background-position: 0px 0px;
      background-repeat: no-repeat;
  }
  a#pic1:hover span{background-image:url(kat1_gfx/Bild1.jpg);}
  a#pic2:hover span{background-image:url(kat1_gfx/Bild2.jpg);}
  a#pic3:hover span{background-image:url(kat1_gfx/Bild3.jpg);}
  a#pic4:hover span{background-image:url(kat1_gfx/Bild4.jpg);}
  a#pic5:hover span{background-image:url(kat1_gfx/Bild5.jpg);}
  a#pic6:hover span{background-image:url(kat1_gfx/Bild6.jpg);}
  a#pic7:hover span{background-image:url(kat1_gfx/Bild7.jpg);}

    div.helloworld{
        position: absolute;
        width:489px;       
        height:389px;
        margin:0px 0px 0 0;
        padding:0px 0px 0px 0px;
        color:#858445;
        background:#f6f6f6 url(kat1_gfx/Bild1.jpg) no-repeat 0px 0px;
        border:1px solid #000000;
        left: 8px;
    top: 88px;

    }
    #content p.subtitle{
        font-size:0.85em;
        }
      -->

  </style>

</head>
<body>

    <div class="pic-navi">
               
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><a id="pic1" href="#">
                  <img src="kat1_gfx/Bild1_th.jpg" alt="" title="" /><span>Text 1</span></a></td>
        </tr>
      </table>
</div>

</body>
</html>



Alle Zeitangaben in WEZ +2. Es ist jetzt 12:50 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023