Foros del Web » Creando para Internet » CSS »

No logro alinear bien estas tres cosas, que codigo css me falta?

Estas en el tema de No logro alinear bien estas tres cosas, que codigo css me falta? en el foro de CSS en Foros del Web. Blog: http://www.todohit.net/web/ Como pueden ver, quiero que el cuadro donde esta facebook y twitter quede pegado arriba, y el cuadro para suscribirse al feedburner quede ...
  #1 (permalink)  
Antiguo 01/02/2012, 15:36
RGT
Usuario no validado
 
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 16 años
Puntos: 5
Exclamación No logro alinear bien estas tres cosas, que codigo css me falta?

Blog: http://www.todohit.net/web/



Como pueden ver, quiero que el cuadro donde esta facebook y twitter quede pegado arriba, y el cuadro para suscribirse al feedburner quede pegado a la derecha..

Pero no se porque me queda de esta manera.

Aqui el codigo que tengo:

Código HTML:
 <div id="identification">





		<div class="search2">
                <h3 style="color:#000;font-weight:bold;">Buscador</h3>
                <ul>
                        <form action="" method="post" id="searchform">
                    <li>
                        <input type="text" value="Qué Disco Buscas?" name="s" onblur="if(this.value == '') { this.value = 'Qué Disco Buscas?'; }" onfocus="if(this.value == 'Qué Disco Buscas?') { this.value = ''; }" class="txtfield" />
                    </li>
                    <li style="float:right;"><input type="submit" class="go" value="" /></li>
                        </form>
                </ul>
</div>

<br /><br /><br /><br />


<div class="feedburner2">
                   <h5>Recibe Todos los Discos por Correo Electronico</h5>
                   <div class="iconorss"></div>
                    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TodoHit', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="over">
                    <input type="text" name="email" value="Escribe tu E-mail..." size="30" onfocus="if (this.value == 'Escribe tu E-mail...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Escribe tu E-mail...';}" class="text" />
                   <input type="hidden" value="TodoHit" name="uri"/>
                   <input type="hidden" name="loc" value="es_ES"/>
                   <input type="submit" value="Suscríbete" id="send" class="suscribete" />
                   </form>
				 </div>




                                 <div class="fb-inicio">
				<fb:like-box href="http://www.facebook.com/TodoHit" show_faces="false" stream="false" header="false"></fb:like-box></div>
                <div class="tw-inicio">
                <a href="https://twitter.com/TodoHit" class="twitter-follow-button" data-show-count="true" data-lang="es" data-size="large">Segui @TodoHit</a></div>
                 


			</div> 
Código:
/* Buscador -------------------------------------------------------- */
.search2{
	float:right;
}
.search2 h3{
	float:left;
	text-transform:uppercase;
	padding:6px 10px 0px 0px;
}
.search2 ul{
	float:right;
	list-style:none;
	width:238px;
	height:32px;
	padding:4px 4px 0 4px;
	background:url(../img/search.png) no-repeat;
}
.search2 ul li{
	float:left;
}
.search2 ul li input.txtfield{
	float:left;
	width:180px;
	height:28px;
	line-height:28px;
	padding:0px 10px 0px 10px;
	font-size:12px;
	color:#798e94;
	background:transparent;
	border:none;
}
.search2 ul li input.go{
	float:right;
	width:32px;
	height:28px;
	border:#FFF solid 1px;
	border-radius:0px 2px 2px 0px;
	background-image:url(../img/mag.png);
	background-repeat:no-repeat;
	background-position:center center;
	cursor:pointer;
	background-color:#af0101;
}
/* Inicio> Recibe Todos los Discos por Correo Electrónico -------------------------------------------------------- */
 .feedburner2 {
	background-color: #fe7c00;
    border: 1px solid #DDDDDD;
    padding: 5px;
	width:301px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	float:right;
}

.iconorss {
	   background:url(../img/rss_icon.png) no-repeat;
       margin-right:5px;
       float:left;
	   width:29px;
	   height:30px;
}

.feedburner2 h5 {
	font-size: 1em;
    padding: 0 0 5px 0;
	color:#000;
}

.feedburner2 input.text {
    float: left;
    width: 170px;
    padding: 6px;
    border: 1px solid #ddd;
    font: normal 12px Helvetica, Arial, Verdana, Sans-serif;
}

.feedburner2 .suscribete {
    padding: 3px;
	margin: 0 0 0 5px;
}
/* Inicio> Facebook y Twitter -------------------------------------------------------- */
.fb-inicio {
	   padding:5px;
	   background-color:#e7ebf2;
	   width:244px;
	   border:1px solid #DDDDDD;
	   -webkit-border-top-left-radius:5px;
	   -moz-border-radius-topleft:5px;
	   border-top-left-radius:5px;
	   -webkit-border-top-right-radius:5px;
	   -moz-border-radius-topright:5px;
	   border-top-right-radius:5px;
}
.tw-inicio {
	   margin-top:1px;
	   padding:5px 5px 3px 5px;
	   background-color:#c8e2ef;
	   width:244px;
	   border:1px solid #DDDDDD;
	   -webkit-border-bottom-left-radius:5px;
	   -moz-border-radius-bottomleft:5px;
	   border-bottom-left-radius:5px;
	   -webkit-border-bottom-right-radius:5px;
	   -moz-border-radius-bottomright:5px;
	   border-bottom-right-radius:5px;
}
Me falta algun codigo para poner alinear todo?

Espero que me ayuden!
  #2 (permalink)  
Antiguo 01/02/2012, 17:53
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 10 meses
Puntos: 306
Respuesta: No logro alinear bien estas tres cosas, que codigo css me falta?

Hola
Buscador flotado a la derecha
Sociales flotado a la izquierda
Rss posicionado en forma absoluta

Código HTML:
Ver original
  1. <div id="cont">
  2.     <div id="social">Sociales</div>
  3.     <div id="busca">buscador</div>
  4.     <div id="rss">RSS</div>
  5.    
  6.    
  7. </div>

Código CSS:
Ver original
  1. #cont{
  2. width:100%;
  3.     border:1px solid blue;
  4.     overflow:hidden;
  5.     position:relative;
  6. }
  7.  
  8. #busca{
  9. width:250px;
  10. height:50px;
  11. float:right;
  12. background:green;}
  13.  
  14. #social{
  15. width:100px;
  16. height:200px;
  17. float:left;
  18. background:LightCyan;
  19. }
  20.  
  21. #rss{
  22.     width:250px;
  23.     height:100px;
  24.  position:absolute;
  25.     right:0px;
  26.     bottom:0px;
  27.  
  28.  background:#ff4500;
  29. }

Ejemplo

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: alinear, cosas, tres, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:33.