jquery / fancybox

[helga]

Hallo,

bei der Fancybox oder auch Lightbox werden doch die Bilder über der Webseite mit grauen Hintergrund angezeigt. Dabei kann man normal unter dem Bild noch den Titel setzen lassen. Nun möchte ich aber nicht den Titel, sondern einen mehrzeiligen Text unterhalb dieses Bildes setzen.
Nun wird mir der Text aber innerhalb der Box des Bildes angezeigt und nicht drunter.

hier mal ein Screen: http://www.engelbrecht-pc.de/Unbenannt-2.png

die Ausgabe des HTML-Codes wird komplett in der JS gemacht, sodass ich da leider kein Einfluß drauf habe.

Hier mal der ausgegebene html-Code:

Code: Alles auswählen

<div id="fancy_outer" style="left: 364px; top: 573px; width: 660px; height: 500px; display: block;">
   <div id="fancy_inner">
      <div style="display: block;" id="fancy_close"></div>
      <div id="fancy_bg">
         <div class="fancy_bg fancy_bg_n"></div>
     
         <a style="display: none;" href="javascript:;" id="fancy_left"><span class="fancy_ico" id="fancy_left_ico"></span></a>
         <a style="display: block;" href="javascript:;" id="fancy_right"><span class="fancy_ico" id="fancy_right_ico"></span></a>
     
         <div style="top: 10px; right: 10px; bottom: 10px; left: 10px; width: auto; height: auto;" id="fancy_content">
     
            <img alt="" id="fancy_img" src="http://www.engelbrecht-pc.de/index.php?rex_resize=700a__10_einbau_2.gif"></div>
            <div style="display: block;" id="fancy_title">
               <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                     <tr>
                        <td class="fancy_title" id="fancy_title_left"></td>
                        <td class="fancy_title" id="fancy_title_main">
                           <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
<br>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
<br>Testbeschreibung 
                           </div>
                        </td>
                        <td class="fancy_title" id="fancy_title_right"></td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>

und der CSS-Code für den Text dadrunter:

Code: Alles auswählen

div#fancy_title {
	position: absolute;
	bottom: 0px;	
	z-index: 100;
	display: none;
	margin: 0 auto;
   overflow: visible;
   width: 90%;
}

div#fancy_title div {
	color: #FFF;
	font: bold 12px Arial;
	padding-bottom: 3px;
	}

div#fancy_title table {
	margin: 0 auto;
}

div#fancy_title table td {
	padding: 0;
	vertical-align: middle;
}

wie bkomme ich das per CSS hin, dass der Text immer drunter anfängt?

[Cheffchen]

Hallo,

da geht halt nur mit CSS siehe Bild.
Leider gibt es da halt Probleme wenn das Bild zu groß oder Bildschirm zu klein ist bei mehr Text. Man kan nicht scrollen da das Bild sich immer mittig Ausrichtet und bei dein genanten Funktionen Lightbox und konsorten passt sich das Bild nicht an der große des Bildschirmes/Auflösung an.
[ externes Bild ]
Da Scheint noch generel was nicht zu passen bei dir.
Da sind " wohl einmal zu viel und das sehr oft.

Code: Alles auswählen

alt="D- Line 19" Weiß Pulverbeschichtet"

Cheffchen

[helga]

in deinem Bild wird die Box mit dem text per CSS ausgerichtet indem du dort bottom: 33px; (Orginal) setzt, sodass diese Box 33px unterhalb der Bildbox anfängt und dies ist dann halt auch die untere Kante der Textbox. Vergrößert sich diese box, wird diese nach oben größer und nicht nach unten.

[Thomas.Blum]

Hej,

du müsstest wohl die Höhe des Bildes errechnen und dann dynamisch das CSS für die Ausrichtung des Titel setzen. Heißt du nimmst nicht bottom sondern top: HoeheDesBildespx;

vg Thomas