Problema con DIVS que no logro solucionar

elite11251 · #1 (**permalink**) 10/10/2012, 09:23

Hola, estoy teniendo un problema al cual no le encuentro solucion luego de horas, por eso recurro a ustedes que me den una mano! Muchas gracias desde ya por tomarse un tiempo en ayudar!

El problema es que creo una "tabla de divs", en la cual aparecen tres columnas, en la primera se encuentra un anuncio, en la segunda un espacio separador y en la tercera un script. El GRAN problema es que el primer div donde se encuentra el anuncio me genera un margen superior que no logro SACAR. A ver si me dan una mano, les dejo el codigo y un adjunto con el problema que ocurre para que lo vean de forma visual.

Código:

<!-- DIV separador-->
<div style="height:10px"></div>

<!-- En este espacio de codigo comenzaria el problema-->
<div style="width:900px; height:600px">

<div style="float:left; width:160px; height:600px">AQUI VA EL CODIGO DEL ANUNCIO</div>

<div style="float:left; widht:10px; height:600px"></div>

<!-- SCRIPT-->
<div id="myDiv" style="float:right; width:730px; height:600px; background-color:#FFFFFF;"></div>

</div>
<!-- En este espacio de codigo terminaria el problema-->

<!-- Este div separador lo respeta solo el SCRIPT, no el anuncio-->
<div style="height:10px"></div>

C2am · #2 (**permalink**) 10/10/2012, 23:31

No tiene un ejemplo online, porque es probable que el problema no se encuentre en lo que muestras, sino en el código del anuncio.

Otro tema, no hacen falta esos div separadores, para eso está "margin" (margenes).

Saludos

elite11251 · #3 (**permalink**) 11/10/2012, 06:09

Muchas gracias por tu respuesta C2am. El codigo del anuncio es tal cual lo da google. Lo raro es que si lo hago con tablas no me genera ese margen, pero me da otro tipo de errores que no logro solucionar.

Con respecto a los divs separadores, seria mucha molestia para vos transcribir el codigo con el equivalente en "margin" ya que no logro darme cuenta como meter ese margen para generar ese espacio. Gracias nuevamente!

C2am · #4 (**permalink**) 11/10/2012, 09:45

http://www.librosweb.es/referencia/css/margin.html

Saludos

tutorias · #5 (**permalink**) 21/10/2012, 11:43

Un saludo. La propiedad vertical-align:top de css te puede servir.

Código HTML:

<!DOCTYPE HTML>
<html lang="es-CO">
<head>
  <meta charset="UTF-8">
  <title>tutorias.co</title>
  <style type="text/css">
    .section{
    position      : relative;
    vertical-align: top;
    }
    .article{
    border        : 1px solid #555;
    display       : inline-block;
    margin        : .2em;
    max-width     : 40%;
    vertical-align: top;
    }
    </style>
</head>
<body>
  <section class="section">
    <article class="article">banner</article>
    <article class="article" style="margin-left:10px">espacio</article>
    <article class="article">texto</article>
  </section>
</body>
</html>

furoya · #6 (**permalink**) 21/10/2012, 16:33

Acá hay un asunto primario : para saber qué pasa es indispensable un código que muestre el problema. Y el que está con la imagen no tiene ninguno, se ve perfectamente alineado.
Antes de responder adivinando, habría que esperar que elite11251 termine de leer el manual, y si no lo resuelve, venga a postear un ejemplo más ajustado a su situación.

Entonces va a haber un problema real, y -seguramente- una solución real que valga el esfuerzo de postearla para que la aproveche la comunidad.

Dos últimos párrafos, y no los molesto más.

elite11251 : imágenes más pequeñas, por favor. 640×480 es una buena medida.

tutoriasco : te lo comento acá para no postear en otro tema más. Ya sé que no te dejan poner direcciones en tu firma, pero no ofrezcas ayuda personalizada en temas del Foro. Lo que haya que consultar, se hace aquí. Ni en tu tuita, ni en tu féisbuk, ni en tu blog, ni por MP, ni por MV. La idea es que vengás a colaborar, no a promocionarte a un foro bien rankeado.

