How to Make a Color Wheel Structure with CSS

How to make head and body different colors

The head tag is used to describe metadata and important information about your document. What shows up there is not visible.

Your p tag should be under the body tag, not the head tag.

What you are thinking of is probably the header section of your webpage, which is included under your body tag.

Also, your css declarations should take place in their own separate file.
Here is what your code should look like

<html>

  <head>
      <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <header>
    </header>
    <p>Hi there!</p>
  </body>
</html>

Styles.css

body {
  background-color: lightblue;
}

header {
  background-color: lightgreen;
}

Organization Tree chart CSS fix-width when stretched

You only have to add white-space:nowrap to the ul, replace float:left by display:inline-block to the li.

.tree ul {
    white-space:nowrap;
}

.tree li {
    display: inline-block;
}

And you can remove the max-width from the .tree.

Here you can see the example: http://codepen.io/joruus/pen/GjXQVj

CSS Organization Chart

If you don't use floats and instead change the li to display:inline-block;, you can then make sure that the li do not wrap by adding white-space:nowrap to the ul.

You then need to add white-space:normal to the li so the text inside can wrap and then add vertical-align:top to it so that if one tree has more children, then they will align properly next to each other:

* {  margin: 0;  padding: 0;}
.tree {  text-align: center;  padding-left: 10px;}
.tree ul {  display: block;  white-space: nowrap;  padding-top: 15px;  position: relative;  transition: all 0.5s;  -webkit-transition: all 0.5s;  -moz-transition: all 0.5s;}
.tree li {  vertical-align:top;  display: inline-block;  white-space: normal;  text-align: center;  list-style-type: none;  position: relative;  padding: 15px 0px 0px 60px;  transition: all 0.5s;  -webkit-transition: all 0.5s;  -moz-transition: all 0.5s;}

/*We will use ::before and ::after to draw the connectors*/
.tree li::before,.tree li::after {  content: '';  position: absolute;  top: 0;  right: 50%;  border-top: 1px solid #ccc;  width: 50%;  height: 15px;}
.tree li::after {  right: auto;  left: 50%;  border-left: 1px solid #ccc;}

/*Remove left-right connectors from elements without any siblings*/
.tree li:only-child::after,.tree li:only-child::before {  display: none;}

/*Remove space from the top of single children*/
.tree li:only-child {  padding-top: 0;}

/*Remove left connector from first child and right connector from last child*/
ul.first li.first::before,ul.first li.first::after {  border: 0 none;}
.tree li:first-child::before,.tree li:last-child::after {  border: 0 none;}

/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {  border-right: 1px solid #ccc;  border-radius: 0 5px 0 0;  -webkit-border-radius: 0 5px 0 0;  -moz-border-radius: 0 5px 0 0;}
.tree li:first-child::after {  border-radius: 5px 0 0 0;  -webkit-border-radius: 5px 0 0 0;  -moz-border-radius: 5px 0 0 0;}

/*Time to add downward connectors from parents*/
.tree ul ul::before {  content: '';  position: absolute;  top: 0;  left: 50%;  border-left: 1px solid #ccc;  width: 0;  height: 15px;}
.tree li .box {  border: 1px solid #ccc;  padding: 5px 10px 5px 0px;  text-decoration: none;  color: #666;  font-family: arial, verdana, tahoma;  font-size: 12px;  display: inline-block;  border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  transition: all .5s;  -webkit-transition: all .5s;  -moz-transition: all .5s;}

/*Hover effects*/
.tree li .box:hover,.tree li .box:hover+ul li .box {  background: #c8e4f8;  color: #000;  border: 1px solid #94a0b4;}

/*Connector styles on hover*/
.tree li .box:hover+ul li::after,.tree li .box:hover+ul li::before,.tree li .box:hover+ul::before,.tree li .box:hover+ul ul::before,.avatar {  border-color: #94a0b4;}

/*Avatar bubbles*/
.avatar {  position: relative;  top: 0px;  left: -35px;  width: 75px;  height: 75px;  margin-right: -30px;  background-size: cover;  background-color: #fff;  background-image: url("temp.jpg");  float: left;  border: .5px solid #94a0b4;  border-radius: 50%;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;}

<div class="tree">  <ul class="first">    <li class="first techops">      <span class="box">        <div class="avatar"></div>        Department Area Name<br>        <strong>Director</strong><br><br>John Smith        </span>      <ul>        <li><span class="box"><div class="avatar"></div>Manager<br/>Jane Smith</span>          <ul>            <li><span class="box"><div class="avatar"></div>Team Leader<br/>John Doe</span>              <ul>                <li><span class="box"><div class="avatar"></div>Next Title<br/>Next Name</span></li>              </ul>            </li>            <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jane Doe</span></li>            <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jeff Doe</span></li>            <li><span class="box"><div class="avatar"></div>Team Leader</span></li>          </ul>        </li>
        <li><span class="box"><div class="avatar"></div>Manager 2</span>          <ul>            <li><span class="box"><div class="avatar"></div>Name 3</span></li>            <li><span class="box"><div class="avatar"></div>Name 4</span></li>          </ul>        </li>      </ul>    </li>  </ul></div>

How to Make a Color Wheel Structure with CSS

How to make head and body different colors

Organization Tree chart CSS fix-width when stretched

CSS Organization Chart

Related Topics

Leave a reply