Foros del Web » Creando para Internet » CSS »

Problemas con float

 Estas en el tema de Problemas con float en el foro de CSS en Foros del Web. Buenas, es primera vez que monto un site con puros div, y hay algunos div que se ven donde deben verse en un navegador, pero ...
  #1 (permalink)  
Antiguo 06/12/2011, 14:44
Avatar de Jeremias  
Fecha de Ingreso: agosto-2003
Ubicación: Caracas
Mensajes: 504
Antigüedad: 20 años, 8 meses
Puntos: 0
Pregunta Problemas con float
Buenas, es primera vez que monto un site con puros div, y hay algunos div que se ven donde deben verse en un navegador, pero en otros se ven en otro lado.

¿Que me recomiendan?

La pagina es www.aprentec.com

Gracias
__________________
Atte. Jere
Agradezco su pronta colaboración.
;-) :arriba:Hoy por mi, mañana por ti:arriba: ;-)
  #2 (permalink)  
Antiguo 06/12/2011, 15:25
Avatar de enaguimar  
Fecha de Ingreso: diciembre-2011
Ubicación: Algeciras, Spain, Spain
Mensajes: 214
Antigüedad: 12 años, 4 meses
Puntos: 40
Respuesta: Problemas con float
Postea los css, gracias.
__________________
Descargar Paradise Bay - Descargar Play Store gratis
@Vredweb
  #3 (permalink)  
Antiguo 06/12/2011, 15:50
Avatar de cristian_cena
Colaborador
  
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: Problemas con float
Hola jeremias.
esta lectura te será útil: http://librosweb.es/css_avanzado/cap...ar_floats.html
Aquí funcionando: http://jsfiddle.net/cristian_cena/USwyb/

saludos.
  #4 (permalink)  
Antiguo 07/12/2011, 15:01
Avatar de Jeremias  
Fecha de Ingreso: agosto-2003
Ubicación: Caracas
Mensajes: 504
Antigüedad: 20 años, 8 meses
Puntos: 0
Pregunta Respuesta: Problemas con float
Gracias a ambos por responder. Pero no creo que el problema se resuelva con el overflow porque ya lo probe.

Les voy a copiar el codigo del html y del css, y repito soy nuevo en esto asi que disculpen si hice algo mas.

Uno de los errores bien puntuales es por ejemplo esta pagina:

http://www.aprentec.com/porque.html

Tanto en Chrome como en Firefox se ve bien (aunque en firefox se amplia un poco una parte pero no es mal tan grande), mientras que esa misma pagina en IE y Opera se desfigura todo.

Si tienen tiempo y conocimiento en esto porfavor ayudenme para poder arreglarlo y asi aprender por que pasa esto. Gracias

El CSS es:

Código: 
@charset "utf-8";
/* CSS Document */

body {
	margin:0px;
	text-align:center;
}
span{
	font-family:Trebuchet MS, "Tahoma";
	font-size:12px;
}

.texpie a:link {
	color: #FFF;
	text-decoration: none;
}
.texpie a:visited {
	text-decoration: none;
	color: #FFF;
}
.texpie a:hover {
	text-decoration: none;
	color: #FFF;
}
.texpie a:active {
	text-decoration: none;
	color: #FFF;
}

li a:link {
	color: #000;
	text-decoration: none;
}
li a:visited {
	text-decoration: none;
	color: #000;
}
li a:hover {
	text-decoration: none;
	color: #000;
}
li a:active {
	text-decoration: none;
	color: #000;
}

.ver_mas a:link {
	text-decoration: none;
	color:#FF9805; 
	text-shadow:#000 2px 1px 1px; 
}
.ver_mas a:visited {
	text-decoration: none;
	color:#FF9805; 
	text-shadow:#000 2px 1px 1px; 
}
.ver_mas a:hover {
	text-decoration: none;
	color:#FF9805; 
	text-shadow:#000 2px 1px 1px; 
}
.ver_mas a:active {
	text-decoration: none;
	color:#FF9805; 
	text-shadow:#000 2px 1px 1px; 	
}

.orbit-caption a:link {
	color: #FFF;
	text-decoration: none;
}
.orbit-caption a:visited {
	text-decoration: none;
	color: #FFF;
}
.orbit-caption a:hover {
	text-decoration: none;
	color: #FFF;
}
.orbit-caption a:active {
	text-decoration: none;
	color: #FFF;
}

#tope{	
	width:100%;
	background-color:#FD6D00;
	height:5px;
}

#cuerpo{
	background-color:#FFFFFF;
	height:100%;
}

