Soporte » Diseño – Temas y plantillas » Adaptar mi sitio a la resolución de monitores 960X600

  • Hola, antes que nada, gracias a quien se interese y me brinde su ayuda. Mi problema es que mi blog se ve perfecto con resolución 1280X768, la cual se adapta a monitores modernos, incluso los pequeños de las notepad. Pero en monitores viejos de 17 pulgadas, con resolución de 960X600 o menos, la sidebar me queda por debajo de otra columna. No creo que tenga que ver con la resolución en si, si no con alguna falla la hoja css style.

    les dejo el link al sitio http://www.acvnus.com.ar

    Muchas gracias.

Viendo 1 respuesta (de un total de 1)
  • Aquí les dejo el código de style.css, gracias. (Recuerden antes de matarme, que soy un principiante modificando hojas de estilo gratuitas, probalemente haya mil errores)

    /******************************************
    * HTML Elements
    ******************************************/

    * {
    margin:0;
    padding:0;
    }

    body,html {
    min-height:101%;
    }

    body {
    background: ;
    color: #333;
    width:100%;
    padding: 0 auto;

    }

    body, select, input, textarea {
    font: 12px Arial, Verdana, Sans-Serif;
    line-height:1.5em;
    }

    p {
    margin: 15px 0;

    }

    a:link, a:visited {
    color: #333;
    text-decoration:none
    }

    a:hover, a:active {
    color:#333;
    text-decoration:underline;
    }

    hr {
    display: block;
    height:1px;
    background:#333;
    border:0;
    }

    small {
    font-size: 0.9em;
    padding:3px 6px;
    }

    /****** Images ****************************/

    /*** default image behaviour ***/

    img { border:1px solid #999; padding:1px; }

    /*** WordPress specific image classes ***/

    .aligncenter, div.aligncenter {

    display: block;

    margin-left: auto;

    margin-right: auto;

    }

    .alignleft {

    float: left;

    margin: 4px 15px 5px 0;

    }

    .alignright {

    float: right;

    }

    .wp-caption {

    text-align: center;

    background-color: #fff;

    margin-top:5px;

    margin-right: 15px;

    margin-bottom:0px;

    }

    .wp-caption img{

    padding:2px;

    border:1px solid #999;

    }

    .wp-caption img:hover{

    border:1px solid #333;

    }

    .wp-caption p.wp-caption-text {

    color:#666;

    font-size: 10px;

    line-height: 12px;

    padding: 7px 4px 2px 5px!important;

    margin: 0!important;

    }

    /******************************************
    * Structure
    ******************************************/

    #header {
    background:#CCCCCC;}

    #branding {
    width:1262px;
    height:120px;
    float:left;
    margin:0;
    background:url(images/backgrounds/bg_branding.jpg) no-repeat;
    }

    .left {
    float:left;
    }

    .right {
    float:right;
    }

    #sidebar {
    width: 270px;
    float:right;
    border-left:2px solid #b6b6b6;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:20px;
    }

    #leftcol {
    width:582px;
    border-right:1px solid #b6b6b6;
    padding-right:18px;
    text-align:justify;

    }

    #leftcol, #rightcol {
    margin-top:10px;
    float:left
    }

    #rightcol {
    width:277px;
    padding-left:18px;
    margin-top: -2px;
    text-align:justify;
    }

    #rightcol2 {
    width:277px;
    padding-left:620px;
    margin-top: -2px;
    text-align:justify;

    }

    div#content2{float:left;
    width:310px;
    text-align:justify;}

    div#content3{float:left;
    width:310px;
    text-align:justify;
    padding-left:18px
    }

    div#content2, div#content3 {
    margin-top:10px;
    float:left
    }

    div#barra {
    width:300px;
    padding-right:18px;
    text-align:justify
    border-right:1px solid #b6b6b6;
    }

    /******************************************
    * Sidebar
    ******************************************/

    .subnav li {
    list-style:none;
    border-bottom:1px solid #333333;
    }

    .subnav li a:link, .subnav li a:visited {
    background: #fff;
    display:block;
    padding:4px 4px 4px 20px;
    border-left:3px double #333333;
    border-bottom: 1px solid #999;
    }

    .subnav li a:hover, .subnav li a:active {
    background: #F4F4EC;
    text-decoration:none;
    border-left:3px solid #999;
    }

    .subnav li li a:link, .subnav li li a:visited {
    border-left:none

    }

    #sidelist li {
    list-style:none
    }

    .bullets li {
    list-style:none;
    border-bottom:1px solid #FFF;
    }

    #sidelist .bullets li {
    list-style:square;
    margin-bottom:5px;

    margin-left:22px;
    }

    #sidelist .children {
    background:#F4F4EC;
    }

    #sidelist .children li {
    background: #F4F4EC;
    list-style: none;
    margin-left:15px;
    padding-left:15px;
    border-bottom:1px solid #fff;
    }

    #sidelist .children li a, #sidelist .children li a:visited {
    padding:2px 2px 2px 0px;
    border:0;
    background:#F4F4EC;
    color: #666;
    }

    #sidelist .children li a:hover, #sidelist .children li a:active {
    color:#000;
    }

    /******************************************
    * Headlines
    ******************************************/

    .blogtitle, .blogtitle a {
    color: #000;
    font-size: 1.8em;
    font-family: Georgia, «Times New Roman», Times, serif;
    font-weight: regular;
    padding: 20px 0px 10px 0px;
    }

    h1 {
    color: #840000;
    font-size: 1.6em;
    font-family: Georgia, «Times New Roman», Times, serif;
    font-weight: bold;
    margin: 0px 10px 0px 0px;
    padding: 20px 0px 0px 10px;
    }

    h2 {
    color: #840000;
    font: 1.6em Arial, Helvetica, sans-serif;
    padding-bottom:8px;
    border-bottom:1px solid #666;
    margin: 20px 0;
    }

    h3 {
    font: 0.9em Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing:0.1em;
    margin-bottom:4px;
    font-weight:bold;
    color:#840000;
    }

    #sidebar h2, #sidebar h3 a {
    font: 0.9em Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing:0.1em;
    margin-bottom:4px;
    font-weight:bold;
    color:#840000;
    }

    #sidebar h3, #sidebar h2 {
    font-size:0.9em;
    border-top:3px double #999;
    border-bottom:1px solid #999;
    padding:5px 0 5px 2px;
    margin:20px 0 15px 0;
    color:#840000;
    }

    h3#respond {
    border-top:1px solid #666;
    margin-top:25px;
    padding-top:20px
    }

    h3#comments {
    margin-top:32px
    }

    h3 a:link, h3 a:visited {
    color: #666;;
    }

    h4 {
    font-size:1.2em;
    margin-bottom:6px;
    }

    /******************************************
    * Content
    ******************************************/

    /** BEGIN content **/
    #content {
    width: 800px;
    float: left;
    padding:10px 30px;
    text-align:justify;

    }
    #content p {
    line-height: 1.4em;
    margin-bottom: 35px;
    }
    #content h3, #content h4, #content h5, #content h6 {
    font-size: 1.2em;
    margin-bottom: 5px;
    }
    #content ol, #content ul {
    list-style-position: inside;
    margin-bottom: 15px;
    }
    #content li {
    padding: 2px 0;
    line-height: 1.4em;
    }
    #content blockqoute {
    padding: 10px 10px 5px;
    background: #eeeeee;
    border-width: 1px 0;
    border-style: solid;
    border-color: #e0e0e0;
    margin-bottom: 15px;
    }
    #content h2 {
    font-family: Georgia;
    font-size: 1.7em;
    margin-bottom: 2px;
    }
    #content .details {
    font-size: 0.9em;
    color: #CCCCCC;
    margin-bottom: 15px;
    }
    #content .details a {
    color: #CCCCCC;
    }
    #content .continue {
    background-color: #6b6f7d;
    color: #ffffff;
    text-transform: uppercase;
    display: block;
    font-size: 0.9em;
    padding: 7px 12px;
    float: left;
    }
    #content .continue:hover {
    background-color: #587992;
    text-decoration: none;
    }

    #content .post h2 {
    font-weight: normal;
    color:#990000;
    }
    #content .latest {
    width: 570px;
    }
    #content .latest img {
    border: 3px solid #EFEFEF;
    float: left;
    margin: 4px 8px 8px 0;
    width: 150px;
    }
    #content .latest h2 {
    font-size: 1.7em;
    font-weight: normal;
    color:#990000;
    }
    #content .latest .continue {
    float: right;
    }
    #content .latest .bottom {
    clear: both;
    border-top: 1px solid #E1E1E1;
    }
    #content .postnav {
    clear: both;
    padding: 40px 8px 20px;
    }
    #content .postnav ul {
    list-style-type: none;
    border: 0 !important;
    }
    #content .postnav ul li {
    float: left;
    }
    #content .postnav ul li a {
    display: block;
    padding: 5px 8px;
    color: #ffffff;
    background-color: #6b6f7d;
    font-weight: bold;
    font-size: 0.9em;
    margin: 2px;
    border: 0 !important;
    }
    #content .postnav ul li a:hover {
    background-color: #587992;
    }
    #content .postnav .page_info {
    padding: 5px 8px;
    color: #ffffff;
    background-color: #6b6f7d;
    font-weight: bold;
    font-size: 0.9em;
    margin: 0 2px 2px;
    }
    #content .single {
    width: 640px; height: auto;
    }
    #content .single img {
    border: 3px solid #EFEFEF;
    width: auto;
    }
    #content .single h2 {
    font-size: 1.7em;
    font-weight: bold;
    }
    #content .single .continue {
    float: right;
    }
    #content .single .bottom {
    clear: both;
    border-top: 1px solid #E1E1E1;
    }
    /* Featured Articles formatting «leftcol» */

    .feature {
    background: url(images/backgrounds/bg_featured.jpg) repeat-x #F4F4EC;
    padding:15px;
    border: 1px solid #ccc;

    }

    .feature p, #rightcol p { margin:0; }

    #leftcol .feature { margin-bottom: 15px;}

    /* Formating of the Leadstory stuff in the tabbed section */

    #leadpic {
    max-width:300px;
    max-height:200px;
    float:left;
    margin: 0 18px 8px 0;
    padding:1px;
    border: 1px solid #999;

    }

    .title, a.title {
    font-family: Georgia, «Times New Roman», Times, serif;
    font-size:1.1em;
    font-weight:bold;

    letter-spacing:normal;
    }

    #lead p {
    margin-bottom:10px;
    }

    .read-on a { /* This can be used to format the «[…]» link in the lead story */
    color:#840000!important;
    text-decoration:none;
    }

    .read-on a:hover {
    text-decoration:underline;
    }

    /* Formating of «rightcol» which is the column in the homepage middle 😉 */

    #rightcol img {
    float:left;
    margin:3px 10px 4px 0;
    }

    #leftcol img {
    margin: 3px 10px 4px 0px;
    display:block
    }

    #rightcol .clearfloat {
    border-bottom:1px solid #999;
    padding:12px 0;
    }
    #rightcol .clearfloat h4{ font-size:1.1em;}
    #rightcol .clearfloat p{ padding-bottom:8px;}

    /*Post Formatting*/

    .entry {
    padding-bottom:28px;

    text-align:justify;
    }

    .post blockquote {
    color:#666;
    background:#F4F4EC;
    padding:6px 14px;
    margin:18px 35px;
    border-right:1px solid #DDD;
    border-bottom:1px solid #DDD;
    }

    .post ul li {
    list-style:square;
    margin-bottom:5px;

    margin-left:42px;
    }

    .post ol li {
    margin-bottom:5px;

    margin-left:48px;
    }

    #tags {
    padding:3px;
    border-bottom:1px solid #DDD;
    border-top:1px solid #DDD;
    }

    .postmetadata {
    margin: 30px 0;
    }

    /* Form Elements */

    select {
    background:#f2f2f2;
    border:1px solid #9c9c9c;
    width:100%
    }

    #searchform { padding:16px 5px 0 0; }

    .button {
    padding: 1px;
    background:#333;
    color:#fff;
    border:none;
    }

    .button:hover {
    background:#666;
    color:#FFF;
    text-decoration:none
    }

    #commentform input {
    width: 170px;
    margin: 5px 5px 1px 0;
    }

    #commentform textarea {
    width: 100%;
    margin-top:5px;
    }

    /* Comments*/

    .commentlist {
    padding-left:30px;
    }

    .commentlist li {
    margin: 15px 0 3px;
    padding: 8px 15px 10px 15px;
    background:#F4F4EC;
    border:1px solid #E6E3D3;
    }

    #commentform small {
    background:#FFF;
    font-weight:bold;
    padding:0;
    }

    .commentmetadata {
    display: block;
    }

    .commentlist small {
    background:#fff;
    border:1px solid #E6E3D3;
    }

    .commentlist cite { font-weight:bold; }

    /* Float Properties*/

    .clearfloat:after {
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
    content:».»;
    }

    .clearfloat {
    display:inline-block;
    }

    .clearfloat {
    display:block;
    }

    .search1 {
    padding-left:1000px;
    padding-bottom:30px;

    }

    /******************************************
    * Footer
    ******************************************/

    #footer {
    background:#000000;;
    border: 1px solid #000000;
    margin:0;
    text-align: justifymargin: 0 auto;
    width: 1260px;
    font-size:0.9em;
    text-align:center;
    color:#FFFFFF;
    display:block;
    clear:both;
    height:120;
    content:».»;
    }

    #footer a {
    color:#FFFFFF;
    }

Viendo 1 respuesta (de un total de 1)
  • El debate ‘Adaptar mi sitio a la resolución de monitores 960X600’ está cerrado a nuevas respuestas.