Alinear 4 capas

Sette · #1 (**permalink**) 25/03/2011, 08:32

tengo 4 capas, de momento estoy intentando poner una al lado de la otra, tengo lo sigueinte

HTML
<div id="min_01"></div>
<div id="min_02"></div>

CSS
#min_01{
background-image:url(../imgs/min_01.jpg);
width:51px;
height:51px;
margin-top:315px;
margin-left:410px;
}

#min_02{
background-image:url(../imgs/min_02.png);
width:51px;
height:51px;
margin-top:315px;
margin-left:470px;
}

con esto que tengo, la segunda la baja mucho, y no la deja al lado de la anterior

IsaBelM · #2 (**permalink**) 25/03/2011, 08:41

usa la propiedad float: right/left

Sette · #3 (**permalink**) 25/03/2011, 08:53

la he usado y no me va tampoco

soy novato en css, y la verdad q hasta ahora es con el primerproblema que me encuentro, como debería meterlo?

gVenom · #4 (**permalink**) 25/03/2011, 09:14

Bueno, comencemos por lo básico y puntos de consideración.

Para que una caja se posicione a la derecha de otra, necesitas ponerle la propiedad float:left;, tanto a la primera caja como a la segunda.
Posibles problemas:
Si la caja se ba para abajo, puede ser porque no tiene el suficiente espacio para acomodarse al lado de la otra, ya sea porque ambas estan contenidas en otro DIV con un ancho menor al que ocupas, o bien por el ancho de la pagina.
Tu codigo le aplica a cada caja un margin-left:470px; , por lo que sumado con los 410px que le aplicas a la otra y , tomando los 102px de ancho de las cajas (51px + 51px), suman un total de 982px que deberias tener disponibles de ancho en la linea de las cajas, solamente para que se pongan en la misma fila.

toma eso en consederación y nos avisas.

Saludos,

Sette · #5 (**permalink**) 25/03/2011, 09:21

gracias, es loq q tiene ser novato, no había tomado eso en cuenta

#min_01{
background-image:url(../imgs/min_01.jpg);
width:51px;
height:51px;
float:left;
margin-left:410px;
margin-top:-64px;
}

#min_02{
background-image:url(../imgs/min_02.png);
width:51px;
height:51px;
float:left;
margin-top:-64px;
margin-left:5px;
}

ahora va genial lo q no entiendo, es ahora lo de el margin top, he de ponerlo negativo, para q entre dentro del div contenedor

gVenom · #6 (**permalink**) 25/03/2011, 09:26

Si las cajas se estan saliendo del div contenedor, es porque algo esta mal puesto. Las cajas deberían acomodarse solas en su respectivo sitio.

Si requieres mas ayuda, vas a tener que poner más información (entiendase código) para poder analizarlo.

Sette · #7 (**permalink**) 25/03/2011, 09:34

otra cosa, no sé pq en dreamweaver se ve todo encajado en su sitioo, pero en firefox se descuadra todo, os dejo el codigo

HTML

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link href="css/pasek.css" rel="stylesheet" type="text/css"> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>

<body>


<div id="contenedor">

	<div id="cabecera">
    	<div id="logo"></div>
        <div id="idiomas"></div>
    </div>
    
    <div id="menu">Menu</div>
    
    <div id="sliders">Sliders</div>
    
    <div id="menu_izquierda">MEnu Izquierda</div>
    
    <div id="contenido">
    	<div id="imagen_fondo">
       	  <div id="texto_fondo">
       	  <div id="titulo_caja">Algo sobre nosotros</div>
                <div id="texto_caja">
                  <p>Texto.</p>
                  <p>Texto.</p>
              </div>
          </div>
        </div>
        <div id="min_01"></div>
        <div id="min_02"></div>
        <div id="min_03"></div>
        <div id="min_04"></div>
        <div id="min_05"></div>
    </div>
    
</div>


</body>
</html>

CSS

Código:

@charset "UTF-8";
/* CSS Document */

#contenedor{
	width:975px;
	height:691px;
	background-color:#000;
}

/*CABECERA*/

#cabecera{
	width:975px;
	height:107px;
	clear:both;
	background-color:#FFF;
	padding-left:75px;
}

