zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Text in div positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.05.2010, 21:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.05.2010
Beiträge: 3
KeithKeith befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.05.2010, 22:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.05.2010
Beiträge: 3
KeithKeith befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Floats verschwinden im nichts, Fließer überdecken Floats. nick CSS 5 09.02.2008 15:34
Text Position barca CSS 14 10.05.2006 12:25
Probleme mit Abständen zwischen div´s.... darvida CSS 4 09.07.2005 19:48
layout ohne tabellen rw597678 CSS 3 23.04.2005 13:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:00 Uhr.