diseño se deforma en distintos monitores

Citar

Escrito el 20 Mar 2014 03:30 am

Hola, buenas noches.

Tengo un inconveniente con el diseño de mi sitio web. La página se deforma según el monitor en la cual la esté visualizando.

Como le hago para que cada sección de mi web se vea igual en cualquier monitor?

Espero sus prontas respuestas.

De antemano muchas gracias.

Por raigeky

5 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 20 Mar 2014 06:36 pm

Hola raigeky

te recomiendo que usea responsive design, para que pueda soportar en diferentes pantallas sin ningun problema alguno.

saludos

Por kakashi2000

Claber

559 de clabLevel

5 tutoriales

Genero:Masculino

Envíale un mensaje privado Web

Desarrollador de aplicaciones Web

Citar

Escrito el 20 Mar 2014 07:48 pm

Necesitaríamos ver el site, podes poner el link para revisar su estructura html y hoja de estilos, así podríamos dar una respuesta más acertada.

Slds!

Por jap_solo

21 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Maquetador Docente Web

@jap_solo

Citar

Escrito el 21 Mar 2014 03:42 pm

Hola, buenos días.

Muchas gracias por sus respuestas, claro que si, Jap_solo

Código CSS :

 body {
                margin: 0px;
                padding: 0px;
        }

        #container {

        }

        header {
                width: 100%;
                height: 40px;
                background-color: #65604F;
        }

        header legend {
                font-family: arial, helvetica sans-serif;
                font-size: 20px;
                position: relative;
                top: 10px;
                left: 5px;
                color: #fff;
        }

        nav {
                width: 100%px;
                height: 40px;
                border: 0.1em solid #ccc;

        }

        nav ul {}

        nav ul li {
                display: inline;
                position: relative;
                right: 40px;
        }

        nav ul li a {
                text-decoration: none;
                font-family: arial,helvetica sans-serif;
                font-size: 14px;
                margin-left: 20px;
                color: #262323;
                position: relative;
                bottom: 5px;
        }

 
        .dolar_total {
                float: right;
                display: inline;
                margin-left: 100px;
                position: relative;
                bottom: 42px;
                right: 300px;
        }

        content {
                width: 765px;
                height: 541px;
                float: right;
                margin-top: 5px;
                border: 0.1em solid #ccc;
        }

        .recomendaciones {
                width: 755px;
                height: 70px;
                display: block;
                margin-top: 3px;
                margin-left: 5px;
                border: 1px solid #ccc;
        }
        
        .divisas {
                width: 243px;
                height: 100px;
                margin-top: 3px;
                margin-left: 5px;
                display: inline-block;
                border: 1px solid #ccc;
        }

       
        #entradas_y_salidas {
                width: 498px;
                height: 276px;
                position: relative;
                left: 5px;
                border: 1px solid #ccc;
        }
   
        #pos_compras {
                width: 250px;
                height: 383px;
                float: right;
                position: absolute;
                top: 241px;
                left: 768px;
                border: 1px solid #ccc;
        }

        aside {
                width: 250px;
                height: 541px;
                margin-top: 5px;
                
        }
        
        .loca {
                width: 245px;
                height: 267px;
                margin: 5px 4px 4px;
                display: block;
                border: 0.1em solid #ccc;
        }

        footer {
                width: 100%;
                height: 40px;
                background-color: #ccc;
              
                position: absolute;
                bottom: 1px;

        }
        
        footer p {
                margin-left: 5px;
                position: relative;
                bottom: 5px;
                font-family: arial,helvetica sans-serif;
                font-size: 14px;
                color: #a3a3a3;
        }

Código HTML :

<!DOCTYPE html>
<head>
    <title>
              Prueba
    </title>
    <meta charset="utf-8">
    <meta author="Luis adrian Armijo García">
    <meta description="Wen actualmete en construcci&oacute;n">
