Ajustar resolucion de web

emanuel_9614 · #1 (**permalink**) 08/08/2012, 12:41

Hola, amigos como estan?
Tengo una consulta he visto muchos videos y tutoriales casi todos iguales de como redireccionar a x pagina para x resolucion de monitor. Ya que ese es mi problema tengo una plantilla que si la cargo en 1366*768 queda bien pero si la cargo en 1024 * 768 se ancha mas y no queda con el borde a los costados deseado.
Adjunto el codigo css y html para ver si me pueden decir en que parte poner la resolucion para 1366*768 y para 1024*76. (Aclaracion nociones muy basicas xd)
Muchas gracias!

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
 
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/> 
<meta name="author" content="author"/> 
<link rel="stylesheet" type="text/css" href="default.css" media="screen"/>
<title>Nueva pag</title>
</head>
 
<body style="margin: 0 12%;">
 
<div class="container">
 
    <div class="header">
        <a href="index.html"><span>Nueva pag</span></a>
    </div>
 
    <div class="stripes"><span></span></div>
    
    <div class="nav">
        <a href="index.html">Default layout</a>
        <a href="index2.html">Wide layout</a>
        <a href="index3.html">Thin layout</a>
        <a href="index.html">consequat</a>
        <a href="index.html">sem justo</a>
        <div class="clearer"><span></span></div>
    </div>
 
    <div class="stripes"><span></span></div>
 
    <div class="main">
    
        <div class="left">
 
            <div class="content">
 
                <h1>Porttitor posuere</h1>
                <div class="descr">Jun 13, 2006 by Vulputate</div>
 
                <p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. <a href="index.html">Nunc eget pretium</a> diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
 
                <blockquote><p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p></blockquote>
                
                <p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Proin quis massa semper felis euismod ultricies.</p>
 
                <h1>Adipiscing</h1>
                <div class="descr">Jun 11, 2006 by Laoreet</div>
 
                <p>Venenatis ac ante fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna.</p>
 
                <ul>
                    <li>Tristique</li>
                    <li>Aenean</li>
                    <li>Pretium</li>
                </ul>
 
                <p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>
 
                <h1>Interdum</h1>
                <div class="descr">May 24, 2006 by Lectus</div>
 
                <p>Praesent nisi sem, bibendum in, ultrices sit amet, euismod sit amet, dui. Fusce nibh. Curabitur pellentesque, lectus at <a href="index.html">volutpat interdum</a>. Pellentesque a nibh quis nunc volutpat aliquam</p>
                <p>Eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie.</p>
            
            </div>
 
        </div>
 
        <div class="right">
 
            <div class="subnav">
 
                <h1>Auctor</h1>
                <p>In hac habitasse platea dictumst. Duis auctor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien.</p>
 
                <h1>Duis Elit</h1>
                <ul>
                    <li><a href="index.html">consequat molestie</a></li>
                    <li><a href="index.html">sem justo</a></li>
                    <li><a href="index.html">semper</a></li>
                    <li><a href="index.html">magna sed purus</a></li>
                </ul>
 
                <h1>Sapien</h1>
                <ul>
                    <li><a href="index.html">sociis natoque</a></li>
                    <li><a href="index.html">magna sed purus</a></li>
                    <li><a href="index.html">tincidunt</a></li>
                </ul>
 
                <h1>Blandit Enim</h1>
                <ul>
                    <li><a href="index.html">consequat molestie</a></li>
                    <li><a href="index.html">sem justo</a></li>
                    <li><a href="index.html">semper</a></li>
                    <li><a href="index.html">magna sed purus</a></li>
                </ul>
 
                <h1>Fringilla</h1>
                <ul>
                    <li><a href="index.html">sociis natoque</a></li>
                    <li><a href="index.html">magna sed purus</a></li>
                    <li><a href="index.html">tincidunt</a></li>
                </ul>
 
            </div>
 
        </div>
 
        <div class="clearer"><span></span></div>
 
    </div>
 
    <div class="footer">
    
            <div class="col3">
 
                <h2>Tincidunt</h2>
                <ul>
                    <li><a href="index.html">consequat molestie</a></li>
                    <li><a href="index.html">sem justo</a></li>
                    <li><a href="index.html">semper</a></li>
                    <li><a href="index.html">magna sed purus</a></li>
                    <li><a href="index.html">tincidunt</a></li>
                </ul>
 
            </div>
 
            <div class="col3center">
                <h2>Sed purus</h2>
                <ul>
                    <li><a href="index.html">consequat molestie</a></li>
                    <li><a href="index.html">sem justo</a></li>
                    <li><a href="index.html">semper</a></li>
                    <li><a href="index.html">magna sed purus</a></li>
                    <li><a href="index.html">tincidunt</a></li>
                </ul>
            </div>
 
            <div class="col3">
                <h2>Praesent</h2>
                <ul>
                    <li><a href="index.html">consequat molestie</a></li>
                    <li><a href="index.html">sem justo</a></li>
                    <li><a href="index.html">semper</a></li>
                    <li><a href="index.html">magna sed purus</a></li>
                    <li><a href="index.html">tincidunt</a></li>
                </ul>
            </div>
 
            <div class="bottom">
                
                <div class="clearer"><span></span></div>
 
            </div>
 
    </div>
 
