CSS Tab Adjustments - CSS-Tricks

This topic is empty.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
March 31, 2017 at 5:22 am #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!
March 31, 2017 at 6:38 am #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.

April 1, 2017 at 8:44 am #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>
```
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

The forum ‘Design’ is closed to new topics and replies.