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;
}