Highlighted

Table looks bad on iphone

Enthusiast ,
Oct 03, 2020

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.

Views

218

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Table looks bad on iphone

Enthusiast ,
Oct 03, 2020

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.

Views

219

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 03, 2020 0
Adobe Community Professional ,
Oct 03, 2020

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>

 

 

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 03, 2020 2
Enthusiast ,
Oct 03, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 03, 2020 0
Adobe Community Professional ,
Oct 03, 2020

Copy link to clipboard

Copied

Preview in REAL browsers, not DW.

 

CSS Grids on DesktopCSS Grids on Desktop

CSS Grids on iPhoneCSS Grids on iPhone

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 03, 2020 1
Enthusiast ,
Oct 03, 2020

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)......

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 03, 2020 0
LEGEND ,
Oct 04, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2020 0
Adobe Community Professional ,
Oct 04, 2020

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.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2020 0
LEGEND ,
Oct 04, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2020 0
Enthusiast ,
Oct 04, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2020 0
Enthusiast ,
Oct 07, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
Adobe Community Professional ,
Oct 07, 2020

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?

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 1
Enthusiast ,
Oct 07, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
Enthusiast ,
Oct 07, 2020

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 ....

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
Enthusiast ,
Oct 07, 2020

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.

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
Enthusiast ,
Oct 07, 2020

Copy link to clipboard

Copied

bTW how edit my post? I don't see an edit or delte option here anymore

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
Adobe Community Professional ,
Oct 07, 2020

Copy link to clipboard

Copied

When images are not visible, that implies your code is wrong or the image files are not where the code says they are. 

Check your code for validation errors.

https://validator.w3.org/

 

Assuming you're in a defined local site folder, DW can manage link paths for you providing you use the Property Inspector to browse to the images in your site folder. 

 

When all else fails, use absolute link paths  https : // example . com / folder / filename.jpg

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
Adobe Community Professional ,
Oct 07, 2020

Copy link to clipboard

Copied

Owing to abuses, editing posts is no longer possible except by ACPs, MVPs and Adobe staff.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
Enthusiast ,
Oct 07, 2020

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
LEGEND ,
Oct 07, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 1
LEGEND ,
Oct 07, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 1
Enthusiast ,
Oct 07, 2020

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,....

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
LEGEND ,
Oct 07, 2020

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.

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 1
Enthusiast ,
Oct 07, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
LEGEND ,
Oct 07, 2020

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.

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
LEGEND ,
Oct 07, 2020

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???

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
Enthusiast ,
Oct 07, 2020

Copy link to clipboard

Copied

Darn Osgood, I did not want my name in this thread,  that what been tyring to edit / delete darn!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
LEGEND ,
Oct 07, 2020

Copy link to clipboard

Copied

Actually this is quite strange.

 

If you click on the 2 urls you provided in your previous post one works and one doesn't - one has the folder 'headshots' in the link, which throws a 404 error page. However IF you remove 'headshots' from the url of the 404 page and refresh the page the image appears correctly. Then if you put 'headshots' back into the url it redirects to the correct location. Do you have some kind of funny redirect going on on your server???

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 1
LEGEND ,
Oct 07, 2020

Copy link to clipboard

Copied

'Darn Osgood, I did not want my name in this thread, that what been tyring to edit / delete darn!'

 

Oopps so sorry! This is why not having an edit button is going to cause issues because I could remove those fast. Now you have to wait for a moderator to come along! I can only apologise!

 

I'll make another post and try to get a moderators attention.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 1
Enthusiast ,
Oct 07, 2020

Copy link to clipboard

Copied

thanks good luck!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
Adobe Community Professional ,
Oct 07, 2020

Copy link to clipboard

Copied

Larry4545,

Next time you want to post a URL here, run it through Tiny URL first.  It's a free online service that not only shortens longs URLs but changes them so they are not recognizable. I've gotta run now. 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 1
Enthusiast ,
Oct 07, 2020

Copy link to clipboard

Copied

Ok Nancy good idea.  The CSS version on iphone, no grid, just long vertical, my guess is that is the way it is trade off?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
Enthusiast ,
Oct 07, 2020

Copy link to clipboard

Copied

PS Nancy and Osgood, if go homepage, and scroll, not 1st headshot link at top, but the one near bottom (between travel and corporate), you see the desktop version is ok, except how center that?  And then look on ihpone and how get it off the text?  (look fine/ perfect in DW)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2020 0
LEGEND ,
Oct 08, 2020