#uno {
	margin: 0 auto;
	width:100%;
	height:200px;
	background-image:url(../img/bckg-top-1.jpg);
	background-repeat:repeat-x;
}

#dos {
	margin: 0 auto;
	width:100%;
	height:300px;
	background-color:#011A43;
	z-index:150;
}

#tres {
	margin: 0 auto;
	width:100%;
	background-image:url(../img/bckg-med-6.jpg);
	background-repeat:repeat-x;
	background-position:bottom;
}

#cuatro {
	margin: 0 auto;
	width:100%;
	height:200px;
	background-color:#ECF9FF;
}

#cinco {
	margin: 0 auto;
	width:100%;
	background-image:url(../img/bckg-bott-1.jpg);
	background-repeat:repeat-x;
}

#membrete{
	margin: 0 auto;
	width:1007px;
	height:200px;
	background-image:url(../img/bckg-top-2.jpg);
	background-repeat:no-repeat;
}

#sub_mem{
	margin: 0 auto;
	width:900px;
	background-color:#FF99FF;
	height:100px;
}

#slide{
	float:left;	
	width:100%;
	background-color:#00FFFF;
	height:200px;
	margin-top:50px;
}

#centro{	
	margin: 0 auto;
	width:1007px;
	height:1271px;
}


#contenido{
	float:left;
	margin-left:52px;
	width:900px; 
	height:100%;
	background-color:#FFFFFF;
	box-shadow: 2px 2px 5px 2px #ccc;
	-webkit-box-shadow: 2px 2px 5px 2px #ccc;
	-moz-box-shadow: 2px 2px 5px 2px #ccc;
}

.sombra {
	box-shadow: 2px 2px 5px 2px #ccc;
	-webkit-box-shadow: 2px 2px 5px 2px #ccc;
	-moz-box-shadow: 2px 2px 5px 2px #ccc;
	display:inline-block;
}

#cierre1{	
	width:100%;
	background-color:#011A43;
	height:20px;
	color:#FFFFFF;
	padding-top:5px;
	display:inline-block;	
	margin:0 auto;
	text-align:center;
}


#cierre2{	
	width:100%;
	background-color:#09CCFF;
	height:5px;
}

#cierre3{
	text-align:center;
	margin:0 auto;
	background-color:#ECF9FF;
	height:165px;
	display:inline-block;
}

#centrarrr{
	float:left;
	margin:0 auto;
}

#cierre4{	
	width:100%;
	background-color:#F7951A;
	height:5px;
}

#pie{
	margin: 0 auto;
	width:1007px;
	height:200px;
	background-image:url(../img/bckg-bott-2.jpg);
	background-repeat:no-repeat;
}

#pie_1{
	float:left;
	width:895px;
	height:90px;
	margin-left:52px;
	margin-top:5px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	font-family:Trebuchet MS, "Tahoma";
	font-size:12px;
	color:#0A1B43;
	text-shadow:#FFFFFF 2px 1px 1px;
	border-radius: 15px;
	border:2px solid #FFFFFF;
	background:rgba(255,255,255,0.4);
	padding-top:5px;
	padding-bottom:5px;
	clear:both;
}

#pie_2{
	float:left;
	width:895px;
	height:70px;
	margin-left:52px;
	margin-top:5px;
	font-family:Trebuchet MS, "Tahoma";
	font-size:12px;
	padding-top:10px;
	clear:both;
	font-weight:bold;
	-webkit-text-fill-color: black;
	-webkit-text-stroke-color: white;
	-webkit-text-stroke-width: 0.5px;
}
.caja{
	float:left;
	width:310px;	
	margin:10px;
}

.caja_twitter{
	float:left;
	width:220px;	
	height:350px;
	margin-left:5px;
	margin-top:10px;
	background-repeat:no-repeat;
}

.caja_clientes{
	float:left;
	width:240px;	
	height:350px;
	background-image:url(../img/clientes.png);	
	margin-top:10px;
	background-repeat:no-repeat;
}

.rectangulo{
	float:left;
	clear:both;
	width:855px;
	margin-left:10px;
}

.rectangulo2{
	float:left;
	height:170px;
	margin-left:10px;
}

.texpie {
	font-family:Trebuchet MS, "Tahoma";
	font-weight:bold;
	font-size:12px;
	margin:0 55px;
}

.imagenes{
	float:left;
	margin-right:35px;
	margin-top:15px;
}

.lista_cierre{
	float:left;
	text-align:left;
	font-size:9px;
	padding-left:15px;

}

.titulos{
	color:#043B95;
	font-family:Trebuchet MS, "Tahoma";
	font-weight:bold;
}

