Foros del Web » Creando para Internet » CSS »

como poner columnas y contenido a mi footer

Estas en el tema de como poner columnas y contenido a mi footer en el foro de CSS en Foros del Web. hola amigos, mi pregunta es que ya tengo la barra footer en mi web pero lo que quiero es ponerle contenido, gadgets, columnas y quisiera ...
  #1 (permalink)  
Antiguo 26/03/2011, 15:30
 
Fecha de Ingreso: marzo-2011
Mensajes: 3
Antigüedad: 6 años, 8 meses
Puntos: 0
como poner columnas y contenido a mi footer

hola amigos, mi pregunta es que ya tengo la barra footer en mi web pero lo que quiero es ponerle contenido, gadgets, columnas y quisiera que me ayudaran a poder construirlo, espero y me ayuden, miren quiero hacer el footer parecido a este http://i56.tinypic.com/2luou8i.png no quiero que sea esactamente igual pero esa es mi idea

diseño css de mi footer

#footer {
padding:0;
width:100%;
height: 50px;
margin:0;
right: 0;
background-color: #000000;
position:absolute;
}

Última edición por Souldhack; 26/03/2011 a las 15:35
  #2 (permalink)  
Antiguo 26/03/2011, 15:58
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: como poner columnas y contenido a mi footer

coloca dos div principales en el primero coloca un overflow:hidden y en su interior 3 div con ancho al 33% y dales un float:left; y en tu segundo div principal coloca el menú
Código HTML:
Ver original
  1. <div>
  2.     <div>columna 1</div>
  3.     <div>columna 2</div>
  4.     <div>columna 2</div>
  5. </div>
  6. <div>menu footer</div>
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 26/03/2011, 18:38
 
Fecha de Ingreso: marzo-2011
Mensajes: 3
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: como poner columnas y contenido a mi footer

Cita:
Iniciado por Ag666 Ver Mensaje
coloca dos div principales en el primero coloca un overflow:hidden y en su interior 3 div con ancho al 33% y dales un float:left; y en tu segundo div principal coloca el menú
Código HTML:
Ver original
  1. <div>
  2.     <div>columna 1</div>
  3.     <div>columna 2</div>
  4.     <div>columna 2</div>
  5. </div>
  6. <div>menu footer</div>
Me podrias explicar un poco mas es que apenas empiezo con todo esto de los css, gracias
  #4 (permalink)  
Antiguo 26/03/2011, 19:24
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: como poner columnas y contenido a mi footer

lo invito a leer sobre posisionamiento flotante
http://librosweb.es/css/capitulo5/po..._flotante.html

y con respecto a lo que busca conseguir le dejo el siguiente codigo de ejemplo

Código CSS:
Ver original
  1. #footer{clear:both;width:900px;margin:10px auto;}
  2. #footer .panel1 div{width:33&#37;;float:left;border:1px #ccc solid;}
  3. #footer .panel2{width:80%;margin:auto;}
  4. #footer .panel2 a{float:left;}
  5. #footer .panel2 ul{float:right;margin:0;padding:0;}
  6. #footer .panel2 ul li{display:inline;}
Código HTML:
Ver original
  1. <div id="footer">
  2.     <div class="panel1">
  3.         <div>elemento 1</div>
  4.         <div>elemento 2</div>
  5.         <div>elemento 3</div>
  6.     </div>
  7.     <div class="panel2">
  8.     <a href="#" class="copyright">copy right</a>
  9.     <ul>
  10.         <li><a href="#">link 1</a></li>
  11.         <li><a href="#">link 2</a></li>
  12.         <li><a href="#">link 3</a></li>
  13.         <li><a href="#">link 4</a></li>
  14.     </ul>
  15.     </div>
  16. </div>
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 27/03/2011, 13:54
 
Fecha de Ingreso: marzo-2011
Mensajes: 3
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: como poner columnas y contenido a mi footer

Cita:
Iniciado por Ag666 Ver Mensaje
lo invito a leer sobre posisionamiento flotante
[url]http://librosweb.es/css/capitulo5/posicionamiento_flotante.html[/url]

y con respecto a lo que busca conseguir le dejo el siguiente codigo de ejemplo

Código CSS:
Ver original
  1. #footer{clear:both;width:900px;margin:10px auto;}
  2. #footer .panel1 div{width:33%;float:left;border:1px #ccc solid;}
  3. #footer .panel2{width:80%;margin:auto;}
  4. #footer .panel2 a{float:left;}
  5. #footer .panel2 ul{float:right;margin:0;padding:0;}
  6. #footer .panel2 ul li{display:inline;}
Código HTML:
Ver original
  1. <div id="footer">
  2.     <div class="panel1">
  3.         <div>elemento 1</div>
  4.         <div>elemento 2</div>
  5.         <div>elemento 3</div>
  6.     </div>
  7.     <div class="panel2">
  8.     <a href="#" class="copyright">copy right</a>
  9.     <ul>
  10.         <li><a href="#">link 1</a></li>
  11.         <li><a href="#">link 2</a></li>
  12.         <li><a href="#">link 3</a></li>
  13.         <li><a href="#">link 4</a></li>
  14.     </ul>
  15.     </div>
  16. </div>
hola amigo gracias por esos cosejos, pero lo que pasa es que me quedan en la parte izquierda y yo los queria un tanto abajo , mira mi idea es esta http://i56.tinypic.com/2luou8i.png
no quiero que sea igual, espero que me ayudes a hacer similar ese contenido del footer que quiero, espero tu respuesta , gracias
  #6 (permalink)  
Antiguo 27/03/2011, 16:45
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: como poner columnas y contenido a mi footer

amigo mio, yo no le he dado un código exacto para hacer copy-paste solo he proporcionado un código de ejemplo para colocar su contenido en 3 columnas tal como lo muestra en la foto que nos indica. sírvase leer la guía de css que le he proporcionado para ajustar cada detalle.

para conseguir su diseño le sugiero leer sobre las propiedades float, margin, padding, background, clear
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Etiquetas: columnas, contenido, footer
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 11:00.