2

buenas tengo este código, que es un organigrama

.organigrama * {
  margin: 0px;
  padding: 0px;
}

.organigrama ul {
  padding-top: 20px;
  position: relative;
}

.organigrama li {
  float: left;
  text-align: center;
  list-style-type: none;
  padding: 20px 5px 0px 5px;
  position: relative;
}

.organigrama li::before,
.organigrama li::after {
  content: '';
  position: absolute;
  top: 0px;
  right: 50%;
  border-top: 1px solid #27629b;
  width: 50%;
  height: 20px;
}

.organigrama li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #27629b;
}

.organigrama li:only-child::before,
.organigrama li:only-child::after {
  display: none;
}

.organigrama li:only-child {
  padding-top: 0;
}

.organigrama li:first-child::before,
.organigrama li:last-child::after {
  border: 0 none;
}

.organigrama li:last-child::before {
  border-right: 1px solid #27629b;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  border-radius: 0 5px 0 0;
}

.organigrama li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

.organigrama ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #27629b;
  width: 0;
  height: 20px;
}

.organigrama li a {
  border: 1px solid #27629b;
  padding: 1em 0.75em;
  text-decoration: none;
  color: #333;
  background-color: rgba(255, 255, 255, 0.5);
  font-family: arial, verdana, tahoma;
  font-size: 0.85em;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  transition: all 500ms;
}

.organigrama li a:hover {
  border: 1px solid #fff;
  color: #ddd;
  background-color: rgba(39, 98, 155, 0.7);
  display: inline-block;
}

.organigrama>ul>li>a {
  font-size: 1em;
  font-weight: bold;
}

.organigrama>ul>li>ul>li>a {
  width: 15%;
}

.organigrama li {
  float: left;
  text-align: center;
  list-style-type: none;
  padding: 20px 5px 0px 5px;
  position: relative;
}
<Div id="organigrama" name="organigrama" class="organigrama">
  <ul id="ul1" name="ul1">
    <li>
      <a href="#"><label>Junta Directiva</label></a>
      <ul>
        <li>
          <a href="#"><label>Direccion general</br>Carlos maldonado</label></a>
          <ul>
            <li>
              <a href="#"><label>Direcion nacional de</br>ventas</br>Alejandro Fuentes</label></a>
              <ul>
                <li>
                  <a href="#"><label>Gerente de zona</br>Luis Salinas</label></a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#"><label>Direccion de organizacion</br>y procesos</br>Yorbis Centeno</label></a>
              <ul>
                <li>
                  <a href="#"><label>Gerente de zona</br>Luis Salinas</label></a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#"><label>Direccion administrativa</br>Daisy Marcano</label></a>
              <ul>
                <li>
                  <a href="#"><label>Gerente de zona</br>Luis Salinas</label></a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

lo que deseo es que luis salinas este debajo de los tres sin ser repetido

4
  • Hola Rosibel. ¿Has intentado algo para conseguir lo que pides? Añade más informacion, siguiendo Cómo preguntar,.Un saludo
    – lois6b
    el 30 oct. 2017 a las 15:32
  • @lois6b, he intentado varias cosas pero lo que hace es desordenar el organigrama, creo lineas paralelas a las que tengo pero tampoco, ejecuta para que lo veas, ya modifique para que pueda verse el 30 oct. 2017 a las 15:40
  • quieres que quede asi?
    – lois6b
    el 30 oct. 2017 a las 15:45
  • @lois6b ya el chico de abajo me dio una idea, la estoy realizando, y al parecer me va a funcionar el 30 oct. 2017 a las 15:49

1 respuesta 1

2

Pues simplemente debes jugar con la estructura de listas que tienes, no crear dentro de cada <li> un <ul> para ingresar el item "Gerente de zona" si no mas bien sacarlo una sola vez a la misma altura de los items principales, así:

.organigrama * {
  margin: 0px;
  padding: 0px;
}

.organigrama ul {
  padding-top: 20px;
  position: relative;
}

.organigrama li {
  float: left;
  text-align: center;
  list-style-type: none;
  padding: 20px 5px 0px 5px;
  position: relative;
}

.organigrama li::before,
.organigrama li::after {
  content: '';
  position: absolute;
  top: 0px;
  right: 50%;
  border-top: 1px solid #27629b;
  width: 50%;
  height: 20px;
}

.organigrama li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #27629b;
}

.organigrama li:only-child::before,
.organigrama li:only-child::after {
  display: none;
}

.organigrama li:only-child {
  padding-top: 0;
}

.organigrama li:first-child::before,
.organigrama li:last-child::after {
  border: 0 none;
}

.organigrama li:last-child::before {
  border-right: 1px solid #27629b;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  border-radius: 0 5px 0 0;
}

.organigrama li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

.organigrama ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #27629b;
  width: 0;
  height: 20px;
}

.organigrama li a {
  border: 1px solid #27629b;
  padding: 1em 0.75em;
  text-decoration: none;
  color: #333;
  background-color: rgba(255, 255, 255, 0.5);
  font-family: arial, verdana, tahoma;
  font-size: 0.85em;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  transition: all 500ms;
}

.organigrama li a:hover {
  border: 1px solid #fff;
  color: #ddd;
  background-color: rgba(39, 98, 155, 0.7);
  display: inline-block;
}

.organigrama>ul>li>a {
  font-size: 1em;
  font-weight: bold;
}

.organigrama>ul>li>ul>li>a {
  width: 15%;
}

.organigrama li {
  float: left;
  text-align: center;
  list-style-type: none;
  padding: 20px 5px 0px 5px;
  position: relative;
}
<Div id="organigrama" name="organigrama" class="organigrama">
  <ul id="ul1" name="ul1">
    <li>
      <a href="#"><label>Junta Directiva</label></a>
      <ul>
        <li>
          <a href="#"><label>Direccion general</br>Carlos maldonado</label></a>
          <ul>
            <li>
              <a href="#"><label>Direcion nacional de</br>ventas</br>Alejandro Fuentes</label></a>
            </li>
            <li>
              <a href="#"><label>Direccion de organizacion</br>y procesos</br>Yorbis Centeno</label></a>
            </li>
            <li>
              <a href="#"><label>Direccion administrativa</br>Daisy Marcano</label></a>
            </li>
<li>
                  <a href="#"><label>Gerente de zona</br>Luis Salinas</label></a>
                </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

1
  • Muchas gracias me diste una idea, crearlo en el del medio y crear una linea que lo una con css el 30 oct. 2017 a las 15:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.