close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Data Assist repeating table and fluid grid design.

Thread began 2/01/2014 10:40 pm by larry268887 | Last modified 2/07/2014 5:08 pm by Jason Byrnes | 2185 views | 11 replies |

larry268887

Data Assist repeating table and fluid grid design.

I used the data assist repeating table to display images on a page. I can't seem to make the table a fluid grid design. I've attached a picture of what I'm trying to create but it must be a fluid grid design. Do you know what I'm doing wrong or how to create a database driven 1 row and four column display that will re size.

Thanks
Larry

Sign in to reply to this post

Jason ByrnesWebAssist

add a percentage based width to the td and table tags.

Sign in to reply to this post

larry268887

Tried but can't get it to work.

It seems to work in chrome but not in internet explorer or firefox.
Here is my code.

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>

<link href="/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="/css/screen-styles.css" rel="stylesheet" type="text/css">


<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/css/respond.min.js"></script>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/alex-brush:n4:default;source-sans-pro:n2,i2,n4,i4:default.js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix">
<!-- Begin Header Code -->

<!-- End Header Code -->
<!-- Begin Main Content Code -->
<div class="fluid maincontentwrap">
<!-- Begin Section Content Code -->
<div class="fluid sectionwrap"><section class="fluid intro">
<div class="fluid table">
<table width="100%">
<tr>
<td width="25%"><img src="http://www.elvisyorkshireterrier.com/images/why-dogs-stay-small.jpg" alt=""/></td>
<td width="25%"><img src="http://www.elvisyorkshireterrier.com/images/why-dogs-stay-small.jpg" alt=""/></td>
<td width="25%"><img src="http://www.elvisyorkshireterrier.com/images/why-dogs-stay-small.jpg" alt=""/></td>
<td width="25%"><img src="http://www.elvisyorkshireterrier.com/images/why-dogs-stay-small.jpg" alt=""/></td>
</tr>
</table></div></section>
</div>
<!-- End Section Content Code -->
<!-- Begin Aside Content Code -->
<div class="fluid asidewrap"><aside class="fluid sidecontent">This is the content for Layout Section Tag "aside"
</aside>
</div>
<!-- End Aside Content Code -->
</div>
<!-- End Main Content Code -->
<!-- Begin footer Code -->

<!-- End Footer Code -->
</div>
</body>
</html>

Here is my css file.

@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}

/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 24;
dw-gutter-percentage: 15;

Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design

and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/

.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}

.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}

/* Mobile Layout: 480px and below. */

.gridContainer {
margin-left: auto;
margin-right: auto;
width: 97.3913%;
padding-left: 1.304%;
padding-right: 1.3043%;
clear: none;
float: none;
}
#header {
background-color: #004080;
}
#headertext {
font-family: alex-brush;
font-style: normal;
font-weight: 400;
color: #ffffff;
font-size: large;
}
#mainnav {
}
#mainnavlist {
margin-top: 4px;
margin-bottom: 4px;
padding-top: 3px;
padding-bottom: 3px;

width: 100%;

