Volver al Foro de Diseño de páginas Web

CSS ayudar a la columna

  • lagislabonita
  • Novice
  • Novice
  • No Avatar
  • Registrado: Jul 02, 2008
  • Mensajes: 20
  • Status: Offline

Nota Julio 5th, 2008, 12:38 am

Hola, recientemente instaló un nuevo modelo en mi sitio. Sin embargo, no soy realmente feliz con el diseño de la columna. Necesito ayuda sobre el código CSS que las columnas de la izquierda y la derecha todo el camino hasta el borde. Un ejemplo de mi sitio sería: http://clanwebmasters.com/free-clan-tem ... index.html Quiero que las columnas de la izquierda y derecha para ser todo el camino hasta el borde. La columna de la izquierda im hablando es el primer título "BlockTitle" aparece en el sitio i antes mencionados. La im columna de la derecha hablando es el primer título "BlockTitle" aparece en el sitio i antes mencionados.
El código CSS:
Código: [ Select ]
.hide {display:none;}
body {background: #000; color: #FFF; padding:0 0 3px 0; margin:0; font: 100 7pt "Verdana", sans-serif;}
#container {width:935px; position:absolute; left:50%; margin-left: -467px; padding:0;}
#content {width:887px; position:absolute; left:50%; margin-left: -443px; padding:0 0 10px 0; border-bottom: 2px solid #6c6c6c;}
h1{margin: 0; padding:25px 80px; height:95px; background: url(images/i1.png) top no-repeat; display:block; font-size: 7pt; font-weight:100;}
#links img {border:0; padding:0; margin:0;}
#links a {margin:0; padding:0;}
#threads {width:299px; float:left; height:107px; padding:30px 1px 0 6px; background: url(images/i9.png) top no-repeat;}
#matches {width:299px; float:left; height:107px; padding:30px 1px 0 2px; background: url(images/i10.png) top no-repeat;}
#updates {width:273px; float:left; height:107px; padding:30px 6px 0 0; background: url(images/i11.png) top no-repeat;}
#blocks ul {padding:0 0 0 25px; margin:0; background: url(images/i12.png) top repeat-y; list-style-image: url(images/bullet1.png);}
#blocks li {height: 14px; padding: 1px 5px 1px 0; margin:1px 0 0 0;}
#login {clear:both; display:block; border-left: 1px solid #6c6c6c; border-right: 1px solid #6c6c6c; margin: 10px 0; padding: 3px 15px;}
#login form {padding:0; margin:0;}
#login label {margin: 0 5px;}
#login input {font-size: 7pt; font-family:Verdana, Arial, Helvetica, sans-serif; border: 1px solid #a5acb2;}
#text {position:absolute; margin: -15px -430px 0 0; width:450px; right: 50%; text-align:right;}
#left {float:left; width: 218px; padding: 5px 0 0 0; background: #1e1e1e url(images/i13.png) top no-repeat; position:static; margin: 0 4px 0 1px;}
#right {float:left; width: 218px; padding: 5px 0 0 0; background: #1e1e1e url(images/i13.png) top no-repeat; position:static; margin: 0 1px 0 4px;}
#center {float:left; position:static; padding: 20px 30px; width: 377px; border-left: 1px solid #6c6c6c; border-right: 1px solid #6c6c6c;}
#center h2 {color: #1474a1; margin: 0 0 10px 0; font-size: 9pt;}
.block {padding: 0 1px; margin: 0 2px 20px 2px; background: url(images/i15.png) left repeat-x;}
.blockcontent {background: #000; margin:0; padding:0; border-left: 1px solid #1e1e1e; border-right: 1px solid #1e1e1e;}
.blockcontent h2 {background: url(images/i14.png) left no-repeat; margin:0; height: 16px; display:block; font-size: 7pt; font-weight:bold; padding: 8px 0 0 34px;}
.blockcontent h3 {background: url(images/i16.png) left no-repeat; margin:0; color: #484747; text-align:right; height: 18px; display:block; font-size: 7pt; font-weight:100; padding: 6px 15px 0 0;}
.blockcontent h2 small {font-size:7pt; font-weight:bold; color: #5c5c5c;}
.padd {padding: 5px 7px;}
h4 {display: block; height: 13px; background: url(images/i17.png) bottom no-repeat; padding:0; margin:0;}
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: underline;
    color: #FFFFFF;
}
a:active {
    text-decoration: none;
    color: #FFFFFF;
}
  1. .hide {display:none;}
  2. body {background: #000; color: #FFF; padding:0 0 3px 0; margin:0; font: 100 7pt "Verdana", sans-serif;}
  3. #container {width:935px; position:absolute; left:50%; margin-left: -467px; padding:0;}
  4. #content {width:887px; position:absolute; left:50%; margin-left: -443px; padding:0 0 10px 0; border-bottom: 2px solid #6c6c6c;}
  5. h1{margin: 0; padding:25px 80px; height:95px; background: url(images/i1.png) top no-repeat; display:block; font-size: 7pt; font-weight:100;}
  6. #links img {border:0; padding:0; margin:0;}
  7. #links a {margin:0; padding:0;}
  8. #threads {width:299px; float:left; height:107px; padding:30px 1px 0 6px; background: url(images/i9.png) top no-repeat;}
  9. #matches {width:299px; float:left; height:107px; padding:30px 1px 0 2px; background: url(images/i10.png) top no-repeat;}
  10. #updates {width:273px; float:left; height:107px; padding:30px 6px 0 0; background: url(images/i11.png) top no-repeat;}
  11. #blocks ul {padding:0 0 0 25px; margin:0; background: url(images/i12.png) top repeat-y; list-style-image: url(images/bullet1.png);}
  12. #blocks li {height: 14px; padding: 1px 5px 1px 0; margin:1px 0 0 0;}
  13. #login {clear:both; display:block; border-left: 1px solid #6c6c6c; border-right: 1px solid #6c6c6c; margin: 10px 0; padding: 3px 15px;}
  14. #login form {padding:0; margin:0;}
  15. #login label {margin: 0 5px;}
  16. #login input {font-size: 7pt; font-family:Verdana, Arial, Helvetica, sans-serif; border: 1px solid #a5acb2;}
  17. #text {position:absolute; margin: -15px -430px 0 0; width:450px; right: 50%; text-align:right;}
  18. #left {float:left; width: 218px; padding: 5px 0 0 0; background: #1e1e1e url(images/i13.png) top no-repeat; position:static; margin: 0 4px 0 1px;}
  19. #right {float:left; width: 218px; padding: 5px 0 0 0; background: #1e1e1e url(images/i13.png) top no-repeat; position:static; margin: 0 1px 0 4px;}
  20. #center {float:left; position:static; padding: 20px 30px; width: 377px; border-left: 1px solid #6c6c6c; border-right: 1px solid #6c6c6c;}
  21. #center h2 {color: #1474a1; margin: 0 0 10px 0; font-size: 9pt;}
  22. .block {padding: 0 1px; margin: 0 2px 20px 2px; background: url(images/i15.png) left repeat-x;}
  23. .blockcontent {background: #000; margin:0; padding:0; border-left: 1px solid #1e1e1e; border-right: 1px solid #1e1e1e;}
  24. .blockcontent h2 {background: url(images/i14.png) left no-repeat; margin:0; height: 16px; display:block; font-size: 7pt; font-weight:bold; padding: 8px 0 0 34px;}
  25. .blockcontent h3 {background: url(images/i16.png) left no-repeat; margin:0; color: #484747; text-align:right; height: 18px; display:block; font-size: 7pt; font-weight:100; padding: 6px 15px 0 0;}
  26. .blockcontent h2 small {font-size:7pt; font-weight:bold; color: #5c5c5c;}
  27. .padd {padding: 5px 7px;}
  28. h4 {display: block; height: 13px; background: url(images/i17.png) bottom no-repeat; padding:0; margin:0;}
  29. a:link {
  30.     color: #FFFFFF;
  31.     text-decoration: none;
  32. }
  33. a:visited {
  34.     text-decoration: none;
  35.     color: #FFFFFF;
  36. }
  37. a:hover {
  38.     text-decoration: underline;
  39.     color: #FFFFFF;
  40. }
  41. a:active {
  42.     text-decoration: none;
  43.     color: #FFFFFF;
  44. }

Por favor, responda, gracias
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Julio 5th, 2008, 12:38 am

  • jameson5555
  • Bronze Robot
  • Bronze Member
  • Avatar de Usuario
  • Registrado: Oct 02, 2007
  • Mensajes: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Nota Julio 7th, 2008, 12:27 pm

Suena como si usted está deseando cambiar esta plantilla a partir de un ancho fijo a un fluido (o basados en porcentajes) de diseño? Si es así, tal vez sería mejor simplemente encontrar un diseño de líquido en su lugar. Por ejemplo, si éste se extiende para adaptarse al navegador, ¿qué sucedería con los botones en la parte superior, o la imagen de cabecera, o todos los bloques que contienen en el área de contenido? El youd esté pegado rehacer todas las imágenes en el sitio, porque se vería raro cuando se estiró.

Im no decir imposible su .. sólo que sería más trabajo de lo que vale. Trate de cambiar algunos de los anchos en el CSS a los porcentajes y verás a qué me refiero. Por ejemplo:
Código: [ Select ]
#container {width:935px; position:absolute; left:50%; margin-left: -467px; padding:0;}

sería
Código: [ Select ]
#container {width:100%;padding:0;}
phoenix web design

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 2 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 105 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC