[SOLUCIONADO] Acomodar elemento en un div

christianrojmag · #1 (**permalink**) 27/03/2013, 19:16

Saludos amigo del foro, recurro a ustedes porque tengo una pequeña dificultad con un elemento que quiero poner dentro de un div, aqui muestro una imagen de la pagina

y el codigo a continuacion:

Código HTML:

<body> 
<div id="menu-wrapper"> 

	<ul id="hmenu">
    	<li><a href="#">Altas</a>
        	<ul class="sub-menu">
            	<li><a href="">Usuarios</a></li>
                <li><a href="">Equipo</a></li>
                <li><a href="">Licencia</a></li>
            </ul>
		</li>
        <li><a href="#">Bajas</a>
        	<ul class="sub-menu">
            	<li><a href="">Usuarios</a></li>
                <li><a href="">Equipo</a></li>
                <li><a href="">Licencia</a></li>
                </ul>
		</li>
        <li><a href="#">Mantenimiento</a></li>
        <li><a href="#">Tickets</a>
        	<ul class="sub-menu">
            	<li><a href="">Nuevos</a></li>
                <li><a href="">Revisados</a></li>
            </ul>
        </li>
        <li><a href="#">Reportes </a></li>
                <li><a href="cerrar_sesion.php">Cerrar</a></li>
               

	</ul>
<h4 style="text-align:right; color:#FFF; font-family:'Courier New', Courier, monospace;;">Usuario:<?php echo $_SESSION["usuario"];?></h4>    
</div>
<div id="busqueda">
	<table align="center" border="0">
    <form>
	<tr>
    	<td colspan="2" align="center"><img src="img/logo_busqueda.jpg" width="210" height="250"></img></td>
    </tr>
   	<tr>
    	<td colspan="2" align="center">
        	
        	<input type="search" name="busqueda" size="50" placeholder="Ingrese el Id" maxlength="15"  style="text-align:center; font-weight:bolder bold" autofocus required></td>
    </tr>
    <tr>
    	<td align="center"><input value="Buscar" name="button" type="submit" id="buttonbuscar" onclick="PopWindow()" /></td>
        </form>
    </tr>
    </table>
</div>
<div id="popup" style="display: none;">
    <div class="content-popup">
        <div class="close"><a href="#" id="close"><img src="images/close.png"/></a></div>
        <div>Contenido POPUP</div>
    </div>
</div>
<div id="piedepag">
<h1>ESTE ES EL PIE DE PAGINA</h1>
</div>
</body>

Mi duda es que quiero que donde dice Usuario:Christian este alineado con el menú de lado derecho pero al quererlo poner a continuación de las listas me lo pone abajo como se ve en la imagen, espero puedan ayudarme...GRACIAS

Carlangueitor · #2 (**permalink**) 27/03/2013, 19:23

Tienes que "flotar" (aplicarle float a la derecha) para eso.

Saludos

SathyaSanles · #3 (**permalink**) 27/03/2013, 19:23

Te recomiendo usar CSS para eso..

Código CSS:

Ver original<style>
#hmenu{
float:left;
}
#menu-wrapper h4{
float: right;
}
</style>

Comenta si te funciona! :) Saludos

christianrojmag · #4 (**permalink**) 27/03/2013, 19:32

Muchisimas gracias a los dos que respondieron jejejeje, me sirvio mucho, este es el resultado

Gracias por sus aportes...Saludos :)

SathyaSanles · #5 (**permalink**) 27/03/2013, 19:36

Cita:

Iniciado por christianrojmag

Muchisimas gracias a los dos que respondieron jejejeje, me sirvio mucho, este es el resultado

Gracias por sus aportes...Saludos :)

Si a:

Código CSS:

Ver original<style>
#menu-wrapper h4{
float: right;
padding; 2px; 
}
</style>

Se te centraria más verticalmente! Anda probando agregale 1px mas o restale y dejalo mas cope! :P

Saludos!

christianrojmag · #6 (**permalink**) 27/03/2013, 19:51

De echo si le aumento en padding se esconde el elemento h4, como podria hacerle para dejarlo a la altura del menu...Saludos

Código:

#menu-wrapper h4{
float: right;
color:#FFF;
padding: 1px 10px;
font-stretch:extra-expanded;

SathyaSanles · #7 (**permalink**) 27/03/2013, 19:52

Cita:

Iniciado por christianrojmag

De echo si le aumento en padding se esconde el elemento h4, como podria hacerle para dejarlo a la altura del menu...Saludos

Código:

#menu-wrapper h4{
float: right;
color:#FFF;
padding: 1px 10px;
font-stretch:extra-expanded;

probá con margin-bottom 1px.. despues anda subiendo :D

christianrojmag · #8 (**permalink**) 27/03/2013, 20:00

Pues probe con el tuyo pero no se movia para ningun lado y probe solo con margin y pues ya quedo

Código:

#menu-wrapper h4{
float: right;
color:#FFF;
padding: 1px 10px;
font-stretch:extra-expanded;
margin:9px;
}

GRACIAS

SathyaSanles · #9 (**permalink**) 27/03/2013, 20:43

Me alegro compañero que funcionase tal cual lo querias! :D

Saludos! Y que el aprendizaje te sea leve! :P