</div>
 
</body>
 
</html>

Código CSS:

Ver original* {
    margin: 0%;
    padding: 0;
}
 
a {text-decoration: none;}
 
body {
    background: #0A497B url(img/bg.jpg) repeat-y center top;
    color: #BBB;
    font: normal 62.5% "Lucida Sans Unicode",sans-serif;
}
 
p,ul {
    font-size: 1.2em;
    padding-bottom: 1.2em;
    color: #F30
}
 
blockquote {font: bold 1em sans-serif;}
 
code {
    background: #444;
    display: block;
    font-size: 12px;
    margin: 0 10px 12px;
    overflow: auto;
    padding: 8px 10px;
    white-space: pre;
}
 
img {border: none;}
 
ul {margin-left: 2em;}
h1 {font: normal 2.4em sans-serif;
    color: #0A497B ;
}
h2 {
    font: bold 1.6em Verdana,sans-serif;
    padding-bottom: 4px;
    color: #0A497B ;
}
.clearer {clear: both;}
.stripes {
    background: #333 url(img/stripe.gif);
    height: 6px;
}
.left {float: left;}
.right {float: right;}
 
.header {
    background-image:url(Nuevo..jpg);
    border-bottom: 1px solid #333;
    font: normal 2em sans-serif;
    height: 120px;
    background-repeat: no-repeat;
    background-position: center center;
}
.header a {
    color: #888;
    display: block;
    line-height: 120px;
    text-decoration: none;
    width: 100%;
}
.header span {padding-left: 32px;}
.header a:hover {
    background: #191919;
    color: #BBB;
}
 
.container {
    border: 3px solid #444;
    border-top: none;
}
 
.main {
    background: #303030;
    border-bottom: 1px solid #2A2A2A;
    border-left: 1px solid #2A2A2A;
}
.main .left {width: 64%;}
.main .right {width: 36%;}
 
.content {
    border-left: 1px solid #444;
    border-top: 1px solid #444;
    padding: 16px;
}
 
.content h1 {
    background: url(img/bgh1.gif) repeat-x left bottom;
    color: #0A497B;
    margin-bottom: 10px;
    padding: 6px 0 4px;
}
.content a {
    color: #999;
    text-decoration: underline;
}
.content a:hover {color: #CCC;}
.content .descr {margin-bottom: 5px;}
 
.nav {background: #191919 url(img/nav.gif);}
.nav a {
    background: #191919 url(img/nav.gif);
    border-right: 1px solid #161616;
    color: #CCC;
    float: left;
    font: bold 1em Verdana,sans-serif;
    line-height: 51px;
    padding: 0 20px;
}
.nav a:hover {
    background: #191919 url(img/nav_hover.gif);
    }
 
.subnav {
    background: #2A2A2A;
    border: 1px solid #1E1E1E;
    border-top-color: #444; 
    padding: 12px;
}
.subnav h1 {padding-top: 8px;}
.subnav ul {margin: 0;}
.subnav li {
    background: url(img/li.gif) no-repeat left bottom;
    list-style: none;
    margin: 0;
}
.subnav li a {
    color: #777;
    line-height: 2.4em;
    padding-left: 18px;
    text-decoration: none;
}
.subnav li a:hover {color: #BBB;}
 
.footer {
    background: #191919;
    border-top: 1px solid #444;
    color: #999;
    padding: 3% 3% 1%;
}
.footer ul {
    border-top: 1px solid #262626;
    margin: 0;
}
.footer li {
    border-bottom: 1px solid #262626;
    list-style: none;
}
.footer li a {
    display: block;
    line-height: 2em;
    padding-left: 4%;
    width: 96%;
}
.footer a {color: #666;}
.footer a:hover {
    color: #FFF;
    background: #222;
}
 
.col3,.col3center {
    float: left;
    width: 31%;
}
.col3center {margin: 0 3%;}
 
.bottom {
    color: #666;
    clear: both;
    font-size: 1.1em;
}
.bottom a {color: #888;}
#contact_form {
    float: left;
    padding: 0;
}
 
#contact_form form { 
    margin: 0; 
    padding: 0;
    width: 300px;
}
 
#contact_form form .input_field { 
    width: 300px; 
    padding: 5px; 
    color: #000000; 
    background: #fff; 
    border: 1px solid #2b271d; 
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
}
 
#contact_form form label { 
    font-family: Arial, Helvetica, sans-serif;
 
    font-size: 14px;
 
    font-weight: bold;
 
    color: #fff;
}
 
#contact_form form textarea { 
    width: 300px; 
    height: 160px; 
    color: #000000; 
    padding: 5px; 
    background: #fff; 
    border: 1px solid #2b271d; 
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
}
 
#contact_form form .submit_btn {
    margin: 10px 0px;
    padding: 8px 14px;
    background-color: #111;
    color: #FFFFFF;
    border: 1px solid #2b271d;
}

pedrogp9693 · #2 (**permalink**) 08/08/2012, 13:56

Acabo de ver la plantilla y se adapta a todos los tamaños, no se porque dices que la ves mal, prueba a hacer más pequeña la ventana, se sigue viendo bien.

emanuel_9614 · #3 (**permalink**) 08/08/2012, 14:41

Solucionado! Muchas gracias pedrogp9693.