</head>
<body>
    <div id="container">
         <header>
             <legend>
                 Prueba
             </legend>
         </header>
         <nav>
             <ul>
                <!-- Aquí van a ir los enlaces (inicio, perfil y ver) que en un fúturo se espera remplazar por íconos y colocar mediante tooltips los nombres que estan en el parentisis.-->
                
                 <li><a href="inicio.php">Inicio</a></li>
                 <li><a href="#">Perfil</a></li>
                 <li><a href="lista.php">Registros</a></li>
            
             </ul>
             
         </nav>

    
            

    

             

                 
             
             
         <content>

         <div class="dolar_total">
             <img src="" width="30" height="30">
         </div>
         <div class="dolar_total">
             <img src="" width="30" height="30">
         </div>

            

             <div class="recomendaciones"></div>
             <div class="recomendaciones"></div>

             <!-- Div divisas, aquí colocaremos los tipos de cambios actuales de las divisas más usadas -->

             <div class="divisas">
                 
             </div>
             <div class="divisas">
                 
             </div>

             <!-- Aquí termina -->

           
             <!-- Últimas entradas y salidas -->

       <div id="entradas_y_salidas">

     <?php 
              //Llamamos al archivo conexion.php
              require_once ("conexion.php");
              //Preparamos la consulta
              $consulta = "SELECT * FROM datos";
              //Ejecutamos la consulta
              $eje_consulta = mysql_query ($consulta,$conexion) or die ("Error al ejecutar la consulta").mysql_error();
              /* 
                  Verificamos si hay coincidencias en nuestra tabla de datos respecto a la
                  información que solicita el usuario. Si la respuesta a nuestro condicionante
                  es True, nos va a mostrar en pantalla los datos, de lo contrario, nos 
                  mostrará un mensaje (No has resgistrado ningún dato). "En un fúturo que la app
                  se ponga en línea se modificarán las base de datos".
              */
              if (mysql_num_rows($eje_consulta) > 0) {
                 while ($lista = mysql_fetch_array($eje_consulta));
                     echo $lista[fecha];
                     echo $lista[motivo];
                     echo $lista[descripcion];
                     echo $lista[entrada];
                     echo $salida[salida];
             }else {
                  echo "No has registrado ning&uacute;n dato";
             }

             mysql_free_result ();
             mysql_close ();

             ?>
           </div>
             
         </content>

         <aside>
             
             <div class="loca">
  
             </div>
             <div class="loca">
  
             </div>

               <div id="pos_compras">
                        
             <div>
         </aside>

         <footer>
             <p>
                 Prueba Todos los derechos reservados.
             </p> 
         </footer>              
    </div>
</body>
</html>

Por raigeky

5 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 25 Mar 2014 03:01 am

Hola.

Y bueno, la verdad que tu código es un poco desastroso. Pues para comenzar, estás manejando un <div id="container"> el cual no tiene ningún estilo.

Estás manejando position:relative, en vez de flotar los elementos y adicionalmente estás usando etiquetas que no son exactamente de html, cómo la etiqueta <content>.

La pregunta aquí es: ¿Tenes algún conocimiento real de html y css? O solamente te limitas a un entendimiento básico. Pues si es más los segundo, creo que explicarte o darte alguna directriz no te servirá de mucho.

Te recomiendo leer acerca del MODELO DE CAJAS, para que entiendas como se comportan los elementos de html dentro de DOM cuando se les aplica CSS.

Igual, éxitos en tu proyecto!

Por jap_solo

21 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Maquetador Docente Web

@jap_solo

Citar

Escrito el 25 Mar 2014 07:41 pm

Eso haré jap_solo, igual, muchas gracias por el consejo. Realmente no soy muy avanzado en html y css debido a que lo dejo por meses y luego vuelvo a empezar, pero es algo que me gusta mucho, es decir, me gustaría aprender todo sobre estos lenguajes. algo que me puedas recomendar leer para ser mejor en esto?

De antemano muchas gracias por tu atención.

Por raigeky

