Foros del Web » Creando para Internet » CSS »

Centrar Divs con css Solucion

Estas en el tema de Centrar Divs con css Solucion en el foro de CSS en Foros del Web. Bueno soy nuevo y no se si puedo postear bien aqui quiero postear como centrar un div con css pero no con position:absolute o fixed ...
  #1 (permalink)  
Antiguo 31/05/2013, 13:02
Avatar de Danielwebmas  
Fecha de Ingreso: abril-2013
Ubicación: Barranquilla
Mensajes: 2
Antigüedad: 11 años
Puntos: 1
Mensaje Centrar Divs con css Solucion

Bueno soy nuevo y no se si puedo postear bien aqui

quiero postear como centrar un div con css pero no con position:absolute o fixed y luego restandole la mitad del tamaño y del alto con margins esta es otra manera para centrarlos pero sin tener que usar fixed o absolute es muy sencillo


1. Tenemos dos divs uno llamdo alineador y otro llamado alineado el alineado es el que quedara en el centro
Código HTML:
<div class="alineador"></div>
<div class="alineado"></div> 
2. Ahora el css
Código CSS:
Ver original
  1. .alineador{
  2. float:left;
  3. width:50%;
  4. height:10px;
  5. background:red;
  6. margin-left:-400px;
  7. }
  8. .alineado{
  9. width: 800px;
  10. height: 400px;
  11. background:blue;
  12. float:left;
  13. }
Con esto quedara centrado miren como quedara


Última edición por Danielwebmas; 31/05/2013 a las 13:04 Razón: puse mal la img
  #2 (permalink)  
Antiguo 31/05/2013, 13:59
 
Fecha de Ingreso: agosto-2012
Ubicación: M.
Mensajes: 2.031
Antigüedad: 11 años, 8 meses
Puntos: 52
Respuesta: Centrar Divs con css Solucion

orales interesante, sabes en que ando batallando,
como dejar el pie de pagina al final de la pagina, sin que dependa del alto del contenido.
quiero que el pie de pagina donde se pone el copy right permanezca siempre abajo.
que este al final de la pantalla del usuario cuando la altura del contenido es corta y que se desplace hacia abajo cuando es larga.
alguna idea amigo?
__________________
a veces creemos que es algo básico pero al profundizar nos damos cuenta que estábamos tocando solo la cola de la culebra
  #3 (permalink)  
Antiguo 31/05/2013, 14:22
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Centrar Divs con css Solucion

minombreesmm si quieres preguntar algo abre un tema nuevo.

Danielwebmas para centrar cualquier elemento de bloque en CSS se suele recurrir a los márgenes automáticos:

Código CSS:
Ver original
  1. margin: 0 auto;
  #4 (permalink)  
Antiguo 31/05/2013, 15:42
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años, 2 meses
Puntos: 36
Respuesta: Centrar Divs con css Solucion

coloca el position como
position:relative;
y luego los margenes automaticos como dice nuestro amigo
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #5 (permalink)  
Antiguo 31/05/2013, 16:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Centrar Divs con css Solucion

Cita:
Iniciado por herzbazi Ver Mensaje
coloca el position como
position:relative;
La posición relativa no haría falta.
  #6 (permalink)  
Antiguo 01/06/2013, 19:02
Avatar de Danielwebmas  
Fecha de Ingreso: abril-2013
Ubicación: Barranquilla
Mensajes: 2
Antigüedad: 11 años
Puntos: 1
Respuesta: Centrar Divs con css Solucion

hola amigos cree un codigo en js que ase ese trabajo el div siempre esta al fondo y sin usar fixed solo absolute lo mejores que no improta si el contenido esta float o como sea el js hace todo lo mejro es que son unas pocas lines miren

primero creaamos un div footer en html como este

Código HTML:
Ver original
  1. <pieprog id="pieprog"></pieprog>
debe estar antes de body y debe estar afuera de toda etiqueta


luego añadimos algo de css noten que debe tener positiion absolute y left 0

Código CSS:
Ver original
  1. pieprog{width:100%; height:300px; background:black; position:absolute; left:0;}


y ahora agregamos el script dodne quieran

Código Javascript:
Ver original
  1. <script>
  2. window.onresize = window.onload = function pie(){var pie =  document.getElementById("pieprog");pie.style.top = "0";var calculo = eval(document.body.scrollHeight)/eval(100);pie.style.top = eval(document.body.scrollHeight)+eval(calculo)+"px";}
  3. </script>


y si tengo 13 años :D esto es facil de aprender
  #7 (permalink)  
Antiguo 01/06/2013, 19:22
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 2 meses
Puntos: 1146
Respuesta: Centrar Divs con css Solucion

Se nota tu edad, hoy día cualquier niño aprende técnicas de antaño y malas practicas con las que cree que es fácil aprender.

Te faltan años de practica y experiencia en campo laboral para que veas que no todo es sencillo.

Usar javascript para poner un simple pie de pagina siempre abajo es una pésima practica, se debe hacer con CSS.

Código HTML:
Ver original
  1. <div id="mainpage"><div>
  2. <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  3. </div></div>
  4. <div id="footer">2013 &copy; Arturo Gallegos</div>
Código CSS:
Ver original
  1. *{margin:0;padding:0;}
  2. html,body{height:100%;}
  3. #mainpage{min-height:100%;}
  4. #mainpage>div{padding-bottom:30px;}
  5. #footer{height:30px;margin-top:-30px;background:#999;}

Etiquetas: divs, horizontalmente
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 01:12.