tutorias · #7 (**permalink**) 21/10/2012, 17:15

Mi objetivo principal al ingresar a este foro es colaborar y el secundario suponer que a alguien le interese ver mi firma y seguirme en twitter a través de @tutorias. Las politicas de privacidad o normas de forosdelweb.com, las lei y en ningún apartado me niega la posiblidad de poner mi URL como firma, ya que mi URL no promulga referidos y otras formas anti-ecologicas de "ganar dinero". En niguna otra parte hago la supuest publicidad que usted indica a mi web, ya que poner <title>tutorias.co</title> es un titulo cualquiera de una solución de buena calidad.

Cada respuesta que indico la estudio, trabajo, practico y le hago la respectiva validación W3C (que muchos no hacen), antes de dar respectiva respuesta.

En el ejercicio planteado por elite1151 su imágen si esta fuera de linea por unos pixeles, por lo cual mi respuesta es válida.

furoya · #8 (**permalink**) 21/10/2012, 20:39

Sí, eso supuse. Viendo la coordinación de tu sintaxis.

Bien, ya que estamos...

El Foro no te permite (o permitía, ya no sé si eso lo cambiaron) poner enlaces en tu firma o tus post sin un mínimo de mensajes. (Ahora que estoy logueado, capaz que lo busco, pero mientras tipeaba aún estaba offline.)
Para saltearte ese inconveniente hay que publicar muchos mensajes durante cierto tiempo.
Pero esa intención sería muy obvia, porque tendrían que aparecer mensajes tuyos en un montón de temas seguidos.

Otra cosa que no te permiten es ofrecerte para consultas por fuera de este sitio.

Problema menu derecho position:fixed #2

Y lo de poner tu tuita o la dirección de tu blog en ... los títulos de codigo de ejemplo (si lo cuento no me lo creen...) en otras circunstancias sería una curiosidad. Pero si le sumamos que lo exponés hasta en tu nick, no tenés mucho derecho al pataleo.

Hablar de "ganar dinero" y "soluciones de buena calidad" tampoco te ayuda.

Las respuestas estudiadas que ofrecés hasta parecen repetidas (cut&paste) entre temas. Justamente por eso me confundí en otro de tus post (metiste tantos juntos que me mareaste). Pero ya voy y lo aclaro.
Podría agregar que estás ofreciendo respuestas de manual, pero eso lo dejamos mejor para el siguiente párrafo.

Si gente con más criterio y más experiencia recomienda mirar tutoriales, tratá de no postearle detrás el código que van a encontrar en esos tutoriales. La idea es que aprendan, no que se lleven los deberes hechos desde acá. Porque a los que pretenden eso, justamente los estamos raleando.

El que validés tu código -o no- es una anécdota. El código se lo valida cada uno cuando ponga en línea su proyecto, si se le da la gana. A mí, personalmente, me importa poco si los documentos validan, más me interesa que sean compatibles. Y lo que posteamos acá son ejemplos, experimentos. Lo único que faltaba es que los pretendan validados. Por eso algunos lo hacemos cuando nos cabe.

Y en el ejercicio planteado por elite1151 no hay ninguna imagen. Ése es el drama, no puso un ejemplo que podamos probar. Y tampoco fomentamos eso. Porque encima, el código que acompaña la captura -como dije más arriba- se ve sin ese espacio de más. Tal vez ocurra en algún navegador o versión en especial, pero es algo que también debió aclarar. Porque de otra forma tendríamos que adivinar, y ya está probado que eso no es buen negocio para nadie.

Si querés colaborar, primero mirá cómo lo hacemos los que hace bastante tiempo estamos en éste y otros foros. Después vení a discutir.

tutorias · #9 (**permalink**) 22/10/2012, 14:16

Pues si mi aporte no sirve, que me lo hagan saber los verdaderos mediadores del foro, no usted por el hecho de tener cuatro digitos en el número de mensajes enviados o cinco como karma.

Yo llamo solución de calidad a mi codigo programado, probado y validado y el hecho que a usted le venga o no en gana validarlo no indica que no sea de calidad.

Y es verdad, tienes toda la razón, todo lo que se postea aca ya existe en algun manual o sitio de referencia profesional.

