Hiker

51 minutes ago, dsonesuk said:

Give nav links specific class name as in .navlinks then try

a:hover:not(.navlinks){

}

Should work.

Thanks, I appreciate the help!

4 hours ago, shaili_shah said:

Instead of passing <a> tag in css you can give the class or ID to the specific link that will be style.

And pass that selector in css.

Ex:-

Suppose you have a link like: <a href="#" class="abc">Hyperlink</a>

<a href="#" class="abc">Anchor tag</a>

<a href="#" >Navbar Link</a>

CSS would be like:

<style>

.abc:link {
  color: #616161;
}
.abc:visited {
  color: #616161;
}
.abc:hover {
  color: #8BD448;
}
.abc:active {
  color: #2AA8F2;
}

</style>

This will be styled the only link which has the class name "abc".

Hope you get it.

 

That worked.

At one point I was close, only a . away!

Thanks!

I thought this would be easier than it's turning out to be.

I want to style a few links on a page but don't want the style to interfere with navigation links. Here's the code that I want to use but it seemed to interfere with the navbar links.

<style>

a:link {
  color: #616161;
}
a:visited {
  color: #616161;
}
a:hover {
  color: #8BD448;
}
a:active {
  color: #2AA8F2;
}

</style>

4 hours ago, dsonesuk said:

We use Atom at work.

Do you use an FTP package? I have remote-ftp but I can't connect, it's flagging "secureOptions": null,

13 hours ago, dsonesuk said:

If you use media queries the idea is for every device width extra small, small mobiles, medium/tablet, desktop, extra large desktop, you have to define using media queries the size of parent element holding the images, if you use only one that size can be carried on to the rest, depending on min-width, max-width queries you use and how you positioning the order, one has sizes in ascending order, the other descending order.

I personally don't think you require it for this, just extend full width, and let the images stack themselves naturally, you can add margins, or use justify-content: to space themselves evenly, and align-item: to center.

You might just use media queries to adjust image sizes or spacing depending on device, but that's it.

With the slow revision update, you do clear history? ctrl-F5, if your host caches content on the server, temporary turn it off! must be option for that!

 

DON'T rely on Dreamweaver preview, always view through a actual browser.

Use F12 web developer tools to make changes live! (some browser have ability to store the changes you made, so you can copy changes to your css file) use mobile toggle toolbar, which gives you the ability to view changes in many device sizes, (portrait and landscape).

Thanks for the tips. The page looks horrible on Dreamweaver CS6 in Design view, but somewhat better in Live mode. I mostly use it for  it's FTP capabilities.  If you haven't tried it yet, check out Atom text editor. It has a bunch of add-on called packages including a live server which instantly updates any changes to what your working on upon save on your default browser. I believe it also has an FTP package which I'll try down the line. There's a very helpful video on Atom on Youtube which explains set-up and a few essential packages by Traversy Media.

Everything seems to be working correctly now, even on a tablet. Check it out.  There's really not much left to be done except for taking a few better images later in the spring, so it should be safe from further destruction for now. 😉

Back again.  

Being pretty much a novice  I have a seriously bad habit of tweaking. The problem is the site was moved to a new server/service with GoDaddy and it takes hours to see any revisions on the web. I mainly use Dreamweaver CS6 to edit and put. I've also been using Atom live server which allows to to see results instantly. Well, after a number of revisions, I opened the site and most images, either weren't showing or broke. I really don't believe it as anything on my part because they still displayed properly on live server. A few calls to GoDaddy were no help. Four different browsers, a phone and a tablet showed varied results. I went over everything, checked with W3 Validator and for the most part was coming out clean. I may have compound the issue by deleting a few files from the server (html, css, htaccess) and reuploaded the files right after,  I was confident were OK. I also put a time stamp as a comment. Even though it looked like these files were on the remote server, on right click source view, the time stamps said otherwise. Another couple hours chatting with a tech "that had limited access" finally he put the new files, and at last  the site started displaying correctly. The tech claimed the "configuration file" was causing the problem. Not totally convinced  I did tweak the htaccess file, and eliminated all old redirects and made sure the code had proper syntax.

It's mostly displaying the way I wanted, but still needs a little help. On a phone the flexbox seems to be working as designed  two images wide by eight tall in portrait view, and 4x4 in landscape. The last remaining "problem"  is on a tablet, the images are still 16 images tall.

Thanks for all the help and encouragement!  

Of course, l'll try it.

3 hours ago, dsonesuk said:

You need to add selector above inner curly brace.

To be honest I'm not sure where and what you mean.

I was able to run the w3 validator again. It confirmed the stray end tags are gone but now has two new errors concerning the media query above. If I try to edit the code the text in the Atom editor turns purple which I believe is an error.

I think I may need a media query, will something like this help?

