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

3 columnas y cambiar el tamaño de imagen de fondo?

  • expatCanuck
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Jul 29, 2008
  • Mensajes: 5
  • Status: Offline

Nota Julio 29th, 2008, 10:31 am

Saludos --

Theres no escasez de plantillas / sitios / tutoriales y ejemplos que asesorará sobre cómo crear una columna de 3 página con una cabecera y pie de página. (por ejemplo: -- http://css-discuss.incutio.com/?page=ThreeColumnLayouts )

También hay algunos sitios (Tho considerablemente menos) que asesoran a la manera de tener una imagen de fondo automáticamente el tamaño en función del tamaño de la ventana del navegador. La clave parece ser la especificación de los siguientes poco a la "<div style =" definición:

<img src = "myImageHere. jpg "width =" 100% ">

especificando el ancho, pero no la altura (de modo que la altura de la imagen puede cambiar el tamaño de acuerdo con el tamaño de la ventana del navegador).

Pero - ¿alguien le ha visto o construida (o puede que usted me diga cómo construir) una disposición que permita cambiar el tamaño de una sola imagen de fondo en toda la página (todas las columnas, cabecera, pie de página)?

En caso afirmativo, ¿puede el punto hacia mí un ejemplo? -- Que lo que causa Id realmente como para hacer.

Gracias amablemente,

-- Richard

__________________
http://oldWithoutMoney.com
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Julio 29th, 2008, 10:31 am

  • expatCanuck
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Jul 29, 2008
  • Mensajes: 5
  • Status: Offline

Nota Julio 30th, 2008, 7:16 am

Bueno, se fusionaron lo que he encontrado aquí:
http://matthewjamestaylor.com/blog/perfect-3-column.htm

con lo que he encontrado aquí:
http://css-tricks.com/how-to-resizeable ... und-image/

y ha creado la siguiente, que es un comienzo razonable. No es elegante, pero viable (al menos en IE6 y Firefox2, que son todo lo que tengo a mano ahora mismo):

Código: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>blah</title>
<meta name="Author" content="writer" />
<meta name="Keywords" content="whatever" />
<meta name="Description" content="yadda yadda" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:70%; color: white;}
#background{position:absolute; z-index:1; width:100%; }
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:left;}
#layoutdims {
clear:both;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative;/* Fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:95%;/* almost width of whole page (avoid horizontal scrollbar */
overflow:hidden;/* chop off overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;/* width of page */
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;/* no left or right padding on columns; just made narrower */
/* only top and bottom padding */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
}
.threecol .colmid {
right:25%;/* width of the right column */
}
.threecol .colleft {
right:50%;/* width of the middle column */
}
.threecol .col1 {
width:46%;/* width of center column content (column width minus side padding) */
left:102%;/* 100% plus left padding of center column */
}
.threecol .col2 {
width:21%;/* Width of left column content (column width minus padding on either side) */
left:31%;/* width of (right column) */
/*plus (center column left and right padding) */
/*plus (left column left padding) */
}
.threecol .col3 {
width:21%;/* Width of right column content (column width minus padding on either side) */
left:85%;/* Please make note of the brackets here:*/
/* (100% - left column width) */
/*plus (center column left and right padding)*/
/*plus (left column left and right padding) */
/*plus (right column left padding) */
}
</style>
</head>
<body>
<div>
<img id="background" src="yourImageHere.jpg" alt="" imgTitle="" />
</div>
<div id="scroller">
<div id="content">
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<!-- Column 1 start -->
<h4>Column 1</h4>
<p>c1 text here</p>
<h4>Meanwhile, back at the ranch ...</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nam fermentum pulvinar nibh. Vivamus eu leo. Sed facilisis,
odio sed mattis sagittis, nunc ante fermentum erat,
at volutpat nisl pede fringilla nisl.</p>
<p>Yadda, yadda, yadda ...</p>
<!-- Column 1 end -->
</div>
<div class="col2">
<!-- Column 2 start -->
<h4>Column 2 (left)</h4>
<p>c2 text here</p>
<!-- Column 2 end -->
</div>
<div class="col3">
<!-- Column 3 start -->
<h4>Column 3</h4>
<p>c3 text here</p>
<!-- Column 3 end -->
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>blah</title>
  7. <meta name="Author" content="writer" />
  8. <meta name="Keywords" content="whatever" />
  9. <meta name="Description" content="yadda yadda" />
  10. <meta http-equiv="imagetoolbar" content="no" />
  11. <style type="text/css">
  12. html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
  13. body {font-family:verdana, arial, sans-serif; font-size:70%; color: white;}
  14. #background{position:absolute; z-index:1; width:100%; }
  15. #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
  16. p {line-height:1.8em; letter-spacing:0.1em; text-align:left;}
  17. #layoutdims {
  18. clear:both;
  19. border-top:4px solid #000;
  20. margin:0;
  21. padding:6px 15px !important;
  22. text-align:right;
  23. }
  24. /* column container */
  25. .colmask {
  26. position:relative;/* Fixes the IE7 overflow hidden bug */
  27. clear:both;
  28. float:left;
  29. width:95%;/* almost width of whole page (avoid horizontal scrollbar */
  30. overflow:hidden;/* chop off overhanging divs */
  31. }
  32. /* common column settings */
  33. .colright,
  34. .colmid,
  35. .colleft {
  36. float:left;
  37. width:100%;/* width of page */
  38. position:relative;
  39. }
  40. .col1,
  41. .col2,
  42. .col3 {
  43. float:left;
  44. position:relative;
  45. padding:0 0 1em 0;/* no left or right padding on columns; just made narrower */
  46. /* only top and bottom padding */
  47. overflow:hidden;
  48. }
  49. /* 3 Column settings */
  50. .threecol {
  51. }
  52. .threecol .colmid {
  53. right:25%;/* width of the right column */
  54. }
  55. .threecol .colleft {
  56. right:50%;/* width of the middle column */
  57. }
  58. .threecol .col1 {
  59. width:46%;/* width of center column content (column width minus side padding) */
  60. left:102%;/* 100% plus left padding of center column */
  61. }
  62. .threecol .col2 {
  63. width:21%;/* Width of left column content (column width minus padding on either side) */
  64. left:31%;/* width of (right column) */
  65. /*plus (center column left and right padding) */
  66. /*plus (left column left padding) */
  67. }
  68. .threecol .col3 {
  69. width:21%;/* Width of right column content (column width minus padding on either side) */
  70. left:85%;/* Please make note of the brackets here:*/
  71. /* (100% - left column width) */
  72. /*plus (center column left and right padding)*/
  73. /*plus (left column left and right padding) */
  74. /*plus (right column left padding) */
  75. }
  76. </style>
  77. </head>
  78. <body>
  79. <div>
  80. <img id="background" src="yourImageHere.jpg" alt="" imgTitle="" />
  81. </div>
  82. <div id="scroller">
  83. <div id="content">
  84. <div class="colmask threecol">
  85. <div class="colmid">
  86. <div class="colleft">
  87. <div class="col1">
  88. <!-- Column 1 start -->
  89. <h4>Column 1</h4>
  90. <p>c1 text here</p>
  91. <h4>Meanwhile, back at the ranch ...</h4>
  92. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  93. Nam fermentum pulvinar nibh. Vivamus eu leo. Sed facilisis,
  94. odio sed mattis sagittis, nunc ante fermentum erat,
  95. at volutpat nisl pede fringilla nisl.</p>
  96. <p>Yadda, yadda, yadda ...</p>
  97. <!-- Column 1 end -->
  98. </div>
  99. <div class="col2">
  100. <!-- Column 2 start -->
  101. <h4>Column 2 (left)</h4>
  102. <p>c2 text here</p>
  103. <!-- Column 2 end -->
  104. </div>
  105. <div class="col3">
  106. <!-- Column 3 start -->
  107. <h4>Column 3</h4>
  108. <p>c3 text here</p>
  109. <!-- Column 3 end -->
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
  117. </script>
  118. <script type="text/javascript">
  119. _uacct = "UA-451410-1";
  120. urchinTracker();
  121. </script>
  122. </body>
  123. </html>


¡Salud!.

- Richard

/ / Nota del moderador - la hora de escribir código, por favor, utilice la opción de BBCode código en la entrada para que sea más legible. Gracias

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 95 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