duda de id div doble

cartau07 · #1 (**permalink**) 20/01/2016, 09:47

Hola buenos días la presente es para ver quien me puede ayuda quiero alinear dos div de id diferente en diferente posiciones como asi
colocar una imagen en el lado izquierdo y un texto en el lado derecho y que la alineacion sea hacia abajo hice esto pero nada que me alinea y estoy usado vertical-align: text-bottom; en el texto pero no me funcion ayuda por favor
<div id='cssmenu'>
<div id="logotipo">
<tr>
<td><img src="Imagenes/LOGOS/OperadorEE.jpg"></td>
<td><a href="Actualizar.php"> Actualizar Datos</a></td>
<td>&nbsp &nbsp</td>
<td><a href='close.php'>Cerrar Sesión</a></td>
</tr>
</div>
</div>
-----este es el html----
#cssmenu {
text-align: left;
width: auto;
font-family: 'Open Sans', sans-serif;
line-height: 2;
background: #FFFFFF;

}
#cssmenu tr td a{
vertical-align: text-bottom;
}

#logotipo{
float: left;

}
no se que estoy haciendo mal ayuda

g3kdigital · #2 (**permalink**) 20/01/2016, 14:02

Hola Cartau07

En primer lugar, no deberías usar tablas para esto

es una maldad!

.

En segundo, sí quieres alinear 2 div ¿por que colocas uno dentro del otro? O es que quieres posicionarlo dentro del otro div?

Tercero, no entiendo bien como es la alineación que quieres lograr ¿podrías hacer una imagen del diseño que quieres? algo básico, puede ser un paint. O explicarte mejor.

Yo con gusto te quiero ayudar, pero de momento solo puedo recomendarte usar flexbox o elementos inline-block porque no me queda claro que quieres lograr.

cartau07 · #3 (**permalink**) 20/01/2016, 14:51

hola tranqui ya lo logre mi problema era colocar el logo y el link de actualizar en diferentes posiciones pero aliniado en la misma finalidad pero ya lo logre :)
asi lo logre jajaja
<body>
<div id='cssmenu'>
<div id="logotipo">
<tr>
<td><img src="Imagenes/LOGOS/OperadorEE.jpg"></td>
<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 &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 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</td>
<td><a class="text" href="Actualizar.php"> Actualizar Datos</a></td>
<td>&nbsp &nbsp</td>
<td><a class="text" href='close.php'>Cerrar Sesión</a></td>
----html
a {
color: #428bca;
text-decoration: none;
vertical-align:bottom;
}
---css gracias de ante mano :)

g3kdigital · #4 (**permalink**) 20/01/2016, 23:39

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 originalEste es tu código:
 
<div id='cssmenu'>
  <div id="logotipo">
    <!--falta la etiqueta de apertura de tablas <table> y la de cuerpo de tablas </tbody>-->
    <tr>
      <td><img src="Imagenes/LOGOS/OperadorEE.jpg"></td>
      <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
        &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
        &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-->
      <td><a class="text" href="Actualizar.php"> Actualizar Datos</a></td>
      <td>&nbsp &nbsp</td><!--otra celda vacia-->
      <td><a class="text" href='close.php'>Cerrar Sesión</a></td>
    <!--falta etiqueta de cierre de columna </tr>-->
    <!--etiqueta e cierre de cuerpo de tabla </table> y de la misma tabla </table>-->
  <!--etiqueta de cierre de </div> con id = logotipo-->
<!--etiqueta de cierre de </div> con id = cssmenu-->

Bien arreglado todo sería así:

Código HTML:

Ver original<div id='cssmenu'>
  <div id="logotipo">
    <table>
      <tbody>
        <tr>
          <td><img src="Imagenes/LOGOS/OperadorEE.jpg"></td>
          <td id="celda2"></td>
          <td><a class="text" href="Actualizar.php"> Actualizar Datos</a></td>
          <td id="celdavacia" class="celda4"></td>
          <td><a class="text" href='close.php'>Cerrar Sesión</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

y arreglando el

Código CSS:

Ver originala {
  color: #428bca;
  text-decoration: none;
  vertical-align: bottom;
}
 
table {
  width: 100%;
}
 
