Autor
Mensaje
mexcodes
Junior
30-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.
↑
mundo-pgd
Semi-Experto
Ubicación: San Francisco
30-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 :-(
↑
mexcodes
Junior
30-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;}
↑
mundo-pgd
Semi-Experto
Ubicación: San Francisco
31-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 :-(
↑
mexcodes
Junior
31-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
↑
porta-1
Junior
Ubicación: Rosario-Santa Fe-Argentina =D
31-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
↑
darknet13
since-2007
Ubicación: En el internete
31-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
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
↑
mundo-pgd
Semi-Experto
Ubicación: San Francisco
31-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 :-(
↑
porta-1
Junior
Ubicación: Rosario-Santa Fe-Argentina =D
31-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
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
______________
↑
mundo-pgd
Semi-Experto
Ubicación: San Francisco
31-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
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
↑
mexcodes
Junior
31-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?
↑
mundo-pgd
Semi-Experto
Ubicación: San Francisco
31-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
↑
mexcodes
Junior
01-11-2012, 00:07 (UTC) Título del mensaje :
Gracias
↑
porta-1
Junior
Ubicación: Rosario-Santa Fe-Argentina =D
01-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
↑
mundo-pgd
Semi-Experto
Ubicación: San Francisco
01-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
↑