#logo{
	width:217px;
	height:98px;
	padding-top:5px;
	background-image:url(../imgs/logo_principal.jpg);
	background-repeat:no-repeat;
	float:left;
}

#idiomas{
	width:45px;
	height:12px;
	float:right;
	background-image:url(../imgs/idiomas_es_ing.jpg);
	background-repeat:no-repeat;
	padding-right:77px;
}

/*FIN DE CABECERA*/

#menu{
	clear:both;
	width:975px;
	height:50px;
	background-color:#FFF;
}

#sliders{
	width:975px;
	height:162px;
	clear:both;
	background-color:#FFF;
}

#menu_izquierda{
	width:289px;
	height:372px;
	float:left;
	background-color:#FFF;
}


/*CONTENIDO*/

#contenido{
	float:left;
	width:686px;
	height:372px;
	background-color:#FFF;
}

#imagen_fondo{
	background-image:url(../imgs/fondo_c_index.jpg);
	background-repeat:no-repeat;
	width:668px;
	height:297px;
	margin-top:10px;
	margin-left:10px;
	float:left;
}

#texto_fondo{
	background-image:url(../imgs/texto_c_index.png);
	background-repeat:no-repeat;
	width:390px;
	height:148px;
	float:left;
	margin-top:210px;
	}

#titulo_caja{
	float:left;
	width:390px;
	height:30px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#FFF;
	padding-top:5px;
	padding-left:35px;
}

#texto_caja{
	width:390px;
	height:118px;
	font-family:"Trebuchet MS", Arial, tHelvetica, sans-serif;
	font-size:11px;
	color:#FFF;
	padding-left:3px;
}

#min_01{
	background-image:url(../imgs/min_01.jpg);
	width:51px;
	height:51px;
	float:left;
	margin-left:405px;
	margin-top:-64px;
}

#min_02{
	background-image:url(../imgs/min_02.png);
	width:51px;
	height:51px;
	float:left;	
	margin-top:-64px;
	margin-left:5px;
}

#min_03{
	background-image:url(../imgs/min_02.png);
	width:51px;
	height:51px;
	float:left;	
	margin-top:-64px;
	margin-left:5px;
}

#min_04{
	background-image:url(../imgs/min_02.png);
	width:51px;
	height:51px;
	float:left;	
	margin-top:-64px;
	margin-left:5px;
}

#min_05{
	background-image:url(../imgs/min_02.png);
	width:51px;
	height:51px;
	float:left;	
	margin-top:-64px;
	margin-left:5px;
}

/*FIN DE CONTENiDO*/

gVenom · #8 (**permalink**) 25/03/2011, 09:40

Suponiendo que todas las cajas de abajo estan flotadas (min_01,02...05), pon inmediatamente despues de ellas y antes del cierre del div contenedor esta linea:

Código CSS:

Ver original<div style="clear: both"></div>

Código HTML:

Ver original<div id="contenido">
        <div id="imagen_fondo">
          <div id="texto_fondo">
          <div id="titulo_caja">Algo sobre nosotros</div>
                <div id="texto_caja">
                  <p>Texto.</p>
                  <p>Texto.</p>
              </div>
          </div>
        </div>
        <div id="min_01"></div>
        <div id="min_02"></div>
        <div id="min_03"></div>
        <div id="min_04"></div>
        <div id="min_05"></div>
<div style="clear: both"></div>
    </div>

Ya mas adelante verás que no es necesario usar tantos div para acomodar las cosas. Y lo digo básicamente por esto:

Código HTML:

Ver original<div id="texto_caja">
                  <p>Texto.</p>
                  <p>Texto.</p>
              </div>

Sette · #9 (**permalink**) 25/03/2011, 09:44

sigue sin funcionar al añadir esa linea, salen descuadradas en firefox, en dreamweaer bien, pero en firefox no sale bien

gVenom · #10 (**permalink**) 25/03/2011, 10:01

Dos cosas:
1 - Acomoda la linea que carga tu css

Código HTML:

Ver original<link rel="stylesheet" type="text/css" href="css/pasek.css" media="screen" />

2 - Verifica que este bien la direccion y el nombre del css

Yo copié tu codigo aca y lo probé y todo se movió donde debe

Sette · #11 (**permalink**) 25/03/2011, 10:43

la url de la hoja de estilos está bien, y sigue haciendome lo mismo, como te comento en dreamweaver se alinea bien, pero en firefox no, puede ser que sea la versión de firefox 4?

