Comunidad de diseño web y desarrollo en internet online

Opiniones sobre como implementar css en divs

Citar            
MensajeEscrito el 03 Ago 2010 11:23 am
Que tal, me gustaria que me dieran porfavor opiniones sobre usar css en divs, el punto es el siguiente:

Tengo un sistema donde implemento divs y dentro de ellos hay formularios, quiero el mismo estilo para todos los formulariosy para los divs, pero a su vez los necesito alineados de diferente manera como puedo darles el mismo estilo a todos y a su vez acomodarlos de diferente manera?... por ejemplo, si tengo 2 divs quiero darles el mismo estilo pero ademas quiero tener uno de lado izquierdo y otro del lado derecho, si tubiera 4 divs, quiero 2 a la izquierda uno debajo del otro y 2 a la derecha uno debajo del otro... El punto es no tener estilos iguales pero con diferentes posiciones...


Gracias espero haberme explicado...

Por logoys

Claber

104 de clabLevel



 

firefox
Citar            
MensajeEscrito el 03 Ago 2010 01:13 pm
Pues tienes dos opciones.

Usar un id y "float-right" y "float-left"

O usar tablas, que para este caso concreto creo que sería más conveniente.

Por Zeromm

23 de clabLevel



 

firefox
Citar            
MensajeEscrito el 03 Ago 2010 06:58 pm
es lo de menos haces un estilos como predeterminadamente para todos tus divs... entonces si necesitas hacer algo a uno mas por ejemplo pones ase div directamente lo que le quieres hacer haciendo esto <div style="tu estilos"></div> y listo ahi esta a un div directamente...de esa manera lo puedes hacer

Por Acter-Making

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 Ago 2010 05:52 am
aunque como dice Zeroom, en estos casos aplica mejor una tabla :cool:

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 07 Ago 2010 12:58 pm
Usa una clase para poner el estilo y luego usa style="" para posicionar los divs

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 07 Ago 2010 03:14 pm
Lo siento pero creo que ninguna de las respuestas es buena en los días que corren. Voy a decir por que:

Usar tablas: ¿para qué? Tablas solo se usan para mostrar información con muchas columnas o filas... Lo que se entiende básicamente por tabla vamos... Tabla = complicaciones

Uso de style en el html: tampoco veo el por qué. Yo cuándo maqueto intento que si se abre el html sin css, quede en texto plano. Esta etiqueta personalmente no la uso casi nunca por esta razón.

Mi solución al problema:
a los pequeños elementos les das un width determinado y float left. Los enmarcas dentro de un div grande con un with que sea el doble que el primero. Al final de todo, antes de cerrar el div grande, añades un div con clear both.

Por jackbach

Claber

196 de clabLevel

1 tutorial

 

Barcelona

firefox
Citar            
MensajeEscrito el 08 Ago 2010 03:02 am
uuuy pero las tablas en determinados casos son bien útiles... di tu, intentar justificar a la derecha los labels de los campos, y a la izquerda los campos, que queden bien alineados todos, hacerlo sin tablas es una tarea un tanto complicada! En ocaciones las tablas son útiles!

bueno, pero leyendo mas detenidamente el problema, supongo que puedes aplicar un estilo general para los divs en cuestion, y luego aplicas otro estilo especial para el que tenga características especiales, por ejemplo

Código :

<div class="la_clase_general">div uno</div>
<div class="la_clase_general clase_particular">div dos</div>


Con esto, se puede aplicar mas de una clase a un div, nada mas es que la separes con un espacio y ya está!

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 08 Ago 2010 02:59 pm

escribió:

intentar justificar a la derecha los labels de los campos, y a la izquerda los campos, que queden bien alineados todos, hacerlo sin tablas es una tarea un tanto complicada!

Pues no creo que sea tan complicado... con estas líneas de css ya funcionaría

Código :

#container{
   width: 400px;
}
label{
   float: right;
   width: 100px;
   line-height: 26px;
   clear: both;
}
input{
   width: 280px;
   margin-bottom: 10px;
   height: 20px;
   float: left;
}
.clear{clear:both;}


lo he hecho en un momento para que lo vieras... funciona en firefox, safari, opera e IE. Te dejo una demo y un screenshot:



Solo he hecho esto para que no me digáis que las tablas son necesarias. Tablas no por favor...

