Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: WiseHidden en 1 Julio 2012, 19:49 pm


Título: Modificar el CSS para ver "el contenido" mas grande
Publicado por: WiseHidden en 1 Julio 2012, 19:49 pm
Muy buenas a todos compañeros, hacia tiempo que no dejaba un post en el foro. Pues ahora cuando tenga alguna duda intento partirme antes el coco, buscando y aplicando mis propias dudas antes de consultarlo por aqui, pero esta en concreto me esta volviendo un poco loco pues no consigo dar con la respuesta adecuada.

Os explico un poco el problema. Tengo un css que lo aplico a una pagina web que estoy "construyendo" pero resulta que mientras trabajo en mi equipo se ve perfecto. Lo tengo en alta resolución, el problema esta cuando la subo al ftp, y la veo desde otro equipo, pues se ve algo mas "estrecha" aunque con una calidad buena, se que el problema está en el css, y he intentado modificar todas las proporciones. pero no encuento la solucion.

Os adjunto el codigo por si alguno pudiera orientarme.

Citar
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }

/* Global properties ======================================================== */
body {
   background:url(../images/main-bg.jpg) no-repeat 50% 0 #000;
   font-family:Arial, Helvetica, sans-serif;
   font-size:100%;
   line-height:1.125em;
   color:#464646;
   }
html { min-width:980px;}
html, body { height:100%;}



/* Global Structure ============================================================= */
#main {
   margin: 0 auto;
   position: relative;
   width: 896px;
   font-size:.75em;
}

   /* Header */
   header{
      height:146px;
      position:relative;
      }
   
   /* Banners */
   #banners {
      height:261px;
      overflow:hidden;
      }
   
   /* Content */
   section#content {
      float: left;
      width:490px;
      }
   
   /* Sidebar */
   aside{
      float: left;
      width:202px;
      }
      aside .indent {
         padding:10px 20px 23px 26px;
         }
         
   /* Footer */
   footer{
      padding:25px 25px 25px 25px;
      position:relative;
      height:1%;
      }




/* Left & Right alignment */

.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}

.col-1, .col-2, .col-3 { float:left;}

.alignright { text-align:right;}
.aligncenter { text-align:center;}

.wrapper {
   width:100%;
   overflow:hidden;
}
* html+.wrapper-ie {
   width:100%;
   overflow:hidden;
}

/* The inside class provides consistent padding. To be used often! */
.inside{ padding: 0 5px; }

/*----- form defaults -----*/
input, select, textarea {
   font-family:Arial, Helvetica, sans-serif;
   font-size:1em;
   vertical-align:middle;
   font-weight:normal;
   }

/*----- other -----*/
.img-indent {
   margin:0 20px 0 0;
   float:left;
   }
.img-box {
   width:100%;
   overflow:hidden;
   padding-bottom:17px;
   }
   .img-box img {
      float:left;
      margin:0 20px 0 0;
      }

.extra-wrap {
   overflow:hidden;
   }

p {margin-bottom:18px;}
.p1 { margin-bottom:9px;}
.p2 { margin-bottom:18px;}
.p3 { margin-bottom:27px;}


/*----- txt, links, lines, titles -----*/
a {
   color:#fff;
   outline:none;
   }
a:hover{
   text-decoration:none;
   }

h2 {
   background:url(../images/title-bg1.gif) 0 0 #111410;
   position:relative;
   margin:0 -19px 22px -19px;
   padding:0 0 0 20px;
   color:#fff;
   text-transform:uppercase;
   height:39px;
   line-height:34px;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   behavior:url(js/PIE.htc);
   }
h3 {
   background:url(../images/title-bg.png) no-repeat 0 0;
   height:45px;
   color:#000;
   line-height:45px;
   padding-left:26px;
   text-transform:uppercase;
   margin-bottom:4px;
   overflow:hidden;
   }
h4 {
   font-size:13px;
   font-weight:normal;
   color:#c3c2c2;
   margin-bottom:7px;
   }
h5 {
   
   }
h6 {
   font-size:1em;
   color:#c52600;
   }
   h6 a {
      color:#c52600 !important;
      text-decoration:underline !important;
      }

