Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje30-10-2012, 20:31 (UTC)    
Título del mensaje: Que causa esto en mi diseño?

Miren uds mismos el problema:
http://todoayudaforo.es.tl/

el contenido no topa en el box y eso afecta

Como lo soluciono?
Gracias desde ya.
Mensaje30-10-2012, 21:33 (UTC)    
Título del mensaje: Re: Que causa esto en mi diseño?

mexcodes escribió:
Miren uds mismos el problema:
http://todoayudaforo.es.tl/

el contenido no topa en el box y eso afecta

Como lo soluciono?
Gracias desde ya.


Mmm.. me parece que es falta de padding, o es que el falta un box.

Deja el codigo de tu diseño y vere que puedo hacer.
______________
We miss you Cliff Burton :-(
Mensaje30-10-2012, 21:41 (UTC)    
Título del mensaje:

Hola,gracias por responder.Casi nunca pido ayuda, pero esta vez no supe que hacer

Código:
body
{
   margin: 0;
   padding: 0;
   background: #e2e6e9;
   font: normal 12px Verdana, Arial, Sans-Serif;
        text-align: left;
}

/* Links */

a:link { color: #273A4D; text-decoration: none;}

a:visited { color: #273A4D; text-decoration: none; }

a:hover, a:active { color: #ffffff; background-color: #343838;}

h3 a:link { color: #3f4f5c; text-decoration: none; }

h3 a:visited { color: #3f4f5c; text-decoration: none; }

h3 a:hover, a:active { color: #FFFFFF; }

/* Html Elements */

h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 10px 0; padding: 0; }

h1 { font-size: 36px; color: #293138;}

h2 { font-size: 28px; color: #353F47;}

.post-title h2 {color: #3f4f5c; font-weight:bold; text-transform: uppercase; margin-bottom:5px;}

h3 { font-size: 24px; color: #3f4f5c;}

h4 { font-size: 20px; color: #3f4f5c; }

h5 { font-size: 16px; color: #3f4f5c;}

h6
{
   font-size: 13px;
   text-transform: uppercase;
   margin: 5px 0;
   font-weight: bold;
}

ul { line-height: 1.8em; list-style-type: circle; color: #333333; }

ol { line-height: 1.8em; color: #333333;}

blockquote
{
   color: #555555;
   background-color: #eeeeee;
   border: 1px solid #cfcfcf;
   padding: 5px 10px;
   margin: 10px 20px;
}

code { font-family: Consolas, Verdana, Arial, "Courier New"; }

abbr, acronym { font-style: normal; border-bottom: 1px dotted #333333; cursor: help; }

em { font-style: italic; }

strong { font-weight: bold; }

del { text-decoration: line-through; color: #555555; font-size: 11px; }

ins { text-decoration: none; color: #679b3c; }

p em,
cite
{
   font-family: Consolas, Verdana, Serif;
}

/* Structure */

#container
{
   width: 800px;
   margin: 0 auto;
}

#header
{
   padding: 0px 0;   
}

#navigation
{
   float: left;
   width: 800px;
   background-color: #282d2d;
   text-transform: uppercase;
        font-size: 14px;
}

#wrapper
{
   margin: 0;
   padding: 0;
   clear: both;
   float: left;
   width: 800px;
        background: #ffffff;
        border-left: solid #dde0e1 2px;
        border-right: solid #dde0e1 2px;
        border-bottom: solid #dde0e1 2px;
}

#content-wrapper
{
   width: 580px;
   float: left;
}

#content
{
   float: left;
   padding: 27px;
   line-height: 1.6em;
   text-align: justify;
}

#content .commentbox {
   color: #918E85;
   background-color: #FBF4E2;
   padding: 2px 5px 2px 5px;
   border-top: solid #D4CBB4 1px;
   border-bottom: solid #D4CBB4 1px;
   text-transform: uppercase;
   font-size: 11px;
        margin-bottom: 10px;
}
#comments {
   color: #4A4A4A;
   padding: 0px;
}
#comments .comment {
        padding: 10px;
        background-color: #F6F6F6;
   border-bottom: 20px solid #ffffff;
}
#comments .comment cite {
        font-size: 14px;
        font-weight: bold;
        font-style: normal;
}
#sidebar-wrapper
{
        margin-left: 5px;
        margin-top: 25px;
        margin-bottom: 25px;
   width: 180px;
   float: left;
        background-color: #F3F2F2;
   border: solid #E6E4E4 1px;
}

#sidebar
{
   float: left;
   width: 150px;
   padding: 15px;
        color: #5b5c5c;
   font-size: 9pt;
   text-align: left;
}
#box
{
   clear: both;
}
#footer
{
   clear: both;
   float: left;
   width: 800px;
   margin: 0px 0;
   color: #555555;
   text-align: center;
   padding: 10px 0;
   background: #cfcfcf;
}

/* Navigation */

#navigation ul
{
   margin: 0 5px;
   float: left;
   width: 800px;
   padding: 0px 0;
   list-style-type: none;
}

#navigation li { float: left; margin: 0 0 0 5px; padding: 0; }

#navigation a:link,
#navigation a:visited
{
   float: left;
   display: block;
   color: #c6c6c6;
   padding: 5px 10px;

}

#navigation ul li.current_page_item   a:link,
#navigation ul li.current_page_item   a:visited,
#navigation ul li.current_page_item   a:hover,
#navigation ul li.current_page_item   a:active
{
   color: #ffffff;
   background-color: #414646;
   border-left: solid #6b7070 1px;
        border-right: solid #6b7070 1px;
}

#navigation ul li.search
{
        float:right;
        margin-right: 10px;
}


/* Header */

#header h1 {color: #191a1a; font-weight: bold; margin-bottom: 10px; }

#header h1 a {width:750px; height: 200px; background: transparent url() center center no-repeat; }

#header h1 a:link,
#header h1 a:visited
{
   color: #333333;
}

#header h1 a:hover,
#header h1 a:active
{
   color: #000000;
   background-color: transparent;
}

#header h1 span {color:#5b5c5c;}

/* Content */

.date {
   margin-left: 3px !important;
   padding: 0;
   color: #ccc !important;
   font-family: Verdana, Arial, Sans-Serif !important;
   letter-spacing: -1px;
   font-weight: normal;
   font-size: 24px;
   text-transform: lowercase;
   display: inline;
   }

h3.post-title {
        display: inline;
        }

h3.post-title a {   
        text-transform: lowercase;
   color: #3f4f5c !important;
   font-family: Verdana, Arial, Sans-Serif !important;
   letter-spacing: -1px;
   font-weight: bold;
   font-size: 24px;
   border-bottom: none !important;
   }

h3.post-title a:hover {
   text-decoration: none!important;
   color: #222 !important;
   background: transparent;
   }

/* Sidebar */

#sidebar h3 { font-size: 18px; color:#5b5c5c; text-transform: uppercase; border-bottom: solid #5b5c5c 2px;}

ul#sidenotes
{
   margin: 0;
   padding: 0;
   line-height: 1.6em;
   list-style-type: none;
}

ul#sidenotes li
{
   padding: 5px;
   border-bottom: 1px dotted #cccccc;
}

ul#sidenotes li:hover
{
   background-color: #eeeeee;
}

ul#sidenotes li .title
{
   display: block;
   font-weight: bold;
}

ul#sidenotes li .date
{
   display: block;
   color: #777777;
   font-size: smaller;
}

ul#sidenotes li .content
{
   display: block;
}

ul#sidenotes li a:link,
ul#sidenotes li a:visited
{
   padding: 0;
   color: #333333;
}

ul#sidenotes li a:hover,
ul#sidenotes li a:active
{
   background-color: transparent;
}

/* Footer */

#footer a:hover,
#footer a:active
{
   color: #003355;
   background-color:transparent;
}




/*display:none;*/
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

Mensaje31-10-2012, 00:44 (UTC)    
Título del mensaje:

Mejor deja el diseño completo, asi puedo ir probando si va bien o no
______________
We miss you Cliff Burton :-(
Mensaje31-10-2012, 02:18 (UTC)    
Título del mensaje:

Encima:
quitados

Debajo:
quiados


Ultima edición por mexcodes el Mie Oct 31, 2012 6:04 pm; editado 1 vez
Mensaje31-10-2012, 15:07 (UTC)    
Título del mensaje:

Las etiquetas "<body> y <html>" no siven.... y en cuanto al diseño.... a ver...... ahora edito.
______________


Ultima edición por porta-1 el Mie Oct 31, 2012 11:08 am; editado 1 vez
Mensaje31-10-2012, 16:36 (UTC)    
Título del mensaje:

tienes 2 contents edita esto en texto por encima
Código:
<div id="content">

y el primer cierre en texto por debajo
Código:
</div>


porta-1 escribió:
Las etiquetas "<body> y <html>" no siven....

esto es verdad le falta limpiar el codigo un poco, pero no pasa nada si las deja.
______________


Ultima edición por darknet13 el Mie Oct 31, 2012 12:38 pm; editado 1 vez
Mensaje31-10-2012, 19:43 (UTC)    
Título del mensaje:

Pon esto en tu css:

Código:
body
{
   margin: 0;
   padding: 0;
   background: #e2e6e9;
   font: normal 12px Verdana, Arial, Sans-Serif;
        text-align: left;
}

/* Links */

a:link { color: #273A4D; text-decoration: none;}

a:visited { color: #273A4D; text-decoration: none; }

a:hover, a:active { color: #ffffff; background-color: #343838;}

h3 a:link { color: #3f4f5c; text-decoration: none; }

h3 a:visited { color: #3f4f5c; text-decoration: none; }

h3 a:hover, a:active { color: #FFFFFF; }

/* Html Elements */

h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 10px 0; padding: 0; }

h1 { font-size: 36px; color: #293138;}

h2 { font-size: 28px; color: #353F47;}

.post-title h2 {color: #3f4f5c; font-weight:bold; text-transform: uppercase; margin-bottom:5px;}

h3 { font-size: 24px; color: #3f4f5c;}

h4 { font-size: 20px; color: #3f4f5c; }

h5 { font-size: 16px; color: #3f4f5c;}

h6
{
   font-size: 13px;
   text-transform: uppercase;
   margin: 5px 0;
   font-weight: bold;
}

ul { line-height: 1.8em; list-style-type: circle; color: #333333; }

ol { line-height: 1.8em; color: #333333;}

blockquote
{
   color: #555555;
   background-color: #eeeeee;
   border: 1px solid #cfcfcf;
   padding: 5px 10px;
   margin: 10px 20px;
}

code { font-family: Consolas, Verdana, Arial, "Courier New"; }

abbr, acronym { font-style: normal; border-bottom: 1px dotted #333333; cursor: help; }

em { font-style: italic; }

strong { font-weight: bold; }

del { text-decoration: line-through; color: #555555; font-size: 11px; }

ins { text-decoration: none; color: #679b3c; }

p em,
cite
{
   font-family: Consolas, Verdana, Serif;
}

/* Structure */

#container
{
   width: 800px;
   margin: 0 auto;
}

#header
{
   padding: 0px 0;   
}

#navigation
{
   float: left;
   width: 800px;
   background-color: #282d2d;
   text-transform: uppercase;
        font-size: 14px;
}

#wrapper
{
   margin: 0;
   padding: 0;
   clear: both;
   float: left;
   width: 800px;
        background: #ffffff;
        border-left: solid #dde0e1 2px;
        border-right: solid #dde0e1 2px;
        border-bottom: solid #dde0e1 2px;
}

#content-wrapper
{
   width: 580px;
   float: left;
}

#content
{
   float: left; 
   padding-left: 15px;
   padding-right:260px;
   padding-bottom:10px;
   line-height: 1.6em;
   text-align: justify;
}

#content .commentbox {
   color: #918E85;
   background-color: #FBF4E2;
   padding: 2px 5px 2px 5px;
   border-top: solid #D4CBB4 1px;
   border-bottom: solid #D4CBB4 1px;
   text-transform: uppercase;
   font-size: 11px;
        margin-bottom: 10px;
}
#comments {
   color: #4A4A4A;
   padding: 0px;
}
#comments .comment {
        padding: 10px;
        background-color: #F6F6F6;
   border-bottom: 20px solid #ffffff;
}
#comments .comment cite {
        font-size: 14px;
        font-weight: bold;
        font-style: normal;
}
#sidebar-wrapper
{
        margin-left: 5px;
        margin-top: 25px;
        margin-bottom: 25px;
   width: 180px;
   float: left;
        background-color: #F3F2F2;
   border: solid #E6E4E4 1px;
}

#sidebar
{
   float: left;
   width: 150px;
   padding: 15px;
        color: #5b5c5c;
   font-size: 9pt;
   text-align: left;
}
#box
{
   clear: both;
}
#footer
{
   clear: both;
   float: left;
   width: 800px;
   margin: 0px 0;
   color: #555555;
   text-align: center;
   padding: 10px 0;
   background: #cfcfcf;
}

/* Navigation */

#navigation ul
{
   margin: 0 5px;
   float: left;
   width: 800px;
   padding: 0px 0;
   list-style-type: none;
}

#navigation li { float: left; margin: 0 0 0 5px; padding: 0; }

#navigation a:link,
#navigation a:visited
{
   float: left;
   display: block;
   color: #c6c6c6;
   padding: 5px 10px;

}

#navigation ul li.current_page_item   a:link,
#navigation ul li.current_page_item   a:visited,
#navigation ul li.current_page_item   a:hover,
#navigation ul li.current_page_item   a:active
{
   color: #ffffff;
   background-color: #414646;
   border-left: solid #6b7070 1px;
        border-right: solid #6b7070 1px;
}

#navigation ul li.search
{
        float:right;
        margin-right: 10px;
}


/* Header */

#header h1 {color: #191a1a; font-weight: bold; margin-bottom: 10px; }

#header h1 a {width:750px; height: 200px; background: transparent url() center center no-repeat; }

#header h1 a:link,
#header h1 a:visited
{
   color: #333333;
}

#header h1 a:hover,
#header h1 a:active
{
   color: #000000;
   background-color: transparent;
}

#header h1 span {color:#5b5c5c;}

/* Content */

.date {
   margin-left: 3px !important;
   padding: 0;
   color: #ccc !important;
   font-family: Verdana, Arial, Sans-Serif !important;
   letter-spacing: -1px;
   font-weight: normal;
   font-size: 24px;
   text-transform: lowercase;
   display: inline;
   }

h3.post-title {
        display: inline;
        }

h3.post-title a {   
        text-transform: lowercase;
   color: #3f4f5c !important;
   font-family: Verdana, Arial, Sans-Serif !important;
   letter-spacing: -1px;
   font-weight: bold;
   font-size: 24px;
   border-bottom: none !important;
   }

h3.post-title a:hover {
   text-decoration: none!important;
   color: #222 !important;
   background: transparent;
   }

/* Sidebar */

#sidebar h3 { font-size: 18px; color:#5b5c5c; text-transform: uppercase; border-bottom: solid #5b5c5c 2px;}

ul#sidenotes
{
   margin: 0;
   padding: 0;
   line-height: 1.6em;
   list-style-type: none;
}

ul#sidenotes li
{
   padding: 5px;
   border-bottom: 1px dotted #cccccc;
}

ul#sidenotes li:hover
{
   background-color: #eeeeee;
}

ul#sidenotes li .title
{
   display: block;
   font-weight: bold;
}

ul#sidenotes li .date
{
   display: block;
   color: #777777;
   font-size: smaller;
}

ul#sidenotes li .content
{
   display: block;
}

ul#sidenotes li a:link,
ul#sidenotes li a:visited
{
   padding: 0;
   color: #333333;
}

ul#sidenotes li a:hover,
ul#sidenotes li a:active
{
   background-color: transparent;
}

/* Footer */

#footer a:hover,
#footer a:active
{
   color: #003355;
   background-color:transparent;
}




/*display:none;*/
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

______________
We miss you Cliff Burton :-(
Mensaje31-10-2012, 21:20 (UTC)    
Título del mensaje:

darknet13 escribió:
tienes 2 contents edita esto en texto por encima
Código:
<div id="content">

y el primer cierre en texto por debajo
Código:
</div>


porta-1 escribió:
Las etiquetas "<body> y <html>" no siven....

esto es verdad le falta limpiar el codigo un poco, pero no pasa nada si las deja.


Lo se lo se eso... ahora, yo pense lo mismo que vos, con el div "content", pero vos lo probaste?, yo lo probe y el problema persistia e.e o alo mejor no lo puse bien u.u
______________
Mensaje31-10-2012, 21:25 (UTC)    
Título del mensaje:

porta-1 escribió:
darknet13 escribió:
tienes 2 contents edita esto en texto por encima
Código:
<div id="content">

y el primer cierre en texto por debajo
Código:
</div>


porta-1 escribió:
Las etiquetas "<body> y <html>" no siven....

esto es verdad le falta limpiar el codigo un poco, pero no pasa nada si las deja.


Lo se lo se eso... ahora, yo pense lo mismo que vos, con el div "content", pero vos lo probaste?, yo lo probe y el problema persistia e.e o alo mejor no lo puse bien u.u


Es que eso no causaba el problema, solo era una mala edicion del css al parecer. Lo que el quiso decir fue que eso era innecesario, una recomendacion.

Pon el css que deje mas arriba.
______________
We miss you Cliff Burton :-(


Ultima edición por mundo-pgd el Mie Oct 31, 2012 5:25 pm; editado 1 vez
Mensaje31-10-2012, 22:06 (UTC)    
Título del mensaje:

Muchas gracias mundo-pgd mi problema esta resuelto.

De no ser mucha molestia.Que estaba mal en mi diseño?
Mensaje31-10-2012, 22:34 (UTC)    
Título del mensaje:

mexcodes escribió:
Muchas gracias mundo-pgd mi problema esta resuelto.

De no ser mucha molestia.Que estaba mal en mi diseño?


El padding (relleno) de la derecha estaba mal, tenia una cantidad de pixeles erronea al parecer. Se puede comparar:

#content del css que tenias:
Código:
#content
{
   float: left;
   padding: 27px;
   line-height: 1.6em;
   text-align: justify;
}


#content que te di:
Código:
#content
{
   float: left; 
   padding-left: 15px;
   padding-right:260px;
   padding-bottom:10px;
   line-height: 1.6em;
   text-align: justify;
}


Le añadi el de abajo y de la derecha tambien para que se viera mejor.
______________
We miss you Cliff Burton :-(


Ultima edición por mundo-pgd el Mie Oct 31, 2012 6:35 pm; editado 1 vez
Mensaje01-11-2012, 00:07 (UTC)    
Título del mensaje:

Gracias
Mensaje01-11-2012, 00:57 (UTC)    
Título del mensaje:

mundo-pgd escribió:
mexcodes escribió:
Muchas gracias mundo-pgd mi problema esta resuelto.

De no ser mucha molestia.Que estaba mal en mi diseño?


El padding (relleno) de la derecha estaba mal, tenia una cantidad de pixeles erronea al parecer. Se puede comparar:

#content del css que tenias:
Código:
#content
{
   float: left;
   padding: 27px;
   line-height: 1.6em;
   text-align: justify;
}


#content que te di:
Código:
#content
{
   float: left; 
   padding-left: 15px;
   padding-right:260px;
   padding-bottom:10px;
   line-height: 1.6em;
   text-align: justify;
}


Le añadi el de abajo y de la derecha tambien para que se viera mejor.



osea, se exedia del limite?, me explicas un poco, porque una vez me paso pero lo arregle de otra forma mas tediosa xD

se que hace el padding, las propiedades lo se :p
______________


Ultima edición por porta-1 el Mie Oct 31, 2012 8:57 pm; editado 1 vez
Mensaje01-11-2012, 01:48 (UTC)    
Título del mensaje:

porta-1 escribió:
mundo-pgd escribió:
mexcodes escribió:
Muchas gracias mundo-pgd mi problema esta resuelto.

De no ser mucha molestia.Que estaba mal en mi diseño?


El padding (relleno) de la derecha estaba mal, tenia una cantidad de pixeles erronea al parecer. Se puede comparar:

#content del css que tenias:
Código:
#content
{
   float: left;
   padding: 27px;
   line-height: 1.6em;
   text-align: justify;
}


#content que te di:
Código:
#content
{
   float: left; 
   padding-left: 15px;
   padding-right:260px;
   padding-bottom:10px;
   line-height: 1.6em;
   text-align: justify;
}


Le añadi el de abajo y de la derecha tambien para que se viera mejor.



osea, se exedia del limite?, me explicas un poco, porque una vez me paso pero lo arregle de otra forma mas tediosa xD

se que hace el padding, las propiedades lo se :p


Sí lo excedia. Mientras mas px en el padding mas se hace notar, entonces, al parecer el diseño tenia muy pocos pixeles, como veras eran 27 px, y para quedar perfecto por lo menos tenia que ser en 260 px como lo puse.

El padding se clasifica en 4 tipos: el top (arriba), el bottom (abajo), el left (izquierda) y el right (derecha). Todos se ordenan mas o menos así:

Código:
padding-top: 50px;
padding-bottom: 50px;
padding-left:50px;
padding-right:50px;


y alli aplicara todos ellos, aunque puedes poner cuantos quieras. Que si solo el top y el bottom, o solo el right y el left.

Me tengo que ir, asi que te puedes pasar por -LINK RETIRADO- explican bien, pero es en ingles
______________
We miss you Cliff Burton :-(


Ultima edición por mundo-pgd el Jue Nov 01, 2012 2:34 pm; editado 2 veces
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group