layout where uploaded images are always on the right side of the content
2 posts by 2 authors in: Forums > CMS Builder
Last Post: July 20, 2012 (RSS)
By cmsb - July 20, 2012
Hi, I am trying to make sure all my uploaded images land on the right side of the content. I know this should be done with css but I am confused with all the div's, classes, and id's I'm already using.
Here's the code for the page:
<!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>
<title>About Mountain Grove Cemetery</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="Mountain Grove Cemetery Association, Bridgeport, Fairfield County, Connecticut, P.T. Barnum, cemetery" />
<meta name="description" content="New England’s most scenic cemetery, Mountain Grove is beautifully landscaped with ornamental trees and picturesque lily pond. Closely associated with Connecticut families from Fairfield County, it is the final resting place of P.T. Barnum, Charles Stratton (Tom Thumb), Fanny Crosby, and Daniel Nash Morgan, former Treasurer of the United States." />
<link href="mgc.css" rel="stylesheet" type="text/css">
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" href="/fancyBox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancyBox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/fancyBox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="/fancyBox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancyBox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<style type="text/css">
<!-- Add fancyBox -->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header"><img src="images/mgc_header.gif" alt="header" width="900" height="151" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="-1,-39,895,148" href="index.php" alt="mountain grove cemetery home page" />
</map>
<!-- end #header --></div>
<div id="insidenavigation"><img src="../images/mgc_nav_about_history.gif" alt="inside navigation" width="900" height="56" border="0" usemap="#insidenavigation" />
<map name="insidenavigation" id="insidenavigation2">
<area shape="rect" coords="10,2,73,30" href="index.php" alt="mountain grove cemetery home page" />
<area shape="rect" coords="87,2,164,30" href="aboutDetail.php" alt="about mountain grove cemetery" />
<area shape="rect" coords="183,2,278,30" href="cremation_optionsDetail.php" alt="burial options" />
<area shape="rect" coords="303,2,481,30" href="read_chapelDetail.php" alt="read chapel" />
<area shape="rect" coords="510,2,665,30" href="interment_optionsDetail.php" alt="interment options" />
<area shape="rect" coords="761,2,889,30" href="bulletin_boardList.php" alt="bulletin board" />
<area shape="rect" coords="692,2,731,30" href="faqList.php" alt="Frequently Asked Questions" />
<area shape="rect" coords="12,36,141,63" href="aboutDetail.php" alt="burial options" />
<area shape="rect" coords="157,35,275,75" href="guide_mapDetail.php" alt="guidemap" />
<area shape="rect" coords="285,35,399,59" href="notablesDetail.php" alt="notables" />
<area shape="rect" coords="415,35,603,59" href="rrDetail.php" alt="rules and regulations" />
<area shape="rect" coords="769,35,884,64" href="contactDetail.php" alt="contact" />
<area shape="rect" coords="633,35,736,62" href="directionsDetail.php" alt="directions" />
</map>
</div>
<div id="mainContent">
<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1><span style="font-size: 21px; font-family:'Times New Roman', Times, serif; text-align: left;">About Us: The History of Mountain Grove Cemetery</span></h1>
<?php echo $aboutRecord['content'] ?><br/>
<?php foreach ($aboutRecord['images'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a class="fancybox" rel="group" title="" id="#single_1" href="<?php echo $upload['urlPath'];?>"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>"
title="<?php echo htmlencode($upload['info1']) ?>" alt="" /></a><br/>
<?php echo htmlencode($upload['info1']) ?>
<br/>
<br/>
<?php elseif ($upload['isImage']): ?>
<a class="fancybox" rel="group" title="" id="#single_1" href="<?php echo $upload['urlPath'];?>"><img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" title="<?php echo htmlencode($upload['info1']) ?>" alt="" />
<br/> </a><br/>
<?php echo htmlencode($upload['info1']) ?>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>
<?php endif ?>
<?php endforeach ?>
<?php if (!$aboutRecord): ?>
No record found!<br/><br/>
<?php endif ?>
<!-- STEP 2a: Display Uploads for field 'images' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<!-- /STEP2: Display Records -->
<!-- end #container --></div>
<div id="footer">
<img src="images/mgc_footer.gif" alt="footer" width="900" height="78" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="413,43,489,67" href="" target="_blank" alt="webmaster" />
</map>
<!-- end #footer --></div></div>
</body>
</html>
And here's the url for the specific page I am talking about: http://www.mtgrovecemetery.org/aboutDetail.php
Here's the code for the page:
<!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>
<title>About Mountain Grove Cemetery</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="Mountain Grove Cemetery Association, Bridgeport, Fairfield County, Connecticut, P.T. Barnum, cemetery" />
<meta name="description" content="New England’s most scenic cemetery, Mountain Grove is beautifully landscaped with ornamental trees and picturesque lily pond. Closely associated with Connecticut families from Fairfield County, it is the final resting place of P.T. Barnum, Charles Stratton (Tom Thumb), Fanny Crosby, and Daniel Nash Morgan, former Treasurer of the United States." />
<link href="mgc.css" rel="stylesheet" type="text/css">
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" href="/fancyBox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancyBox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/fancyBox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="/fancyBox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancyBox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<style type="text/css">
<!-- Add fancyBox -->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header"><img src="images/mgc_header.gif" alt="header" width="900" height="151" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="-1,-39,895,148" href="index.php" alt="mountain grove cemetery home page" />
</map>
<!-- end #header --></div>
<div id="insidenavigation"><img src="../images/mgc_nav_about_history.gif" alt="inside navigation" width="900" height="56" border="0" usemap="#insidenavigation" />
<map name="insidenavigation" id="insidenavigation2">
<area shape="rect" coords="10,2,73,30" href="index.php" alt="mountain grove cemetery home page" />
<area shape="rect" coords="87,2,164,30" href="aboutDetail.php" alt="about mountain grove cemetery" />
<area shape="rect" coords="183,2,278,30" href="cremation_optionsDetail.php" alt="burial options" />
<area shape="rect" coords="303,2,481,30" href="read_chapelDetail.php" alt="read chapel" />
<area shape="rect" coords="510,2,665,30" href="interment_optionsDetail.php" alt="interment options" />
<area shape="rect" coords="761,2,889,30" href="bulletin_boardList.php" alt="bulletin board" />
<area shape="rect" coords="692,2,731,30" href="faqList.php" alt="Frequently Asked Questions" />
<area shape="rect" coords="12,36,141,63" href="aboutDetail.php" alt="burial options" />
<area shape="rect" coords="157,35,275,75" href="guide_mapDetail.php" alt="guidemap" />
<area shape="rect" coords="285,35,399,59" href="notablesDetail.php" alt="notables" />
<area shape="rect" coords="415,35,603,59" href="rrDetail.php" alt="rules and regulations" />
<area shape="rect" coords="769,35,884,64" href="contactDetail.php" alt="contact" />
<area shape="rect" coords="633,35,736,62" href="directionsDetail.php" alt="directions" />
</map>
</div>
<div id="mainContent">
<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1><span style="font-size: 21px; font-family:'Times New Roman', Times, serif; text-align: left;">About Us: The History of Mountain Grove Cemetery</span></h1>
<?php echo $aboutRecord['content'] ?><br/>
<?php foreach ($aboutRecord['images'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a class="fancybox" rel="group" title="" id="#single_1" href="<?php echo $upload['urlPath'];?>"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>"
title="<?php echo htmlencode($upload['info1']) ?>" alt="" /></a><br/>
<?php echo htmlencode($upload['info1']) ?>
<br/>
<br/>
<?php elseif ($upload['isImage']): ?>
<a class="fancybox" rel="group" title="" id="#single_1" href="<?php echo $upload['urlPath'];?>"><img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" title="<?php echo htmlencode($upload['info1']) ?>" alt="" />
<br/> </a><br/>
<?php echo htmlencode($upload['info1']) ?>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>
<?php endif ?>
<?php endforeach ?>
<?php if (!$aboutRecord): ?>
No record found!<br/><br/>
<?php endif ?>
<!-- STEP 2a: Display Uploads for field 'images' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<!-- /STEP2: Display Records -->
<!-- end #container --></div>
<div id="footer">
<img src="images/mgc_footer.gif" alt="footer" width="900" height="78" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="413,43,489,67" href="" target="_blank" alt="webmaster" />
</map>
<!-- end #footer --></div></div>
</body>
</html>
And here's the url for the specific page I am talking about: http://www.mtgrovecemetery.org/aboutDetail.php
Re: [cmsb] layout where uploaded images are always on the right side of the content
By Jason - July 20, 2012
Hi,
I'm not sure about what other CSS rules you have on your page, but one thing you could try is to wrap your uploads in a div that you float to the right:
For example:
Hope this helps
I'm not sure about what other CSS rules you have on your page, but one thing you could try is to wrap your uploads in a div that you float to the right:
For example:
<div style = "float:right;">
<?php foreach ($aboutRecord['images'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a class="fancybox" rel="group" title="" id="#single_1" href="<?php echo $upload['urlPath'];?>"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>"
title="<?php echo htmlencode($upload['info1']) ?>" alt="" /></a><br/>
<?php echo htmlencode($upload['info1']) ?>
<br/>
<br/>
<?php elseif ($upload['isImage']): ?>
<a class="fancybox" rel="group" title="" id="#single_1" href="<?php echo $upload['urlPath'];?>"><img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" title="<?php echo htmlencode($upload['info1']) ?>" alt="" />
<br/> </a><br/>
<?php echo htmlencode($upload['info1']) ?>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>
<?php endif ?>
<?php endforeach ?>
</div>Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/