Foros del Web » Creando para Internet » CSS »

Maquetación mala en dreamweaver

Estas en el tema de Maquetación mala en dreamweaver en el foro de CSS en Foros del Web. Hola estoy empezando con la maquetación en css, mi duda es la siguiente tengo la página principal que se ve bien en los navegadores, pero ...
  #1 (permalink)  
Antiguo 29/12/2010, 14:50
 
Fecha de Ingreso: septiembre-2007
Mensajes: 73
Antigüedad: 10 años, 3 meses
Puntos: 0
Maquetación mala en dreamweaver

Hola estoy empezando con la maquetación en css, mi duda es la siguiente tengo la página principal que se ve bien en los navegadores, pero en dreamweaver se ve mal... Me incomoda verlo así pienso que se ve mal y a cada rato lo pruebo a ver si esta mal... Como podría arreglarlo??

Les adjunto las imágenes para una mejor explicación



En el centro debería de ir index_primario, pero éste se posiciona abajo como en la imagen 2



También tengo una caja de busqueda index_busqueda_productos pero el campo de texto y el botón se bajan.

Y por último tengo una caja donde muestro cada producto cajaindexcatalogo_productos que se corre a la derecha en lugar de la izquierda...

Quiero aclarar que se ve bien en los navegadores..

Adjunto el código y el css

Código HTML:
<body>
<?php include('header.php'); ?>
<div id="contenido">
	<div class="inside">
        <div id="index_secundario">
        	<div id="index_ofertas">
            	<img src="img/ofertas_banner.gif" width="260" height="324" alt="Ofertas Especiales" title="Ofertas Especiales"/>
            </div><!--end of ofertas index -->
            <div id="user_index">
	            <img src="img/user_alco.png" width="170" height="70" alt="Alco Equipos para la construcción" title="Alco Equipos para la construcción"/>
            </div><!--end of ofertas index -->
        </div><!--end of secundario -->
      <div id="index_primario">

      <div id="index_busqueda_productos">
        <form id="form1" method="post" action="">
            <div class="floatLeft inline">
	            <h3>Catálogo de productos</h3>
            </div><!--end of floatleft -->
            <div class="floatLeft inline">
		        <input name="input" type="text" class="txtproducto_index" maxlength="50" />
            </div><!--end of floatleft -->
            <div class="floatLeft inline">
            <input name="" type="button" value="Buscar" class="btnproducto_index"/>
            </div><!--end of floatleft -->
        </form>
      </div><!--end of busqueda productos -->
      
        <div id="indexcatalogo_productos">
            <div class="bordeindexcatalogo_productos">
			<?php while($catalogo=mysql_fetch_array($grupo1_catalogo)){ ?>            
              <div class="cajaindexcatalogo_productos">
                <img src="<?php if($catalogo[fo1grp]!=""){echo "productos/".$catalogo[fo1grp];}else{echo "img/nodisponible.gif";}?>" alt="<?php echo $catalogo[nomgrp];?>" title="<?php echo $catalogo[nomgrp];?>" width="130" height="75" />
                <div class="fontSmallTextBold"><?php echo $catalogo[nomgrp];?></div>           
                <a title="Earthmoving Equipment" <?php print "href=\"categoria.php?grupo1=".base64_encode($catalogo[codgrp])."\" ";?> class="fontHypertextLinksMisc">Alquilar</a> |
                <a href="" class="fontHypertextNoLinksMisc">Comprar</a>	                             
              </div><!--end of cajaindexcatalogo productos -->
			<?php }?>            
		     <div class="clearfix"></div>
          </div><!--end of indexcatalogo productos -->
            <div class="bottomindexcatalogo_productos">
                <p>Teléfono: (506) 2239-1269. Email: <?php echo "<a href=".'"'."mailto:[email protected]?subject=Contactenos".'"'." >".Contactenos."</a>"; ?></p>
            </div><!--end of bottomcatalogo productos -->
        </div><!--end of bordecatalogo productos -->

       <div class="clearfix"></div>
	  <div id="index_publicidad">
        	<img src="img/banner-01.jpg" width="213" height="121" alt="Publicidad 1" title="Publicidad 1"/>
            <img src="img/banner-02.jpg" width="213" height="121" alt="Publicidad 2" title="Publicidad 2"/>
            <img src="img/banner-01.jpg" width="213" height="121" alt="Publicidad 3" title="Publicidad 3" />
       </div><!--end of publicidad_index -->
       <div class="clearfix"></div>
      </div><!--end of primario -->
	</div><!--end of inside -->