Hasta pronto :wink:

Por jackbach

Claber

196 de clabLevel

1 tutorial

 

Barcelona

firefox
Citar            
MensajeEscrito el 08 Ago 2010 03:28 pm
:o :o :o *copypasta a mi biblioteca de recursos*
pues tenés razón :P

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 08 Ago 2010 03:48 pm
Defiendo lo que me toca.
Si en todo el HTML hay que aplicar estilo a un elemento en específico una sola vez, style es lo que corresponde.
¿Por qué no usar tablas?, porque los navegadores consumen mucho recurso de CPU para renderizarlas, esa es la única razón válida.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 08 Ago 2010 06:53 pm
El uso de la etiqueta style dentro del HTML rompe con dos reglas fundamentales:

  • Separar el contenido de la presentación
  • Maquetar de forma flexible, en aras de futuros mantenimientos/cambios

Por otro lado, ya que el estilo que coloques en el html siempre sobreescribirá el que tengas en el CSS, si luego tienes que ajustar el objeto para distintos dispositivos/navegadores o simplemente replicarlo porque más adelante te resulta últil ese estilo, deberás quitarlo del HTML para ponerlo en el CSS o no verás esos cambios.

Usar la etiqueta "style" en la web de hoy día no tiene sentido ni justificación, a mi modo de ver. En tal caso, lo que correspondería es colocar un id y mantener los estilos en la hoja de estilos, que es donde pertenecen.

Sobre el tema de usar tablas para maquetar, aparte de lo dicho más arriba, sólo agregaré un concepto: web semántica. El consumo de CPU no es la razón por la que la maquetación con tablas dejó de considerarse como un tratamiento "profesional" de un sitio web. Hoy día es más bien un error común de aficionados. Lo sé, es más jodido hacerlo sin tablas, a mí me costó horrores dejar de maquetar con tablas, pero también es mucho más rápido de renderizar, mejor para el SEO y más flexible y mantenible en el tiempo.

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 08 Ago 2010 07:51 pm

The Fricky! escribió:

...pero también es mucho más rápido de renderizar, mejor para el SEO y más flexible y mantenible en el tiempo.


Porque así e scomo debe ser.

Cade lemento fue diseñado para un uso, y ese es su significado semántico, y el de las tablas no es para maquetar.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 08 Ago 2010 10:39 pm
pero de todas maneras un formulario tiene el aspecto de una tabla, donde los elementos de la columna izquierda son los labels y los de la derecha son los inputs; supongo que las tablas se conciben para tabular objetos de esa manera, por lo que para el caso, no lo veo incorrecto. Incorrecto fuera donde uno haga un manejo de tablas que al final no parece ni 5 una tabla, pero un formulario de estos luce perfectamente como una tal!

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 09 Ago 2010 12:08 am
Estás haciendo una evaluación en base a la apariencia, y ésa no es la función del HTML, sino la organización de la información en bloques con sentido semántico. Un formulario puede parecer una tabla, pero no es una tabla. Una tabla es un conjunto de datos tabulados, un formulario es un elemento para enviar información. La apariencia no es un tema a tratar cuando hablamos de HTML, para eso existe el CSS. Plantear el uso de etiquetas en base a como se ven es una perspectiva equivocada del problema.

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 Ago 2010 04:09 am
pues, lo veo desde la perspectiva en que el formulario pueden llegar a ser datos tabulados, en los que tengo un label y tengo un espacio para escribir el dato... es decir, columna de labels, columna de campos de ingreso de info, y filas de cada tipo de dato requerido. Si lo ves así, son datos tabulados, no?

Por otro lado, entiendo que, en rigor, no se puede considerar los input como un "dato" por lo que la tabla en este caso no aplica.

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 09 Ago 2010 05:31 pm

creo que no hace falta que convenzamos de nada a nadie, es un debate que hace mucho que quedó resuelto...

Lo que no entiendo es como ante una pregunta como la del inicio del tema, las cuatro primeras respuestas son tales, aunque me alegra que la gente esté dispuesta a ayudar. @Freddie, podría ser interesante agregar votación a las respuestas. Solo es una propuesta eh?

Hasta pronto!

Por jackbach

Claber

196 de clabLevel

1 tutorial

 

Barcelona

firefox

 

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