5 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 26 Mar 2014 07:56 pm

Ah eres el tipo de la otra pregunta.. en fin tu codigo CSS esta bien para ir empezando, poco a poco iras dominandolo.

Depsues ya pasaras a LESS o SASS.

Poco a poco ya iras dominandolo, nadie nace sabiendo y no hay formula exacta del aprendizaje todo depende de cada uno. Te gustara esto del HTML y CSS

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

FullStack Web Developer

@elporfirio

Citar

Escrito el 26 Mar 2014 09:33 pm

elporfirio comentas que CSS3 no es el tope en diseño web? LESS o SASS es un complemento para un buen diseño estructurado?

Me gustaría saber mas.

Aun que por otro lado, revisando el código recomendaría un normalize.css dentro de tu proyecto para manejar bien los estilos de HTML5 sin problemas en diferentes navegadores y claro hace falta un poco mas de trabajo.

Saludos

Por kakashi2000

Claber

559 de clabLevel

5 tutoriales

Genero:Masculino

Envíale un mensaje privado Web

Desarrollador de aplicaciones Web

Citar

Escrito el 27 Mar 2014 08:00 pm

Amm no de hecho LESS o SASS generan un CSS, solo imaginate esto:

tienes una pagina con 5 secciones, son de color rojo por decir solo que cada seccion tiene un tono menos de rojo, es decir como que se ve mas blanquito.

Si te pidieran cambiar de rojo a azul, en CSS tendrias que hacerlo a mano, cada uno (suponiendo que ya tienes la combinacion de los colores). Imaginate cambiar 5 reglas... ahora si fueran 50 tonos

me muero.

Con SASS o LESS (que llevan programacion) lo que haces por decir algo:

Rojo + blanco, rojo +blanco * 2, rojo + blanco *3... haces un ciclo y listo.. los tonos ya se van generando automaticamente.

Compilas y listo tienes un archivo CSS listo para la web

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

FullStack Web Developer

@elporfirio

Citar

Escrito el 27 Mar 2014 09:43 pm

Excelente, amigo déjame investigar mas sobre este asunto seria muy interesante.

Gracias saludos.

Por kakashi2000

Claber

559 de clabLevel

5 tutoriales

Genero:Masculino

Envíale un mensaje privado Web

Desarrollador de aplicaciones Web

Citar

Escrito el 28 Mar 2014 04:31 pm

elporfirio escribió:

Ah eres el tipo de la otra pregunta.. en fin tu codigo CSS esta bien para ir empezando, poco a poco iras dominandolo.

Depsues ya pasaras a LESS o SASS.

Poco a poco ya iras dominandolo, nadie nace sabiendo y no hay formula exacta del aprendizaje todo depende de cada uno. Te gustara esto del HTML y CSS

Muchas gracias por el consejo. Ya me gusta mucho HTML y CSS.

Seguiré aprendiendo mucho más.

Saludos elporfirio.

Por raigeky

5 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 29 Mar 2014 07:00 pm

Less o Sass son una maravilla y hay que usarlos por siempre. Sin embargo antes de entrar en esas lides, hay que tenerla bien clara con todo lo que tiene que ver con el CSS básico y no tan básico. Pues Less o Sass son simples compliladores que te ayudan un montón a ahorrar tiempo en tus proyectos web.

Pero si no sabes como funciona un div, si no sabes que es el box model, si no sabes por qué se presentan los problemas de solapamiento con elementos que flotan y mucho más, Less o Sass no te servirán de mucho.

Por otro lado concuerdo con kakashi2000, el uso del normalize.css es una OBLIGACIÓN en todo proyecto web, pues ayudan a "normalizar" todos los estilos de los elementos en los browser, es un framework súper funcional.

Y bueno, adelante... a seguir aprendiendo!!!

Por jap_solo

21 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Maquetador Docente Web

@jap_solo

diseño se deforma en distintos monitores

Escribe una respuesta rapida