span.price {
   font-size:16px;
   line-height:27px;
   color:#c52600;
   margin-right:27px;
   }
   

.button {
   float:left;
   background:url(../images/arrow2.gif) no-repeat 9px 50% #000;
   padding:5px 12px 5px 20px;
   color:#fff;
   font-weight:bold;
   text-decoration:none;
   position:relative;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   behavior:url(js/PIE.htc);
}
.button:hover {
   background:url(../images/arrow2.gif) no-repeat 9px 50% #fff;
   color:#000;
   }

.line-hor {
   background:url(../images/line-hor.gif) 0 0 repeat-x;
   height:1px;
   overflow:hidden;
   font-size:0;
   line-height:0;
   margin:25px 0 25px 0;
   }


/*==================boxes====================*/
.box {
   background:url(../images/box-bg.gif) 0 0 #191819;
   position:relative;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   behavior:url(js/PIE.htc);
   margin-bottom:4px;
}
   .box .inner {
      padding:18px 15px 20px 20px;
   }
   .box .inner1 {
      padding:6px 25px 30px 25px;
      }


.address {
   float:left;
}
   .address dt {
      margin-bottom:18px;
   }
   .address dd {
      clear:both;
   }
      .address dd span {
         float:left;
         width:75px;
      }



/*===== header =====*/
header .logo {
   position:absolute;
   left:-15px;
   top:23px;
}

header nav {
   position:absolute;
   left:0;
   top:91px;
   background:url(../images/nav-bg.gif) 0 0 repeat-x;
   height:45px;
   width:895px;
   font-size:13px;
   text-align:center;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   behavior:url(js/PIE.htc);
   }
   header nav ul {
      padding:13px 0 0 0;
      }
      header nav li {
         display:inline;
         color:#fff;
         }
         header nav li a {
            color:#fff;
            text-decoration:none;
            padding:0 33px 0 30px;
            }
            header nav li a:hover,
            header nav li a.current {
               text-decoration:underline;
               }


header .language {
   color:#fff;
   padding:9px 9px 9px 10px;
   position:absolute;
   right:0;
   top:33px;
  background-color: rgba(0, 0, 0, 0.5);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   behavior:url(js/PIE.htc);
   -pie-background: linear-gradient(#000, #000 50%);
   }
   header .language img {
      position:relative;
      top:3px;
      margin-left:3px;
      }



/*===== aside =====*/
aside ul.last {
   padding-bottom:0;
   }
   aside ul li {
      background:url(../images/arrow1.gif) no-repeat 0 7px;
      padding:0 0 8px 14px;
      }
      aside ul li a {
         color:#c3c2c2;
         text-decoration:none;
         }
      aside ul li a:hover {
         color:#fff;
         text-decoration:underline;
         }


.new_product {
   padding:0 0 0 0;
   margin-bottom:-3px;
   }
   .new_product li {
      font-size:13px;
      color:#c3c2c2;
      background:none;
      padding:0 0 6px 0;
      }
   .new_product li.name {
      padding-bottom:2px;
      }
   .new_product li.price {
      font-size:16px;
      color:#c52600;
      padding-bottom:0;
      }


.list1 {
   padding-bottom:0;
   }
.list1 li {
   padding:0;
   background:url(../images/line-hor.gif) 0 100% repeat-x;
   padding:0 0 17px 0;
   margin-bottom:17px;
   color:#fff;
   }
   .list1 li.last {
      background:none;
      margin-bottom:0;
      padding-bottom:0;
      }


/*===== content =====*/
#content {
   
}

.pagination {
   padding:0 0 15px 0;
   width:100%;
   overflow:hidden;
   color:#6e6e6e;
   }
.pagination.last {
   padding-bottom:0;
   }



.special {
   width:100%;
   overflow:hidden;
   }
   .special li {
      float:left;
      width:162px;
      margin-right:86px;
      padding-bottom:63px;
      }
   .special li.even {
      margin-right:0;
      }
      .special li span.price {
         margin:0;
         float:right;
         }


dl.faq dt {
   font-weight:bold;
   color:#fff;
   }
