Foros del Web » Creando para Internet » CSS »

Duda si he hecho una chapuza

Estas en el tema de Duda si he hecho una chapuza en el foro de CSS en Foros del Web. Hola a todos. He maquetado un diseño y me ha salido bien, pero no sé si es una chapuza lo que he hecho y quería ...
  #1 (permalink)  
Antiguo 09/10/2011, 11:45
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 15 años, 8 meses
Puntos: 19
Sonrisa Duda si he hecho una chapuza

Hola a todos.

He maquetado un diseño y me ha salido bien, pero no sé si es una chapuza lo que he hecho y quería opiniones.
Os cuento:

Mi código es el siguiente:
Código:
<div style =”fondo”>
    <div style="blanco">
        <div class="columnas"></div>
        <div class="columnas"></div>
        <div class="columnas"></div>
    </div>
</div>
Tengo un div que es un fondo
Un div blanco que rompe el fondo para poder escribir información y centrado.
3 divs que son 3 columnas de texto, maquetado en plan revista.
El primer fondo no puede ser body pq la web en sí tiene otro color. Así que no hay otra manera que hacerlo con 3 divs.

El problema reside en que las 3 columnas necesitan un float:left, para poder ir una al lado de la otra. Por lo tanto el div blanco también necesita un float:left para ampliarse al contenido de las columnas, a su vez el fondo, para ampliarse con el blanco.
Ahora bien. Cómo hago para que el div blanco se centre con un margin:auto, cuando lo tengo con float:left?

Pues bien.. mi solución ha sido poner entre blanco y columnas:
Código:
<div style =”fondo”>
  <div style="width:980px; margin-left:auto; margin-right:auto"> 
    <div style="blanco">
        <div class="columnas"></div>
        <div class="columnas"></div>
        <div class="columnas"></div>
  </div>
    </div>
</div>
Lógicamente ha funcionado... pero lo consideráis una chapuza?? :S
  #2 (permalink)  
Antiguo 09/10/2011, 14:13
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Duda si he hecho una chapuza

Bueno, muy claro no me queda

con esto, tendrias tres columnas centradas
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. .columnas {
  8. float: left;
  9. width: 33.33%;
  10. height: 50px;
  11. }
  12. </head>
  13.  
  14.   <div style="width:980px; margin: 0 auto;">
  15.         <div class="columnas">texto col 1<br />zzzzzz</div>
  16.         <div class="columnas">texto col 2<br />ssssss</div>
  17.         <div class="columnas">texto col 3<br />ggggg</div>
  18.   </div>
  19. </body>
  20. </html>

Y esto
Código HTML:
Ver original
  1. <div style =”fondo”>
  2.     <div style="blanco">

habrás querido poner class="fondo" y class="blanco" ?
Buenó sería ver todo completo, html y css

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: center, float
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:50.