Copy link to clipboard

Copied

larry,

Amend the first few lines of your table code to as below (you will need to go into code view to do this).

 

<table class="headshots-wrapper">
<tr>
<td>
<table class="headshots">
<caption>
LA Headsthots for Los Angeles
</caption>
<tr>

 

Then add the additional css as below (You can add it at the top of your page in a <style></style> block or in one of your 2 linked css stylesheets.

 

.headshots-wrapper {
width: 75%;
max-width: 615px;
margin: 0 auto;
border-collapse: collapse;
border: 2px solid #000;
}
@media screen and (max-width: 768px) {
.headshots-wrapper {
width: 90%;
}
}
.headshots-wrapper td {
padding: 2px;
border-collapse: collapse;
border: 1px solid #000;
}
.headshots {
width: 100%;
border: 2px solid #000;
}
.headshots td {
text-align: center;
}
.headshots td img {
max-width: 100%;
height:auto;
}
.headshots caption {
padding: 15px;
}

 

You also need to comment out the 'position' and 'top' in the css selector #content below as shown (I assume that the block of copy 'Best Actor headshots.......' needs to go before the actual images of the headshots?

 

#content{
/* position: absolute;*/
/* top: 150%; */
text-align: left;
font-family:arial;
font-size:14px;
font-weight: normal;
color: #999999;
text-decoration: none;
display: inline-block;
padding: 10px;
}

 

Using a table for layout is not ideal and limits your options. Because the table only has 5 columns you will get way with it on tablet and possibly smartphone. The workflow you should be using is Css Grid or Flex as this would allow you to contol the images, how many on each line in mobile devices etc

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Enthusiast ,
Oct 08, 2020

Copy link to clipboard

Copied

Thanks Osgood, sadly on't understand most of you complex post here.

 

You are referring to the html table I made right and trying to help get it centered and off the text in iphone?  I have no idea.

 

And then proposing adding CSS to the html? totally lost, don't understand. Dan like 3 hours into this, and I think it look like Table is way better than Nancy CSS idea as her CSS table is acutally way to large for the dektop, with numbers and on iphone much worse than the html talbe, actaully iphone her CSS cose not work at all, Don't see a table at all, just one long row of 25 images.

 

Have no idea what this means "

You also need to comment out the 'position' and 'top' in the css selector #content below as shown (I assume that the block of copy 'Best Actor headshots.......' needs to go before the actual images of the headshots?

"

Have no idea what this mean, are adjust my html table? "Then add the additional css as below (You can add it at the top of your page in a <style></style> block or in one of your 2 linked css stylesheets."

 

Then add the additional css as below (You can add it at the top of your page in a <style></style> block or in one of your 2 linked css stylesheets.

 

Totally lost, are you addressing : my table actually looks great/ fine, just not centered on desktop and overwriting text on iphone.

 

Nore sure what you are addresing as don't say 

 

Any success finding moderator here?  

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Enthusiast ,
Oct 08, 2020

Copy link to clipboard

Copied

All greek to me: "You also need to comment out the 'position' and 'top' in the css selector #content below as shown"

 

Comment out position.. limitations of forums.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
LEGEND ,
Oct 08, 2020

Copy link to clipboard

Copied

Hi larry,

 

You probably need to be able to understand some html/css coding to get this to work and be comfortable working in code view.

 

Its a lot less complex than you imagine although initially looking at the code can be quite intimidating. The problem with your current code is you are using absolutely positioned containers and are setting heights on your table cells which will never work and result in the messy text overlaying which you are experiencing.

 

Nancys suggestion of using css grid or flex is correct in this situation but you obviously need some basic knowledge to apply it

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 1
Enthusiast ,
Oct 08, 2020

Copy link to clipboard

Copied

Osgood, I do normal code for many years, not cSS, I hire people usually for CSS.  But I did paste in Nancys cSS, and is seemed promising, but ultimatly not good, As I said: her CSS table on desktop too large and have goofy numbers, and looks worse on ihpone that my table.. her cSS on iphone is not a table, just long row of 25 images.   

 

For now:  (and maybe she'll come back and address css what I wrote above)

 

1) for my simple table:  How do I center that table for desktop/ laptop? currently it's flush left.

2) How do I get it off the text for iphone?  (while keeping it same, nice centered on desktop/ laptop?

 

Those two annyonces and why I posted in first place. (though i was open to CSS, but as stated, so far, the css she sent not look good.

 

Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
LEGEND ,
Oct 08, 2020

Copy link to clipboard

Copied

Hi larry

 

1) Find your table code in your page:

 

<table width="615" height="276" border="2" cellpadding="2" cellspacing="2"><tr><td width="117">

 

and change it to below: (note the bold text)

 

<table style="margin: 0 auto;" width="615" height="276" border="2" cellpadding="2" cellspacing="2"><tr><td width="117">

 

That will center the table. But seriously setting  a table to a specific width of 615px is never going to work on a smartphone.

 

2) Find the css selector below in your css stylesheet - style.css

 

#content{
position: absolute;
top: 150%;
text-align: left;
font-family:arial;
font-size:14px;
font-weight: normal;
color: #999999;
text-decoration: none;
display: inline-block;
padding: 10px;
}

 

amend it to below: (note the 2 commented out styles /*    */)

 

#content{
/* position: absolute; */
/* top: 150%; */
text-align: left;
font-family:arial;
font-size:14px;
font-weight: normal;
color: #999999;
text-decoration: none;
display: inline-block;
padding: 10px;
}

 

That should improve the situation but is way from being correct.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Enthusiast ,
Oct 08, 2020

Copy link to clipboard

Copied

Thanks Osgood, ok will try the center, adjustments this afternoon and repot back.

 

And/ but CSS   -- css selector below in your css stylesheet?

I puzzled, this is old  style html page, I made,   with no CSS; are you saying add new CSS to it? ANd that would get the table off the text on the iphone (and keep nice look of desktop/ laptop?)

 

BTW if you want to dive in and offer a pure CSS option go for it; but as can see with Nancys  code, the table is aftually cooler / better looking tighter on desktop/ laptop, and did not solve the issue at all for iphone, whih whole point of the post. bTW, maybe I can PM you someone send normal email at some point?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
LEGEND ,
Oct 08, 2020

Copy link to clipboard

Copied

Following on from the above post....

 

Then move your whole table code to before the opening tag of the 'content' <div>:

 

<div id="content">

 

Finally adjust the top postioning of the <div id="nav"> to 380px

 

#nav {
position: absolute;
left: 50%;
/* bring your own prefixes */
transform: translate( -50%);
top: 380px;
word-spacing: 25px;
font-size: 16px;
font-family:arial;
font-variant:small-caps;}

 

The whole code is a complete mess to be honest - what I have provided is a sticking plaster hack.

 

You should never be using absolute postioning or trying to push content about the page using top postioning.

 

If you want your table of headshots to come before the content section then that is where it should be in the normal flow of the code, trying to push the content down, passed the table, using top postioning, is just asking for trouble.

 

Hope that may help to resolve some issues.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Enthusiast ,
Oct 08, 2020

Copy link to clipboard

Copied

Osgood ok let me play with that. Lot of over my head but I'll try. Again, I usually hire someone more hariy stuff, let see what happens. This is all non CSS correct? So I'll discard you bit about CSS as sort of confusing.

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
LEGEND ,
Oct 08, 2020

Copy link to clipboard

Copied

 

Theres only the one line of css which you need to apply to your table for it to become centered in the browser window (marked in bold).

<table style="margin: 0 auto;" width="615" height="276" border="2" cellpadding="2" cellspacing="2"><tr><td width="117">

 

The critical step is to move the table code to be before the 'content' div and then re-adjust the top postioning in the existing nav css as mention in my previous post and comment out the position absolute and top in the 'content' css as also mentioned.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Enthusiast ,
Oct 08, 2020

Copy link to clipboard

Copied

"'re-adjust the top postioning in the existing nav css as mention in my previous "

 

Greek, my is impossible unless someone is on phone waling you through it or doing screenshare, limitations of fourms.

 

Have no idea, just be bumbling along, but I try.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
LEGEND ,
Oct 08, 2020

Copy link to clipboard

Copied

Just locate your existing '#nav' css selector in your style.css file and change the top position to 380px:

 

#nav {
position: absolute;
left: 50%;
/* bring your own prefixes */
transform: translate( -50%);
top: 380px;
word-spacing: 25px;
font-size: 16px;
font-family:arial;
font-variant:small-caps;}

 