</div><!--end of contenido -->
<div class="clearfix"></div>
</body> 
Código css
Código CSS:
Ver original
  1. div#index_primario{
  2. margin-top:5px;
  3. width:660px;
  4. float:right;
  5. }
  6.  
  7. div#index_primario div#index_busqueda_productos{
  8. border-top-left-radius:5px;
  9. -moz-border-radius-topleft:5px;
  10. -webkit-border-top-left-radius: 5px;
  11. border-top-right-radius:5px;
  12. -moz-border-radius-topright:5px;
  13. -webkit-border-top-right-radius: 5px;
  14. border:1px solid #b2b2b2;
  15. background-image:url(../img/tittle_background.gif);
  16. background-repeat:repeat-x;
  17. width:650px;
  18. height:22px;
  19. margin-top:10px;
  20. padding:5px 0px;
  21. }
  22. div#index_primario div#index_publicidad{
  23. padding:10px 5px;
  24. float:left;
  25. margin-top:10px;
  26. }
  27.  
  28. div#index_primario h3{
  29. color:#000;
  30. font-family: Arial;
  31. font-size:10pt;
  32. padding:0px 20px 0px 20px;
  33. text-transform:uppercase;
  34. background-color:inherit;
  35. padding-top:5px;
  36. }
  37.  
  38. /*Input catalogo productos*/
  39. .txtproducto_index{
  40. font-size:9pt;
  41. font-family:arial;
  42. margin: 0px;
  43. width: 220px;
  44. padding-right: 0px;
  45. border:1px solid #b2b2b2;
  46. padding:2px 5px;
  47. margin-right:10px;
  48. }
  49. /*Boton catalogo productos*/
  50. .btnproducto_index{
  51. background-color:#2D336D;
  52. color:#fff;
  53. width:50px;
  54. height:20px;
  55. padding:2px 5px;
  56. }
  57. div#index_primario div#indexcatalogo_productos{
  58. border-left: 1px solid #b2b2b2;
  59. border-right: 1px solid #b2b2b2;
  60. border-bottom: 1px solid #b2b2b2;
  61. width:650px;
  62. }
  63.  
  64. .bordeindexcatalogo_productos{
  65. border-top: 8px solid #f3f3f3;
  66. border-left: 8px solid #f3f3f3;
  67. border-right: 8px solid #f3f3f3;
  68. background-color:#f3f3f3;
  69. width:634px;
  70. /*height:387px;*/
  71. height: auto!important;
  72. height:100%;
  73. }
  74.  
  75. .bottomindexcatalogo_productos{
  76. height: 21px;
  77. text-align:center;
  78. background-color: #f3f3f3;
  79. padding-top:10px;
  80. }
  81.  
  82. .cajaindexcatalogo_productos{
  83. width:157px;
  84. height: 118px;
  85. text-align:center;
  86. background-color: #fff;
  87. margin-top:2px;
  88. margin-right:1.5px;
  89. padding-top:10px;
  90. float:left;
  91. }
  92. div#index_primario p{
  93. font-size:9pt;
  94. font-family:Arial;
  95. color:#000;
  96. background-color:inherit;
  97. }
  98.  
  99. /* CLASES GENERALES */
  100.  
  101. div.inside{
  102. width:985px;
  103. margin:0 auto;
  104. }
  105.  
  106. div.clearfix{
  107. width:0px;
  108. height:0px;
  109. display:block;
  110. clear:both;
  111. content:".";
  112. }
  113.  
  114. div.floatLeft{
  115. float:left;
  116. }
  117. div.inline {
  118. display: inline;   
  119. }
  #2 (permalink)  
Antiguo 29/12/2010, 15:10
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Maquetación mala en dreamweaver

no des click a "vista de diseño", si tu sitio en realidad se ve correctamente en algun navegador y dreamweaver no interpreta correctamente tu CSS, pues no es algo alarmante, simplemente se ignora y ya... lo importante es como se ve en algun navegador
  #3 (permalink)  
Antiguo 29/12/2010, 15:48
Avatar de VbOkonly  
Fecha de Ingreso: julio-2009
Ubicación: San Justo, Buenos Aires, Argentina
Mensajes: 490
Antigüedad: 8 años, 5 meses
Puntos: 5
Respuesta: Maquetación mala en dreamweaver

No te preocupes por dreamweaver, en realidad la vista de diseño de dreamweaver se considera que es "para tener una idea de lo que haces", antes pensaba lo mismo que vos pero te aseguro que cuando le agarres la mano vas a mirar mas la vista de codigo que la de diseño :P, es mas, te puedo decir que hay cosas "tontas" como centrar un objeto que cuando estas en vista de diseño no puedes, es decir, ingresa el codigo pero lo hace mal, mientras que cuando vas a vista de codigo agregas las etiquetas correspondientes y funciona ... otra cosa más, trata de probar tu diseño en diferentes navegadores y si usas php u otro lenguaje asegurate de correrlos en una plataforma(Ej: Apache).
Empese a dejar la vista de diseño cuando insertaba codigo en php haciendo "echos" a divs y tablas que en vista de diseño NO se pueden visualizar ... Y por experiencia te aseguro que aprendes html tambien :P.


Saludos y suerte !!
  #4 (permalink)  
Antiguo 29/12/2010, 17:59
 
Fecha de Ingreso: septiembre-2007
Mensajes: 73
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: Maquetación mala en dreamweaver

Muchas gracias.... por las respuestas. La verdad es que me incomoda y pensé que es por errores míos, pero al probarlo me di cuenta que todo estaba bien. Pero será adaptarme.

Saludos

Etiquetas: dreamweaver
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:38.