Comunidad de diseño web y desarrollo en internet online

Problema de resolucion

Foros de discusión > CSS y HTML

Citar            
MensajeEscrito el 15 Nov 2013 10:57 pm
Hola amigos estoy haciendo una web la direccion es esta yo lo hice en mi ordenador pero al moento de verlo en otros ordenadores los div pa estan muy a la izquierda creo que es un problema de resolucion de los monitores pero quisiera saber que codigo pondria para que mi pagina se vea bien en todos los monitores les digoq ue la pagina la estoyeditando en el editor de texto del dreaweavercs5 aca le pongo al direccion y el codigo que estoy uando gracias.

http://solducom.esy.es/

<!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>
<style type="text/css">
<!--
#main {
width: 980px;
margin: 0 auto;
text-align: left;
}
body {
margin-left:0;
margin-right:0;
margin-top:2;
margin-bottom:2;
text-align: center;
}

td.t1 {
background-image:url(encabezado.jpg);
}

td.t4 {
background-color:#CCC;
}
td.t11 {
padding-left:5px;
}
td.tt {
padding-top:4px;
padding-left:10px;
padding-right:14px;
}
h2 {
font-family:Tahoma, Geneva, sans-serif;
color:#F90;
font-size:26px;
}
h3 {
font-family:Arial;
color:#333;
font-size:18px;
}
p {
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
color:#666;
}
#apDiv1 {
position:absolute;
width:215px;
height:156px;
z-index:1;
left: 27px;
top: 721px;
}
#apDiv2 {
position:absolute;
width:215px;
height:156px;
z-index:1;
left: 273px;
top: 721px;
}
#apDiv3 {
position:absolute;
width:215px;
height:156px;
z-index:1;
left: 520px;
top: 721px;
}
#apDiv4 {
position:absolute;
width:215px;
height:156px;
z-index:1;
left: 764px;
top: 721px;
}
#apDiv5 {
position:absolute;
width:174px;
height:39px;
z-index:2;
left: 682px;
top: 418px;
}

#apDiv6 {
position:absolute;
width:366px;
height:51px;
z-index:2;
left: 53px;
top: 631px;
background-image:url(font.png);
}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}td img {display: block;}
#apDiv7 {
position:absolute;
width:127px;
height:23px;
z-index:3;
left: 44px;
top: 902px;
font-family: "Myriad Pro";
text-align: center;
}
#apDiv8 {
position:absolute;
width:127px;
height:23px;
z-index:4;
left: 236px;
top: 902px;
font-family: "Myriad Pro";
text-align: center;
}
#apDiv9 {
position:absolute;
width:127px;
height:23px;
z-index:5;
left: 429px;
top: 903px;
font-family: "Myriad Pro";
text-align: center;
}
#apDiv10 {
position:absolute;
width:127px;
height:23px;
z-index:6;
left: 628px;
top: 903px;
font-family: "Myriad Pro";
text-align: center;
}
#apDiv11 {
position:absolute;
width:127px;
height:23px;
z-index:7;
left: 835px;
top: 903px;
font-family: "Myriad Pro";
text-align: center;
}
#apDiv12 {
position:absolute;
width:242px;
height:12px;
z-index:8;
left: 380px;
top: 939px;
text-align:center;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:10px;
}
#apDiv13 {
position:absolute;
width:285px;
height:28px;
z-index:6;
left: 25px;
top: 11px;

}
#apDiv16 {
position:absolute;
width:26px;
height:27px;
z-index:12;
left: 672px;
top: 343px;
}

#apDiv17 {
position:absolute;
width:26px;
height:28px;
z-index:14;
left: 672px;
top: 432px;
background-color:#000;
}
#apDiv19 {
position:absolute;
width:26px;
height:28px;
z-index:13;
left: 672px;
top: 349px;
background-color:#000;
}
#apDiv20 {
position:absolute;
width:326px;
height:315px;
z-index:20;
left: 668px;
top: 277px;
}
#apDiv21 {
position:absolute;
width:26px;
height:28px;
z-index:15;
left: 672px;
top: 477px;
background-color:#000;
}
#apDiv22 {
position:absolute;
width:26px;
height:28px;
z-index:16;
left: 672px;
top: 521px;
background-color:#000;
}
#apDiv23 {
position:absolute;
width:26px;
height:28px;
z-index:17;
left: 672px;
top: 566px;
background-color:#000;
}
#apDiv24 {
position:absolute;
width:26px;
height:28px;
z-index:18;
left: 672px;
top: 611px;
background-color:#000;
}
#apDiv25 {
position:absolute;
width:327px;
height:31px;
z-index:19;
left: 667px;
top: 237px;
background-color:#CCC;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:17px;
color:#666;
padding-top:9px;
}

#apDiv26 {
position:absolute;
width:43px;
height:33px;
z-index:21;
left: 704px;
top: 283px;
}
#apDiv27 {
position:absolute;
width:26px;
height:26px;
z-index:-1;
left: 668px;
top: 286px;
background-image:url(image.jpg);
}
#apDiv28 {
position:absolute;
width:26px;
height:26px;
z-index:21;
left: 667px;
top: 331px;
background-image:url(image.jpg);
}
#apDiv29 {
position:absolute;
width:26px;
height:26px;
z-index:1;
left:-1px;
top: 98px;
background-image:url(image.jpg);
}
#apDiv30 {
position:absolute;
width:26px;
height:26px;
z-index:2;
left: -1px;
top: 143px;
background-image:url(image.jpg);
}
#apDiv31 {
position:absolute;
width:26px;
height:26px;
z-index:3;
left: -1px;
top: 189px;
background-image:url(image.jpg);
}
#apDiv32 {
position:absolute;
width:26px;
height:26px;
z-index:4;
left: -1px;
top: 234px;
background-image:url(image.jpg);
}
#apDiv33 {
position:absolute;
width:26px;
height:26px;
z-index:5;
left: -1px;
top: 279px;
background-image:url(image.jpg);
}

#apDiv14 {
position:absolute;
width:285px;
height:28px;
z-index:7;
left: 25px;
top: 56px;

}
#apDiv15 {
position:absolute;
width:285px;
height:28px;
z-index:8;
left: 25px;
top: 100px;

}
#apDiv34 {
position:absolute;
width:285px;
height:28px;
z-index:9;
left: 25px;
top: 145px;

}
#apDiv35 {
position:absolute;
width:285px;
height:28px;
z-index:10;
left: 24px;
top: 191px;

}
#apDiv36 {
position:absolute;
width:285px;
height:28px;
z-index:11;
left: 25px;
top: 236px;

}
#apDiv37 {
position:absolute;
width:285px;
height:28px;
z-index:12;
left: 25px;
top: 281px;

}
-->
</style>
<style type="text/css">
<!--
a.ff:link {color:#000; text-decoration:none; font-family:"Myriad Pro"; font-size:15px;}
a.ff:visited {color:#000; text-decoration:none; font-family:"Myriad Pro"; font-size:15px;}
a.ff:active {color:#000; text-decoration:none; font-family:"Myriad Pro"; font-size:15px;}
a.ff:hover {color:#ccc; text-decoration:underline; font-family:"Myriad Pro"; font-size:15px;}
a.t9:link {color:#F90; text-decoration:none; font-family:"Myriad Pro"; font-size:16px;}
a.t9:visited {color:#F90; text-decoration:none; font-family:"Myriad Pro"; font-size:16px;}
a.t9:active {color:#F90; text-decoration:none; font-family:"Myriad Pro"; font-size:16px;}
a.t9:hover {color:#333; text-decoration:underline; font-family:"Myriad Pro"; font-size:16px;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Solducom</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body onload="MM_preloadImages('imagen3.jpg','imagen4.jpg','imagen1.jpg','imagen2.jpg')">
<div id="main">
<div id="apDiv12"><em>Página web diseñada en la clase de E-Commerce</em></div>
<table width="980" height="850" align="center" cellspacing="0" cellpadding="0">
<tr>
<td height="180" colspan="2" class="t1">&nbsp;</td>
</tr>
<tr>
<td height="40" colspan="2" class="t2"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" target="_self">Quienes Somos</a> </li>
<li><a href="productos.html" target="_self">Productos</a></li>
<li><a href="novedades.html" target="_self">Novedades</a></li>
<li><a href="clientes.html" target="_self">Nuestros Clientes</a> </li>
<li><a href="contactenos.html" target="_self">Contactenos</a></li>
</ul></td>
</tr>
<tr>
<td width="643" height="360" valign="top" class="tt"><h2>Quienes Somos</h2>
<h3>Más de 25 años a su servicio</h3>
<p>En la actualidad el Grupo Solducom está formado por un grupo de empresas lideres en el
diseño, realización entrega llaves en mano de sistemas de automatización de procesos
industriales de soldadura.El exito del crecimiento esta basado en la inversión continua en
medios humanos y técnicos que ha permitido a la compañia aportar soluciones innovadoras en

diversos sectores industriales.</p>
<p>El concepto de Calidad Total es para nuestra organización el factor estrategico más importante

para incorporar valor a sus productos y servicios.Asi lo han entendido nuestros clientes, entre

los que se encuentran las más prestigiosas firmas del mercado global.</p>
<p>Nuestro objetivo es mejorar los sistemas productivos de nuestros clientes a tráves de la

optimización de recursos y reducción de costos.Nuestros equipos humanos ofrecen una

atención personlizada, ágil y flexible para cada necesidad industrial.</td>
<td width="337" valign="middle" class="t11">&nbsp;
<div id="apDiv25"><b>Nuestros Servicios</b></div>
<div id="apDiv20">
<div id="apDiv37"><a href="#" class="t9" target="_blank">Diseños de sistemas automatizados</a></div>
<div id="apDiv36"><a href="#" class="t9" target="_blank">Sistema de fabricación en fibra de carbono</a></div>
<div id="apDiv35"><a href="#" class="t9" target="_blank">Controles electrónicos de soldadura</a></div>
<div id="apDiv34"><a href="#" class="t9" target="_blank">Sistemas de posicionado</a></div>
<div id="apDiv15"><a href="#" class="t9" target="_blank">Tecnologías Best FIT</a></div>
<div id="apDiv14"><a href="#" class="t9" target="_blank">Soldadura láser</a></div>
<div id="apDiv13"><a href="#" class="t9" target="_blank">Soldadura por resistencia y al arco</a></div>
<div id="apDiv33"></div>
<div id="apDiv32"></div>
<div id="apDiv31"></div>
<div id="apDiv30"></div>
<div id="apDiv29"></div>
<img src="barrah.png" width="326" height="315" /> </div>
<div id="apDiv27"></div>
<div id="apDiv28"></div></td>
</tr>
<tr>
<td height="300" colspan="2" class="t4"><div id="apDiv1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','imagen3.jpg',1)"><img src="imagen1.jpg" alt="clientes" name="Image2" width="215" height="156" border="0" id="Image2" /></a></div>
<div id="apDiv2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','imagen4.jpg',1)"><img src="imagen2.jpg" alt="clientes" name="Image3" width="215" height="156" border="0" id="Image3" /></a></div>
<div id="apDiv3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','imagen1.jpg',1)"><img src="imagen3.jpg" alt="clientes" name="Image4" width="215" height="156" border="0" id="Image4" /></a></div>
<div id="apDiv4"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','imagen2.jpg',1)"><img src="imagen4.jpg" alt="clientes" name="Image5" width="215" height="156" border="0" id="Image5" /></a></div>
<div id="apDiv6"></div></td>
</tr>
<tr>
<td height="70" colspan="2" class="t5"><img src="barnav1.png" width="980" height="70" />
<div id="apDiv7"><a href="index.html" class="ff" target="_self">Quienes Somos</a></div>
<div id="apDiv11"><a href="contactenos.html" class="ff" target="_self">Contactenos</a></div>
<div id="apDiv10"><a href="clientes.html" class="ff" target="_self">Nuestros Clientes</a></div>
<div id="apDiv9"><a href="novedades.html" class="ff" target="_self">Novedades</a></div>
<div id="apDiv8"><a href="productos.html" class="ff" target="_self">Productos</a></div></td>
</tr>
</table>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</div>
</body>
</html>

Por jarvi22

22 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 19 Nov 2013 07:31 pm
En tu body de css solo escribe margin: 0; y padding:0; ya que hay un espacio en blanco y puedes jugar con los margin y padding de tus "tablas", pero la mejor recomendacion es que empezaras a usar html5 y en lugar de seguir haciendo tabla sobre tabla, hacer divs

Por Rarufa

16 de clabLevel



 

Envíale un mensaje privado    

chrome
Foros de discusión > CSS y HTML

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.