Maquetación mala en dreamweaver

lana27 · #1 (**permalink**) 29/12/2010, 14:50

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 originaldiv#index_primario{
margin-top:5px;
width:660px;
float:right;
}
 
div#index_primario div#index_busqueda_productos{
border-top-left-radius:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius: 5px; 
border-top-right-radius:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius: 5px;
border:1px solid #b2b2b2;
background-image:url(../img/tittle_background.gif);
background-repeat:repeat-x;
width:650px;
height:22px;
margin-top:10px;
padding:5px 0px;
}
div#index_primario div#index_publicidad{
padding:10px 5px;
float:left;
margin-top:10px;
}
 
div#index_primario h3{
color:#000;
font-family: Arial;
font-size:10pt;
padding:0px 20px 0px 20px;
text-transform:uppercase;
background-color:inherit;
padding-top:5px;
}
 
/*Input catalogo productos*/
.txtproducto_index{
font-size:9pt;
font-family:arial;
margin: 0px;
width: 220px;
padding-right: 0px;
border:1px solid #b2b2b2;
padding:2px 5px;
margin-right:10px;
}
/*Boton catalogo productos*/
.btnproducto_index{
background-color:#2D336D;
color:#fff;
width:50px;
height:20px;
padding:2px 5px;
}
div#index_primario div#indexcatalogo_productos{
border-left: 1px solid #b2b2b2;
border-right: 1px solid #b2b2b2;
border-bottom: 1px solid #b2b2b2;
width:650px;
}
 
.bordeindexcatalogo_productos{
border-top: 8px solid #f3f3f3;
border-left: 8px solid #f3f3f3;
border-right: 8px solid #f3f3f3;
background-color:#f3f3f3;
width:634px;
/*height:387px;*/
height: auto!important;
height:100%;
}
 
.bottomindexcatalogo_productos{
height: 21px;
text-align:center;
background-color: #f3f3f3;
padding-top:10px;
}
 
.cajaindexcatalogo_productos{
width:157px;
height: 118px;
text-align:center;
background-color: #fff;
margin-top:2px;
margin-right:1.5px;
padding-top:10px;
float:left;
}
div#index_primario p{
font-size:9pt;
font-family:Arial;
color:#000;
background-color:inherit;
}
 
/* CLASES GENERALES */
 
div.inside{
width:985px;
margin:0 auto;
}
 
div.clearfix{
width:0px;
height:0px;
display:block;
clear:both;
content:".";
}
 
div.floatLeft{
float:left; 
}
div.inline {
display: inline;    
}

alexk · #2 (**permalink**) 29/12/2010, 15:10

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

VbOkonly · #3 (**permalink**) 29/12/2010, 15:48

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 !!

lana27 · #4 (**permalink**) 29/12/2010, 17:59

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