dl.faq dd {
   margin-bottom:18px;
   }
dl.faq dd.last {
   margin-bottom:9px;
   }


   

/*===== footer =====*/
footer nav ul {
   margin-left:-7px;
   }
   footer nav ul li {
      display:inline;
      color:#1f1f1f;
   }
      footer nav ul li a {
         color:#464646;
         text-decoration:none;
         padding:0 9px 0 6px;
         }
      footer nav ul li a:hover {
         color:#fff;
         }

footer .billing {
   display:block;
   position:absolute;
   right:25px;
   top:25px;
   }


/*----- forms -----*/
#login fieldset {
   border:none;
   }
   #login .field {
      padding-top:3px;
      }
      #login input.text {
         width:115px;
         background:#242424;
         border:1px solid #000;
         border-right:0;
         color:#fff;
         }
      #login input.submit {
         background:url(../images/submit.gif) no-repeat 0 0;
         border:none;
         width:28px;
         height:19px;
         cursor:pointer;
         }


#currencies fieldset {
   border:none;
   }
   #currencies .field {
      padding-top:3px;
      }
      #currencies select {
         width:152px;
         background:#242424;
         border:1px solid #000;
         border-right:0;
         color:#fff;
         }
   
   
#contacts-form fieldset {
   border:none;
   width:100%;
   overflow:hidden;
   display:block;
   padding-bottom:36px;
}
   #contacts-form .col-1 {
      width:210px !important;
      margin-right:0 !important;
   }
   #contacts-form .col-2 {
      width:210px !important;
      margin-right:0 !important;
   }
   #contacts-form label {
      display:block;
      height:53px;
      overflow:hidden;
   }
      #contacts-form input {
         color:#111;
         border:1px solid #a09b96;
         background:#fff;
         padding:3px 0 3px 5px;
         width:170px;
      }
      #contacts-form textarea {
         color:#111;
         border:1px solid #a09b96;
         background:#fff;
         padding:3px 0 3px 5px;
         width:200px;
         overflow:auto;
         height:120px;
         margin-bottom:18px;
      }
      #contacts-form .button {
         float:right;
         margin-left:11px;
      }

/*==========================================*/

Os lo agradeceria de todo corazon

Un cordial saludo a todos

Atentamente
WiseHidden

Título: Re: Modificar el CSS para ver "el contenido" mas grande
Publicado por: raul338 en 1 Julio 2012, 20:41 pm
Estoy viendo que usas todo en pixeles, no usas nada "relativo" como porcentajes o unidades "em"

Título: Re: Modificar el CSS para ver "el contenido" mas grande
Publicado por: WiseHidden en 1 Julio 2012, 21:37 pm
Y que me recomendarias? Aún sigo muy verde con el tema de (CSS) Hasta hace poco seguia haciendo las cosas a puro código html en un bloc de notas xD

Que sección o parte del código tendria que mirar o cambiar?

Un saludo.

Att.
Wh.

Título: Re: Modificar el CSS para ver "el contenido" mas grande
Publicado por: WiseHidden en 3 Julio 2012, 11:28 am
Antes de nada pedir perdon por el doble post.

Lo siguiente es destacar lo que hacen muchas personas en este foro, que viene uno con toda las ganas de aprender y ampliar sus conocimientos al igual que difundirlo (Muchos pueden ver como he participado y ayudado en cualquier post siempre que haya podido o mejor haya tenido el conocimiento para hacerlo) pero jamás de los jamases he posteado solo para decir algo que no resuelva en cierta manera el problema, lo veo algo.... no sé, creo que la gente se podria "ahorrar" el contestar cosas que no resolvieran el problema o por lo menos lo guiara, recomendara, e incluso podria poner, yo tambien tengo el mismo problema, pero poner algo q de nada sirve y mas bien parece una reprimenda.........

No se preocupen seguiré intentando por mi propia cuenta.
Al fin y al cabo veo que esto ha dejado mucho de ser como era. (Mas de 200 visitas) y una sola respuesta :)

Un saludo a todos.

Y gracias de igual modo

Atentamente
WiseHidden


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines