Comunidad de diseño web y desarrollo en internet online

Problema con resolucion de web

Citar            
MensajeEscrito el 07 May 2011 10:47 pm
Hola amigos de cristalab bueno resulta que estoy creando una web en html y css pero resulta que tengo un problema con la resolucion de la misma pues en mi pc si se ve de tamaño normal pero cuando lo veo en otras maquinas pues se ve de menor tamaño bueno les dire que soy algo nuevo en el mundo del diseño web y quisiera que me ayuden a poder solucionar este problema de resolucion y que mi web se vea del mismo tamaño en diferentes maquinas, he investigado en internet sobre el tema pero no encuentro las pautas para una solucion eficaz a mi problema por ahi lei decir quepeude ser por los div o tablas, les dire que en mi web si uso div y tablas, espero su pronta ayuda.

Por gatito22

12 de clabLevel



 

msie8
Citar            
MensajeEscrito el 07 May 2011 11:28 pm
Hola! Es un poco complicado lo que pides porque depende de la resolución de pantalla de cada computador. Por ejemplo, si tu sitio tiene 1000px de ancho se verá ocupando toda la pantalla en computadores configurados con un ancho de pantalla de 1024px (ancho)×768px (alto) y se verá más angosto en aquellos ordenadores con configuración de pantalla de, por ejemplo, 1600x900. Para que se viera del mismo tamaño deberías definir todas las dimensiones de tu sitio en porcentaje. Por ejemplo, si quieres que ocupe siempre el 90% del ancho de la ventana, defines el ancho del contenedor de tu sitio en 90%. Entonces sin importar en qué resolución se vea, siempre va a ocupar un 90% de la pantalla. Pero eso va a redundar en que tengas menos control de los elementos de tus páginas y que empiecen a descuadrarse, desalinearse o superponerse cosas. Mi recomendación (más todavía si recién comienzas) es que definas un ancho fijo que contemple la mínima resolución en la que quieres que se vea correctamente el sitio.

Aquí sin buscar demasiado encontré un artículo al respecto. Un poco desactualizado en el sentido de que la resolución de 1024px de ancho ya se está volviendo un poco obsoleta.

http://gloobs.wordpress.com/2009/06/03/diseno-web-%C2%BFque-resolucion-de-pantalla-usar/

Saludos!

Por martino

16 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 09 May 2011 05:19 am
Grcis por la respuesta amigo y bueno haber y como yose con que resolucion estoy trabajando haber estoy trabajando con el dreamwaver y ahi como se con que resolucion trabajo o en que parte del programa veo eso, gracias.

Por gatito22

12 de clabLevel



 

msie8
Citar            
MensajeEscrito el 10 May 2011 07:59 am
si estas trabajando con DreamWeaver puedes simular varias resoluciones en el mismo programa, y si tienes la ultima versión cs5.5 esta incluye hasta resoluciones de dispositivos móviles.

te dejo una imágen donde puedes ver las distintas resoluciones que puedes simular en DreamWeaver, incluso puedes editar las resoluciones que ya vienen definidas, con editar tamaños.

yo generalmente diseño para una resolución de 1024px x 776por que es una de las resoluciones mas utilizadas actualmente, con esta resolución centro mi diseño con un ancho máximo de 960px.