@media screen and (max-width: 575px) {
   {
    display: block;
  }

 }

I'm starting a new thread on my tables to flexbox issue. W3 validator threw up a bunch of errors with my old table. I've since converted it to a flexbox. I rechecked on the validator and only a couple stray tags were detected, which have since been fixed.

I got my flexbox half right. It displays fine on a laptop, two rows which stack if the window  is resized.  However it's just a single column on mobile (tablet of phone) in either portrait or landscape mode, whereas I rather have it stack two or more wide. Any help I find on Google seems to point me towards displaying a single column on mobile which I seem to have covered

I just changed servers so changes to code can take hours to take effect which is really frustrating.  If someone can give me a hand having it display the way I prefer, I'd really appreciate it.  If it's OK, I'll just post the link to the page I need help with. https://johnaldenclub.com/floorplans.html 

Here's the the code that I used for the flexbox on the member.css file.

 /* Flexbox row styles */
  .row-flex {
    margin: 20px auto;
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
  }
  .row-flex div {
    border: 1px dashed gray;
    flex: 1 1 100px;
    text-align: center;
    padding: 12px;
  }

To add a border to the images.

img {
  border: 1px solid #555;
}

Also, in the head.
"<meta name="viewport" content="width=device-width, initial-scale=1">

I got my flexbox half right. It displays fine on a laptop, two rows which stack if the window  is resized.  However it's just a single column on mobile (tablet of phone), whereas I rather have it stack two or three wide. Any help I find on Google seems to point me towards displaying a single column on mobile which I seem to have covered

I just changed servers so changes to code can take hours to take effect which is really frustrating.  If someone can give me a hand having it display the way I prefer, I'd really appreciate it.  If it's OK, I'll just post the link to the page I need help with. https://johnaldenclub.com/floorplans.html 

Here's the the code that I used for the flexbox on the member.css file.

 /* Flexbox row styles */
  .row-flex {
    margin: 20px auto;
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
  }
  .row-flex div {
    border: 1px dashed gray;
    flex: 1 1 100px;
    text-align: center;
    padding: 12px;
  }

Also,
<meta name="viewport" content="width=device-width, initial-scale=1">

1 hour ago, Hema said:

I think here you will find a way 

 

https://www.w3schools.com/css/css3_flexbox_container.asp

 

specially in this example https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-items_baseline

lol... I'm getting my post mixed up. I figured out how to make a flexbox to replace an old table. Now I'll try this!

5 minutes ago, Hema said:

I think here you will find a way 

 

https://www.w3schools.com/css/css3_flexbox_container.asp

 

specially in this example https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-items_baseline

Thanks. I found a similar code elsewhere but am using the Tryit Editor to test.

The title pretty much explains it all. I will be linking the image to a pdf. An attached image visualizes what I'm looking for. Ideally, an alternative would be for the image to get larger on click without going to another page. 

3 hours ago, Sunamena said:

You can indeed use a flexbox

In very short: 
 

table {

width: 100%;

}

table tr {

display: flex;

}

table tr td {

flex 1;

}

In more detail: 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Thanks, I'll check it out.

On 11/26/2020 at 4:46 PM, JMRKER said:

I don't think you have given enough information to help.

You show the errors, mostly on 3 lines of your code, but you don't show the code we could comment upon.
What do you mean by responsive table?  Show fewer rows when resized?  Where is break point determined?

Have you considered using a flexbox or grid layout yet instead of a table for the responsive layout?
Are the cells only images or do they also contain text?

BTW, welcome to the forums.

 

Sorry about that, there were errors for each image. The code is attached in a text file. The images are png's that link to pdf's. The table is from an older website, I copied into a W3 Schools template.  

table code.txt

I could use some help converting obsolete html concerning tables to css for a responsive design site.  

I added the h1 tag to the title of the page but it's thrown off the positioning which isn't as appealing. I'll live with it until I can better figure it out. I was able to correct the 2nd problem so that's good.

8 hours ago, dsonesuk said:

Just add h1 tag that best describes what the page is about,  like in the band template they could add the actual band name in a h1 tag. Which breaks done to sub headings 'the band',  'tour dates' and 'contacts'.

Use css text-align: justify: either add to class name selector, then add that class name to the element you want to justify.

Thanks, I think I have it straightened out. I recently switched to a new server so when I put the edited webpage the results aren't immediate. We'll see

I'm using the W3 Schools  "Startup" as a template for responsive design website and ran it through a couple SEO validators. For the most part it gets good marks except for the fact there's no h1 tag. I've tried to figure out ways to fix get around this for the title tag, but am basically a self-taught novice at web design. 

Also, in W3 html validator the - div align="justify" - tag in an image gallery is flagged as obsolete. It says use css instead but it's a little beyond my page grade.

If I could get help with either of these problems (mostly the 1st) I'd appreciate it.