Acepto el error de que en una de mis ahora famosas soluciones gracias a ti, me publique, pero esto no volverá a pasar y tampoco me hice rico por ello.

Por último, que verguenza con usted visitante por esta poco productiva discusión.

Por favor, gracias por su detallado seguimiento a mis post.

Realmente me siento un poco atacado por sus comentarios, me trae malos recuerdos, por ejemplo cuando el perro de mi casa orinaba los pies de las botas de mis amigos solo para marcar su territorio.

Le hago un cordial llamado para que continue dando soluciones a los visitantes, en los último post has hecho esto?

Merece usted todos mis respetos por su antiguedad y seguro muchos también le agradecen y de todos el mio es el que menos le interesa, de todos modos gracias.

Código HTML:

<!DOCTYPE HTML>
<html lang="es-CO">
<head>
	<meta charset="UTF-8">
	<title>tutorias.co</title>
</head>
<body>
	GRACIAS!!
</body>
</html>

Cita:

Iniciado por furoya

Sí, eso supuse. Viendo la coordinación de tu sintaxis.

Bien, ya que estamos...

El Foro no te permite (o permitía, ya no sé si eso lo cambiaron) poner enlaces en tu firma o tus post sin un mínimo de mensajes. (Ahora que estoy logueado, capaz que lo busco, pero mientras tipeaba aún estaba offline.)
Para saltearte ese inconveniente hay que publicar muchos mensajes durante cierto tiempo.
Pero esa intención sería muy obvia, porque tendrían que aparecer mensajes tuyos en un montón de temas seguidos.

Otra cosa que no te permiten es ofrecerte para consultas por fuera de este sitio.

[url=http://www.forosdelweb.com/f4/problema-menu-derecho-position-fixed-1018195/#post4295095] Problema menu derecho position:fixed[/url] #2

Y lo de poner tu tuita o la dirección de tu blog en ... los títulos de codigo de ejemplo (si lo cuento no me lo creen...) en otras circunstancias sería una curiosidad. Pero si le sumamos que lo exponés hasta en tu nick, no tenés mucho derecho al pataleo.

Hablar de "ganar dinero" y "soluciones de buena calidad" tampoco te ayuda.

Las respuestas estudiadas que ofrecés hasta parecen repetidas (cut&paste) entre temas. Justamente por eso me confundí en otro de tus post (metiste tantos juntos que me mareaste). Pero ya voy y lo aclaro.
Podría agregar que estás ofreciendo respuestas de manual, pero eso lo dejamos mejor para el siguiente párrafo.

Si gente con más criterio y más experiencia recomienda mirar tutoriales, tratá de no postearle detrás el código que van a encontrar en esos tutoriales. La idea es que aprendan, no que se lleven los deberes hechos desde acá. Porque a los que pretenden eso, justamente los estamos raleando.

El que validés tu código -o no- es una anécdota. El código se lo valida cada uno cuando ponga en línea su proyecto, si se le da la gana. A mí, personalmente, me importa poco si los documentos validan, más me interesa que sean compatibles. Y lo que posteamos acá son ejemplos, experimentos. Lo único que faltaba es que los pretendan validados. Por eso algunos lo hacemos cuando nos cabe.

Y en el ejercicio planteado por elite1151 no hay ninguna imagen. Ése es el drama, no puso un ejemplo que podamos probar. Y tampoco fomentamos eso. Porque encima, el código que acompaña la captura -como dije más arriba- se ve sin ese espacio de más. Tal vez ocurra en algún navegador o versión en especial, pero es algo que también debió aclarar. Porque de otra forma tendríamos que adivinar, y ya está probado que eso no es buen negocio para nadie.

Si querés colaborar, primero mirá cómo lo hacemos los que hace bastante tiempo estamos en éste y otros foros. Después vení a discutir.

furoya · #10 (**permalink**) 22/10/2012, 20:19

Como dije, eso supuse, pero acá hay gente medio despistada, y hay que venir a mostrárselo.

elite11251 · #11 (**permalink**) 15/11/2012, 15:18

muchas gracias por tomarse un tiempo en ayudarme

pude solucionar el problema.

saludos!