elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: (TUTORIAL) Aprende a emular Sentinel Dongle By Yapis


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Modificar el CSS para ver "el contenido" mas grande
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Modificar el CSS para ver "el contenido" mas grande  (Leído 2,271 veces)
WiseHidden

Desconectado Desconectado

Mensajes: 225


La curiosidad es la semilla de la genialidad.


Ver Perfil WWW
Modificar el CSS para ver "el contenido" mas grande
« 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


En línea

Si tu tienes una manzana y yo otra y decidimos intercambiarlas, seguiremos teniendo una manzana cada uno, pero si tu tienes una idea y yo otra y la intercambiamos, ambos tendremos dos ideas. (Origen Anónimo)
raul338


Desconectado Desconectado

Mensajes: 2.633


La sonrisa es la mejor forma de afrontar las cosas


Ver Perfil WWW
Re: Modificar el CSS para ver "el contenido" mas grande
« Respuesta #1 en: 1 Julio 2012, 20:41 pm »

Estoy viendo que usas todo en pixeles, no usas nada "relativo" como porcentajes o unidades "em"


En línea

WiseHidden

Desconectado Desconectado

Mensajes: 225


La curiosidad es la semilla de la genialidad.


Ver Perfil WWW
Re: Modificar el CSS para ver "el contenido" mas grande
« Respuesta #2 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.
En línea

Si tu tienes una manzana y yo otra y decidimos intercambiarlas, seguiremos teniendo una manzana cada uno, pero si tu tienes una idea y yo otra y la intercambiamos, ambos tendremos dos ideas. (Origen Anónimo)
WiseHidden

Desconectado Desconectado

Mensajes: 225


La curiosidad es la semilla de la genialidad.


Ver Perfil WWW
Re: Modificar el CSS para ver "el contenido" mas grande
« Respuesta #3 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
« Última modificación: 3 Julio 2012, 12:31 pm por WiseHidden » En línea

Si tu tienes una manzana y yo otra y decidimos intercambiarlas, seguiremos teniendo una manzana cada uno, pero si tu tienes una idea y yo otra y la intercambiamos, ambos tendremos dos ideas. (Origen Anónimo)
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

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