Problema con dreamweaver,distribucion de contenido.

neon261979 · #1 (**permalink**) 08/11/2009, 10:30

Hola tengo un problema con dreamweaver cs4 que no se como solucionarlo.
Resulta que yo pongo informacion en la pagina web con dreamweaver cs4 y en diseño en DWcs4 tengo que poner videos de youtube + texto+fotos.

Para mezclar todo eso y ponerlo exactamente en el lugar que yo quiero de la pagina, utilizo el "dibujar div PA" junto con una tabla y asi puedo insertar los videos donde quiera de la pagina.

Pero la verdad es que me resulta muy dificil administrar bien la pagina ya que tengo que estar todo el rato dandole a la vista previa para ver donde va quedando ubicado cada cosa en el navegador.

Bien pues, para que me salga bien en el navegador todo en su sitio, en DWcs4 alomejor tengo que poner el texto separadisimo del video, y asi en el navegador me sale junto.

Como puedo hacer para que en dwcs4 me salga todo tal y como sale en el navegador.

Porque cuando quiera hacer otra entrada,y escriba, todo lo que habia no se baja paulatinamente segun voy dandole al intro, sino que el texto si pero lo que tengo metido dentro de un "dibujar div PA" se queda donde estaba.

No se si me he explicado bien cualquier duda preguntarme, y porfavor a ver si me podeis resolver esta duda ya que es un rollo cada vez que hago una entrada y tengo que estar a ciegas moviendo todo mas o menos.

Gracias.

juaniquillo · #2 (**permalink**) 08/11/2009, 12:04

Divs PA son divs posicionados absolutamente con relación al último elemento padre posicionado. Si no tienes ninguno, se posicionará con relaciún al body (o al html supongo). Te doy un consejo, nunca confíes en la vista de diseño de DW, y menos cuando tienes divs deposición absoluta. Siempre ve como se ve en el navegador. Si tienes un contenedor de un ancho fijo y centrado dale una posición relativa al contenedor para que el div se posicione con relación al contenedor y no al body.

neon261979 · #3 (**permalink**) 08/11/2009, 12:47

y no hay una forma mas rapida y facil de hacerlo?
Por que posicionar un video o lo que sea dentro de la web no se puede hacer de otra forma no?
Es que es un poco dificil y rollo hacer las entradas en la web porque eso que cuento que tienes que estar todo el rato mirando donde va el divs pa , como sale en la vista previa del navegador etc etc
Existe una solucion para ese problema o todos por muy experimentados que seais teneis este mismo problema.

Por cierto esto que me explicas me lo puedes explicar un poco mejor ya que no lo entiendo mucho.

Gracias.

juaniquillo · #4 (**permalink**) 08/11/2009, 16:20

lo que yo te dije es bastante fácil de hacer si tienes un concepto claro de CSS. Peor de cualquier forma, es difícil ayudarte si no dejas un enlace a tu página o, en su defecto, el código.

neon261979 · #5 (**permalink**) 08/11/2009, 16:49

Mira el enlace es www.josportal.com a ver si me podeis ayudar
Si me dices que codigo tengo que poner y os va mejor eso para que me ayudeis pues te lo pongo no hay problema.

juaniquillo · #6 (**permalink**) 08/11/2009, 17:06

no creo que pueda darte un código que mágicamente haga lo que quieres. Primero que nada, has hecho casi todo el diseño usando divs pa, lo cual no tiene sentido. Por lo que veo estás diseñando sólo para la resolución de tu monitor. Yo te recomiendo que comiences añadiendo un div contenedor con posición relativa y después ajustes los divs con respecto a este nuevo div. lo haces de esta forma encierras tu html en otro div

Código HTML:

<div id="container">
<div id="apDiv2">
  <ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="Index.html">INICIO</a></li>
<li><a href="ECONOMIA.html">ECONOMIA</a></li>
<li><a href="ACTUALIDAD.html">ACTUALIDAD</a></li>
<li><a href="HIPOTECAS.html">HIPOTECAS..</a></li>
<li><a href="MUNDO INTERNET.html">MUNDO INTERNET </a></li>

<li><a href="AYUDA AL CONSUMIDOR.html">AYUDA AL CONSUMIDOR</a></li>
<li><a href="DEPORTES.html">DEPORTES</a></li>
<li><a href="HUMOR.html">HUMOR </a></li>
</ul>
</div>
<div id="apDiv3">
  <table width="30%" border="0.5">
    <tr>
      <td><script>

    var mydate=new Date();
    var year=mydate.getYear();
    if (year < 1000)
        year+=1900;
    var day=mydate.getDay();
    var month=mydate.getMonth()+1;
    if (month<10)
        month="0"+month;
    var daym=mydate.getDate();
    if (daym<10)
        daym="0"+daym;
    document.write("<small><font color='000000' face='Arial'><b>"+daym+"/"+month+"/"+year+"</b></font></small>")

</script>
</td>

    </tr>
  </table>
</div>
<div id="apDiv6">
  <form id="form1" name="form1" method="get" action="http://www.google.es/search?hl">
    <label>
      <input type="text" name="q" id="q" />
    </label>
  </form>
</div>

<div id="apDiv7">
  <form id="form2" name="form2" method="post" action="">
    <label>
      <input type="submit" name="button" id="button" value="Buscar" />
    </label>
  </form>
</div>
<div id="apDiv8"><img src="Imagenes/logo google.jpg" width="87" height="25" alt="Logo Google" /></div>
<div id="apDiv9"><img src="Imagenes/NOTICIAS DE ACTUALIDAD.JPG" width="158" height="89" alt="ACTUALIDAD" /></div>
<div id="apDiv10"><img src="Imagenes/NOTICIAS DE ACTUALIDAD 2png.png" width="415" height="46" alt="ACTUALIDAD 2" /></div>
<div id="apDiv12">
  <table width="121%" border="0.5">

    <tr>
      <td><style type="text/css">
.titular_elpais {
font-family: Times New Roman, Times, serif !important;
font-size: 16px !important;
color: #0000ff !important;
font-weight: normal !important;
font-style: normal !important;
text-decoration: underline !important;
}

A:link.titular_elpais, A:vlink.titular_elpais, A:alink.titular_elpais {color: #0000ff !important;}

.autor_elpais {
font-family: Times New Roman, Times, serif !important;
font-size: 12px !important;
color: #00000 !important;
font-weight: normal !important;
font-style: normal !important;
text-decoration: underline !important;
}

A:link.autor_elpais, A:vlink.autor_elpais, A:alink.autor_elpais {color: #00000 !important;}

.titulo_feed_elpais {font:bold 11px Arial, Helvetica, sans-serif !important; text-decoration:none !important; color:#666666 !important;}
.titulo_feed_elpais a,.titulo_feed_elpais a:link,.titulo_feed_elpais a:hover,.titulo_feed_elpais a:visited {text-decoration:none !important; color:#666666 !important;}
.fondo_resultados_elpais{ background-color: #FFFFFF; width: 100%;}
</style>

<script language="javascript" src="http://www.elpais.com/rss/feed.html?feedId=14&amp;version=4&amp;n=15&amp;usrId=1a93e014eafe8cbab4f4d54ee030ad66" type="text/javascript"></script>

<h2 class="titulo_feed_elpais"><a href="http://www.elpais.com" target="_blank" alt="Noticias ELPAIS.com" title="Noticias ELPAIS.com">ELPAIS.com</a> | <a href="http://www.elpais.com/sociedad/" alt="Noticias de Sociedad" title="Noticias de Sociedad" target="_blank">Noticias de Sociedad</a></h2>
<script language="javascript" type="text/javascript" src="http://www.elpais.com/rss/js/elptesw.js.php"></script>
</td>

    </tr>
  </table>
</div>
<div id="apDiv13">
  <table width="101%" border="0.5">
    <tr>
      <td><style type="text/css">
.titular_elpais {
font-family: Times New Roman, Times, serif !important;
font-size: 16px !important;
color: #0000ff !important;
font-weight: normal !important;
font-style: normal !important;
text-decoration: underline !important;
}

A:link.titular_elpais, A:vlink.titular_elpais, A:alink.titular_elpais {color: #0000ff !important;}

.autor_elpais {
font-family: Times New Roman, Times, serif !important;
font-size: 12px !important;
color: #00000 !important;
font-weight: normal !important;
font-style: normal !important;
text-decoration: underline !important;
}

A:link.autor_elpais, A:vlink.autor_elpais, A:alink.autor_elpais {color: #00000 !important;}

.titulo_feed_elpais {font:bold 11px Arial, Helvetica, sans-serif !important; text-decoration:none !important; color:#666666 !important;}
.titulo_feed_elpais a,.titulo_feed_elpais a:link,.titulo_feed_elpais a:hover,.titulo_feed_elpais a:visited {text-decoration:none !important; color:#666666 !important;}
.fondo_resultados_elpais{ background-color: #FFFFFF; width: 100%;}
</style>

<script language="javascript" src="http://www.elpais.com/rss/feed.html?feedId=1000&amp;version=4&amp;n=5&amp;usrId=1a93e014eafe8cbab4f4d54ee030ad66" type="text/javascript"></script>

<h2 class="titulo_feed_elpais"><a href="http://www.elpais.com" target="_blank" alt="Noticias ELPAIS.com" title="Noticias ELPAIS.com">ELPAIS.com</a> | <a href="http://www.elpais.com/loultimo/" alt="Noticias de &Uacute;ltima Hora" title="Noticias de &Uacute;ltima Hora" target="_blank">Noticias de &Uacute;ltima Hora</a></h2>
<script language="javascript" type="text/javascript" src="http://www.elpais.com/rss/js/elptesw.js.php"></script>
</td>
    </tr>
  </table>
</div>
<div id="apDiv14">
  <table width="98%" border="0.5">

    <tr>
      <td><script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/105567448848933759929/el-tiempo-espana.xml&amp;synd=open&amp;w=260&amp;h=290&amp;title=El+tiempo.+Predicciones&amp;border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&amp;output=js"></script></td>
    </tr>
  </table>
</div>
<div id="apDiv15"><img src="Imagenes/NOTICIAS DE ACTUALIDAD.png" width="271" height="29" alt="NOTICIAS DE ACTUALIDAD" /></div>
<div id="apDiv16"><img src="Imagenes/ULTIMA HORA ACTUALIDAD.png" width="284" height="28" alt="ULTIMA HORA ACTUALIDAD" /></div>
<p><img src="Imagenes/Portal-Jos.png" width="875" height="93" alt="Josportal.com" />
</p>
<p>&nbsp;</p>
<p>&nbsp; </p>

<p>&nbsp; </p>
<p>&nbsp; </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Desde este espacio se tratara de informar, poniendo las noticias mas relevantes que pasen en el <br />
  mundo para ello hay dos módulos que nos ha cedido  el país.com.<br />
  Aun así tratare de ampliar y comentar las noticias mas relevantes del día o de la semana <br />
  que pasen en el mundo.<br />

</p>
</div>

y a ese div le das la siguiente regla css:

Código HTML:

#container{
    width:1000px;
    position:relative;
    margin:auto;
}

Eso es un comienzo para poder seguir usando divs pa.

neon261979 · #7 (**permalink**) 08/11/2009, 17:15

Juaniquillo te agradezco tu respuesta y tu posible ayuda, digo posible porque de verdad que no entiendo nada.
Explicamelo como si fuera tonto, porfavor lo digo porque soy bastante novato, por ello habre cometido esos fallos.
Que es un div contenedor con posicion relativa y para que sirve y que boton es en el dreamweaver?
o mejor dame consejos tipo el div es tal tal y sirve para tal tal para que todo te vaya mejor hazlo asi, con tal boton del DWcs4 y tal tal porque es que sino no pillo.
SI lo haces asin, te lo pillare lo que me dices y te lo agradecere mucho.
Por otro lado como sabes que lo estoy haciendo con la resolucion de mi monitor?
que fuerte como lo has sabido, si es verdad que estoy teniendo problemas con esto porque hoy mismo me he ido a otro portatil y he visto que las cosas se montaban unas encima de la otra y no entiendo porque.

Esta claro que si no entiendo porque pasa esto, yo no puedo seguir haciendo la pagina web porque no va a tener ningun exito. Exito 0 de 0.

Asi pues pido que me ayudeis a entender un poco esto.

Gracias.
Y en especial a ti juaniquillo que eres una maquina contestando y dando soluciones otra cosa es que yo te las pille. :)

neon261979 · #8 (**permalink**) 09/11/2009, 07:58

Hola otra vez?

Juaniquillo y gente del foro, mira a ver si ahora esta mejor y si he entendido algo.
Lo que he modificado es la seccion de deportes.

Aunque sigue habiendo algo mal porque con firefox se ve bien y con explorer el video de la derecha me sale mucho mas bajo que el de la izquierda.

Como poneis las cosas en el sitio que quereis sino es con el boton Dibujar div pa? de DW.

En fin espero respuestas.

Por cierto porque esto
que hace exactamente y como se pone con dreamweaver?

#container{
width:1000px;
position:relative;
margin:auto;

O lo tienes que poner tu manualmente en el codigo fuente.

Lo dicho espero respuestas.

Gracias a todos de antemano.

juaniquillo · #9 (**permalink**) 13/11/2009, 12:47

arriba te puse como lo debes hacer, pero tienes que hacerlo en vista de código. Esa regla tienes que incluirla donde están los otros estilos, por ejemplo, puedes ponerlo debajo de:

Código css:

Ver original#apDiv1 {
    position:absolute;
    left:767px;
    top:15px;
    width:155px;
    height:100px;
    z-index:1;
}

Esto no va ha hacer que todo caiga en su lugar ya que todos tus divs son AP. Después de que hagas eso debes re-posicionar todos tus divs de nuevo. La diferencia es que esta vez lo elementos se posicionarán con respecto a ese div.