Clearbox Lightbox, text alignment

Hi experts!
I have this problem I need some help with.
I want my text below the pictures which works fine, but as soon as I add more thumbnails and get multiple rows the textbox doesnt follow, but stays put, so it shows on top of the thumbnails.
I would really like the textbox to follow the boundary of the thumbnailbox
Sorry for my non-webdeveloper lingo
Would really appreciate your help folks!
/Matt

To add to Murray's response which will remove the fixed position, your text will appear to the right of your images. To make it appear below all images (like in your working page), add this line before <div id="inline">:
<div style="clear: both;"></div>
This will clear floats for your image thumbnail container thereby pushing the inline text below it.

Similar Messages

Clearbox Lightbox Problem

i'm using clearbox lightbox widget as my websites photo gallery, but an issue arises when it comes to displaying the images and that is, the hidden layer doesnot cover up the whole page

html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Okwea ~ Projects</title>
<link rel="icon" type="image/png" href="images/okwea.ico">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/flexslider.css" rel="stylesheet" type="text/css">
<style>
@import url("modernpics/stylesheet.css");
@import url("Impact_Label_Reversed/stylesheet.css");
@import url("webfonts/AlexBrush_Regular_OTF/stylesheet.css");
</style>
<script src="js/modernizr-2.5.2-respond-1.1.0.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/clearbox.js" type="text/javascript"></script>
<script type="text/xml">