margin-left: 0;

}
.mainnavitem {
text-align: center;
width: 100%;
clear: both;
margin-left: 0px;
background-color: #252122;
margin-top: 4px;
margin-right: 0px;
margin-bottom: 4px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
}
.mainnavitem a {
color: #FFFFFF;
text-decoration: none;
font-family: source-sans-pro;
font-style: italic;
font-weight: 400;
}
.mainnavitem a:hover {
color: #cc0000;
text-decoration: none;
font-family: source-sans-pro;
font-style: italic;
font-weight: 400;
}
#footer {
background-color: #004080;
color: #ffffff;
text-align: center;
}
.footernav {
width: 100%;
clear: both;
margin-left: 0;
}
.footermenulist {
width: 100%;
margin-left: 0;
margin-top: 5px;
margin-bottom: 5px;
}
.footermenuitem {
width: 100%;
clear: both;
margin-left: 0;
}
.fluid.footermenuitem a {
color: #FFFFFF;
}
.fluid.footermenuitem a:hover {
color: #cc0000;
}
#footernav2 {
}
#footernavlist2 {
}
.footernav2 {
}
.footernavlist2 {
width: 100%;
margin-left: 0;
margin-top: 5px;
margin-bottom: 5px;
}
.footernavitem2 {
width: 100%;
clear: both;
margin-left: 0;
}
.footernav2 .fluid.fluidList.footernavlist2 .fluid.footernavitem2 a {
color: #FFFFFF;
}
.footernav2 .fluid.fluidList.footernavlist2 .fluid.footernavitem2 a:hover {
color: #cc0000;
}
#footerdiv {
}
#footer #footerdiv a {
color: #FFFFFF;
}
#footer #footerdiv a:hover {
color: #cc0000;
}
#container {
margin-left: auto;
margin-right: auto;
}
.fl {
float: left;
margin-left: 5px;
margin-right: 5px;
}
.fr {
float: right;
margin-left: 5px;
margin-right: 5px;
}
#container .fr a {
color: #FFFFFF;
text-decoration: none;
font-family: source-sans-pro;
font-style: italic;
font-weight: 200;
}
#container .fr a:hover {
color: #D52349;
font-family: source-sans-pro;
font-style: italic;
font-weight: 200;
text-decoration: none;

}
.maincontentwrap {
background-color: #FFFFFF;
}
.maincontentsection {
width: 100%;
padding-left: 0%;
padding-right: 0%;
}
.rtsidebar {
width: 100%;
clear: both;
margin-left: 0;
}
.borderdiv {
border: 1px solid #CCCCCC;
border-radius: 5px;
padding-left: 2.0%;
padding-right: 2.0%;
padding-top: 2.0%;
padding-bottom: 2.0%;
width: 96%;
background-color: #FFFFFF;
text-align: center;
}
.borderdivfill {
border: 1px solid #CCCCCC;
border-radius: 5px;
background-color: #9FCFFF;
padding-left: 2.0%;
padding-right: 2.0%;
padding-top: 2.0%;
padding-bottom: 2.0%;
width: 96%;
}
.sidebarh3heading {
text-align: center;
}
.sidebarh4heading {
text-align: center;
}
.fluid.borderdiv a {
text-align: center;

}
.headertext {
color: #FFFFFF;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: medium;
}
.sectionwrap {
width: 100%;
}
.asidewrap {
width: 100%;
clear: both;
margin-left: 0;
}
.intro {
}
.sidecontent {
}
.breadcrumb {
}
.puppyforsale {
border: 1px solid #252122;
border-radius: 5px;
}
.puppyforsalecontainer {
}
.puppyforsaleimage {
width: 100%;
}
.puppyforsaleinfo {
width: 100%;
clear: both;
margin-left: 0;
}
.puppyintro {
}
.linkclaw {
}
.yorkiename {
text-align: center;
}
.puppyinfolist {
}
.puppyinfoitem {
}
.puppyavailability {
}
.avail {
color: #CC0D10;
font-size: x-large;
}
.spacer {
}
.prodinfo {
color: #160CEB;
font-size: large;
}
.puppyname {
}
.button {
margin-top: 0.2%;
margin-bottom: 0.2px;
}
.fluid.button a img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0%;
margin-bottom: 0%;
}
.fluid.puppyforsaleimage img {
display: block;
margin-left: auto;
margin-right: auto;
}
.test {
width: 100%;
}
.test3 {
}
.table {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
























/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
width: 98.3695%;
padding-left: 0.8152%;
padding-right: 0.8152%;
clear: none;
float: none;
margin-left: auto;
}
#header {
}
#headernav {
}
#headernavlist {
}
.headernavitem {
width: 23.7569%;
clear: none;
margin-left: 1.6574%;
}
#headertext {
color: #ffffff;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: x-large;
}
#mainnav {
}
#mainnavlist {
width: 100%;
margin-left: 0;
}
.mainnavitem {
width: 100%;
clear: both;
margin-left: 0;
}
.footernav {
width: 100%;
margin-left: 1.6574%;
clear: none;
}
.footermenulist {
width: 100%;
margin-left: 0;
}
.footermenuitem {
width: 100%;
clear: both;
margin-left: 0;
}
.footernav2 {
}
.footernavlist2 {
width: 100%;
margin-left: 0;
}
.footernavitem2 {
width: 100%;
clear: both;
margin-left: 0;
}
#footerdiv {
}
#container {
}
.maincontentwrap {
}
.maincontentsection {
width: 100%;
}
.rtsidebar {
width: 100%;
clear: both;
margin-left: 0;
}
.borderdiv {
}
.borderdivfill {
}
.sidebarh3heading {
}
.sidebarh4heading {
}
.headertext {
color: #FFFFFF;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: large;
}
.sectionwrap {
width: 100%;
}
.asidewrap {
width: 100%;
clear: both;
margin-left: 0;
}
.intro {
}
.sidecontent {
}
.breadcrumb {
}
.puppyforsale {
}
.puppyforsalecontainer {
}
.puppyforsaleimage {
width: 100%;
}
.puppyforsaleinfo {
width: 100%;
clear: both;
margin-left: 0;
}
.puppyintro {
}
.linkclaw {
}
.yorkiename {
}
.puppyinfolist {
}
.puppyinfoitem {
}
.puppyavailability {
}
.spacer {
}
.puppyname {
}
.button {
}
.test {
width: 100%;
}
.test3 {
}
.table {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}

