Comunidad de diseño web y desarrollo en internet online

ayuda centrar subsection sin float

Citar            
MensajeEscrito el 07 Mar 2012 02:46 pm
Hola buenos dias bueno tengo aqui un section donde dentro tengo 2 section mas, pero quiero que uno siempre este a la izquierda y el otro este a la derecha con el mismo margen que el section 1 y estos esten centrados, pero quiero realizarlo sin el float, tambien lo manejo con % por la parte de las resoluciones, en el primer section va a ir unos anuncios chicos y en el segundo section va a ir un anuncio rotando, que me recomiendan que use % o en px ? por el ancho, gracias pongo mi codigo

index.html

Código :

<section id="anuncio">
         <section id="anuncio_izq">
            dd
         </section>
         <section id="anuncio_der">
            dd2
         </section>
         
      </section>


css

Código :

#anuncio
{
   background: #FFF;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
   border-radius: 1em;
   margin: 1em auto;
   min-height: 380px;
   width: 90%;

}

#anuncio_izq
{
   background: #99CCCC;
   border-radius: 1em;
   display: inline-block;
   margin: 1em 1em;
   padding: 1em 0;
   min-height: 370px;
   vertical-align: top;
   width: 20%;
   
}

#anuncio_der
{
   background: #333333;
   border-radius: 1em;
   display: inline-block;
   margin: 1em auto;
   padding: 1em 0;
   min-height: 370px;
   vertical-align: middle;
   width: 70%;

}

Por ldguzman

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 08 Mar 2012 01:09 am
No uses porcentajes y usa float. Tu primer section es tu contenedor, de ahí haz que flote a la derecha o la izquierda y tengan el ancho que cubra el contenedor relativamente.

Suerte.

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 09 Mar 2012 06:42 pm
los porcentajes son valores relativos, que son dificiles de controlar, es más práctico usar valores absolutos como indica kinduff.

en cuanto a linear... hay tres soluciones, pero realmente no se cual es la mejor, según casos.

1._ es con float
2._ usando una tabla
3._ usando el estilo display:inline (este suele tener problemas con MIExplorer)

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox
Citar            
MensajeEscrito el 09 Mar 2012 06:47 pm

Silvestre_ escribió:

2._ usando una tabla

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 09 Mar 2012 06:59 pm
bueno es una opción, yo no soy de usar tablas y se ha escrito mucho.... yo además nunca fue de usar tablas incluso cuando hace mas de 10 años se creian los "expertos" que eso era el santo grial.
No obstante actualmente vuelven algunos defensores de ellas... y como te decia no soy defensor de ellas...(no suelo usarlas en ningun diseño), es verdad que al cargar la página fuerzan a cuadrar el diseño pro decirlo de alguna manera... y algo será cuando siguen existiendo en html5. por contra los floats pierden su lugar privilegiado en HTML5

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox
Citar            
MensajeEscrito el 09 Mar 2012 07:55 pm
Silvestre_, las tablas existen en HTML5 (y continuarán existiendo) porque tienen una función: mostrar datos tabulados, no porque sean una forma válida de dar formato a un sitio. Por otro lado, el uso de inline-block resuelve el problema de caja que presenta float, por eso su uso popular en CSS3.
Igual puedes usar float en este caso, ldguzma, sólo asegúrate de agregar al contenedor "overflow:auto" u "overflow:hidden", que resuelve el problema de caja de los float, otra forma válida es usar la regla de cálculo que se usa en Responsive Web Design para crear los grid fluídos:

Código :

valor (%) = ancho_contenedor / ancho_elemento * 100

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 09 Mar 2012 10:08 pm
Otra opción es usar tablas pero sin usar tablas xD

Me explico, por medio de display: table puedes hacer que los bloques se comporten como tablas, si quieres que se comporte como columnas entonces usas table-column, como celdas table-cell y asi sucesivamente.

Más Información

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 09 Mar 2012 10:59 pm
The Fricky!, yo no uso tablas pero a veces podria ser una solución, repito no uso y creo que no usaré nunca... otra cosa es el inline-block, pero sigo viendo errores con el miexplorer.. o es que hago algo mal?

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox
Citar            
MensajeEscrito el 10 Mar 2012 03:41 am
Lo que ocurre es que las versiones de IE anteriores a la 9 no soportan inline-block o inline-table, etc. En esos casos la única solución en CSS es usa float, por eso los errores en IE.
En cualquier caso, la capa de presentación corresponde a CSS, no a HTML. Por eso lo de evitar usar tablas para dar formato al contenido.

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.