Not sure I can be much clearer than that 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Enthusiast ,
Oct 08, 2020

Copy link to clipboard

Copied

But this is not CSS file..???  This is normal html file??

 

Limstions of forumds, on 5 min call or screenshot = 100 back and forth. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Enthusiast ,
Oct 08, 2020

Copy link to clipboard

Copied

Thanks how usually with with designers and consultat, call and screenshare, complex stuff via forums is generlaly impossible. I said several are you adding CSS to an old fahsioned html file or what?  Totally confusing.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Adobe Community Professional ,
Oct 08, 2020

Copy link to clipboard

Copied

Larry4545,

Code is not your comfort zone. You should have a CMS you can use to add content. 

 

=============
Beware of fake Adobe reps who may contact you privately offering to sell you software or take control of your computer. It's a scam, run away!  Real Adobe employees will never reach out via Outlook, Gmail, Yahoo or Skype. 
=============
3 Easy Ways to Identify Genuine Adobe Staff
https://tinyurl.com/10791730

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Enthusiast ,
Oct 08, 2020

Copy link to clipboard

Copied

thanks Nancy, I don't click live links in legit emails anymore, don't worry!

 

CMS is?    Googled it and something about Medicare!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Enthusiast ,
Oct 08, 2020

Copy link to clipboard

Copied

PS Nancy, so note that your CSS,  for iphone, just is a long verital string of thumbnails not grid. Does not suprise me. Even my CSS designer this happens, things that terrific on desktop look slapshot on iphnoe. Yet by old fashion grid, and least look like grid on iphone! Albiet going over text..

 

You take on centering the grid  (one I made on desktop) and solving the text issue if possible.

 

I'll look at Osgood text, but if you have solution, I'd like to hear it tool

 

if go homepage, and scroll, not 1st headshot link at top, but the one near bottom (between travel and corporate), you see the desktop version is ok, except how center that?  And then look on ihpone and how get it off the text?  (look fine/ perfect in DW)

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Adobe Community Professional ,
Oct 08, 2020

Copy link to clipboard

Copied

CMS = Content Management System. 

WordPress is a good example of one. But there are others.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Enthusiast ,
Oct 08, 2020

Copy link to clipboard

Copied

Thanks Nancy, I have many wordpress sites too, but the many old html pages i made SEO well, so have to keep them for now.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 0
Enthusiast ,
Oct 17, 2020

Copy link to clipboard

Copied

Osgood are you able to remove the links to my website ?  Ironically, those are exaclty the same type of links I accidentally put myself in; was trying to edit out in first place.  No name but going to website with name.  The don't have my name in thread (which is an improvement thanks again )  but still go to my webiste with my name. Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 17, 2020 0
Enthusiast ,
Oct 17, 2020

Copy link to clipboard

Copied

Good news: Someone came by with a larger iphone than I have and the test does not mangle or overlap on that.

It would be nice to center it still on webpage, but looking at all Osgood insturcitons, assumptions that I'm a CSS power user, and on nice current version of DW. I'm on old version  with Parrellsa and don't now anything about:  

 

"Just locate your existing '#nav' css selector in your style.css file "

"Theres only the one line of css which you need to apply to "

 

There is not CSS whatsoever in my file. And I don't do CSS  If I need CSS, I hire a CSS expert for that.

 

If you can Osgood simply explain how to center it with old fashioned html thanks. Otherwise live with it. Ok.

 

Alas, not much was accomplished here.. Lot grief, but at least we got DW to edit threads again.

 

Even a CSS expert would have to tak a lot of time to get this right, as you see even Nancy code which I pasted did not work at all for smartphones.. just showed long string of thumbnails not grid.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 17, 2020 0
LEGEND ,
Oct 17, 2020

Copy link to clipboard

Copied

Hi larry,

At your request, l have now removed the links from my post, which reference your website.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 17, 2020 0
Enthusiast ,
Oct 17, 2020

Copy link to clipboard

Copied

thanks again O

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 17, 2020 0
Adobe Community Professional ,
Oct 17, 2020

Copy link to clipboard

Copied

The code I posted is responsive. On wide screen devices, it shows a grid.  On very small devices, it stacks vertically as intended.  But the bottom line is you can't code.  So this is an exercise in futility.  I can't help you be something you're not.  Hire a developer and good luck to both of you!

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 17, 2020 0