Anónimo
El css y yo no nos llevamos bien
Cola de nuevo kike el caso es que estoy por desisitir me es complicadísimo ubicar todos los divs sin que alguno de ellos haga algo raro.
Te comento el div con fondo azul, no me permite escribir en su interior no se porque es curiosisimo! Por otro lado logre colocarlos sin que se desplazaran en mozilla incluso probado con una ipod y bien... Pero con explorer v.6 la capa con fondo azul y roja se desplazan ligeramente hacia arriba y me pisan una imagen aparte he observado que dependiendo de donde este el cursor a la hora de insertar una capa influye en los valores de posición, no se si eso es así o mi version de dreamweaver no funciona correctamente v.cs4 el caso es que soy un aficionado y por lo visto bastante cutre, echame un cable por favor te paso nuevamente el código... Gracias
<!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>Documento sin título</title>
<style type="text/css">
<!--
body{
background-image: url(fondos/0fondo%20general.jpg);
}
#apDiv1 {
margin-left:auto;
margin-right:auto;
text-align:left
width:800px;
height:2500px;
z-index:1;
background-color: #FFF;
aling:left;
width: 928px;
text-align: center;
}
#fondodiv {
position:relative;
width:920px;
height:2000px;
z-index:1;
top: 1%;
text-align: left;
margin: 4px;
}
#barranavegacion {
position:relative;
width:600px;
height:44px;
z-index:4;
top: 280px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
aling:left;
left: 33%;
padding-left: 9%;
}
#apDiv2 {
position:relative;
width:100%;
height:272px;
z-index:3;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#divcabeceraflahs {
position:relative;
width:100%;
height:200px;
z-index:5;
text-align: center;
top: 1px;
margin: 2px;
}
#apDiv3 {
position:relative;
width:230px;
height:165px;
z-index:6;
top: -27%;
background-color: #09F;
margin-left: 6%;
margin-right: auto;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#apDiv4 {
position:relative;
width:231px;
height:165px;
z-index:1;
left: 295px;
top: 0px;
background-color: #900;
margin-right: auto;
margin-left: 0%;
}
#apDiv5 {
position:relative;
width:231px;
height:165px;
z-index:7;
background-color: #FC0;
top: -842px;
clip: rect(auto,auto,auto,auto);
margin-left: 70%;
margin-right: auto;
}
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 16px;
top: 28px;
}
-->
</style>
</head>
<body>
<div id="barranavegacion">inicio . Empresa . Servicios . Imagenes . Ofertas . Contacto . Zona tecnica . Mapa de sitio</div>
<div id="apDiv1">
<div id="divcabeceraflahs"> </div>
<div id="fondodiv"></div>
<p> </p>
<p> </p>
<div id="apDiv3">
<div id="apDiv4">
<p> </p>
<p> </p>
<p>capa centro</p>
</div>
</div>
<div id="apDiv5">
<p> </p>
<p> </p>
<p>capa derecha</p>
</div>
</div>
</body>
</html>
Te comento el div con fondo azul, no me permite escribir en su interior no se porque es curiosisimo! Por otro lado logre colocarlos sin que se desplazaran en mozilla incluso probado con una ipod y bien... Pero con explorer v.6 la capa con fondo azul y roja se desplazan ligeramente hacia arriba y me pisan una imagen aparte he observado que dependiendo de donde este el cursor a la hora de insertar una capa influye en los valores de posición, no se si eso es así o mi version de dreamweaver no funciona correctamente v.cs4 el caso es que soy un aficionado y por lo visto bastante cutre, echame un cable por favor te paso nuevamente el código... Gracias
<!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>Documento sin título</title>
<style type="text/css">
<!--
body{
background-image: url(fondos/0fondo%20general.jpg);
}
#apDiv1 {
margin-left:auto;
margin-right:auto;
text-align:left
width:800px;
height:2500px;
z-index:1;
background-color: #FFF;
aling:left;
width: 928px;
text-align: center;
}
#fondodiv {
position:relative;
width:920px;
height:2000px;
z-index:1;
top: 1%;
text-align: left;
margin: 4px;
}
#barranavegacion {
position:relative;
width:600px;
height:44px;
z-index:4;
top: 280px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
aling:left;
left: 33%;
padding-left: 9%;
}
#apDiv2 {
position:relative;
width:100%;
height:272px;
z-index:3;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#divcabeceraflahs {
position:relative;
width:100%;
height:200px;
z-index:5;
text-align: center;
top: 1px;
margin: 2px;
}
#apDiv3 {
position:relative;
width:230px;
height:165px;
z-index:6;
top: -27%;
background-color: #09F;
margin-left: 6%;
margin-right: auto;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#apDiv4 {
position:relative;
width:231px;
height:165px;
z-index:1;
left: 295px;
top: 0px;
background-color: #900;
margin-right: auto;
margin-left: 0%;
}
#apDiv5 {
position:relative;
width:231px;
height:165px;
z-index:7;
background-color: #FC0;
top: -842px;
clip: rect(auto,auto,auto,auto);
margin-left: 70%;
margin-right: auto;
}
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 16px;
top: 28px;
}
-->
</style>
</head>
<body>
<div id="barranavegacion">inicio . Empresa . Servicios . Imagenes . Ofertas . Contacto . Zona tecnica . Mapa de sitio</div>
<div id="apDiv1">
<div id="divcabeceraflahs"> </div>
<div id="fondodiv"></div>
<p> </p>
<p> </p>
<div id="apDiv3">
<div id="apDiv4">
<p> </p>
<p> </p>
<p>capa centro</p>
</div>
</div>
<div id="apDiv5">
<p> </p>
<p> </p>
<p>capa derecha</p>
</div>
</div>
</body>
</html>
1 Respuesta
Respuesta de Kike Rodríguez
1
Buf, anda que no la tienes liada:
#apDiv1 {
Margin-left:auto; Lo borraría
Margin-right:auto; Lo borraría
text-align:left Falta el punto y coma
width:800px;
Height:2500px; No se porque lo haces tan grande, de alto que ocupe lo que ocupe la página, si más.
z-index:1;
background-color: #FFF;
Aling:left; Lo borraría, no es compatible con muchos navegadores
width: 928px; Lo tienes repetido, ya le has asigando 800px. O borras uno u otro
text-align: center; Repetido, primero lo pones a la izquierda y después a la derecha
}
El div4 y el div5 los tienes metidos dentro del div3, que por eso no te deja escribir, es muy pequeño y alberga a otros dos el mismo tamaño que están sobre él.
Los otros bloques tienen algún defectillo también y muchos como no los pones no sé donde van. El de "fondo" no sé para que es, pero si lo que quieres es ponerlo como fondo de los demás debes meterlos dentro, si no ocupa un lugar y desplaza a los demás.
Cada div es como una caja, si colocas una caja nueva desplaza a las demás, no puede ocupar el mismo espacio, a no ser que sea grande y metas a las demás dentro.
Tienes que estudiar algo de CSS y no confiar en que te lo haga dreamweaver, hay que hacerlo a mano, hay multitud de tutoriales y de manuales por internet.
No se si lo que querías hacer era más o menos esto:
<!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>Documento sin título</title>
<style type="text/css">
body{
Background-image: url(fondos/0fondo%20general.jpg);
font-family: Arial, Helvetica, sans-serif;
}
#barranavegacion {
position:absolute;
width:70%;
height:44px;
z-index:1;
font-size: 12px;
text-align: center;
left: 15%;
background-color:#03C;
}
#apDiv1 {
position:absolute;
top:50px;
text-align:left ;
width:90%;
z-index:1;
background-color:#FCF;
left:5%;
}
#divcabeceraflahs {
position:relative;
width:98%;
height:200px;
z-index:1;
text-align: center;
top: 1px;
left: 1%;
background-color:#0F0;
color:#FFF;
}
#contenedorCapas
{
position:relative;
width:98%;
height:165px;
left:1%;
background-color:#09F;
}
#apDiv3, #apDiv4, #apDiv5 {
position:relative;
width:230px;
height:165px;
text-align: center;
}
#apDiv3 {
background-color:#F99;
float:left;
}
#apDiv4 {
position:absolute;
background-color:#933;
left:50%;
margin-left:-115px;
float:left;
}
#apDiv5 {
background-color:#60F;
float:right;
}
</style>
</head>
<body>
<div id="barranavegacion">
<p>inicio . empresa . servicios . imagenes . ofertas . contacto . zona tecnica . mapa de sitio</p>
</div>
<div id="apDiv1">
<div id="divcabeceraflahs">
<p>Flash</p>
</div>
<div id="contenedorCapas">
<div id="apDiv3">
<p>capa izq.</p>
</div>
<div id="apDiv4">
<p>capa centro</p>
</div>
<div id="apDiv5">
<p>capa derecha</p>
</div>
</div>
</div>
</body>
</html>
Te he cambiado los colores para que veas cada bloque. Y cuando las características son las mismas para una serie de elementos es mejor asignarlos a todos a la vez y luego las particularidades a cada uno. Así si tienes que cambiar el tipo de letra por ejemplo con cambiarlo una vez modificas el resto, de otra forma tienes que ir uno por uno, igual para tamaños, margenes, etc.
Kike
#apDiv1 {
Margin-left:auto; Lo borraría
Margin-right:auto; Lo borraría
text-align:left Falta el punto y coma
width:800px;
Height:2500px; No se porque lo haces tan grande, de alto que ocupe lo que ocupe la página, si más.
z-index:1;
background-color: #FFF;
Aling:left; Lo borraría, no es compatible con muchos navegadores
width: 928px; Lo tienes repetido, ya le has asigando 800px. O borras uno u otro
text-align: center; Repetido, primero lo pones a la izquierda y después a la derecha
}
El div4 y el div5 los tienes metidos dentro del div3, que por eso no te deja escribir, es muy pequeño y alberga a otros dos el mismo tamaño que están sobre él.
Los otros bloques tienen algún defectillo también y muchos como no los pones no sé donde van. El de "fondo" no sé para que es, pero si lo que quieres es ponerlo como fondo de los demás debes meterlos dentro, si no ocupa un lugar y desplaza a los demás.
Cada div es como una caja, si colocas una caja nueva desplaza a las demás, no puede ocupar el mismo espacio, a no ser que sea grande y metas a las demás dentro.
Tienes que estudiar algo de CSS y no confiar en que te lo haga dreamweaver, hay que hacerlo a mano, hay multitud de tutoriales y de manuales por internet.
No se si lo que querías hacer era más o menos esto:
<!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>Documento sin título</title>
<style type="text/css">
body{
Background-image: url(fondos/0fondo%20general.jpg);
font-family: Arial, Helvetica, sans-serif;
}
#barranavegacion {
position:absolute;
width:70%;
height:44px;
z-index:1;
font-size: 12px;
text-align: center;
left: 15%;
background-color:#03C;
}
#apDiv1 {
position:absolute;
top:50px;
text-align:left ;
width:90%;
z-index:1;
background-color:#FCF;
left:5%;
}
#divcabeceraflahs {
position:relative;
width:98%;
height:200px;
z-index:1;
text-align: center;
top: 1px;
left: 1%;
background-color:#0F0;
color:#FFF;
}
#contenedorCapas
{
position:relative;
width:98%;
height:165px;
left:1%;
background-color:#09F;
}
#apDiv3, #apDiv4, #apDiv5 {
position:relative;
width:230px;
height:165px;
text-align: center;
}
#apDiv3 {
background-color:#F99;
float:left;
}
#apDiv4 {
position:absolute;
background-color:#933;
left:50%;
margin-left:-115px;
float:left;
}
#apDiv5 {
background-color:#60F;
float:right;
}
</style>
</head>
<body>
<div id="barranavegacion">
<p>inicio . empresa . servicios . imagenes . ofertas . contacto . zona tecnica . mapa de sitio</p>
</div>
<div id="apDiv1">
<div id="divcabeceraflahs">
<p>Flash</p>
</div>
<div id="contenedorCapas">
<div id="apDiv3">
<p>capa izq.</p>
</div>
<div id="apDiv4">
<p>capa centro</p>
</div>
<div id="apDiv5">
<p>capa derecha</p>
</div>
</div>
</div>
</body>
</html>
Te he cambiado los colores para que veas cada bloque. Y cuando las características son las mismas para una serie de elementos es mejor asignarlos a todos a la vez y luego las particularidades a cada uno. Así si tienes que cambiar el tipo de letra por ejemplo con cambiarlo una vez modificas el resto, de otra forma tienes que ir uno por uno, igual para tamaños, margenes, etc.
Kike