.titulos_2{
	color:#E84B00;
	font-family:Trebuchet MS, "Tahoma";
	font-weight:bold;

}

.titulo_rectangulo_1{  
	float:left; 
	position:absolute; 
	text-align:left;
}

.ver_mas{
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	float:right; 
	color:#FF9805; 
	text-shadow:#000 2px 1px 1px; 
	font-weight:bold; 
	font-style:italic; 
	position:relative; 
	top:-10px;
}

.caja_texto{
	float:left; 
	position:relative;
	background-color:transparent;
	left:380px; 
	top:-79px; 
	height:26px;
	border-style:none;
}
.caja_texto_2{
	float:left; 
	position:relative;
	background-color:transparent;
	left:380px; 
	top:-104px; 
	height:26px;
	border-style:none;
}

.caja_texto_3{
	float:left; 
	position:relative;
	background-color:transparent;
	left:-11px; 
	top:-94px; 
	height:26px;
	border-style:none;
}

.caja_texto_4{
	float:left; 
	position:relative;
	background-color:transparent;
	left:-70px; 
	top:126px; 
	height:26px;
	border-style:none;
}

.caja_texto_5{
	float:left; 
	position:relative;
	background-color:transparent;
	left:-70px; 
	top:121px; 
	height:26px;
	border-style:none;
}

.caja_texto_6{
	float:left; 
	position:relative;
	background-color:transparent;
	left:380px; 
	top:316px; 
	height:26px;
	border-style:none;
}

ul ul{
	font-weight:500;
}

ul {
	font-weight:bold;
	list-style-image:url(../img/vineta.png);
	font-family:Trebuchet MS, "Tahoma";
}

.normal {
	font-weight:normal;
}

.titulo3{
	color:#017AD7;
	font-size:18px;
	font-family:Trebuchet MS, "Tahoma";
	display:block;
	font-weight:bold;
	text-align:left;
}

.caja_listas {
	float:left; 
	width:300px; 
	height:200px;
}

.lista_corta {
	margin-left:-25px; 
	margin-top:-1px;
	font-weight:normal; 
	line-height:1;
}

.sub_caja{
	float:left; 
	text-align:justify; 
	padding:10px 15px;
}

/* SLIDER */
.container {
    position: absolute; 
    top: 50%; 
    left: 50%;
    margin: -300px 0 0 -470px; }
    
.content { background: url(../dummy-images/coffee.jpg); }
.content h1 {
	font-size: 40px; 
	text-transform: uppercase; 
	font-weight: bold; 
	text-align: center;
	margin-top: 180px;
	color: #222;
	line-height: 50px;  }
.content h3 {
	text-align: center; 
	font-size: 22px; 
	color: #222; }
/* SLIDER */
y el HTML lo voy a publicar en otra respuesta por lo de la cantidad de caracteres que permite.
__________________
Atte. Jere
Agradezco su pronta colaboración.
;-) :arriba:Hoy por mi, mañana por ti:arriba: ;-)
  #5 (permalink)  
Antiguo 07/12/2011, 15:02
Avatar de Jeremias  
Fecha de Ingreso: agosto-2003
Ubicación: Caracas
Mensajes: 504
Antigüedad: 20 años, 8 meses
Puntos: 0
Pregunta Respuesta: Problemas con float
Este es el HTML, con algunas cosas que le quite pero cosas que no creo que sean importante, por razones de cantidad de caracteres cambien parrafos por la palabra TEXTO:

Código HTML:
<body>
<div id="cuerpo">
	<div id="tope"></div>
	<div id="uno">
		<div id="membrete">
		 
		</div>
  </div>
    
    <div id="tres">
    	<div style="margin: 0 auto; width:1007px; height:1660px;">
    		<div id="contenido" class="sombra">
            	<div class="rectangulo">
                   	<div class="titulo_rectangulo_1" style="padding-top:15px; margin-left:5px;">
                        <span class="titulos_2">¿POR QUÉ APRENTEC?</span>
                        <BR />
                        <span>Porque somos más de lo que imaginas</span>
                    </div>
                    <img src="img/banners-1-porqueaprentece.png" style="float:left; margin-top:30px;" />
                    <div align="justify" style=" float:left; position:relative; left:8px; top:-70px;">
                    	<span>TEXTO</span>
                    </div>
                </div>
	        	<div style="float:left; clear:both; margin-top:-45px;"><!-- EMPIEZA PRIMER LINEA DE CAJAS -->
                	<div style="float:left; margin-left:20px; margin-right:10px;">
                    	<iframe width="480" height="360" src="http://www.youtube.com/embed/ERMgEFVJDfM?rel=0" frameborder="0" allowfullscreen></iframe>
                    </div>
                    <div style="float:left; text-align:justify; width:350px; margin-left:15px; margin-bottom:15px;">
                    	<a name="mision" id="mision"></a><span class="titulos_2">MISIÓN</span><br />
                        
                      <span>TEXTO</span>
                    </div>

              <div style="float:left; text-align:justify; width:350px; margin-left:15px;">
                    	<span class="titulos_2">VISIÓN</span><br />
                        <span>TEXTO</span>
                    </div>
                    
                    <div style="float:left; text-align:justify; width:350px; margin-left:15px; margin-top:10px;">
                    	<a name="metodologia" id="metodologia"></a><span class="titulos_2">METODOLOGÍA Y ESTRATEGIA</span><br />
                        <span>TEXTO
                        </span>
                    </div>
                    
                </div> <!-- FIN DE PRIMER LINEA DE CAJAS-->
                
                <div style="float:left; clear:both;">
                	 <div style="float:left; text-align:justify; padding:10px 15px;">
                    	<span>
                        TEXTO</strong>.
						<br /><br />
