bikerchris

On 10/18/2018 at 3:21 PM, u2krazie said:

I apologize if this question is common. But I don't know where to begin. I just found out about w3. I look at tutorials and want to experiment.

I am using blogspot. Instead of using their template, how can I start out with a template from w3. I want my website to meet w3 standard.

Please point me in the right direction. Thank you.

 

 

As someone who's also started using the w3.css, I appreciate your frustration. Just like me though, you do need to start reading the readily available literature, starting with this page:

https://www.w3schools.com/w3css/default.asp

In brief though, you'll have to start by either downloading the w3.css file and placing it on your web hosting, or adding a link to the permanent link to the file hosted on the w3 site, placed between the head tags:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Once you've done that, you can then refer to it by using something like:

<div class="w3-container">The heading</div>
<div class="w3-container">The main body text</div>
<div class="w3-container">The footer</div>

The above is very simplified and there are many more features, you do just have to read up as I did. Having done that, I now have 2 web sites that are very mobile friendly - I'm not going to say it was quick, but I'm very pleased with the result and it saves me creating my own css file.

Hope that helps.

Good grief, thank you again @Ingolme, I was changing completely the wrong thing. It now works 😀

I appreciate you probably deal with silly questions like this often, so thank you again. I'll try to keep them to a minimum and even help out answering the most obvious questions.

All the best, Chris

21 hours ago, Ingolme said:

Give the functions different names.

Thank you @Ingolme, I'll give it a go.

Hi all,

As I said, sorry to bother you but hope someone can help, I've got two bits of code and they're not playing nicely together. The first is part of a mobile friendly burger dropdown:

<script>

// Used to toggle the menu on small screens when clicking on the menu button
function myFunction(Nav) {
    var x = document.getElementById("Nav");
    if (x.className.indexOf(" w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}

</script>

The second is linked to a w3 search facility(table):

<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>

The second interferes with the first and I wonder how I can tweak it and the associated html so it plays nicely. I've tried changing a few bits, like an amateur would, but with no joy.

Thanks in advance.

Chris