[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 328
  • Last Modified:

how to bring the second div on the same line of the first div

I downloaded a image gallery script which dislays a big image in the middle and the thumbnail images below the big image. The decription of the image is displayed in a seperate div just below the big image. Now, the description is going to be bigger, so I want that div to come next to the big image, how to do this.

I am attaching the screen shots, code snippets of the index.php page, css and js files.

Any help is appreciated
Thanks

<div id="dhtmlgoodies_slideshow">
<div id="previewPane" align="center" ><br />
<img src="ads/<? echo $fname?>" height="200" /> <span id="waitMessage">Loading image. Please wait</span>
 
<div id="largeImageCaption"><?=$rs['content']?></div>
</div>
<div id="galleryContainer">
<div id="arrow_left" style="height:60px; background-color:#FFFFFF"><img src="arrow_left.gif" height="68" /></div>
<div id="arrow_right"><img src="arrow_right.gif" height="68" /></div>
<div id="theImages">
<!-- Thumbnails -->
<?	
$imgcnt=0;
while($rs=mysql_fetch_array($query1)){
$imgcnt++;
$fname = $rs['videoname'];
$mysock = getimagesize("ads/". $fname);
$target=150;
$width=$mysock[0];
$height=$mysock[1];
if ($width > $height) { 
$percentage = ($height / $width); 
$width=$target;
$result="width=\"$width\"";
} else { 
$percentage = ($width / $height); 
$height = $target;
$result="height=\"$height\"";
} 
echo "<a href=\"#\" onclick=\"showPreview('ads/".$fname."','".$imgcnt."');return false\"><img src=\"ads/".$fname."\" height=\"70\"></a>";
		} //while
}// if num rows
else{
echo "<br><span class=\"verysmall\">No Picture Gallery.</span><br>";
}
?>
<!-- End thumbnails -->
 
<!-- Image captions -->
<?
mysql_data_seek($query1, 0);
while($rs=mysql_fetch_array($query1)){?>
<div class="imageCaption"><?=$rs['content']?></div>
<? } ?>
<!-- End image captions -->
<div id="slideEnd"></div>
</div> <!-- for "theImages" -->
</div> <!-- for "galleryContainer" -->
</div> <!-- for "dhtmlgoodies_slideshow -->

Open in new window

gallery.jpg
gallery-new.jpg
image-slideshow.css.txt
image-slideshow.js.txt
0
CWS (haripriya)
Asked:
CWS (haripriya)
  • 5
  • 3
  • 2
  • +1
1 Solution
 
sunithnairCommented:
Try this
<div style="display:inline">Your Image</div><div style="display:inline">Your Caption</div>

Open in new window

0
 
CWS (haripriya)Author Commented:
it displays the content by the side, but the previewpane is not upto the size of the gallery. Also, when i click on the images in the gallery, the content again goes to the bottom of the image. something should be done is the css file.
0
 
sunithnairCommented:
Is this how you did it. Replacing 2-6 in your code above
<div id="previewPane" align="center" ><br />
<div style="display:inline">
<img src="ads/<? echo $fname?>" height="200" /> <span id="waitMessage">Loading image. Please wait</span>
</div>
<div style="display:inline">
<div id="largeImageCaption"><?=$rs['content']?></div>
</div>
</div>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
myderrickCommented:
The big image should have a align: left eg <img src="sss.jpg" align="left"/> or withing the div containing the large image add text-align: left.

MD
0
 
myderrickCommented:
You have align center change it to align: left....This should do.

MD
0
 
CWS (haripriya)Author Commented:
please ignore the above Admin comment. I selected it by mistake.

@sunithnair,
No. I gave in the style in the same div tag.
Anyhow, when I tried your code, same results.

@myderrick
Changing the alignment didn't work.
0
 
sunithnairCommented:
Can you please post a link to the page where I can take a look at if possible?
0
 
Mark StegglesWeb DeveloperCommented:
Hello cyberwebservice,

All you need to do is change this css, see my additions are left justified:

#previewPane{
            border:1px solid #CCCCCC;
            margin-bottom:10px;      
            text-align:center;
            vertical-align:middle;
            /*padding-top:5px;*/

            position:relative;
            
            /* CSS HACK */
            height: 350px;      /* IE 5.x */
            height/* */:/**/350px;      /* Other browsers */
            height: /**/350px;
                        
      }
      #previewPane img{
float:left;
            line-height:250px;
            border:10px solid #8C8C8C;
      }
      #previewPane #largeImageCaption{      /* CSS styling of image caption below large image */
            font-family: verdana;
            color: #666666;
            font-weight: normal;
            font-size: 8pt;
            text-decoration:none;
position:absolute;
left:500px;
top:100px;
text-align:center;
width:300px
      }
      #galleryContainer{
clear:left;
            height:80px;      /* Height of the images + 2 */
            border:1px solid #CCCCCC;
            position:relative;
            overflow:hidden;
            padding:1px;
            vertical-align:middle;
            
            /* CSS HACK */
            height: 80px;      /* IE 5.x - Added 2 pixels for border left and right */
            height/* */:/**/80px;      /* Other browsers */
            height: /**/80px;
                        
      }


Let me know if it works

Steggs
0
 
CWS (haripriya)Author Commented:
@sunithnair,
sorry, I was offline and was trying from scratch with table layouts instead of css. So, I could not give you the link on time. Thanks for your help so far.

@Steggs
it worked perfect!
thanks a lot Steggs.
0
 
CWS (haripriya)Author Commented:
thanks for you time, ee needs lot of experts like you :)
0
 
CWS (haripriya)Author Commented:
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now