</script>
<style type="text/css">
/* BeginOAWidget_Instance_2648024: #OAWidget */
.container {
    width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 11px;
      .item a img {
    float: left;
    padding: 3px;
    background-color: #FFF;
    margin: 5px;
    border: 1px solid #cccccc;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: .8;
      .item a:hover img, .item a:active img {
    padding: 3px;
    border: 1px solid #cccccc;
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.80;
    opacity: 1;
      .clearfix:after{
      clear:both;
      #inline{
      visibility: hidden;
      color:#444;
/* EndOAWidget_Instance_2648024 */
</style>
</head>
<body id="projects">
<div class="wrapper">
<header>
<table width="100%">
      <tr>
        <td><img src="images/okwea logo.png" alt="logo" width="247" height="140" class="animated bounceInRight"></td>
        <td><img src="images/ban2.jpg" alt="logo" width="735"></td>
      </tr>
    </table>
<table width="100%" border="0">
<tr height="50px">
    <td width="15%" style="padding:5px; "><a href="index.html" class="menu" id="nav-home">Home</a></td>
    <td width="19%" style="padding:5px; "><a href="company.html" class="menu" id="nav-company">Company Profile</a></td>
    <td width="17%" style="padding:5px; "><a href="projects.html" class="menu" id="nav-projects">Projects</a></td>
    <td width="14%" style="padding:5px; "><a href="about.html" class="menu" id="nav-about">About Us</a></td>
    <td width="17%" style="padding:5px;" ><a href="contact.html" class="menu" id="nav-contact">Contact Us</a></td>
    </tr>
</table>
<br>
</header>
<div class="content">
<table width="100%" cellspacing="20px">
<tr>
    <td colspan="2"><h1>Okwea Projects</h1></td>
    </tr>
<tr>
    <td width="50%" style=" box-shadow: 0px 1px 10px 1px rgba(102,102,102,1); text-align:left; padding-left:10px;"><p style="font-size:16px; text-decoration:underline;">Renovation and Roofing White Sands Hotel - Malindi
      <script type="text/javascript">
// BeginOAWidget_Instance_2648024: #OAWidget
      //     ClearBox Config File (JavaScript)
      var
      // CB layout:
      CB_MinWidth=300,                // minimum (only at images) or initial width of CB window
      CB_MinHeight=300,                // initial heigth of CB window
      CB_WinPadd=15,                    // padding of the CB window from sides of the browser
      CB_ImgBorder=3,                    // border size around the picture in CB window
      CB_ImgBorderColor='#FFF',            // border color around the picture in CB window
      CB_Padd=4,                    // padding around inside the CB window
      CB_BodyMarginLeft=0,                //
      CB_BodyMarginRight=0,                // if you set margin to <body>,
      CB_BodyMarginTop=0,                // please change these settings!
      CB_BodyMarginBottom=0,                //
      CB_ShowThumbnails='auto',            // it tells CB how to show the thumbnails ('auto', 'always' or 'off') thumbnails are only in picture-mode!
      CB_ThumbsBGColor='#000',            // color of the thumbnail layer
      CB_ThumbsBGOpacity=.35,                // opacity of the thumbnail layer
      CB_ActThumbOpacity=.65,                // thumbnail opacity of the current viewed image
      CB_SlideShowBarColor='#FFF',            // color of the slideshow bar
      CB_SlideShowBarOpacity=.60,            // opacity of the slideshow bar
      CB_SlideShowBarPadd=17,                // padding of the slideshow bar (left and right)
      CB_SlideShowBarTop=2,                // position of the slideshow bar from the top of the picture
      CB_SimpleDesign='off',                // if it's 'on', CB doesn't show the frame but only the content - really nice
      CB_CloseBtnTop=-10,                // vertical position of the close button in picture mode
      CB_CloseBtnRight=-14,                // horizontal position of the close button in picture mode
      CB_CloseBtn2Top=-20,                // vertical position of the close button in content mode
      CB_CloseBtn2Right=-30,                // horizontal position of the close button in content mode
      CB_OSD='off',                    // turns on OSD
      CB_OSDShowReady='off',                // when clearbox is loaded and ready, it shows an OSD message
      // CB font, text and navigation (at the bottom of CB window) settings:
      CB_FontT='Verdana',                //
      CB_FontSizeT=13,                // these variables are referring to the title or caption line
      CB_FontColorT='#777',                //
      CB_FontWeightT='normal',            //
      CB_FontC='arial',                //
      CB_FontSizeC=11,                // these variables are referring to
      CB_FontColorC='#999',                // comment lines under the title
      CB_FontWeightC='normal',            //
      CB_TextAlignC='justify',            //
      CB_txtHCMax=120,                // maximum height of the comment box in pixels
      CB_FontG='arial',                //
      CB_FontSizeG=11,                // these variables are referring to the gallery name
      CB_FontColorG='normal',                //
      CB_FontWeightG='@@CB_FontWeightG@@',            //
      CB_PadT=10,                    // space in pixels between the content and the title or caption line
      CB_OuterNavigation='off',            // turns outer navigation panel on
      CB_ShowURL='off',                // it shows the url of the content if no title or caption is given
      CB_ItemNum='on',                // it shows the ordinal number of the content in galleries
      CB_ItemNumBracket='()',                // whatever you want
      CB_ShowGalName='',                // it shows gallery name
      CB_TextNav='on',                // it shows previous and next navigation
      CB_NavTextImgPrvNxt='on',            // it shows previous and next buttons instead of text
      CB_ShowDL='on',                    // it shows download controls
      CB_NavTextImgDL='on',                // it shows download buttons instead of text
      CB_ImgRotation='on',                // it shows the image rotation controls
      CB_NavTextImgRot='on',                // it shows the image rotation buttons instead of text
      // Settings of the document-hiding layer:
      CB_HideColor='#000',                // color of the layer
      CB_HideOpacity=.8,                // opacity (0 is invisible, 1 is 100% color) of the layer
      CB_HideOpacitySpeed=400,            // speed of fading
      CB_CloseOnH='on',                // CB will close, if you click on background
      // CB animation settings:
      CB_Animation='double',                // 'double', 'normal', 'off', 'grow', 'growinout' or 'warp' (high cpu usage)
      CB_ImgOpacitySpeed=300,                // speed of content fading (in ms)
      CB_TextOpacitySpeed=300,            // speed of text fading under the picture (in ms)
      CB_AnimSpeed=300,                // speed of the resizing animation of CB window (in ms)
      CB_ImgTextFade='on',                // turns on or off the fading of content and text
      CB_FlashHide='on',                // it hides flash animations on the page before CB starts
      CB_SelectsHide='on',                // it hides select boxes on the page before CB starts
      CB_SlShowTime=3000,                // default speed of the slideshow (in sec)
      CB_Preload='on',                // preload neighbour pictures in galleries
      CB_ShowLoading='on'                //
// EndOAWidget_Instance_2648024
      </script>
    </p>
    <table width="100%" border="0"><tr>
        <td width ="211" valign="middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas,   mauris ut mattis ultricies, magna sapien tempus sem, porta faucibus   nibh quam et orci. Cras congue, odio nec tempus ornare, lacus diam   dignissim arcu, nec mattis mi turpis et risus. Duis ut velit ac nibh   tempus hendrerit. Quisque condimentum, tellus at laoreet viverra, dui   eros congue</td>
        <td colspan="2"valign="top"><div align="right"><img src="images/w2.jpg" width="231" height="203" alt="plan1"></div></td>
      </tr>
      <tr>
        <td width="211" valign="top"> </td>
        <td width="212" valign="top">© Okwea Construction</td>
      </tr>
    </table>
      <div class="container clearfix">
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Architecture at its peak]" href="images/w1.jpg" title="Dubai"><a rel="clearbox[gallery=Gallery,,comment=Architecture at its peak]" href="images/w1.jpg" title="Dubai"><img class="border" src="thumbs/t1.png" alt="Dancers in Red" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Breath taking]" href="images/w2.jpg" title="Seria"><img class="border" src="thumbs/t2.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w3.jpg" title="Yosemite 1"><img class="border" src="thumbs/t3.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w4.jpg" title="Yosemite 1"><img class="border" src="thumbs/t4.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w5.jpg" title="Yosemite 1"><img class="border" src="thumbs/t5.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w6.jpg" title="Yosemite 1"><img class="border" src="thumbs/t6.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Home away from home]" href="images/w7.jpg" title="Thailad"><img class="border" src="thumbs/t7.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w8.jpg" title="Yosemite 1"><img class="border" src="thumbs/t8.png" alt="" /></a></div>
        </div><br><br></td>
    <td width="50%" style=" box-shadow: 0px 1px 10px 1px rgba(102,102,102,1);text-align:left;"><p style="font-size:16px; text-decoration:underline; ">Nobel Apartments</p>
    <table width="100%" border="0"><tr>
        <td width ="211" valign="middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas,   mauris ut mattis ultricies, magna sapien tempus sem, porta faucibus   nibh quam et orci. Cras congue, odio nec tempus ornare, lacus diam   dignissim arcu, nec mattis mi turpis et risus. Duis ut velit ac nibh   tempus hendrerit. Quisque condimentum, tellus at laoreet viverra, dui   eros congue</td>
        <td colspan="2"valign="top"><div align="right"><img src="images/w2.jpg" width="231" height="203" alt="plan1"></div></td>
      </tr>
      <tr>
        <td width="211" valign="top"> </td>
        <td width="212" valign="top">© Okwea Construction</td>
      </tr>
    </table>
    <div class="container clearfix">
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Architecture at its peak]" href="images/w1.jpg" title="Dubai"><a rel="clearbox[gallery=Gallery,,comment=Architecture at its peak]" href="images/w1.jpg" title="Dubai"><img class="border" src="thumbs/t1.png" alt="Dancers in Red" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Breath taking]" href="images/w2.jpg" title="Seria"><img class="border" src="thumbs/t2.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w3.jpg" title="Yosemite 1"><img class="border" src="thumbs/t3.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w4.jpg" title="Yosemite 1"><img class="border" src="thumbs/t4.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w5.jpg" title="Yosemite 1"><img class="border" src="thumbs/t5.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w6.jpg" title="Yosemite 1"><img class="border" src="thumbs/t6.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Home away from home]" href="images/w7.jpg" title="Thailad"><img class="border" src="thumbs/t7.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w8.jpg" title="Yosemite 1"><img class="border" src="thumbs/t8.png" alt="" /></a></div>
        </div><br><br></td>
</tr>
<tr>
    <td style=" box-shadow: 0px 1px 10px 1px rgba(102,102,102,1); text-align:left; padding-left:10px">
      <p style="font-size:16px; text-decoration:underline;">Kentan Patek Residence House Plans</p>
      <table width="100%" border="0"><tr>
        <td width ="211" valign="middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas,   mauris ut mattis ultricies, magna sapien tempus sem, porta faucibus   nibh quam et orci. Cras congue, odio nec tempus ornare, lacus diam   dignissim arcu, nec mattis mi turpis et risus. Duis ut velit ac nibh   tempus hendrerit. Quisque condimentum, tellus at laoreet viverra, dui   eros congue</td>
        <td colspan="2"valign="top"><div align="right"><img src="images/w2.jpg" width="231" height="203" alt="plan1"></div></td>
      </tr>
      <tr>
        <td width="211" valign="top"> </td>
        <td width="212" valign="top">© Okwea Construction</td>
      </tr>
    </table></td>
    <td style=" box-shadow: 0px 1px 10px 1px rgba(102,102,102,1);"><p style="font-size:16px; text-decoration:underline; text-align:left">Mr and Mrs VIdu Semi-Detached House Plans</p>
    <table width="100%" border="0"><tr>
        <td width ="211" valign="middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas,   mauris ut mattis ultricies, magna sapien tempus sem, porta faucibus   nibh quam et orci. Cras congue, odio nec tempus ornare, lacus diam   dignissim arcu, nec mattis mi turpis et risus. Duis ut velit ac nibh   tempus hendrerit. Quisque condimentum, tellus at laoreet viverra, dui   eros congue</td>
        <td colspan="2"valign="top"><div align="right"><img src="images/w2.jpg" width="231" height="203" alt="plan1"></div></td>
      </tr>
      <tr>
        <td width="211" valign="top"> </td>
        <td width="212" valign="top">© Okwea Construction</td>
      </tr>
    </table></td>
</tr>
<tr>
    <td colspan="2" style="padding:20px">
    <table width="100%">
<tr>
    <td bgcolor="#fff"; style="border-radius:7px; padding:20px; padding-top:0px; text-align:left;box-shadow: 0px 1px 10px 1px rgba(102,102,102,1);"><h1>On-going Projects</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit   amet sollicitudin ipsum. Nulla malesuada vehicula purus, in cursus ante   accumsan sit amet. Aliquam tristique, lectus et ullamcorper pretium,   ipsum leo volutpat urna, fringilla dictum diam est nec enim. Maecenas   sollicitudin lobortis consequat. </p>
        <p>Quisque placerat aliquam luctus. Cras   dapibus, nulla sed scelerisque lobortis, purus velit faucibus libero,   vel consequat quam sem vitae turpis. Maecenas nec quam tortor. Proin   ornare sapien vitae tortor laoreet interdum. Aenean rutrum scelerisque   eros sit amet tristique. Sed congue sagittis lectus ac blandit. </p>
        <p>Vivamus   leo libero, vulputate non aliquet at, mattis eu est. Nunc ac turpis   dolor, vel congue magna. Sed eu velit nisi. </p></td>
</tr>
</table>
</td>
</tr>
<tr>
    <td colspan="2"> </td>
</tr>
</table>
</div>
</div>
<footer>
<table width="100%" height="90%" cellpadding="7px">
<tr style="font-family:13px; background-color:#373737; color:rgba(255,198,43,1);">
    <td width="27%" height="43" style="border-radius:7px; border:solid 0.2em #8b5e3b; ">CONTACT INFO</td>
    <td width="37%" style=" color:#ffeebf; border-radius:7px; background-color:#8b5e3b; border:solid 0.2em rgba(255,198,43,1);"> SOCIAL MEDIA</td>
    <td width="36%" style="border-radius:7px; border:solid 0.2em #8b5e3b;">ABOUT US</td>
</tr>
<tr style="font-size: 13px; font-family: Tahoma, Geneva, sans-serif;">
    <td valign="top" ><p><strong>Our Location</strong>:<br>
      Athi river<br>
Mavoco Municipal council</p>
      <p><strong>Address:</strong><br>
        Okwea Construction Comany<br>
        P.O. Box 550- 50400<br>
        Nairobi</p>
      <p><strong>Telephone:</strong><br>
        + 254 720 306 346</p>
      <p>
+ 254 721 400 433</p>
      <p> </p></td>
    <td style="border-left: 1px solid #8b5e3b; ; border-right: 1px solid #8b5e3b; );font-family: Tahoma, Geneva, sans-serif;"><table width="100%">
      <tr>
        <td align="right"><span class="icons">G</span></td>
        <td align="left">[email protected]</td>
      </tr>
      <tr>
        <td align="right"><span class="icons">t</span></td>
        <td align="left">#[email protected]</td>
      </tr>
    </table><form name="form2" method="post" action="">
      <label for="news"><b>Sign up for the Newsletter</b></label>
     <br><br>
      <input type="text" name="news" id="news" placeholder="Email">
<input type="submit" name="button2" id="button2" value="m" class="buttons" >
    </form></p>
    <p><b>Email Us</b></p>
    <p><span class="icons" style="font-size:18px">V</span>[email protected]</p>
    </td>
    <td valign="top"><p>OKWEA CONSTRUCTION CO.LTD is an accomplished, experienced and highly geared Civil Engineering establishment.
The company delivers a full scope of Civil Engineering works on several sites at any given time.      </p>
      <p>We operate both as the principal contractor for projects both in the private and public sector with an extensive client base ranging from international donor organizations, city councils, local authorities, developers and national and international airports.</p>
      <p>Additionally, the company is fully facilitated to operate several projects simultaneously, even if sites are geographically located far apart from each one another. </p></td>
</tr>
</table></footer>
</body>
</html>
main. css
body, html{
    height:100%;
    margin:0;
    text-align:center;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    background:#ffc62c;
.wrapper{
     left:10%;
     min-height:100%;
     width:80%;
     text-align:center;
     margin-left:auto;
     margin-right:auto;
header{
    padding-top: 25px;
    height:200px;
    background-color:#fff;
    display: block;
    box-shadow: 0px 1px 10px 1px rgba(102,102,102,1);
.content{
    padding-bottom: 330px;
    background-color:#fff;
    box-shadow: 0px 1px 10px 1px rgba(102,102,102,1);
    padding-top: 20px;
footer{
    height: 330px;
    width: 100%;
    background: #f0f0f0;
    margin-top: -330px;
    display: block;
    width: 80%;
    left: 10%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    box-shadow: 0px 1px 10px 1px rgba(102,102,102,1);
    border-radius: 7px 7px 0px 0px;
a.menu {
    display: block;
    width: auto;
    height: auto;
    text-align: center;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    cursor: pointer;
    text-wrap: none;
    background:#373737;
    border-radius: 7px;
    color: #ffc62c;
    line-height: 180%;
a.menu:hover {
    border-radius:7px;
    color:#000000;
    background-color:#ffc62c;
    border:solid #000000 0.2em;
    font-size:larger;
.buttons{
    font-family:modernpics;
    font-size:18px;
    cursor:pointer;
    color:#8b5e3b;
.buttons:hover{
    color:#000000;
.icons{
    font-family:modernpics;
    font-size:50px;
    color:#8b5e3b;
h1,h2,h3,h4,h5,h6 {
    font-family:"Impact Label Reversed";
h1 {
    font-size: 30px;
    color:#8b5e3b;
    text-decoration:underline;
body#home a#nav-home,
body#company a#nav-company,
body#projects a#nav-projects,
body#about a#nav-about,
body#contact a#nav-contact
    background:#ffc62c;
    color:rgba(0,0,0,1);
    border:solid #000000 0.2em;

Clearbox Lightbox - Turn of Slideshow?

Hi, I've used clearbox with some modifications to style a gallery - however the client wants to turn the slideshow function off and just have the images enlarge on click.
I thought I had got round this by simple making the slideshow button transparent so the user cannot cick on it and turning off the previous and next function - however I've just discovered that if I move the scroll wheel on my mouse the images start scrolling from one to the next - and the client specifically does not want this.
You can see what I mean here
http://www.creativeclout.co.uk/our_work.html
Can anyone help?
Thanks
Connie

Image maps, yuck!
Try this: I'll let you figure out the math. This is just a rough layout.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2</title>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
     margin:0;
     padding:0;
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
section {
     width:894px; /**adjust as needed**/
     margin:0 auto;
     display:table;
/**this styles image container**/
#thumbs p {
     display:table-cell;
     width: auto;
     height: auto;
     vertical-align:middle;
     border:1px solid red;
     text-align:center;
     opacity:0.7;
#thumbs p:hover {opacity:1.0}
</style>
</head>
<body>
<div id="thumbs">
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer with images</h1>

<section>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/179x225.jpg" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/179x225.jpg" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/179x225.jpg" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/322x200.jpg" alt="" /></a>
</p>
</section>
<section>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/268x200.jpg" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/268x200" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/179x225" alt="Thumbnail 6" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/179x225" alt="Thumbnail 6" /></a>
</p>
</section>
<section>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/268x200.jpg" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/268x200" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/179x225" alt="Thumbnail 6" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/179x225" alt="Thumbnail 6" /></a>
</p>
</section>

</div>

<script>
$(document).ready(function() {
    $('.fancybox').fancybox();
</script>
</body>
</html>
Nancy O.

Text alignment "Justify" is not aligned in Crystal Viewer.

Hi,
I am having a text field in report like paragraph format in Detail section and I have setting the text alignment as u201CJustifyu201D. If I launch the report through dhtml viewer the text is not aligned in justify format, it is getting aligned as left alignment, but it is working properly while exporting to PDF and Design Preview panel.
This problem is occurs in Crystal Report XI Release 2 and Crystal Report 2008 also.
This has been already posted and the link is Text Alignment - Justification Problem
Please help me to overcome this issue.
Thanks in Advance.

With CR 2008, make sure you are on SP4:
SP4
https://smpdl.sap-ag.de/~sapidp/012002523100008782452011E/cr2008sp4.exe
SP4 MSI
https://smpdl.sap-ag.de/~sapidp/012002523100008782532011E/cr2008sp4_redist.zip
SP4 MSM
https://smpdl.sap-ag.de/~sapidp/012002523100008782522011E/cr2008sp4_mm.zip
If that does not help, please provide a link to screen shots of the issue.
Ludek
Follow us on Twitter http://twitter.com/SAPCRNetSup
Got Enhancement ideas? Try the [SAP Idea Place|https://ideas.sap.com/community/products_and_solutions/crystalreports]

How to change the text alignment of an adf table column

Hi everyone
I have a read only adf table that uses banding. What I want to do is change the text align property of one of it's columns but the task seems not at all trivial.
I tried entering a value for the text-align property in the inline style of the specific af:column tag and failed. I then tried to do the same for the af:outputText element inside the column but still nothing worked. I even created a css style and changed the StyleClass attribute on each or both elements without any luck.
Can anybody shed some light here ...
Thanassis

Specify the text-align in a css.
Re: styling column headers in adf table

JTable text alignment issues when using JPanel as custom TableCellRenderer

Hi there,
I'm having some difficulty with text alignment/border issues when using a custom TableCellRenderer. I'm using a JPanel with GroupLayout (although I've also tried others like FlowLayout), and I can't seem to get label text within the JPanel to align properly with the other cells in the table. The text inside my 'panel' cell is shifted downward. If I use the code from the DefaultTableCellRenderer to set the border when the cell receives focus, the problem gets worse as the text shifts when the new border is applied to the panel upon cell selection. Here's an SSCCE to demonstrate:
import java.awt.Color;
import java.awt.Component;
import java.awt.EventQueue;
import javax.swing.GroupLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTable;
import javax.swing.border.Border;
import javax.swing.table.TableCellRenderer;
import javax.swing.table.TableColumn;
import sun.swing.DefaultLookup;
public class TableCellPanelTest extends JFrame {
private class PanelRenderer extends JPanel implements TableCellRenderer {
    private JLabel label = new JLabel();
    public PanelRenderer() {
      GroupLayout layout = new GroupLayout(this);
      layout.setHorizontalGroup(layout.createParallelGroup().addComponent(label));
      layout.setVerticalGroup(layout.createParallelGroup().addComponent(label));
      setLayout(layout);
    public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFocus, int row, int column) {
      if (isSelected) {
        setBackground(table.getSelectionBackground());
      } else {
        setBackground(table.getBackground());
      // Border section taken from DefaultTableCellRenderer
      if (hasFocus) {
        Border border = null;
        if (isSelected) {
          border = DefaultLookup.getBorder(this, ui, "Table.focusSelectedCellHighlightBorder");
        if (border == null) {
          border = DefaultLookup.getBorder(this, ui, "Table.focusCellHighlightBorder");
        setBorder(border);
        if (!isSelected && table.isCellEditable(row, column)) {
          Color col;
          col = DefaultLookup.getColor(this, ui, "Table.focusCellForeground");
          if (col != null) {
            super.setForeground(col);
          col = DefaultLookup.getColor(this, ui, "Table.focusCellBackground");
          if (col != null) {
            super.setBackground(col);
      } else {
        setBorder(null /*getNoFocusBorder()*/);
      // Set up our label
      label.setText(value.toString());
      label.setFont(table.getFont());
      return this;
public TableCellPanelTest() {
    JTable table = new JTable(new Integer[][]{{1, 2, 3}, {4, 5, 6}}, new String[]{"A", "B", "C"});
    // set up a custom renderer on the first column
    TableColumn firstColumn = table.getColumnModel().getColumn(0);
    firstColumn.setCellRenderer(new PanelRenderer());
    getContentPane().add(table);
    pack();
public static void main(String[] args) {
    EventQueue.invokeLater(new Runnable() {
      public void run() {
        new TableCellPanelTest().setVisible(true);
}There are basically two problems:
1) When first run, the text in the custom renderer column is shifted downward slightly.
2) Once a cell in the column is selected, it shifts down even farther.
I'd really appreciate any help in figuring out what's up!
Thanks!

1) LayoutManagers need to take the border into account so the label is placed at (1,1) while labels just start at (0,0) of the cell rect. Also the layout manager tend not to shrink component below their minimum size. Setting the labels minimum size to (0,0) seems to get the same effect in your example. Doing the same for maximum size helps if you set the row height for the JTable larger. Easier might be to use BorderLayout which ignores min/max for center (and min/max height for west/east, etc).
2) DefaultTableCellRenderer uses a 1px border if the UI no focus border is null, you don't.
3) Include a setDefaultCloseOperation is a SSCCE please. I think I've got a hunderd test programs running now :P.

Hyphenation & text-align:justify in PDF's with CFDOCUMENT

Hello everybody!
We are using CF8.1 and are having problems of generating well designed PDF outputs with CFDOCUMENT. We would like to print out reports, which are hyphenated and have the text aligned. Example:
This works fine:
<html lang="en">
<STYLE>p { width:260px;background-color:blue;-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; -hyphens: auto;text-align:justify}</STYLE>
<P>Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer</P>
</html>
This won't:
<CFDOCUMENT FORMAT="PDF">
<html lang="en">
<STYLE>p { width:260px;background-color:blue;-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; -hyphens: auto;text-align:justify}</STYLE>
<P>Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer</P>
</html>
</CFDOCUMENT>
Do you have any solutions on this topics? Are do I have to wait until CF11.
Thanks in advance
Matthias

4tun8mom wrote:
Now, the problem is that, while the client likes this, they don't like that the headers and footers are grayed out and the colors are not as vibrant in Word as the program part I created and saved as a PDF.
They're being a bit impractical in their complaints, in fact they remind me of my Dad! The final product is still fine.
4tun8mom wrote:
They also don't like that if we keep this as a Word document, all the text is editable.
That's fair enough, the solution would be to make the text in the header and footer an image instead.
4tun8mom wrote:
So my question is, can I create a PDF that has the same features with the expandable text control boxes. If I can, would you recommend InDesign to do this?
No you can't. I'm pretty sure you can't create a PDF with expandable boxes and I'm very sure that you can't create a PDF that will add pages with headers and footrs. However you can create a PDF with basic fillable text boxes, they're called forms and you need Acrobat as well to do it, google it and you'll find plenty of info.

JDeveloper 10.1.3.4: text-align for table column has no effect

Hi,
I am using JDeveloper 10.1.3.4. In a tabe I have a column that displays numbers, which are left-aligned by default:
Applied
$50.00
$2,160.00
$50.00
$2,260.00I want to have them aligned to the right to look neater:
Applied
         $50.00
      $2,160.00
         $50.00
      $2,260.00Or better still, have the cell with the longest string aligned to the center, and all the other cells align to it by the decimal point:
    Applied
      $50.00
   $2,160.00
      $50.00
   $2,260.00I looked in the property inspector and the only thing that looks closest to the purpose is text-align. I set this attribute to right (text-align:right) for the column, and for the outputText, but neither has effect. Everything is still flush to the left. How to get it right?
Thanks!
Newman

Hi, Branislav,
Nice meeting you again.
Last time the question was about formatting the total amount returned from the method, from String to Number, Re: JDeveloper does not handle expert SQL, cannot add query clause in view link, which can also format the number as currency.
This time, your answer again solved my problem. I was looking in the inline styling section, and did not notice this property in the General section. Thank you so much for your help!
Newman

New to CSS, text-align and line-height ok in 'Design', but not in browsers (IE 10 & Chrome) on Win8

[DREAMWEAVER CC]
I'm now learning CSS, and find that where I specify in an external style sheet
h1 {
          font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
          text-align:center;
          color: black;
          font-size: 1em;
          font-weight: normal;
          font-style: normal;
          line-height: 3.0;
          letter-spacing: 0px;
          word-spacing: 10px;
text-shadow: 3px 3px 5px #333;
text-decoration: none ;
text-transform: none;
That, in DW Design, they look fine, but in Windows 8, IE 11 and ChromeVersion 31.0.1650.63 m   that the text-align: center; and the line-height: 3.0; are ignored.
I work around by specifying <tr align="center" height = "77">   shouldn't the text-align: center; and the line-height: 3.0; be specifiable in my CSS??
Thanks for any help!
<tr height="77" align="center">
        <h1>
            <td bgcolor="CornSilk">1/28/2014</td>
            <td>the Sky</td>
            <td>Fate is the Hunter</td>
          <td >Ernest Gann</td>
            <td >John</td>
            <td >Jessica</td>
          <td><a href="http://www.amazon.com/FATE-HUNTER-Ernest-K-Gann/dp/0671636030/ref=sr_1_1?s=books&ie=UTF8&q id=1387462831&sr=1-1&keywords=ernest+gann">Learn More</a></td>
        </h1>
    </tr>

hemmi1 wrote:
[DREAMWEAVER CC]
I'm now learning CSS, and find that where I specify in an external style sheet
Not sure what it is you are trying to do but what you have at the moment is invalid code which is most likely why it doesn't work cross browser. (of cousre this css does not help - line-height: 3.0; - 3.0 what? - px, ems?)
Here's an example below of how you could do it. Give your table a class (below it is called .myTable) then you can start styling the <td> cell, and anything inside it by appending the element like an <h2> tag to the class name - .myTable h2
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
.myTable {
    width: 900px;
    margin: 0 auto;
.myTable td {
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
width: 150px;
.myTable h2 {
    margin: 0;
    padding: 0;
text-align:center;
color: black;
font-size: 1em;
line-height: 50px;
word-spacing: 10px;
text-shadow: 3px 3px 5px #333;
.myTable a {
    display: block;
    text-align: center;
</style>
</head>
<body>
<table class="myTable" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><h2>1/28/2014</h2></td>
<td><h2>the Sky</h2></td>
<td ><h2>Ernest Gann</h2></td>
<td ><h2>John</h2></td>
<td ><h2>Jessica</h2></td>
<td><a href="http://www.amazon.com/FATE-HUNTER-Ernest-K-Gann/dp/0671636030/ref=sr_1 _1?s=books&ie=UTF8&qid=1387462831&sr=1-1&keywords=ernest+gann">Learn More</a></td>
</tr>
</table>
</body>
</html>

Sync Text alignment in HTMLEditor and a PDF generated using FOP

Hi,
How to sync text alignment in HTMLEditor and a PDF generated using FOP ?
I tried setting the dimensions of HTMLEditor and PDF in pixels by calculating the size in Pixels for A4 paper size with a particular dpi value.
Have done the font settings as well. The problem is I see uneven line cuts in the PDF as compared to HTMLEditor.
Thanks.

It's not a realistic expectation. You are expecting the PDF produced by whoever provided your FOP implementation to observe exactly the same typographical rules as HTMLEditor. Basically it won't, and there is no way to enforce it. Line breaking/hyphenation/word spacing algorithms can be of great complexity. You are expecting two systems that aren't specified to agree, to agree.

Spry bar text alignment

I need help with aligning text in main spry bar menu. Using DW 5.5, I have a 7 bank bar and 2 have 2 lines, remainder have 1. I need to BOTTOM align everything. I've look through forums, help menus, and u-tube and can not find this answer.
I would also like to not have fixed widths, but widths varied per text length, but when I do that, obviously the 2 lined text banks turn into one line.

To give you an idea of what I would do, have a look at the following by copying and pasting into a new document.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Therapy To Go Home Page</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
    margin: 0;
    padding: 0;
html {
    background: #FFF;
    height: 100%;
    color: #000;
    font: 100% Verdana, Geneva, sans-serif;
body {
    background: #FFC;
    width: 800px;
    margin: auto;
    font-size: 0.85em;
#header {
    height: 148px;
    background: #C2A4FF;
#nav {
    background: #EEE;
    height: 3.6em;
#aside {
    width: 197px;
    float: left;
    padding: 20px;
#article {
    margin-left: 240px;
    padding: 20px;
    background: #C2A4FF;
ul.MenuBarHorizontal li {
    font-size: 1.05em;
    width: auto;
    text-align: center;
ul.MenuBarHorizontal a {
    background-color: #EEE;
    padding: 0.5em 1.1em;
    color: #333;
</style>
</head>
<body>
<div id="header">
</div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#"><br>Home</a>    </li>
    <li><a href="#"><br>Services</a></li>
    <li><a href="#">Benefits &<br>Contraindications</a></li>
    <li><a href="#">Common <br>Q&A</a></li>
    <li><a href="#"><br>Pricing/Hours</a></li>
    <li><a href="#">Contact/About<br>Melanie</a></li>
    <li><a href="#"><br>Resources</a></li>
</ul>
</div>
<div id="aside">
<h2>This is the sidebar</h2>
</div>
<div id="article">
<h1>This is the main article</h1>
<p>Consectetur adipisicing elit, in reprehenderit in voluptate excepteur sint occaecat. Ullamco laboris nisi ut enim ad minim veniam, velit esse cillum dolore. Mollit anim id est laborum. Sed do eiusmod tempor incididunt qui officia deserunt cupidatat non proident.</p>
<p>Quis nostrud exercitation in reprehenderit in voluptate lorem ipsum dolor sit amet. Ut aliquip ex ea commodo consequat. Velit esse cillum dolore mollit anim id est laborum. Consectetur adipisicing elit.</p>
<p>Ut enim ad minim veniam, ullamco laboris nisi duis aute irure dolor. Eu fugiat nulla pariatur. Qui officia deserunt in reprehenderit in voluptate cupidatat non proident.</p>
</div>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1");
</script>
</body>
</html>
Gramps

Problem with Clearbox Lightbox

Hi Everyone,
I'm using Clearbox Lightbox 2.0. My thumbnails keep "jumping around" when I move the curser over them. Can anyone advise me on how I can get these thumbnails to remain still?
Thanks!

Here's the link to my website.
http://www.labelsnlogos.com/LNL%20portfolio%202.html
Hopefully there is something I can do about the thumbnails moving around.

BUG:text-align:right; inline style not working on read-only af:InputText

Hello,
A bug in how af:InputText works if readonly=true. I have an af:InputText that has "text-align:right;" for the InlineStyle. The inputText is inside of an af:Column in af:Table. If the inputtext is readonly=false, it works properly and renders right-aligned. If readonly=true, then it renders left-aligned. I have also tried setting inlineStyle for the column to text-align:right;, and I get the same behavior.
Regards,
John

John,
Try adding formatType="number" to your af:column (if you want all data in that column aligned to the right). If you don't want the entire column right aligned, try using disabled instead of readonly.
Jim

ADF Faces OutputText text-align

I´m working in an ADF Faces Application, a column in a table is showed using an outputText but the customer wants its value is showed right align.
I've tried the propertie inlineStyle="text-align:right;" in the outputText but it's not working correctly.
I think that inlineStyle="text-align:right;" doesn't work with outputText.
Are there any solution to align text in a af:outputText?
Thanks in advanced
Toni - Oracle Principal Consultant - Spain

Hi,
select the column and and change the FormatType to Number.
<af:column headerText="Description"
sortProperty="Description" sortable="false"
formatType="number">Brenden

TableView: column header text alignment?

How can I change the text alignment of a TableView column caption/header? I'd like some of my column headers to be right aligned for example?
It works for regular table cells when I change f.i. the css of the custom DataFX MoneyTableCell cell:
.money-cell {
   -fx-alignment: TOP_RIGHT;
}but it won't work for the ".table-view .column-header" style of the standard TableView:
.table-view .column-header,
.table-view .filler,
.table-view .column-drag-header {
    -fx-alignment: TOP_RIGHT;
}

Just after raising this I realised the problem is that the text is a label on top of the header. You can right align by using the following selector:
.table-view .column-header .label {
    -fx-alignment: TOP_RIGHT;
}

Clearbox Lightbox, text alignment

Similar Messages

Maybe you are looking for