Copy link to clipboard
Copied
I created a 5x5 table and inserted it into an html page with text-- above all text. Looks fine on desktop, but on iphone, the table of images is superimposed on top of the text; so I'm stumped.
Google does say its mobile friendly.
Copy link to clipboard
Copied
Not surprising. Tables are not responsive. Nobody uses tables anymore if we can possibly avoid them.
Try CSS Grids.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid Evenly Distributed Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width: 95%;
margin: 0 auto;
padding: 2%;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
grid-gap: 1em;
border: 1px dotted silver;
}
.module {
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
img {
vertical-align: baseline;
display: block;
max-width: 100%;
}
</style>
</head>
<body>
<h3>Welcome to CSS Grids</h3>
<div class="grid">
<div class="module">1</div>
<div class="module">2</div>
<div class="module">3</div>
<div class="module">4</div>
<div class="module">5</div>
<div class="module">6</div>
<div class="module">7</div>
<div class="module">8</div>
<div class="module">9</div>
<div class="module">10</div>
<div class="module">11</div>
<div class="module">12</div>
<div class="module">13</div>
<div class="module">14</div>
<div class="module">15</div>
</div>
</body>
</html>
Copy link to clipboard
Copied
Nancy, thanks, I pasted your code into a new page, and it did not make a grid. It just made 15 rows.
1) So norhing I can do? Maybe someone else help.. Just the iphone issue... Looks fine on desktop
2) But on desktop its on left anyway to center that? I don't see a way to drag it around.
Copy link to clipboard
Copied
Preview in REAL browsers, not DW.
CSS Grids on Desktop
CSS Grids on iPhone
Copy link to clipboard
Copied
Ok Nancy, lot re-working have to do, but will test out and let your know, thanks! (might have some more questions later)......
Copy link to clipboard
Copied
Depends what you are creating. If its a simple image gallery then grid or flex is the way to go, if however its a table of data information then grid/flex is probably not the way to go. Sometimes you just have to use a table and force the user to scroll right. Use tables sparingly where possible. Some data like complex technical specifications arent best suited to the web so you have to do your best IF clients demand that technical specifications be used.
Copy link to clipboard
Copied
If we could see what the OP is working on, we wouldn't have to make guesses. But based on the opening question, he said this was a table of images. I took that to mean he's using tables for layouts which is a really bad idea. Especially now that we have good responsive options available in CSS.
Copy link to clipboard
Copied
Well there's more than meets the eye going on here as some text is involved too, according to the OP.
Copy link to clipboard
Copied
Thanks, all table of images, great on desktop, very bad on iphone. Will use Nancys code in next few days and report back. I have feeling it will improve this thanks.
Copy link to clipboard
Copied
Ok Nancy, did test pages, and dragged in all 25 images again, and in real browser the gird looks good, (except for the welcome to css grid at top), but images are not there, even though they are there and looking fine in dreamwearer.
Copy link to clipboard
Copied
Are you testing on the remote server? Did you upload images to your server?
Can you post the URL here so we can see what you see?
Copy link to clipboard
Copied
Thanks Nancy, yes real server, real webiste. Testing on a test page now..
In DW the images are in an image folder outside of the folder where the .html file is. I don't think that matters?
Looks fine in DW, see images connecting ok, In DW browser test safari they come up good but are all vertical no grid.
On real server, the grid is good, but then no images, just icon for missing images.
the test I few days ago got the grid and one image in good. Now I put 25 in and no luck.
Website has real name, don't post real names on these forums for obvious reason... but I'd PM to you if want.
Copy link to clipboard
Copied
PS sourse images were dragged in so in DW and also my html see ...image...
But with CSS, dont see the ....
Copy link to clipboard
Copied
online this code works fine by dragging in image with table / html page just works fine, all the images show up in the , with CSS grid all blank.
Copy link to clipboard
Copied
bTW how edit my post? I don't see an edit or delte option here anymore
Copy link to clipboard
Copied
Owing to abuses, editing posts is no longer possible except by ACPs, MVPs and Adobe staff.
Copy link to clipboard
Copied
Thanks Nancy, my head is melted by now. I'll try tomorrow again. I can't use validtor, way over my head, I
Maybe I'll try direct path, but even that gets very hairy, Totally stumped.
Osgood if you are here still have any idea?
Thanks Nacy for strating this help process hopefully figure it out, not easy!
Copy link to clipboard
Copied
Hi larry,
I no longer use Dreamweaver so can't be of any great help. It once had a point and drag option, like a target icon, which you clicked on and dragged a line out to point to an image in a folder, is that what you are using?
Obviously the ../ infront of the folder is crucial.
Copy link to clipboard
Copied
thanks Osgood, yeah, just dragged in images, that was great feature of DW! works fine old html, but not CSS or doing soiemthing wrong, will keep trying.. per Nancy ideas, thanks Nancy again!
Totally agree with your point on editing Osgood, crazy. Only one other forum I've seen that; . crazy... but 95% of forum offer delete edtit etc,....
Copy link to clipboard
Copied
'Owing to abuses, editing posts is no longer possible except by ACPs, MVPs and Adobe staff'.
Can you expand on what abuses?????
Its a bit of a pathetic excuse really. We are dealing with code and posting code, don't the people at Adobe know that? Code needs to be 100% correct for it to work. If one makes a typo as one certainly does all the time then that code will not work and wiil be useless to the peroson who has come here for help.
I actually cant quite believe what I'm hearing, its abosultely pathetic, really, really pathetic. Who the hell is making decsions at Adobe, sorry but I must believe they are a bunch of first class idiots, issuing instructions before thinking.
Seems to me they are driving away any chance that this forum will ever again be blessed with the quality of contributor that once existed here. Now its full of school kids and part-timers, but hey I guess that is exactly where Dreamwevaer is postioned in the market place. reap what you sow. Its hilarious.
Copy link to clipboard
Copied
Oppps I've made a few typos in the post above...........maybe a moderator or Adobe staff member would like to correct them since the edit option is no longer available.
Copy link to clipboard
Copied
thanks OS, what two dots in front of folder mean? Does not seem to work for CSS but works great old styel html. but maybe i'm wrong.
Copy link to clipboard
Copied
Hi larry,
The two dots infront of the 'images-headshots' folder really has nothing to do with the css. You should still be able to use whatever method you used in the passed to drag or point to a folder containing the images to get them into Dreamweaver with the correct path, so something else must be happening.
Copy link to clipboard
Copied
Hi larrry
See the 2 links below. The one which does not work has 'headshots' in the url??
Works:
url removed at request of OP
Does not work:
url removed at request of OP
Is there a folder in the 'headshots' folder named 'images-headshots' - probably not as that just gives a 404 not found page so why is 'headshots' in the link???
Copy link to clipboard
Copied
Darn Osgood, I did not want my name in this thread, that what been tyring to edit / delete darn!