Ver Mensaje Individual
  #4 (permalink)  
Antiguo 20/01/2016, 23:39
Avatar de g3kdigital
g3kdigital
 
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 10 años, 7 meses
Puntos: 39
Respuesta: duda de id div doble

Te felicito por haberlo logrado, pero insisto, estas haciendolo de la manera incorrecta y colocando más código del necesario, además de dejar etiquetas mal cerrradas, por ejemplo:

Código HTML:
Ver original
  1. Este es tu código:
  2.  
  3. <div id='cssmenu'>
  4.   <div id="logotipo">
  5.     <!--falta la etiqueta de apertura de tablas <table> y la de cuerpo de tablas </tbody>-->
  6.     <tr>
  7.       <td><img src="Imagenes/LOGOS/OperadorEE.jpg"></td>
  8.       <td> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
  9.        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
  10.        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</td> <!--celda vacía y con espacios en blanco innecesarios-->
  11.      <td><a class="text" href="Actualizar.php"> Actualizar Datos</a></td>
  12.      <td>&nbsp &nbsp</td><!--otra celda vacia-->
  13.      <td><a class="text" href='close.php'>Cerrar Sesión</a></td>
  14.    <!--falta etiqueta de cierre de columna </tr>-->
  15.    <!--etiqueta e cierre de cuerpo de tabla </table> y de la misma tabla </table>-->
  16.  <!--etiqueta de cierre de </div> con id = logotipo-->
  17. <!--etiqueta de cierre de </div> con id = cssmenu-->

Bien arreglado todo sería así:

Código HTML:
Ver original
  1. <div id='cssmenu'>
  2.   <div id="logotipo">
  3.     <table>
  4.       <tbody>
  5.         <tr>
  6.           <td><img src="Imagenes/LOGOS/OperadorEE.jpg"></td>
  7.           <td id="celda2"></td>
  8.           <td><a class="text" href="Actualizar.php"> Actualizar Datos</a></td>
  9.           <td id="celdavacia" class="celda4"></td>
  10.           <td><a class="text" href='close.php'>Cerrar Sesión</a></td>
  11.         </tr>
  12.       </tbody>
  13.     </table>
  14.   </div>
  15. </div>

y arreglando el
Código CSS:
Ver original
  1. a {
  2.   color: #428bca;
  3.   text-decoration: none;
  4.   vertical-align: bottom;
  5. }
  6.  
  7. table {
  8.   width: 100%;
  9. }
  10.  
  11. #logotipo table td:nth-child(2)
  12. /*o puedes agregar un id o clase a la celda #2 ejemplo: celda2*/
  13. , .celda2 {
  14.   width: 90%; /*esto ancha la celda al máximo*/
  15. }
  16.  
  17.  
  18. /*Para la celda 4 puees agregar un id o una clase así:*/
  19. .celda4,
  20. /* o puede ser */
  21. #celdavacia {
  22.   width: 5%; /*para darle un espacio a la celda vacia*/
  23. }

Pero como te decía, todo esto no debería hacerse con tablas, al menos si te no te preocupa que te penalizen los navegadores o que nunca consigas una calificación positiva en algún validador, yo igual sí quieres saber te propongo la siguiente estructura:

Código HTML:
Ver original
  1. <nav id='cssmenu'>
  2.   <div id="logotipo">
  3.    
  4.     <img src="Imagenes/LOGOS/OperadorEE.jpg"></td>
  5.  
  6.     <a class="text" href="Actualizar.php"> Actualizar Datos</a>
  7.     <a class="text" href='close.php'>Cerrar Sesión</a>
  8.  
  9.   </div><!--cierre de logotipo-->
  10. </nav><!--cierre de nav cssmenu-->

Código CSS:
Ver original
  1. a {
  2.   color: #428bca;
  3.   text-decoration: none;
  4.   vertical-align: bottom;
  5. }
  6.  
  7. #cssmenu {
  8.   text-align: right; /*con esto todo se corre a la derecha*/
  9. }
  10.  
  11. img {
  12.   float: left; /*hace que únicamente la imagen se posicione a la izquierda*/
  13. }
  14.  
  15. /*y añadiria a los enlaces lo siguiente*/
  16. a
  17. {  
  18.   display: inline-block; /*esto es para darle un tamaño maximo*/
  19.   text-align: center; /*alinea los enlaces al medio*/
  20.   width: 80px; /*lo suficiente para que queden en 2 renglones*/
  21. }

y fíjate que logre lo mismo, pero con menos cosas en el html y dando la estructura visual solo con css como debe ser.
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital