Super Suite
Get all extensions for one suite price
Design Extender
Design and create unlimited websites
Data Bridge
Develop database-driven websites
eCart
Build a responsive shopping cart + checkout
MySQLi Server Behaviors
Generate streamlined MySQLi
Free PayPal Toolkit
Paypal, PayPal Credit, and Skype
Help
2/01/2014 7:40 pm | #1 larry268887 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
2/03/2014 6:09 am | #2 Jason ByrnesWebAssist
add a percentage based width to the td and table tags.
2/06/2014 8:18 am | #3 larry268887 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.
2/06/2014 9:04 am | #4 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.
2/06/2014 1:33 pm | #5 larry268887 Its all on a my local server. How should I proceed?
2/06/2014 1:36 pm | #6 Jason ByrnesWebAssist
you will need to upload it to a live server for me to look into the problem.
2/06/2014 1:50 pm | #7 larry268887 Here is the link to the page
http://www.elvisyorkshireterrier.com/test/table2.php
2/06/2014 2:18 pm | #8 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/
2/07/2014 9:21 am | #9 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>
2/07/2014 9:33 am | #10 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
Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.
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.
©1999-2024 WebAssist.com Corporation. All rights reserved and all that jazz.
Account or customer service questions?
Please user our contact form.
Need technical support?
Please visit support to ask a question
Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...
Uploading file...