/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
width: 89.5108%;
max-width: 1232px;
padding-left: 0.2445%;
padding-right: 0.2445%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#headernav {
}
#headernavlist {
}
.headernavitem {
width: 12.0218%;
clear: none;
margin-left: 0.5464%;
margin-right: 0px;
}
#headertext {
color: #ffffff;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: x-large;
}
#mainnav {
}
#mainnavlist {
margin-right: 0px;
margin-left: 4.1894%;
margin-top: 4px;
margin-bottom: 4px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
width: 91.6211%;
}
.mainnavitem {
width: 13.1212%;
margin-left: 0.5964%;
clear: none;
}
#footer {
}
.footernav {
width: 100%;
clear: both;
margin-left: 0;
}
.footermenulist {
width: 70.6739%;
margin-left: 16.7577%;
}
.footermenuitem {
width: 22.9381%;
margin-left: 0.7731%;
clear: none;
}
.footernav2 {
}
.footernavlist2 {
width: 79.0528%;
margin-left: 12.5683%;
}
.footernavitem2 {
width: 15.2073%;
margin-left: 0.6912%;
clear: none;
}
#footerdiv {
}
#container {
}
.maincontentwrap {
padding-left: 0%;
}
.maincontentsection {
width: 74.8633%;
}
.rtsidebar {
width: 24.5901%;
margin-left: 0.5464%;
clear: none;
}
.borderdiv {
}
.borderdivfill {
}
.sidebarh3heading {
}
.sidebarh4heading {
}
.headertext {
color: #FFFFFF;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: x-large;
}
.sectionwrap {
width: 70.6739%;
padding-left: 1%;
}
.asidewrap {
width: 24.5901%;
margin-left: 0.5464%;
clear: none;
padding-left: 1.5%;
padding-right: 1%;
}
.intro {
}
.sidecontent {
}
.breadcrumb {
}
.puppyforsale {
}
.puppyforsalecontainer {
}
.puppyforsaleimage {
width: 40.7216%;
}
.puppyforsaleinfo {
width: 52.5773%;
margin-left: 0.7731%;
clear: none;
}
.puppyintro {
}
.linkclaw {
}
.yorkiename {
}
.puppyinfolist {
}
.puppyinfoitem {
}
.puppyavailability {
}
.spacer {
}
.puppyname {
}
.button {
}
.test {
width: 94.0721%;
}
.test3 {
}
.table {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}

}

Any help is appreciated.

Sign in to reply to this post

Jason ByrnesWebAssist

please don't paste the code for you page into the message, instead attach a copy of the page


With design problems, it is impossible to troubleshoot from the code. a design problem must be seen in order to troubleshoot. please provide a link.

Sign in to reply to this post

larry268887

Its all on a my local server. How should I proceed?

Sign in to reply to this post

Jason ByrnesWebAssist

you will need to upload it to a live server for me to look into the problem.

Sign in to reply to this post

larry268887

Here is the link to the page
http://www.elvisyorkshireterrier.com/test/table2.php

Sign in to reply to this post

Jason ByrnesWebAssist

you also need to set the widths of the image tags:
<img src="http://www.elvisyorkshireterrier.com/images/why-dogs-stay-small.jpg" alt=""/>


with a responsive design, you should be using media queries to set element widths based on the view port:


http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Sign in to reply to this post

larry268887

Not sure if I understand. I've put two new files that are responsive with the exception to the table to a degree. The first file has the images in the table.
The table begins at checkout our yorkie puppies. It renders correctly in chrome but not in internet explorer and firefox.
http://www.elvisyorkshireterrier.com/adult-yorkies-for-saletest.php

The second file replaces the image with text instead of a image.

http://www.elvisyorkshireterrier.com/adult-yorkies-for-saletest2.php

This render correctly in chrome, firefox, and internet explorer.
Here is the code for the table.

<table width="100%" border="0">
<tr>
<td><div class="fluid test"><img src="images/puppies/thumb/<?php echo $row_rsYorkies['ProdThumb']; ?>" alt="<?php echo $row_rsYorkies['ProdThumbAlt']; ?>" /> </div></td>
</tr>
<tr>
<td><div align="center"><a href="yorkies-for-sale.php#<?php echo $row_rsYorkies['ProdId']; ?>" title="<?php echo $row_rsYorkies['thumb2title']; ?>"><?php echo $row_rsYorkies['thumb2title']; ?></a></div></td>
</tr>
</table>

Sign in to reply to this post

Jason ByrnesWebAssist

part of the probelm with this page:
http://www.elvisyorkshireterrier.com/adult-yorkies-for-saletest.php

is that you have a table in a table in a table table

and none of them set the percentage widths for the cells.


perhaps look into this library:
http://zurb.com/playground/responsive-tables

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...