TEXTO

                        </span>
                    </div>
                </div>
                
                <div style="clear:both;">
                	<a name="equipo" id="equipo"></a><span class="titulos_2">EQUIPO DE TRABAJO</span>
                    <br />
                    <br />
                    <img src="img/banners-1-equipotrabajo.jpg" />
                </div>
                
                <div style=" float:left; clear:both; margin-top:15PX;">
                	<div style="float:left;">
                    	<div style="float:left; margin-left:15px;"><a name="inversion" id="inversion"></a><span class="titulos_2">INVERSIÓN</span></div>
	                    <div><img src="img/banners-1-inversion.png" style="float:left; position:relative; left:-15px; margin-top:15px;"/></div>
                    </div>

                    <div style="float:left; width:380px;">
                    	<div style="float:left;"><a name="beneficios" id="beneficios"></a><span class="titulos_2">BENEFICIOS</span></div>
	                    <div style="text-align:left; float:left; clear:left; line-height:1; width:190px; margin-left:-20px;">
                        	<ul style="font-family:Trebuchet MS; font-size:12px;">
                            	<li>Rentabilidad en tu negocio</li> <span class="normal">A través de indicadores claros de negocio, confirmarás que es posible.</span>
                            	<li>Calidad del Aprendizaje</li><span class="normal">combinando video, animaciones innovadoras y contenido específico con estrategias interactivas notarás que la Calidad sí cuenta.</span>
                            	<li>Administración del tiempo</li><span class="normal">adaptándolo a tus necesidades, a tu propio ritmo, en el tiempo y lugar desees.</span>
                               	<li>Retorno de la inversión</li><span class="normal">incrementamos la productividad de tu talento humano de manera continua y efectiva, maximizando el retorno de tu inversión en formación y desarrollo.</span>
                            	<li>Alcance de metas</li><span class="normal">Fortalecemos tu desarrollo de carrera, mejoramiento profesional y cultura empresarial.</span>
                            </ul>
                        </div>
                        <div style="text-align:left; float:left; line-height:1; width:190px;">
                        	<ul style="font-family:Trebuchet MS; font-size:12px;">
                            	<li>Control</li><span class="normal">medimos accesos, programas de estudio completados, actividades finalizadas así como módulos aprobados.</span> 
                            	<li>Disponibilidad</li><span class="normal">los productos están disponibles en todo momento.</span>
                            	<li>Adaptación</li><span class="normal">Facilitamos la integración del nuevo empleado a su puesto de trabajo y a la organización.</span>
                                <li>Actualización</li><span class="normal">Mantenemos vigentes los conocimientos en áreas especializadas para facilitar su aplicación en las actividades diarias.</span>
                                <li>Tecnología de punta</li><span class="normal">Creamos tecnología Web para facilitar la distribución y actualización de la información.</span>
                            </ul>
                        </div>
                    </div>
                </div>
                
      	    	<div class="rectangulo2">

                	<div style="float:left; clear:both;">
 						<img src="img/banners-1-pbaservicio.png" style="float:left; position:relative; left:-20px; top:-35px;" />
                        <form name="suscri" method="post" action="http://listas.aprentec.com/lists/?p=subscribe&id=2">
                        <img src="img/suscribete_web copia.png" border="0" usemap="#Map" style="float:left; position:relative; left:630px; top:-210px;"/>
<map name="Map" id="Map">
  <area shape="rect" coords="186,103,256,136" href="javascript:document.suscri.submit()"/>