#logotipo table td:nth-child(2)
/*o puedes agregar un id o clase a la celda #2 ejemplo: celda2*/
, .celda2 {
  width: 90%; /*esto ancha la celda al máximo*/
}
 
 
/*Para la celda 4 puees agregar un id o una clase así:*/
.celda4,
/* o puede ser */
#celdavacia {
  width: 5%; /*para darle un espacio a la celda vacia*/
}

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<nav id='cssmenu'>
  <div id="logotipo">
    
    <img src="Imagenes/LOGOS/OperadorEE.jpg"></td>
  
    <a class="text" href="Actualizar.php"> Actualizar Datos</a>
    <a class="text" href='close.php'>Cerrar Sesión</a>
 
  </div><!--cierre de logotipo-->
</nav><!--cierre de nav cssmenu-->

Código CSS:

Ver originala {
  color: #428bca;
  text-decoration: none;
  vertical-align: bottom; 
}
 
#cssmenu {
  text-align: right; /*con esto todo se corre a la derecha*/
}
 
img {
  float: left; /*hace que únicamente la imagen se posicione a la izquierda*/
}
 
/*y añadiria a los enlaces lo siguiente*/
a
{  
  display: inline-block; /*esto es para darle un tamaño maximo*/
  text-align: center; /*alinea los enlaces al medio*/
  width: 80px; /*lo suficiente para que queden en 2 renglones*/
}

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.

cartau07 · #5 (**permalink**) 21/01/2016, 07:08

muchas gracias excelente forma pero a mi código es un poco diferente pues veras yo solo te pase un 2% de el con mis nav tengo una barra de herrramienta y css de ella para que dependiendo del navegador se vea asi: <nav>
<ul>
<li><a class="active-menu" href="index.php"><i class="fa fa-home"> &nbsp </i>Inicio</a></li>
<li><a class="active-menu" href="eventos.php"></span>Eventos</a></li>
<li><a class="active-menu" href="nomina.php">Nomina</a></li>
<li><a class="active-menu" href="Galeria.php"><span class="glyphicon glyphicon-camera">Galeria</a></li>
</ul>
</nav>
---HTML
header{

height: 66px;
margin: 1px ;
width: 10px;
border-radius:2px,4px;
margin-right: 3px ;
}
nav{
/*Bordes redondeados*/
-webkit-border-radius:25px;/*Para chrome y Safari*/
-moz-border-radius:20px;/*Para Firefox*/
-o-border-radius:15px;/*Para Opera*/
border-radius:10px;/*El estandar por defecto*/
background-image: -webkit-gradient(linear, left top, center bottom, from(#26C2F7), to(#26C2F7));/*Para chrome y Safari*/
/*Degradados*/
background-image: -moz-linear-gradient(top center, #26C2F7, #26C2F7);/*Para Firefox*/
background-image: -o-linear-gradient(top, #17B98E, #CCC);/*Para Opera*/
background-image: linear-gradient(top, #17B98E, #CCC);/*El estandar por defecto*/
overflow:hidden;
height: auto;
padding:11px;
margin: center;
overflow: hidden;
text-align: left;
width: 1350px;
display: inline-table;
}
nav ul{
list-style:none;
margin:0 10px 0 10px;
padding:0;
list-style-type: none;
position: relative;
left: 50%;
clear:left;
float:left;
text-align: left;
}
nav ul li{
/*Bordes redondeados*/
-webkit-border-radius:25px;/*Chrome y Safari*/
-moz-border-radius:25px;/*Firefox*/
-o-border-radius:5px;/*Opera*/
border-radius:5px;/*Estandar por defecto*/
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
margin-right:14px;
text-align:left;
/*Sombras para texto, los mismos parametros que box-shadow*/
text-shadow: 0px 1px 0px #FFFFFF;
position: relative;
right: 160%;
}
nav ul li a{
color:white;
display:block;
padding:10px;
text-decoration:none;
/*Transiciones*/
-webkit-transition: 0.25s linear all;
-moz-transition: 0.25s linear all;
-o-transition: 0.25s linear all;
transition: 0.25s linear all;
}
nav ul li a:hover {
color:#000;
background-color:#000;
color:#FFF;
text-decoration:none;
padding:10px 15px;
display:inline-table;
margin: 0;
}

a .href{
margin-right: 4px;
left: 40px;
right: 20px;

} y uso bootstrap para mi codigo pero Thanks por tu ayuda me sirviera para muchas cositas pero tendré en cuenta lo del table tbody que de verdad ahh sido un error no colocarlo ;)...