mira, puedes verlo en http://manucastro.es/pasek/web/index.php

gVenom · #12 (**permalink**) 25/03/2011, 11:20

Lo que ocupas es algo así ???

Sette · #13 (**permalink**) 25/03/2011, 11:30

eso es, exactamente

gVenom · #14 (**permalink**) 25/03/2011, 11:37

Código CSS:

Ver original/*CONTENIDO*/
 
#contenido{
    position: relative;
    width:695px;
    border: solid 1px;
    background-image:url(../imgs/fondo_c_index.jpg);
    background-repeat:no-repeat;
    background-position: 10px 10px;
 
}
 
#texto_caja{
    width:390px;
    height:118px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#000;
    margin: 50px 0 0 5px;
    border: solid 1px;
    float: left;
}
 
#min_01{
    background-image:url(../imgs/min_01.jpg);
    width:51px;
    height:51px;
    float:left; 
    margin: 15&#37; 5px 0 5px;
    border: solid 1px;
}
 
#min_02{
    background-image:url(../imgs/min_02.png);
    width:51px;
    height:51px;
    float:left; 
    margin-right:5px;
    margin-top: 15%;
    border: solid 1px;
}
 
#min_03{
    background-image:url(../imgs/min_02.png);
    width:51px;
    height:51px;
    float:left; 
    margin-right:5px;
    margin-top: 15%;
    border: solid 1px;
}
 
#min_04{
    background-image:url(../imgs/min_02.png);
    width:51px;
    height:51px;
    float:left; 
    margin-right:5px;
    margin-top: 15%;
    border: solid 1px;
}
 
#min_05{
    background-image:url(../imgs/min_02.png);
    width:51px;
    height:51px;
    float:left; 
    margin-right:5px;
    margin-top: 15%;
    border: solid 1px;
}

Código HTML:

Ver original<div id="contenido">caja-contenido
        <div id="texto_caja">
          <p>Algo sobre nosotros</p>
                  <p>Texto.</p>
                  <p>Texto.</p>
        </div>
        <div id="min_01">   
                  <p>min_01.</p>
                  <p>min_01.</p>
        </div>
        <div id="min_02"> 
                  <p>min_02.</p>
                  <p>min_02.</p>
        </div>
        <div id="min_03"> 
                  <p>min_03.</p>
                  <p>min_03.</p>
        </div>
        <div id="min_04">
                  <p>min_04.</p>
                  <p>min_04.</p>
        </div>
        <div id="min_05">
                  <p>min_05.</p>
                  <p>min_05.</p>
        </div>
    </div>

COMENTARIOS:

Como vas a ver, eliminé una caja que estaba metida ahi, la que trae el texto "Algo sobre nosotros" , ahi puedes ponerla con la imagen que ocupas o le agregar los datos al <p> que esta conteniendo el texto.

gVenom · #15 (**permalink**) 25/03/2011, 11:37

los bordes de 1px quitalos, yo los puese para poder ver los div.

Esa linea que dice 15&#37 es 15% , el codigo de aqui lo edito así

Sette · #16 (**permalink**) 25/03/2011, 12:07

nada, tampoco sale bien

gVenom · #17 (**permalink**) 25/03/2011, 12:19

Pues no se que decirte entonces

Sette · #18 (**permalink**) 25/03/2011, 12:46

en que navegador lo miras?, pq a mi sigue sin irme

gVenom · #19 (**permalink**) 25/03/2011, 12:54

IE8. Pero si lo estas actualizando aqui http://manucastro.es/pasek/web/index.php ,
yo no veo ningun cambio

Sette · #20 (**permalink**) 25/03/2011, 12:59

lo probé y nada por eso volví a las version anterior

gVenom · #21 (**permalink**) 25/03/2011, 14:11

Pues a mi si me funciona, algo debes haber puesto diferente. Copiate todo esto en un notepad y salvalo como html y lo pruebas

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
 
<style type="text/css">
/*CABECERA*/
 
#cabecera{
    width:975px;
    height:107px;
    clear:both;
    background-color:#FFF;
    padding-left:75px;
}
 
#logo{
    width:217px;
    height:98px;
    padding-top:5px;
    background-image:url(../imgs/logo_principal.jpg);
    background-repeat:no-repeat;
    float:left;
}
 