</map>                 
                        <input type="text" name="micorreo" class="caja_texto_2"/>
                        </form>
                    </div>
                </div> 
	        </div>
    	</div>
    </div>
    
    <div id="cinco">
    	<div id="pie">
         TEXTO			
       	</div>    
    </div>
        
</div>
</body>
__________________
Atte. Jere
Agradezco su pronta colaboración.
;-) :arriba:Hoy por mi, mañana por ti:arriba: ;-)
  #6 (permalink)  
Antiguo 07/12/2011, 15:05
Avatar de Jeremias  
Fecha de Ingreso: agosto-2003
Ubicación: Caracas
Mensajes: 504
Antigüedad: 20 años, 8 meses
Puntos: 0
Pregunta Respuesta: Problemas con float
Justo lo que se descuadra y desparrama es esta parte que puse en la respuesta anterior, pero la resalto aqui por si acaso hay alguna duda de que sale mal, aunque en el anterior lo puse completo por si tiene algo que ver los contenedores superiores en los cuales esta este metido

Código HTML:
<div style=" float:left; clear:both; margin-top:15PX;">
                	<div style="float:left;">
                    	<div style="float:left; margin-left:15px;"><a name="inversion" id="inversion"></a><span class="titulos_2">INVERSIÓN</span></div>
	                    <div><img src="img/banners-1-inversion.png" style="float:left; position:relative; left:-15px; margin-top:15px;"/></div>
                    </div>

                    <div style="float:left; width:380px;">
                    	<div style="float:left;"><a name="beneficios" id="beneficios"></a><span class="titulos_2">BENEFICIOS</span></div>
	                    <div style="text-align:left; float:left; clear:left; line-height:1; width:190px; margin-left:-20px;">
                        	<ul style="font-family:Trebuchet MS; font-size:12px;">
                            	<li>Rentabilidad en tu negocio</li> <span class="normal">A través de indicadores claros de negocio, confirmarás que es posible.</span>
                            	<li>Calidad del Aprendizaje</li><span class="normal">combinando video, animaciones innovadoras y contenido específico con estrategias interactivas notarás que la Calidad sí cuenta.</span>
                            	<li>Administración del tiempo</li><span class="normal">adaptándolo a tus necesidades, a tu propio ritmo, en el tiempo y lugar desees.</span>
                               	<li>Retorno de la inversión</li><span class="normal">incrementamos la productividad de tu talento humano de manera continua y efectiva, maximizando el retorno de tu inversión en formación y desarrollo.</span>
                            	<li>Alcance de metas</li><span class="normal">Fortalecemos tu desarrollo de carrera, mejoramiento profesional y cultura empresarial.</span>
                            </ul>
                        </div>
                        <div style="text-align:left; float:left; line-height:1; width:190px;">
                        	<ul style="font-family:Trebuchet MS; font-size:12px;">
                            	<li>Control</li><span class="normal">medimos accesos, programas de estudio completados, actividades finalizadas así como módulos aprobados.</span> 
                            	<li>Disponibilidad</li><span class="normal">los productos están disponibles en todo momento.</span>
                            	<li>Adaptación</li><span class="normal">Facilitamos la integración del nuevo empleado a su puesto de trabajo y a la organización.</span>
                                <li>Actualización</li><span class="normal">Mantenemos vigentes los conocimientos en áreas especializadas para facilitar su aplicación en las actividades diarias.</span>
                                <li>Tecnología de punta</li><span class="normal">Creamos tecnología Web para facilitar la distribución y actualización de la información.</span>
                            </ul>
                        </div>
                    </div>
                </div>
Agradecido por su ayuda de verdad
__________________
Atte. Jere
Agradezco su pronta colaboración.
;-) :arriba:Hoy por mi, mañana por ti:arriba: ;-)
  #7 (permalink)  
Antiguo 08/12/2011, 10:10
Avatar de Jeremias  
Fecha de Ingreso: agosto-2003
Ubicación: Caracas
Mensajes: 504
Antigüedad: 20 años, 8 meses
Puntos: 0
Respuesta: Problemas con float
Quedo en espera de su pronta ayuda ;) Gracias
__________________
Atte. Jere
Agradezco su pronta colaboración.
;-) :arriba:Hoy por mi, mañana por ti:arriba: ;-)
  #8 (permalink)  
Antiguo 08/12/2011, 11:00
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 12 años, 7 meses
Puntos: 50
Respuesta: Problemas con float
Hola jeremias,
Tienes los anchos de los divs muy ajustados al ancho total..los márgenes también ocupan espacio... prueba reduciendo el ancho del div que tiene un valor de 380px por 360px...cómo consejo usa los estilos en un archivo externo...saludos.

Etiquetas: float
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:59.