Fireworks me alinea a la izquierda exportando a CSS DIV

GabrielAngelos · #1 (**permalink**) 10/12/2009, 14:15

Hola que tal, tengo el fireworks CS4 y como ando apurado, he diseñado la página en aquél y lo estoy exportando bajo la opción CSS DIV el cual me genera DIVS y CSS, ademas del archivo html o php y las imagenes en una carpeta lo que me parece un ahorro de tiempo considerable :D.

El problema es que cuando ya he exportado, noto que las divisiones tienen posicion absoluta con las ubicaciones ya definidas, y lo alinea todo a la izquierda al ver la pagina, me gustaria saber si existe una opcion para alinear al centro aun sabiendo que los divs tienen posiciones absolutas, y si esa solución tiene que ser desde fireworks o desde dreamweaver manipulando directamente el CSS generado. gracias.

lynxstyle · #2 (**permalink**) 10/12/2009, 19:04

introducelo todo en un div y que sea este el que se centre en pantalla.

GabrielAngelos · #3 (**permalink**) 11/12/2009, 12:06

Hola, muchas gracias por responder, lamentablemente no funciona :(, he puesto una etiqueta div contenedor al inicio despues de <body> y cierro antes de </body> y no habia resultados, entonces lo que hice fue agregar la regla background-color y algo de texto al div para darme cuenta de su posición.

La posición que toma es de solo una linea y en la parte de arriba todavia, o sea a pesar de poner las divs conteniendo a todas las demas divs, no contiene a ninguna voy a poner el css y el html

GabrielAngelos · #4 (**permalink**) 11/12/2009, 12:07

Este es el 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SctrCrstInt</title>
<link rel="stylesheet" type="text/css" href="./SctrCrstInt.css" media="all" />
<!--[if IE]>
<style type="text/css" media="all">.borderitem {border-style:solid;}</style>
<![endif]-->
</head>

<body>

<div id="contenedor">

<div id="Div">
</div>
<div id="Div2">
</div>
<div id="Div3">
</div>
<div id="Div4">
</div>
<div id="Div5">
</div>
<div id="Div6">
</div>
<div id="Div7">
</div>
<div id="Div8">
</div>
<div id="Div9">
</div>
<div id="Div10">
</div>
<div id="Div11">
</div>
<div id="Div12">
</div>
<div id="Div13">
</div>
<img src="../Ext/Img/SctrCrstInt_r2_c4.jpg" id="SctrCrstInt_r2_c4"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r4_c2.jpg" id="SctrCrstInt_r4_c2"  alt="" />
<a href="algunapagina.php">
	<img src="../Ext/Img/SctrCrstInt_r6_c4.jpg" id="SctrCrstInt_r6_c4"  alt="" />
	</a>
<a href="algunapagina.php">
	<img src="../Ext/Img/SctrCrstInt_r6_c7.jpg" id="SctrCrstInt_r6_c7"  alt="" />
	</a>
<a href="algunapagina.php">
	<img src="../Ext/Img/SctrCrstInt_r6_c10.jpg" id="SctrCrstInt_r6_c10"  alt="" />
	</a>
<a href="algunapagina.php">
	<img src="../Ext/Img/SctrCrstInt_r6_c13.jpg" id="SctrCrstInt_r6_c13"  alt="" />
	</a>
<a href="algunapagina.php">
	<img src="../Ext/Img/SctrCrstInt_r6_c19.jpg" id="SctrCrstInt_r6_c19"  alt="" />
	</a>
<img src="../Ext/Img/SctrCrstInt_r8_c3.jpg" id="SctrCrstInt_r8_c3"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r8_c5.jpg" id="SctrCrstInt_r8_c5"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r8_c14.jpg" id="SctrCrstInt_r8_c14"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r9_c16.jpg" id="SctrCrstInt_r9_c16"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r9_c17.jpg" id="SctrCrstInt_r9_c17"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r9_c20.jpg" id="SctrCrstInt_r9_c20"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r10_c3.jpg" id="SctrCrstInt_r10_c3"  alt="" />
<a href="algunapagina.php">
	<img src="../Ext/Img/SctrCrstInt_r10_c5.jpg" id="SctrCrstInt_r10_c5"  alt="" />
	</a>
<a href="algunapagina.php">
	<img src="../Ext/Img/SctrCrstInt_r10_c8.jpg" id="SctrCrstInt_r10_c8"  alt="" />
	</a>
<a href="algunsitio.php">
	<img src="../Ext/Img/SctrCrstInt_r10_c11.jpg" id="SctrCrstInt_r10_c11"  alt="" />
	</a>
<img src="../Ext/Img/SctrCrstInt_r10_c14.jpg" id="SctrCrstInt_r10_c14"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r11_c16.jpg" id="SctrCrstInt_r11_c16"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r11_c20.jpg" id="SctrCrstInt_r11_c20"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r13_c16.jpg" id="SctrCrstInt_r13_c16"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r13_c17.jpg" id="SctrCrstInt_r13_c17"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r13_c20.jpg" id="SctrCrstInt_r13_c20"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r15_c16.jpg" id="SctrCrstInt_r15_c16"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r15_c17.jpg" id="SctrCrstInt_r15_c17"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r15_c20.jpg" id="SctrCrstInt_r15_c20"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r16_c16.jpg" id="SctrCrstInt_r16_c16"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r16_c20.jpg" id="SctrCrstInt_r16_c20"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r17_c16.jpg" id="SctrCrstInt_r17_c16"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r17_c17.jpg" id="SctrCrstInt_r17_c17"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r17_c20.jpg" id="SctrCrstInt_r17_c20"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r19_c16.jpg" id="SctrCrstInt_r19_c16"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r19_c17.jpg" id="SctrCrstInt_r19_c17"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r19_c20.jpg" id="SctrCrstInt_r19_c20"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r20_c16.jpg" id="SctrCrstInt_r20_c16"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r20_c20.jpg" id="SctrCrstInt_r20_c20"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r21_c3.jpg" id="SctrCrstInt_r21_c3"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r21_c5.jpg" id="SctrCrstInt_r21_c5"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r21_c14.jpg" id="SctrCrstInt_r21_c14"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r22_c16.jpg" id="SctrCrstInt_r22_c16"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r22_c17.jpg" id="SctrCrstInt_r22_c17"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r22_c20.jpg" id="SctrCrstInt_r22_c20"  alt="" />
<img src="../Ext/Img/SctrCrstInt_r25_c1.jpg" id="SctrCrstInt_r25_c1"  alt="" />

</div>
</body>
</html>

GabrielAngelos · #5 (**permalink**) 11/12/2009, 12:08

Y este es el CSS:

Código:

body {
	background-color: #ffffff;
	margin:0px;
	padding:0px;
	background-image: url(../Ext/Img/fondox.jpg);
	background-repeat: repeat;
	background-attachment: scroll;
}
.p {
	margin:0px;
	padding:0px;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	text-align: inherit;
	color: inherit;
	line-height: inherit;
	vertical-align: top;
}
p {
	padding-top:0px;
	margin-top:0px;
}
img {
	border:0px;
}
div {
	margin:0px;
	padding:0px;
	font-family:verdana; font-size:12px;
}
.AbsWrap {
	width: 100%;
	position: relative;
}
.rowWrap {
	width: 100%;
}
.clearfloat {
	clear:both;
	height:0px;
}
a:link, a:visited{
	COLOR:inherit;
	text-decoration:inherit;
}

#contenedor
{
	width:1024px;
	background-color:#CC0;
	margin:0px auto;
}


#Div {
	background-color: #ffffff;
	border: 10px solid #6a83bb;
	width:209px;
	padding-top:0px;
	height:357px;
	position: absolute;
	left:698px;
	top:489px;
	margin-bottom:0px;

}
#Div2 {
	background-color: #ffffff;
	border: 10px solid #c0d41b;
	width:592px;
	padding-top:0px;
	height:864px;
	position: absolute;
	left:34px;
	top:489px;
	margin-bottom:0px;

}
#Div3 {
	width:203px;
	padding-top:0px;
	height:345px;
	position: absolute;
	left:705px;
	top:495px;
	margin-bottom:0px;

}
#Div4 {
	width:195px;
	padding-top:0px;
	height:724px;
	position: absolute;
	left:240px;
	top:627px;
	margin-bottom:0px;

}
#Div5 {
	width:195px;
	padding-top:0px;
	height:724px;
	position: absolute;
	left:435px;
	top:627px;
	margin-bottom:0px;

}
#Div6 {
	width:195px;
	padding-top:0px;
	height:724px;
	position: absolute;
	left:45px;
	top:627px;
	margin-bottom:0px;

}
#Div7 {
	width:195px;
	padding-top:0px;
	height:724px;
	position: absolute;
	left:435px;
	top:627px;
	margin-bottom:0px;

}
#Div8 {
	width:195px;
	padding-top:0px;
	height:724px;
	position: absolute;
	left:240px;
	top:627px;
	margin-bottom:0px;

}
#Div9 {
	width:195px;
	padding-top:0px;
	height:724px;
	position: absolute;
	left:45px;
	top:627px;
	margin-bottom:0px;

}
#Div10 {
	background-color: #ffffff;
	border: 10px solid #ffff00;
	width:208px;
	padding-top:0px;
	height:209px;
	position: absolute;
	left:698px;
	top:897px;
	margin-bottom:0px;

}
#Div11 {
	width:203px;
	padding-top:0px;
	height:196px;
	position: absolute;
	left:705px;
	top:905px;
	margin-bottom:0px;

}
#Div12 {
	background-color: #ffffff;
	border: 10px solid #ec552f;
	width:208px;
	padding-top:0px;
	height:196px;
	position: absolute;
	left:698px;
	top:1157px;
	margin-bottom:0px;

}
#Div13 {
	width:203px;
	padding-top:0px;
	height:186px;
	position: absolute;
	left:705px;
	top:1163px;
	margin-bottom:0px;

}
#SctrCrstInt_r2_c4 {
	position: absolute;
	left:20px;
	top:22px;
	width:914px;
	height:106px;
	margin-bottom:0px;

}
#SctrCrstInt_r4_c2 {
	position: absolute;
	left:10px;
	top:134px;
	width:929px;
	height:264px;
	margin-bottom:0px;

}
#SctrCrstInt_r6_c4 {
	position: absolute;
	left:20px;
	top:405px;
	width:165px;
	height:48px;
	margin-bottom:0px;

}
#SctrCrstInt_r6_c7 {
	position: absolute;
	left:206px;
	top:405px;
	width:165px;
	height:48px;
	margin-bottom:0px;

}
#SctrCrstInt_r6_c10 {
	position: absolute;
	left:396px;
	top:405px;
	width:165px;
	height:48px;
	margin-bottom:0px;

}
#SctrCrstInt_r6_c13 {
	position: absolute;
	left:584px;
	top:405px;
	width:165px;
	height:48px;
	margin-bottom:0px;

}
#SctrCrstInt_r6_c19 {
	position: absolute;
	left:769px;
	top:405px;
	width:165px;
	height:48px;
	margin-bottom:0px;

}
#SctrCrstInt_r8_c3 {
	position: absolute;
	left:17px;
	top:470px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r8_c5 {
	position: absolute;
	left:45px;
	top:470px;
	width:585px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r8_c14 {
	position: absolute;
	left:630px;
	top:470px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r9_c16 {
	position: absolute;
	left:680px;
	top:471px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r9_c17 {
	position: absolute;
	left:708px;
	top:471px;
	width:203px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r9_c20 {
	position: absolute;
	left:911px;
	top:471px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r10_c3 {
	position: absolute;
	left:17px;
	top:498px;
	width:28px;
	height:854px;
	margin-bottom:0px;

}
#SctrCrstInt_r10_c5 {
	position: absolute;
	left:45px;
	top:498px;
	width:195px;
	height:129px;
	margin-bottom:0px;

}
#SctrCrstInt_r10_c8 {
	position: absolute;
	left:240px;
	top:498px;
	width:195px;
	height:129px;
	margin-bottom:0px;

}
#SctrCrstInt_r10_c11 {
	position: absolute;
	left:435px;
	top:498px;
	width:195px;
	height:129px;
	margin-bottom:0px;

}
#SctrCrstInt_r10_c14 {
	position: absolute;
	left:630px;
	top:498px;
	width:28px;
	height:854px;
	margin-bottom:0px;

}
#SctrCrstInt_r11_c16 {
	position: absolute;
	left:680px;
	top:499px;
	width:28px;
	height:340px;
	margin-bottom:0px;

}
#SctrCrstInt_r11_c20 {
	position: absolute;
	left:911px;
	top:499px;
	width:28px;
	height:340px;
	margin-bottom:0px;

}
#SctrCrstInt_r13_c16 {
	position: absolute;
	left:680px;
	top:839px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r13_c17 {
	position: absolute;
	left:708px;
	top:839px;
	width:203px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r13_c20 {
	position: absolute;
	left:911px;
	top:839px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r15_c16 {
	position: absolute;
	left:680px;
	top:879px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r15_c17 {
	position: absolute;
	left:708px;
	top:879px;
	width:203px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r15_c20 {
	position: absolute;
	left:911px;
	top:879px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r16_c16 {
	position: absolute;
	left:680px;
	top:907px;
	width:28px;
	height:192px;
	margin-bottom:0px;

}
#SctrCrstInt_r16_c20 {
	position: absolute;
	left:911px;
	top:907px;
	width:28px;
	height:192px;
	margin-bottom:0px;

}
#SctrCrstInt_r17_c16 {
	position: absolute;
	left:680px;
	top:1099px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r17_c17 {
	position: absolute;
	left:708px;
	top:1099px;
	width:203px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r17_c20 {
	position: absolute;
	left:911px;
	top:1099px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r19_c16 {
	position: absolute;
	left:680px;
	top:1139px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r19_c17 {
	position: absolute;
	left:708px;
	top:1139px;
	width:203px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r19_c20 {
	position: absolute;
	left:911px;
	top:1139px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r20_c16 {
	position: absolute;
	left:680px;
	top:1167px;
	width:28px;
	height:187px;
	margin-bottom:0px;

}
#SctrCrstInt_r20_c20 {
	position: absolute;
	left:911px;
	top:1167px;
	width:28px;
	height:187px;
	margin-bottom:0px;

}
#SctrCrstInt_r21_c3 {
	position: absolute;
	left:17px;
	top:1352px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r21_c5 {
	position: absolute;
	left:45px;
	top:1352px;
	width:585px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r21_c14 {
	position: absolute;
	left:630px;
	top:1352px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r22_c16 {
	position: absolute;
	left:680px;
	top:1354px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r22_c17 {
	position: absolute;
	left:708px;
	top:1354px;
	width:203px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r22_c20 {
	position: absolute;
	left:911px;
	top:1354px;
	width:28px;
	height:28px;
	margin-bottom:0px;

}
#SctrCrstInt_r25_c1 {
	position: absolute;
	left:0px;
	top:1386px;
	width:950px;
	height:124px;
	margin-bottom:0px;

}

GabrielAngelos · #6 (**permalink**) 16/12/2009, 11:50

Holaaaa, bueno ya descubrí la solución, para que nadie más se rompa la cabeza, pero quizás sea algo más compleja:

Fireworks CS4 es una buena herramienta, que te centra todo automáticamente sin necesidad de modificar código, lo único que hay que hacer es evitar solapamiento ("overlapping") si sucede esto, entonces fireworks para evitarse problemas y hacer que tú tengas la culpa jaja te dice que hay solapamiento y que las divisiones van a tomar posición absoluta.

En cambio si logran hacer un diseño muy bueno como sale en las recomendaciones de adobe TV (buscar en google), entonces te lo deja todo bonito como lo haz hecho.

Doy el tema solucionado. Muchos saludos

lynxstyle · #7 (**permalink**) 16/12/2009, 12:32

más fácil, haz un posicionamiento relativo en el div contenedor, así el posicionamiento absoluto se hará respecto al div y no a la pantalla.

GabrielAngelos · #8 (**permalink**) 27/12/2009, 21:41

hola lynxstyle, gracias por tu consejo, pero al intentarlo no me funcionó

, pero ya arreglé el diseño :D, de igual modo gracias por responder