#idiomas{
    width:45px;
    height:12px;
    float:right;
    background-image:url(../imgs/idiomas_es_ing.jpg);
    background-repeat:no-repeat;
    padding-right:77px;
}
 
/*FIN DE CABECERA*/
 
#menu{
    clear:both;
    width:975px;
    height:50px;
    background-color:#FFF;
}
 
#sliders{
    width:975px;
    height:162px;
    clear:both;
    background-color:#FFF;
}
 
#menu_izquierda{
    width:289px;
    height:372px;
    float:left;
    background-color:#FFF;
}
 
/*CONTENIDO*/
 
#contenido{
    position: relative;
    width:695px;
    height: 310px;
    border: solid 1px;
    background-image:url(fondo_c_index.jpg);
    background-repeat:no-repeat;
    background-position: 10px 10px;
 
}
 
#texto_caja{
    width:368px;
    height:155;
    font: 12px  "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #ffffff;
    background-color: blue;
    margin: 19% 0 0 11px;
    border: solid 1px;
    float: left;
}
 
#min_01{
    background-image:url(min_01.jpg);
    width:52px;
    height: 50px;
    float:left; 
    margin: 30% 5px 0 5px;
    border: solid 1px;
}
 
#min_02{
    background-image:url(min_02.png);
    width:52px;
        height: 50px;
    float:left; 
    margin-right:5px;
    margin-top: 30%;
    border: solid 1px;
}
 
#min_03{
    background-image:url(min_01.jpg);
    width:52px;
        height: 50px;
    float:left; 
    margin-right:5px;
    margin-top: 30%;
    border: solid 1px;
}
 
#min_04{
    background-image:url(min_02.png);
    width:52px;
        height: 50px;
    float:left; 
    margin-right:5px;
    margin-top: 30%;
    border: solid 1px;
}
 
#min_05{
    background-image:url(min_01.jpg);
    width:52px;
        height: 50px;
    float:left; 
    margin-right:5px;
    margin-top: 30%;
    border: solid 1px;
 
}
<div style="clear: both"></div>
</style>
</head>
 
<body>
<div id="contenedor">
 
    <div id="cabecera">
        <div id="logo"></div>
        <div id="idiomas"></div>
    </div>
    
    <div id="menu">Menu</div>
    
    <div id="sliders">Sliders</div>
    
    <div id="menu_izquierda">MEnu Izquierda</div>
 
    <div id="contenido">
        <div id="texto_caja">
          <p style="background-color:#191970; line-height: 25px;"> Algo sobre nosotros</p>
                  <p >El espíritu de eficiencia, principio vital de Pasek, concilia la evolución técnica y los impreativos económicos con las necesidades técnicas de nuestros clientes<br />
                       Nuestra Actividad plurisectorial dedicada a diseñar, fabricar y aplicar una completa gama de tecnologías de instalación y de productos refractarios de alta calidad, nos confiere la máxima flexibilidad en las necesidades del sector industrial.</p>
        </div>
        <div id="min_01"></div>
        <div id="min_02"></div>
        <div id="min_03"></div>
        <div id="min_04"></div>
        <div id="min_05"></div>
   </div>
</div>
</body>
</html>

el css va en la misma hoja

Sette · #22 (**permalink**) 26/03/2011, 07:36

puedo meter el css en una hoja aparte?

por cierto, tendrá q ver q guarde como php en vez de html?

he subido lo que me has pasado y mira

http://manucastro.es/pasek/web2/prueba.html

gVenom · #23 (**permalink**) 28/03/2011, 07:57

Los estilos pueden ir aparte. Yo los puse ahi por facilidad en la prueba.

PHP o Html, es indiferente. Los estilos van aplicados a los objetos.

El link no me cargo nada.

Sette · #24 (**permalink**) 28/03/2011, 08:08

lo he conseguido, simplemente era quitar el margin-top

no te preocupes que me verás ahora que estoy intentando aprender css más por este subforo

jomaruro · #25 (**permalink**) 02/04/2011, 02:25

Hola:

Cita:

Iniciado por gVenom

PHP o Html, es indiferente.

Siempre que el servidor donde se aloje la página admita php, de lo contrario no es indiferente.

Saludos.