Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design CSS Tab Adjustments

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #252824
    Veiss
    Participant

    Basically all I want to do is:

    • Change the w3-border-orange color to a hex color of #ce6905, it doesn’t want to take a hex value.
    • Make it so the first tab is automatically selected upon page load

    So here’s my code..

    <!DOCTYPE html>
    <html>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
    <body>
    
    <div>
      <div>
        <a href="void(0)">
          <div>Installation</div>
        </a>
        <a href="void(0)">
          <div>Service & Support</div>
        </a>
        <a href="void(0)">
          <div>System Design</div>
        </a>
         <a href="void(0)">
          <div>Project Management</div>
         </a>
          <a href="void(0)">
              <div>Consulting</div>
          </a>
          <a href="void(0)">
                 <div>Product Development</div>
          </a>
    
    
    
    </a>
      </div>
    
      <div>
        <h2><font color=#ce6905>Installation</h2></font>
        <p>We install stuff.</p>
      </div>
    
      <div>
        <h2><font color=#ce6905>Service & Support</h2></font>
        <p>Service & support text here.</p>
      </div>
    
      <div>
        <h2><font color=#ce6905>System Design</h2></font>
        <p>System Design  text here.</p>
      </div>
    
      <div>
        <h2><font color=#ce6905>Project Management</h2></font>
        <p>Project Management  text here.</p>
      </div>
    
      <div>
        <h2><font color=#ce6905>Consulting</h2></font>
        <p>Consulting  text here.</p>
      </div>
    
      <div>
        <h2><font color=#ce6905>Product Development</h2></font>
        <p>Product Development  text here.</p>
      </div>
    
    
    </div>
    
    
    function openCity(evt, cityName) {
      var i, x, tablinks;
      x = document.getElementsByClassName("city");
      for (i = 0; i 
    
    </body>
    </html>
    

    Any tips on refining this?

    Thanks!

    #253337
    Paulie_D
    Member

    For one thing <font> is an obsolete/deprecated element and shoudn’t be used.

    I’d start there. Just use a span if you must wrap the heading text in another element.

    Then put the styles in the CSS stylesheet…where they belong…not in the HTML.

    Also, you can’t select something in JS by classname if the class doesn’t exist in the HTML. so this x = document.getElementsByClassName("city"); is doing…nothing.

    #253355
    Mottie
    Member

    Also the HTML isn’t valid in that they are not wrapped properly…

    <h2><font color=#ce6905>Product Development</h2></font>
    

    When you do replace the <font> tag with a <span>, make sure to place the closing tag inside the header:

    <h2><span class="highlight-color">Product Development</span></h2>
    
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design’ is closed to new topics and replies.