Aquí te dejo un tema donde Freddie habla sobre los navegadores web`s y las resoluciones, puede que te sirva de algo leerlo esta muy interesante saber lo que se esta usando por la mayoría de los usuarios actualmente.

Espero te sirva, S@ludos!!!

Por jordano_p

Claber

872 de clabLevel

10 tutoriales

 

Front-End Developer

firefox
Citar            
MensajeEscrito el 10 May 2011 02:55 pm
Si no se trabaja con porcentajes siempre conviene trabajar con la resolución mas baja que usen los usuarios que tú quieres que visiten tu web.

Por ejemplo, estoy completamente seguro que hoy en día lo mínimo que se usa, y en ese caso yo me incluyo es 1024x768.

Por Aerosilverito

18 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 May 2011 02:00 am
Gracias bueno enetendi un poco pero ahi en el dreamwaver hay donde dice editar tamaños edito pero siemrpe me parece en la parte debajo del programa el mismo tamaño y en las otras opciones aparecen desactivadas, haber porfavorn peudes ayudarme con un ejemplo mas se los agradeceria.

Por gatito22

12 de clabLevel



 

msie8
Citar            
MensajeEscrito el 11 May 2011 02:14 am
Otra cosa porque cuando inserto div pa en èl dreamwaver sale en posion normal pero cuando llo publico en el navegador local sale muy a la derecha o muy arriba pero nunca en su posicion normal a que se debe eso porfavor si pueden exlicarme y como corregir ese error, gracis.

Por gatito22

12 de clabLevel



 

msie8
Citar            
MensajeEscrito el 11 May 2011 10:33 am
es que con la información que das es un poco difícil decirte cual puede ser tu problema, deberías incluir el código para poder ayudarte con mas certeza.

Por jordano_p

Claber

872 de clabLevel

10 tutoriales

 

Front-End Developer

firefox
Citar            
MensajeEscrito el 12 May 2011 06:46 pm
Hola amigo bueno gracias y aca te dejo el codigo que estoy usando espero viendolo me peudas ayudar sobre todo con la parte de los div ...

<!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">


.a:link {text-decoration:none;color:#066;}


.a:visited {text-decoration:none;color:#066;}


.a:active {text-decoration:none;color:#ff0000;}


.a:hover {text-decoration:none;color:red;}


</STYLE>

<STYLE type="text/css">


.b:link {text-decoration:none;color:#066;}


.b:visited {text-decoration:none;color:#066;}


.b:active {text-decoration:none;color:#ff0000;}


.b:hover {text-decoration:none;color:red;}


</STYLE>
<STYLE type="text/css">

.c:link {text-decoration:none;}

</STYLE>
<style type="text/css">
body {
text-align:center;
color: #333;
background-image: url(imagenes/nosotros_r6_c1.jpg);
}
#wrapper {
margin:0 auto 0 auto;
width:970px;
border:1px solid red;
text-align:left;
}
#logo {
width:214px;
height:48px;
background:#066;
border:1px solid red;
}
</style>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#apDiv2 {
position:absolute;
width:1013px;
height:22px;
z-index:2;
left: -61px;
top: 718px;
}
#apDiv3 {
position:absolute;
width:673px;
height:65px;
z-index:3;
left: 143px;
top: 607px;
}
#”wrapper” table tr .texto .texto .texto .texto {
color: #FFF;
}
#apDiv4 {
position:absolute;
width:750px;
height:76px;
z-index:3;
left: 121px;
top: 667px;
background-color: #FFFF00;
}
f {
font-family: "Hobo Std";
}
.per {
text-align: center;
}
fer {
text-align: center;
}
table tr td #MenuBar1 li .c .per .per .per .per {
text-align: center;
font-family: "Lucida Sans";
font-size: 90%;
}
.per {
font-family: "Lucida Sans";
font-size: 90%;
}
#”wrapper” table tr td #MenuBar1 li .MenuBarItemSubmenu .texto {
font-size: 90%;
}
#”wrapper” table tr td #MenuBar1 li .per .per .MenuBarSubmenuVisible {
font-size: 95%;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id=”wrapper”>
<table width="960" height="819" border="0" cellspacing="0" cellpading="0">
<tr>
<td height="240"><img src="imagenes/logo1.jpg" width="960" height="306" /></td>
</tr>
<tr>
<td height="23" bgcolor="#99CCCC"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="Inicio3.html" target="ifm1">?Inicio</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">?Nosotros</a>
<ul>
<li><a href="empresa3.html" target="ifm1">Empresa</a></li>
<li><a href="Mision3.html" target="ifm1">Misi&oacute;n</a></li>
<li><a href="vision.html" target="ifm1">Visi&oacute;n</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">?Servicios</a>
<ul>
<li><a href="#">T&uacute; Bebe</a> </li>
<li><a href="proveedores.html" target="ifm1">Proveedores</a></li>
</ul>
</li>
<li><a href="galeria.html" target="ifm1">?Productos</a></li>
</ul></td>
</tr>
<tr>
<td height="394"><iframe name="ifm1" src="Inicio3.html" width="960" height="386" frameborder="0" align="left" marginheight="0" marginwidth="0" scrolling="yes">
<div id="apDiv1"></div>
</iframe></td>
</tr>
<td height="2"><div id="apDiv2"><img src="imagenes/barrita.png" width="1013" height="22" /></div><tr>
<td align="center" valign="top" class="texto" background="imagenes/log131.jpg"><p>Emmerson Anchante - Av. Arnaldo Marquez 1245 Tda D4-D5 Jesús María<br/>
Fijo: 4237018 Nextel: 418*7025 - 413*7115 - 408*7547<br />
<a href="mailto:[email protected]" class="a">[email protected]</a> | <a href="mailto:[email protected]" class="b">[email protected]</a></p></td>
</tr></td>
</tr>
</table>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

Por gatito22

12 de clabLevel



 

msie8
Citar            
MensajeEscrito el 12 May 2011 07:33 pm
jejeje, mirando lo que tienes, prefiero crearte la estructura como la tienes pero con un código hecho por mi y tu solo le agregas las imágenes y el menú que le agregaste.

No es por nada pero en estos caso lo más adecuado no es una tabla, pero bueno cada uno se defiende con lo que puede.

En unos minutos te dejo por aquí el código.

Por jordano_p

Claber

872 de clabLevel

10 tutoriales

 

Front-End Developer

firefox
Citar            
MensajeEscrito el 12 May 2011 08:17 pm
Hay te dejo todo el código, lo e mejorado un poco, el problema que tenias no era pequeño jejeje, tenias un montón de codigo css que no entiendo para que lo agregaste. los div se te montaban un al lado del otro porque no limpiaste los float, en fin,

te e construido la estructura básica con Div's, copia y pega en dreamweaver y mira si te sirve. suerte !!!

te aconsejo que te mires algunos cursos sobre DreamWeaver si es lo que usas, o sobre Curso HTML que en esta misma web hay uno muy bueno para empezar.

Código HTML :

<!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">

/*Estilos Generales*/
body {
   margin: 0px;
   padding: 0px;
   color: #666666;
}
p {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   font-style: normal;
   color: #666666;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 10px;
   margin-left: 0px;
   line-height: 18px;
}

a:link {
   color: #006666;
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #006666;
}
a:hover {
   text-decoration: none;
   color: #ff0000;
}
a:active {
   text-decoration: none;
   color: #FF0000;
}

#wrapper {/*Este es el div que centra la web y el contenedor de los demas div*/
   width: 960px;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   text-align: left;
}
#Cabecera {/*este es donde podrás poner una imágen de cabecera*/
   clear: both;
   height: 150px;
}
#menu {/*es donde a insertado el spray de menú, ya te encargas de editar los colores y demas*/
   clear: both;
   background-color: #006666;
}
#ContenidoWrapper {/*este es el div donde puedes colocar el contenido, puedes sub dividirlo si quieres*/
   clear: both;
   padding: 8px;
}
#footer {/* el pie de página*/
   padding: 15px;
   clear: both;
   text-align: center;
}
#footer p {
   color: #666666;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
  <div id="Cabecera">
    <h1>Aquí Tu Imágen
      
    y Borras esto</h1>
  </div><!--Final Div Wrapper-->
  
  <div id="menu">
    <ul id="MenuBar1" class="MenuBarHorizontal">
              <li><a href="#">Inicio</a>      </li>
              <li><a href="#" class="MenuBarItemSubmenu">Nosotros</a>
                <ul>
                  <li><a href="#" title="Empresa">Empresa</a></li>
                  <li><a href="#" title="Misión">Misi&oacute;n</a></li>
                  <li><a href="#" title="Visión">Visi&oacute;n</a></li>
                </ul>
              </li>
              <li><a href="#" title="Servicios" class="MenuBarItemSubmenu">Servicios</a>
                <ul>
                  <li><a href="#">Tu Bebe</a>             </li>
                  <li><a href="#">Proveedores</a></li>
                </ul>
          </li>
              <li><a href="#" title="Productos">Productos</a></li>
        </ul>
  </div><!--Final Div Menu-->
  
  <div id="ContenidoWrapper">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor                sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor                sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
      </p>
     </div><!--Final Div ContenidoWrapper-->
  
  <div id="footer">
      <p>Emmerson Anchante - Av. Arnaldo Marquez 1245 Tda D4-D5 Jesús María</p>
         <p>Fijo: 4237018 Nextel: 418*7025 - 413*7115 - 408*7547</p>
      <p><a href="mailto:[email protected]">[email protected]</a> | <a href="mailto:[email protected]">[email protected]</a></p>
  </div><!--Final Div Footer-->
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Por jordano_p

Claber

872 de clabLevel

10 tutoriales

 

Front-End Developer

firefox
Citar            
MensajeEscrito el 13 May 2011 07:34 pm
Hola amigo bueno gracias por el codigo me ayudo mucho lo que sucede es que yo uso el dreamweaver y`por eso meti div pa y dentro insertaba las imagenes pero si esta bien gracias.

Por gatito22

12 de clabLevel



 

msie8

 

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