Problema con página Web en diferentes pantallas

arts · #1 (**permalink**) 16/03/2013, 20:13

Muy buenas, actualmente tengo un problema en una página web la cual es de 3 columnas. El problema me viene al visualizar la página en diferentes navegadores, resoluciones de pantalla e incluso en diferentes tamaños de pantalla. Ahora mismo se me descuadra el alto de las columnas haciendo que en mi casa 22" de pantalla a 1080 se queden cortas las columnas quedando horroroso, con fallos de maquetación y sin embargo al verlas en otra pantalla de 19" en la cual se realizó la página se muestra perfecta. ¿ Como puedo hacer compatible para verlo perfectamente en ambas ?.

ArturoGallegos · #2 (**permalink**) 17/03/2013, 00:47

a tan poca información proporcionada, solo hay una respuesta.... vuelve a crear el sitio y esta vez hazlo bien, siguiendo los estándares y con una buena técnica de maquetación.

pzin · #3 (**permalink**) 17/03/2013, 01:52

Sin mostrar código o una URL tu pregunta abarca demasiadas respuestas porque no es muy concisa sin tener código delante.

arts · #4 (**permalink**) 17/03/2013, 09:23

Aquí dejo la práctica, se supone que era una práctica libre pero con pequeñas condiciones como 3 columnas, cuerpo, imagenes en ambas columnas y texto del cuerpo, tal y como lo tengo, pero por alguna razón la longitud de las columnas se descentra según el monitor, resolución, incluso navegador.

http://www.mediafire.com/?oubnybviqji485d

ArturoGallegos · #5 (**permalink**) 17/03/2013, 11:04

como recomendación, siempre publica tu código aquí o muestra link al sitio donde estas practicando... pocos usuarios por no decir nadie se tomara la molestia en descargar tus archivos solo para ver en que puede que te estés equivocando.

Como mi buena acción del día lo baje y solo te puedo decir que valides tu código y maquetes correctamente.

- no usas doctype.
- algunas clases en el CSS están mal escritas.
- aplicas margenes pero sin especificar sistema de medida.
- no cierras correctamente las etiquetas.
- etc etc

falconeta8 · #6 (**permalink**) 18/03/2013, 02:58

Intenta trabajar sobre esta sencilla plantilla... Está el header, las dos columnas, el contenido y el footer, sobre eso haz lo que quieras...

Código HTML:

Ver original<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
 
<body>
 
<div id="wrapper">
 
    <header id="header">
        <strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
    </header><!-- #header-->
 
    <section id="middle">
 
        <div id="container">
            <div id="content">
                <strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
            </div><!-- #content-->
        </div><!-- #container-->
 
        <aside id="sideLeft">
            <strong>Left Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
        </aside><!-- #sideLeft -->
 
        <aside id="sideRight">
            <strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
        </aside><!-- #sideRight -->
 
    </section><!-- #middle-->
 
    <footer id="footer">
        <strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
    </footer><!-- #footer -->
 
</div><!-- #wrapper -->
 
</body>
</html>

Código CSS:

Ver original* {
    margin: 0;
    padding: 0;
}
header, nav, section, article, aside, footer {
    display: block;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
    width: 1000px;
    margin: 0 auto;
}
 
 
/* Header
-----------------------------------------------------------------------------*/
#header {
    height: 150px;
    background: green;
}
 
 
/* Middle
-----------------------------------------------------------------------------*/
#middle {
    width: 100%;
    height: 1%;
    position: relative;
}
#middle:after {
    content: '';
    clear: both;
    display: table;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
}
#content {
    padding: 0 270px 0 270px;
}
 
 
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
    float: left;
    width: 250px;
    margin-left: -100%;
    position: relative;
    background: red;
}
 
 
/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {
    float: left;
    margin-right: -3px;
    width: 250px;
    margin-left: -250px;
    position: relative;
    background: blue;
}
 
 
/* Footer
-----------------------------------------------------------------------------*/
#footer {
    height: 100px;
    background: green;
}