quitarle el comportamiento al div de bloque y volver lo a poner ojala alguien sepa

jor_0203 · #1 (**permalink**) 14/11/2011, 05:51

como podemos quitarle el comportamiento al div de bloque y como se lo podemos volver a poner
gracias

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
 
<style type="text/css">
<!--
body {
    background-color: #000099;
}
div{ background-color:#FFFF00;
 
}
-->
</style></head>
<body>
<div>
  <p>el comportatamiento que tiene los div son de bloque </p>
  <p>como podemos quitarselo o volver a ponerlo</p>
</div>
 
</body>
</html>

snowmanchip · #2 (**permalink**) 14/11/2011, 07:56

Hola jor,
No entiendo la pregunta, además pusiste como código JS y no hay nada de javascript, qué comportamiento quieres que tenga el div, quieres que se modifique de acuerdo a eventos como al cargar la página o pasar el ratón? , puedes explicar lo que quieres lograr?.

En todo caso Jquery hoy es lo mejor para realizar cambios en el css de acuerdo a eventos,
Saludos,

jor_0203 · #3 (**permalink**) 14/11/2011, 11:19

Cita:

Iniciado por snowmanchip

Hola jor,
No entiendo la pregunta, además pusiste como código JS y no hay nada de javascript, qué comportamiento quieres que tenga el div, quieres que se modifique de acuerdo a eventos como al cargar la página o pasar el ratón? , puedes explicar lo que quieres lograr?.

En todo caso Jquery hoy es lo mejor para realizar cambios en el css de acuerdo a eventos,
Saludos,

un div tiene un comportamiento que es de bloque es decir, se estira dependiendo del tamaño de monitor.
pero hay comportamiento lineal es como cuando escribimos, esto se adapta a donde este sin obligar a bajar.

ahora al tener este comportamiento bloque y poner una cosa a lado de otro usamos métodos de float para poderlos poner uno al lado del otro.
pero se me ocurrió que una cosa, le podemos agregar el comportamiento o quitar de bloque o lineal
estoy buscado el como se hace esto

jor_0203 · #4 (**permalink**) 14/11/2011, 11:20

Cita:

Iniciado por jor_0203

como podemos quitarle el comportamiento al div de bloque y como se lo podemos volver a poner
gracias
explicación
un div tiene un comportamiento que es de bloque es decir, se estira dependiendo del tamaño de monitor.
pero hay comportamiento lineal es como cuando escribimos, esto se adapta a donde este sin obligar a bajar.

ahora al tener este comportamiento bloque y poner una cosa a lado de otro usamos métodos de float para poderlos poner uno al lado del otro.
pero se me ocurrió que una cosa, le podemos agregar el comportamiento o quitar de bloque o lineal
estoy buscado el como se hace esto

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
 
<style type="text/css">
<!--
body {
    background-color: #000099;
}
div{ background-color:#FFFF00;
 
}
-->
</style></head>
<body>
<div>
  <p>el comportatamiento que tiene los div son de bloque </p>
  <p>como podemos quitarselo o volver a ponerlo</p>
</div>
 
</body>
</html>

snowmanchip · #5 (**permalink**) 14/11/2011, 11:46

Hola,
Entiendo como funcionan los divs, lo que no entiendo es cuál es el objetivo o lo que quieres lograr cambiando la propiedad por defecto del div y además si quieres que ésta cambie al gatillar un evento, para cambiar las propiedades como se muestra el div basta con modificar sus propiedades como por ejemplo agregándole el atributo inline, así deja de ser un bloque y toma esta propiedad,
Con Jquery puedes cambiar las propiedades del DIV para que pueda tomar múltiples clases dependiendo de una acción u otra. esto se logra con addClass y removeClass, por ejemplo al hacer click o pasar el ratón por encima del elemento.
Saludos

C2am · #6 (**permalink**) 14/11/2011, 12:58

http://www.librosweb.es/css/capitulo...alizacion.html
Para que un elemento de bloque se comporte como uno de linea:
display: inline;

Para que uno de linea se comporte como uno de bloque:
display:bock;

Y así, como puedes ver en el articulo que te puse al inicio, tienes varias alternativas más.

Saludos

jor_0203 · #7 (**permalink**) 14/11/2011, 12:59

Cita:

Iniciado por snowmanchip

Hola,
Entiendo como funcionan los divs, lo que no entiendo es cuál es el objetivo o lo que quieres lograr cambiando la propiedad por defecto del div y además si quieres que ésta cambie al gatillar un evento, para cambiar las propiedades como se muestra el div basta con modificar sus propiedades como por ejemplo agregándole el atributo inline, así deja de ser un bloque y toma esta propiedad,
Con Jquery puedes cambiar las propiedades del DIV para que pueda tomar múltiples clases dependiendo de una acción u otra. esto se logra con addClass y removeClass, por ejemplo al hacer click o pasar el ratón por encima del elemento.
Saludos

aunque tu le modifiques el tamaño y la altura y le hagas lo que le hagas en css sigue siendo de bloque
estoy viendo nuevas formas de maquetar ya que no me gusta el exceso de float ni de position
estoy viendo nuevas alternativas
usa tu imaginación, no todo debe ser como en la escuela que solo como te dice el maestro es la solución
yo quiero quitarlela propiedad al div de bloque
así de fácil
no te complique mas

C2am · #8 (**permalink**) 14/11/2011, 13:03

Corrección: donde dice display:bock; debe decir display:block;

Saludos

snowmanchip · #9 (**permalink**) 14/11/2011, 13:25

Uno lo que hace aquí es tratar de ayudar y obtener ayuda,
1.- El problema lo tienes tú y uno le trata de dar solución de acuerdo a cómo redactas, si no te satisface la respuesta dí gracias no me sirvió, eso es de buena educación.
2.- Con respecto a la imaginación, creo que quién no encuentra solución a su problema eres tú.
3.- Ya que estás buscando nuevas formas de maquetar escribe un libro y compártelo para así aprender de tus descubrimientos...

jor_0203 · #10 (**permalink**) 14/11/2011, 13:29

esta es la solución me gustaría saber que piensan todos
mil gracias a nuestro amigo C2am
¿pero que tan confiable es esto display: inline-block; lo agarran los navegadores?
esto esta genial
que opinan todos

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
.contenedor {
    background-color: #006633;
    width: 900px;
    
}
.m {
    background-color: #0033CC;
    width: 300px; 
    
    display: inline-block;
    
}
.m2 {
    width: 300px;
    background-color:#00CC99;
display: inline-block;
}
-->
</style>
</head>
 
<body>
<div class="contenedor">
  <div class="m">Colocar aquí el contenido para  class "m"
  <p>s</p>
    <p>s</p>
    <p>s</p>
    <p>s</p>
  </div>
 <div class="m2">
    <p>Colocar aquí el contenido para  class "m2"s</p>
    <p>s</p>
    <p>s</p>
    <p>s</p>
    <p>s</p>
    <p>&nbsp;</p>
  </div>
</div>
</body>
</html>

jor_0203 · #11 (**permalink**) 14/11/2011, 13:46

Cita:

Iniciado por snowmanchip

Uno lo que hace aquí es tratar de ayudar y obtener ayuda,
1.- El problema lo tienes tú y uno le trata de dar solución de acuerdo a cómo redactas, si no te satisface la respuesta dí gracias no me sirvió, eso es de buena educación.
2.- Con respecto a la imaginación, creo que quién no encuentra solución a su problema eres tú.
3.- Ya que estás buscando nuevas formas de maquetar escribe un libro y compártelo para así aprender de tus descubrimientos...

disculpa no trate de insultarte
realmente estoy apenado
y si estoy tratando de hacer una nueva forma de maquetar
me gusta investigar
aquí puse creo una solución
esto es para todos
no busco solo para mi
y que dios te bendiga

jor_0203 · #12 (**permalink**) 14/11/2011, 13:58

encontré un problema
le pone un magen o un padin que no se lo he podido quita
ojala alguien pueda
ya trata con padin y margen cero
alguien tiene ideas

también les doy una lista de elementos en bloque y elementos en linea
Elementos Inline
a br span bdo object
applet img map iframe tt
i b big small u
s strike font basefont em
strong dfn code q sub
sup samp kbd var cite
abbr acronym input select textarea
label button

Elementos Block
p h1-h6 div ul ol
dl menu dir pre hr
blockquote address center noframes isindex
fieldset table form

IsaBelM · #13 (**permalink**) 14/11/2011, 16:13

es por que estás usando <p> en lugar de <div>

descripción de los valores de la propiedad display

caricatos · #14 (**permalink**) 15/11/2011, 00:43

Hola:

Dentro de un elemento en línea no debe haber elementos de bloque, como los párrafos, así que poco te podría servir poner display: inline a un div que en su interior tiene elementos "p"

... para que no ocupe toda la pantalla, se puede recortar con el estilo width, pero seguiría siendo bloque.

Saludos

jor_0203 · #15 (**permalink**) 15/11/2011, 08:46

chequen la idea de Isabel
esta genial, es una de las personas más inteligentes
que conozco
aunque mi cuate caricatos dice algo muy bueno
analicen los dos pensamientos
están grandiosos
les pongo un escrito y pruebenlo

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
.contenedor {
    background-color: #006699;
    height: 78px;
}
 
.contenedor, .contenedor2 {
     display:inline;
    
}
.contenedor2 {
    background-color: #336600;
    
    
}
.contenedor_total {
    background-color: #FFCC00; 
    
}
-->
</style>
</head>
 
<body>
<div class="contenedor_total">
<div class="contenedor2">cosmología).ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss ssssssssssssssssssssssssssssssssssssssssssssssssssssssss
 
 </div>
<div class="contenedor">saludoss s s s&nbsp; mmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmkk mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmms s</div>
</div>
</body>
</html>