Retour à Forum de site web

3 colonnes et le redimensionnement l'image de fond?

  • expatCanuck
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Juil 29, 2008
  • Messages: 5
  • Status: Offline

Message Juillet 29th, 2008, 10:31 am

Greetings --

Theres ne manque pas de modèles / sites / tutoriaux / exemples que conseiller la manière de créer un site de 3 colonnes avec un en-tête et pied de page. (par exemple -- http://css-discuss.incutio.com/?page=ThreeColumnLayouts )

Il existe aussi des sites (tho beaucoup moins) que conseiller sur d'avoir une image d'arrière-plan automatiquement redimensionner en fonction de la taille de la fenêtre du navigateur. La clé semble être de préciser les éléments suivants dans le bit "<div style =" définition:

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

en précisant la largeur, mais pas la hauteur (de sorte que la hauteur peut redimensionner l'image en fonction de la taille de la fenêtre du navigateur).

Mais - quiconque a vu ou construits (ou pouvez-vous me dire comment construire) une disposition qui permettra à un seul de redimensionner l'image de fond dans l'ensemble de PAGE (toutes les colonnes, en-tête, pied de page)?

Si oui, pouvez-vous m'orienter vers un exemple? - Ce qui cause thats Id vraiment à faire.

Merci de bien vouloir,

- Richard

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

Message Juillet 29th, 2008, 10:31 am

  • expatCanuck
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Juil 29, 2008
  • Messages: 5
  • Status: Offline

Message Juillet 30th, 2008, 7:16 am

Eh bien, j'ai fusionné ce que j'ai trouvé ici:
http://matthewjamestaylor.com/blog/perfect-3-column.htm

avec ce que j'ai trouvé ici:
http://css-tricks.com/how-to-resizeable ... und-image/

et créé le texte suivant, qui est un bon début. Pas élégant, mais réalistes (au moins sur IE6 et Firefox2, qui sont tout ce que j'ai portée de main en ce moment):

Code: [ 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>


À la vôtre.

- Richard

/ / Note Modérateur - lors de la publication du code, s'il vous plaît utilisez l'option de portions de code dans votre message pour le rendre plus lisible. Merci

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 2 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 243 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC