[CSS] Problema con Divs, clases

Bueno estaba haciendo mi web y resulta que yo no sabia que no se podia llamar por cualquier nombre a una etiqueta por ejemplo <hola>Esta es la etiqueta hola</hola>. Entocnes aqui vi que hay que acerlo mediante clases div class...

Resulta que ahora en el IE se me ve mal, en realidad no es mal sino que no se ve como tendria que verse...
Esta es la pagina http://lacajadete.com.ar/taco.php

Paso a postear el codigo porque si no no se va a entender =P

Código :

 <td width="436" align="left" valign="top"><div class="t2"><u>TACO DE REINA:</u></div>      <p>        Caja de té con divisiones.<br>
      De madera o fibrof&aacute;cil pintada a mano en acr&iacute;lico y barnizada.</p>
      <p><div class="t3">Color de fondo:</div> Marr&oacute;n.<br>
        <br>
      <div class="t3">Color de flores:</div> rojas.<br>
        <br>
        <div class="t3">Medidas: <br></div>
      26x18x8<br>
      <div class="t4">(9 Divisiones)</div>
      <br>
        22x16,5x8,5<br>
        22x14x7,5<br>
        <div class="t4">(6 Divisiones)</div><br>
        23x10x8<br>
        <div class="t4">(3 Divisiones)</div><br>
        17x14x8<br> 
        <div class="t4">(4 Divisiones)</div><br>
        16x10x8<br>
        <div class="t4">(2 Divisiones)</div><br>
    </p>    </td>

al terminar cada Div como pueden ver en la pagina me hace un salto de parrafo yo quiero que me haga un salto de linea... aunque le puse la etiqueta <br> no se si me explico espero que si...
Alguien me podria ayuidar a configurar para que no me quede salto de parrafo y me quede salto de linea?

muchas gracias de antemano

es sencillo

Mira un div es una CAJA
que por default ocupa todo el ancho que le sea posible utilizar, espero que hasta ahi vayamos bien

aunque tu texto que este dentro de un div sea de solo una letra, el div ocupara de ser posible todo el ancho de la pagina

entonces no le da espacio a ningun otro texto o tag para esa linea
lo que traslada (el texto o tag) a la siguiente linea disponible
entonces por eso PARECE ser un salto de parrafo
pero en realidad es un br en la linea siguiente

Ejemplo:

Código :

<div>hola</div><br />hola

El div es de UNA linea de alto, luego en la siguiente linea va el BR que hace saltar esa linea e irte a la tercer linea para mostrar el 2do hola

el browser lo mostrara asi:


en cambio este:

Código :

<div>hola<br /></div>hola

el div ocupa DOS lineas de alto (por que el <br /> esta dentro del tag)
Entonces la primer linea la comprende el texto, la segunda linea (AUN EN EL DIV) esta ocupada por el BR
y la tercer linea es donde va el 2do hola

hara que el browser muestre:


espero me entiendas

Sino pues para la siguiente lo explicare con mas calma

[quote="tribak"]Actualizacion:

Supongamos que los son los bordes de el div

1.DIV de una linea

Código :

<div>hola</div><br />hola

el cierre del div forza al <br /> a moverse a la 2da linea y a [hacer su efecto] de 2da a 3er linea y en esta mostrar el hola



2.DIV de dos lineas

Código :

<div>hola<br /></div>hola

el <br /> [hara su efecto] de 1er a 2da linea y el cierre del div forzara a hola a mostrarse en la 3er linea

M...

Un intento más.
RESUMEN:
Quita los <br>, pues los "<div>", ya "lo llevan incluído" (uno, al final del <div>)

CONSEJOS:
TODAS las etiquetas, debes cerrarlas, así que las que "parezca que no tienen cierre", se cierran así: " />"
ejemplo: <br></br>, o bien (lo usual), así: <br />
así se hace con <hr />, <input type="" name="" />, <img ssrc="" />... etcétera.

Si quieres controlar la distancia entre el div, y el siguiente elemento, puedes hacerlo así: (siendo: "margin:margen-arriba margen-derecha margen-abajo margen-izqda")
O para "iniciados" Nota: mirate algún tutorial de CSS si no lo controlas.

CSS y revisa otro de XHTML

tribak escribió:

Código :

var genero='malo';
document.write('tribak, eres'+genero)

(Perdón por el spam. Prometo darme unos azotes.)

bacan, eso anda en AS2 ?

siempre quize tener mi propio medidor de maldad en Flash Me has hecho el clabber mas feliz de todos Rizome mil gracias

ya desde ahora 0 spam

Muchisimas gracias!!!
me sirvió siempre odie los divs porque no los sabia usar y quedaban mal jaja

Igualmente tengo un problemas (en realidad una consulta porque la pagina se ve bien)
Mi pregunta es la siguiente para la gente que tiene Firefox e IE se ve distinto en los 2 navegadores
como podran ver.
http://lacajadete.com.ar/taco.php
en Firefox:



y en IE


No sé si se llega a ver que hay espacios en IE que tendrian que estar en firefox pero no estan =P

Con todos mis respetos:
hacer esto es ridículo: Como te recomendamos, revisate tutoriales de CSS, porque veo que no tienes muy claro su aplicación.
Como te digimos, no deberías usar <br> (además, se escribe: <br />)
Lo que quieres hacer, vale con: por ejemplo.

REPETIMOS:
Revisate esos tutos.


>>PD:
Quizá sea mejor que hagas ensayos con otras cosas que no sean "divs", pues para este particular, no merecen la pena

Pues asi la cosa mas rara que vi, es que en IE6 para Mac las palabras

Color de fondo:

Color de flores:

Medidas:

no toman sus debidos colores

ademas creo que aun te falta estandarizar un poco tu pagina

no deberia tener el bgcolor de body ademas de que pone el color en blanco (cosa sin sentido)
tienes un estilo en tu pagina que "deberias" tener en tu archivo .css
tienes un br en el head
tienes estilos en los tags (deberian irse al .css)
tienes tags de disenho obsoletos (font por ejemplo)
br sin cerrar
parrafos vacios
tienes dos links al mail info (redundancia)

(pequenho bug en IE6)
al hacer hover en un link de mail de los de abajo info o webmiss la pagina sube un poco (como que brinca)


Apesar de eso me a encantado la conbinacion de colores que usaste,
la pagina esta sencilla pero me a fascinado

muy bien trabajo
vas por buen camino,
solo faltan unos pocos detalles


by the way
por que tu php se llama taco ?

Se llama taco porque le puse ese nombre ya que esa pagina en particular es la de TACO DE REINA... (mi mama pinta cajas de te como podran ver y uno de sus diseños se llama así)
Pues se que hay muchas cosas que faltan y estan mal pero no la termine por eso no puse tooooodo el codigo para criticar =P

El estilo que hay dentro de mi pagina ya lo saque lo que pasó es que el archivo modificado me quedó en la PC de mi trabajo y olvide traermelo a mi casa jeje

Generalmente, yo suelo hacer así las cosas me gusta que el archivo .css este terminado y bien apuntado y luego me pongo a ver el diseño final y hay algo que esta mal o que tengo que modificar, como ya dije antes no la termine todavía jeje =)

Digamos que an vez de usar <br> </br> uso directamente <br />¿?

Me habian dicho que no use <br> despues de una terminacion de <div> ahora mi pregunta si no uso <br> como hago un salto estando fuera del <div>

si puedes usar </br> como tambien <br /> lo unico necesario es que el tag se cierre

si puedes usarlos br y ya depende de tu contenido...

si quieres un div con varias lineas pues usar el br dentro del div

si lo quieres para dividir los div ($%#$ que complejo ) pues va afuera el br

Pues claro lo puse fuera del div pero igualmente no me lo toma =S
utilice <br /> igualmente no me hace los espacios

Lo que pongas dentro de tablas será interpretado de cualquier manera dependiendo del navegador. Te sugiero que tomes los consejos que te han dado y realizes el layout con XHTML y CSS, ya que asi puedes controlar mucho mejor todos los aspectos a tu antojo, y lograr que funcione igual en todos los escenarios.

Saludos

Rhapsody_Girl escribió:

rizome escribió:

¿Ves? Aqui no hay ningún "br".
Pruebalo, y verás como te deja una línea debajo de "(6 Divisiones)", algo así:

Sobre los <br /> Lo que también vale para otras como:

Claro ya utilice <br /> igualmente no se notan los espacios...
este semana no puedo probar ya que no estoy en mi casa y no tengo ni mi PC ni ninguna donde poder modiicary subir cosas al servidor así que en el fin de semana iré a mi casa y probaré
luego les comento
muchas gracias por sus ayuda

Rhapsody_Girl escribió:

Usar esa forma de "br", no es para que se noten los espacios, sino para que tu código sea "estandard" con las nuevas normas xHTML. El "br", funciona igual, pero uno está "bien escrito", y el otro no.
Es como poner: "vueno", o "bueno"...

Por lo demás, intenta lo que te comento aquí.

=) respondo...
ya hice mi codigo mas bonito aunque no se temrina de ver del todo bien...

Código :

 <td width="436" align="left" valign="top"><div class="t2">TACO DE REINA:</div>
      <p>        Caja de té con divisiones.<br />
      De madera o fibrof&aacute;cil pintada a mano en acr&iacute;lico y barnizada.</p>
   <div class="t3">Color de fondo:</div> Marr&oacute;n.<br />
   <br />
   <div class="t3">Color de flores:</div>
      rojas.<br /><br />
   <div class="t3">Medidas: </div>
         <div class="medidas">26x18x8</div>
   <div class="divisiones">(9 Divisiones)</div>
         <div class="medidas">22x16,5x8,5<br /> 22x14x7,5</div>
   <div class="divisiones">(6 Divisiones)</div>
          <div class="medidas">23x10x8</div>
   <div class="divisiones">(3 Divisiones)</div>
           <div class="medidas">17x14x8</div>
   <div class="divisiones">(4 Divisiones)</div>
           <div class="medidas">16x10x8</div>
   <div class="divisiones">(2 Divisiones)</div>
       </td>
    <td width="358" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="358" height="281">
      <param name="movie" value="taco.swf">
      <param name=quality value=high>
      <embed src="taco.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="358" height="281"></embed>
    </object>
   </td>

En firefox=
Se ve todo bien salvo por el titulo que no me toma el estilo la letra es mas grande y de color.

En IE=
sigo con los problemas de salto de linea =P y ademas el titulo esta bien el tamaño pero no se ve el color =P



Alguien dijo que en IE6 alk hacer click en los mails de abajo como que saltaba la pagina mmm lo estuve probando en diferentes computadoras que tiene el IE6 y no me pasó

No te voy a hechar la bronca... porque los colores de la web... como te dicen, están muy bien escogidos... y resultan tranquilizantes...


Pero deja que te diga una cosa:
Busca un manual de CSS, y duro con él.
Tu objetivo, debe ser no usar tablas para nada más que para mostrar datos. No para maquetar como haces ahora.

Sobre tus dudas:
> Agrega esto, para los espacios entre "divisiones" y "medidas"
¿mejor?
El atributo "margin", hace eso, "dejar espacio" alrededor. Mirate esta tabla de los atributos principales (hecha por alguien de Cristalab, no recuerdo quién...)

>Para lo del título... te ha fallado una tontería.
Lo sé, un despiste, lo tiene cualquiera.

Rhapsody_Girl escribió:

No entendí...
La idea de meter cada uno en divs, era poder controlar el "margin" que te faltaba.
Aún así, muchas partes se pueden abreviar, poniendo lo común en el body.
por ejemplo: Podría pasar a ser:

Revisa algún manual de CSS, y la tabla que te dije, y verás que todo se puede controlar con CSS. Con el buen gusto que tienes, y esta nueva herramienta, verás que nada se te resiste.

¿Quieres que tu sitio sea encontrable? es decir, que sea fácil de encontrar por la mayor cantidad de personas posible para que así puedan ponerse en contacto contigo y vender más cajitas de te (que están muy bonitas).

Si tu respuesta es, si.

Debes de saber que tu código html esta mal y que la técnica que usas para "maquetar" no es apropiada (hablo de usar tablas). Lo que estas haciendo es hacer más difícil el trabajo de los motores de búsqueda al "leer" tu sitio.

Por eso te aconsejo que leas algún tutorial más sobre Xhtml y css para que hagas bien tus encabezados, tu menú, puedas armar el esqueleto de tu diseño y Sepas como enfrentar los poderes oscuros de la maldad y vivir para contarlo.

En resumen te costará algo más de esfuerzo pero sabrás que estas haciendo un buen trabajo .
Cualquier duda o pregunta puedes hacerla en los foros ya lo sabes

Saludos.

PD.
Un parrafo se escribe así.

Código :

<p>todo lo que quieras</p>

Y no tienes que ponerle un <br/> porque el mismo párrafo, así no lo especifiques en tu hoja de estilos tiene un margin-bottom por defecto.

Un salto de línea.

Código :

<p>Y antes de que te lo pienses<br/> Zazzzz te caerá el martillo JOJOJOJO</p>

El <br/> hará el salto de linea..

Una lista, es una lista no un conjunto de Div's p's o lo que sea.. es una lista.

Código :

<ul>
   <li>26x18x8 <span>(9 Divisiones)</span></li>
   <li>22x16,5x8,5 22x14x7,5 <span>(6 Divisiones)</span></li>
   <li>23x10x8 <span>(3 Divisiones)</span></li> 
   <li>17x14x8 <span>(4 Divisiones)</span></li>
   <li>16x10x8 <span>(2 Divisiones)</span></li>
</ul>

Le puse <span> para que luego con Css darle un display:block y hacer que el span "baje" a la siguiente linea...

Y un titulo es un titulo

Código :

<h1>La Caja de Te</h1>
<h2>TACO DE REINA</h2>
<h3>Color de fondo</h3>

PD2. Seee tengo mucho tiempo libre y estoy posteando en clab y que? No lo hago muy seguido

Suerte