Ho provato anche con questo metodo
http://www.howtocreate.co.uk/fixedPosition.html
ma senza successo!
IL DIV DA MANTENERE FISSO E' LSELECT!
COME VEDETE IL CODICE E' PRESO DA CSS ZEN GARDEN...NESSUN SEGRETO, MI PIACEVA QUESTO LAYOUT E LO STò RIPRENDENDO VIA VIA...
DOVREBBE RENDERE L'IDEA ANCHE SENZA GRAFICA!
codice:
<body>
<div id="container">
<div id="intro">
<div id="pageHeader">
<h1><span>css Zen Garden</span></h1>
<h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>
</div>
<div id="quickSummary">
<p class="p1"><span>A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the list to load it into this page.</span></p>
<p class="p2"><span>Download the sample html file and css file</span></p>
</div>
<div id="preamble">
<h3><span>The Road to Enlightenment</span></h3>
<p class="p1"><span>Littering a dark and dreary road lay the past r<span class="style1">elics</span> of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym title="Cascading Style Sheets">CSS</acronym> support.</span></p>
<p class="p2"><span>Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <acronym title="World Wide Web Consortium">W3C</acronym>, <acronym title="Web Standards Project">WaSP</acronym> and the major browser creators.</span></p>
<p class="p3"><span>The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.</span></p>
</div>
</div>
<div id="supportingText">
<div id="explanation">
<h3><span>So What is This About?</span></h3>
<p class="p1"><span>There is clearly a need for <acronym title="Cascading Style Sheets">CSS</acronym> to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</span></p>
<p class="p2"><span><acronym title="Cascading Style Sheets">CSS</acronym> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.</span></p>
</div>
<div id="participation">
<h3><span>Participation</span></h3>
<p class="p1"><span>Graphic artists only please. You are modifying this page, so strong <acronym title="Cascading Style Sheets">CSS</acronym> skills are necessary, but the example files are commented well enough that even <acronym title="Cascading Style Sheets">CSS</acronym> novices can use them as starting points. Please see the <acronym title="Cascading Style Sheets">CSS</acronym> Resource Guide for advanced tutorials and tips on working with <acronym title="Cascading Style Sheets">CSS</acronym>.</span></p>
<p class="p2"><span>You may modify the style sheet in any way you wish, but not the <acronym title="HyperText Markup Language">HTML</acronym>. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</span></p>
<p class="p3"><span>Download the sample html file and css file to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your .css file to a web server under your control. Send us a link to the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server.</span></p>
</div>
<div id="benefits">
<h3><span>Benefits</span></h3>
<p class="p1"><span>Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for <acronym title="Cascading Style Sheets">CSS</acronym>-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today.</span></p>
</div>
<div id="footer">
xhtml
css
cc
508
aaa
</div>
</div>
<div id="linkList2">
<div id="lselect">
<ul>
[*]A
[*]B
[*]C
[*]D
[*]E
[*]F
[*]G
[/list]
</div>
</div>
</div>
</body>
</html>
E IL CSS...
codice:
/* basic elements */
body {
background: #261D5E url("immagini/header.jpg") no-repeat fixed top left;
font: 10px verdana, sans-serif;
color: #000000;
margin: 0px 0px 0px 0px;
}
p {
font: 10px verdana, sans-serif;
margin-top: 0px;
text-align: justify;
}
/* font resizing hack. Allows for an absolute value to be specified in the main p tag, as well as resolves resizing and rendering issues cross-browser. For a detailed explanation see: Mark Pilgrim's "Relative Font Sizing HOWTO : http://diveintoaccessibility.org/examples/fontsize.html */
/*/*/a{}
body,
body p {
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>body,
html>body p {
font-size: small;
}
/* */
h3 {
font: 10px verdana, sans-serif;
letter-spacing: 1px;
margin-bottom: 0px;
background: none;
color: #7D775C;
}
/*
a:link {
font-weight: bold;
text-decoration: none;
color: #79000e;
}
a:visited {
font-weight: bold;
text-decoration: none;
background: none;
color: #7099A6;
}
a:active {
font-weight:bold;
text-decoration: none;
color: #5f3a79;
}
a:hover {
font-weight: bold;
text-decoration: none;
background: #c2c4c6;
color:#003058;
}
*/
/* specific divs */
#container {
background: #CED41E;
color: #000000;
padding: 5px 5px 5px 5px;
margin: 0px;
width:300px;
position:absolute;
top:0px;
left:400px;
border-right: 5px solid #FFFFFF;
border-left: 5px solid #FFFFFF;
}
#intro {
min-width: 300px;
}
#pageHeader {
margin-bottom: 20px;
}
/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 {
background: transparent url("garden.gif") no-repeat top left;
color:#000000;
width: 250px;
height: 80px;
}
#pageHeader h1 span {
display:none
}
#pageHeader h2 {
background: transparent url("design.gif") no-repeat top left;
color:#000000;
width: 250px;
height: 25px;
position:absolute;
left:35px;
top:82px;
}
#pageHeader h2 span {
display:none;
}
#quickSummary {
clear:both;
margin: 20px 20px 10px 10px;
padding:20px 5px 5px 5px;
width: 250px;
background: #d6d894 url("summarybg.gif");
color: #000000;
border-right: 5px solid #000000;
border-left: 5px solid #000000;
border-bottom: 5px solid #000000;
}
#quickSummary p {
font: 10px verdana, sans-serif;
text-align:center;
}
/*/*/a{}
body #quickSummary p {
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>body #quickSummary,
html>body #quickSummary p {
font-size: small;
}
/* */
#preamble {
padding:5px 5px 5px 5px;
}
#preamble h3 {
background: transparent url("enlightenment.gif") no-repeat top left;
text-align:center;
color:#000000;
width: 250px;
height: 25px;
}
#preamble h3 span {
display:none;
}
#supportingText {
padding:5px 5px 5px 5px;
margin-bottom: 20px;
}
#explanation h3 {
background: transparent url("about.gif") no-repeat top left;
text-align:center;
color:#000000;
width: 250px;
height: 25px;
}
#explanation h3 span {
display:none;
}
#participation h3 {
background: transparent url("participation.gif") no-repeat top left;
text-align:center;
color:#000000;
width: 250px;
height: 25px;
}
#participation h3 span {
display:none;
}
#benefits h3 {
background: transparent url("benefits.gif") no-repeat top left;
text-align:center;
color:#000000;
width: 250px;
height: 25px;
}
#benefits h3 span {
display:none;
}
#requirements h3 {
background: transparent url("requirements.gif") no-repeat top left;
text-align:center;
color:#000000;
width: 250px;
height: 25px;
}
#requirements h3 span {
display:none;
}
#favorites h3 {
background: transparent url("favorites.gif") no-repeat top left;
text-align:center;
color:#000000;
width: 250px;
height: 25px;
}
#favorites h3 span {
display:none;
}
#footer {
text-align: center;
padding: 5px 5px 5px 5px;
border-left: 5px solid #000000;
border-right: 5px solid #000000;
border-bottom: 5px solid #000000;
background:#D9DE4B url("footerbg.gif");
color:#000000;
}
#footer a:link, #footer a:visited {
margin-right: 20px;
}
#lselect {
position: absolute;
top:27px;
left:315px;
width:200px;
margin:0px;
padding:0px;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #FFFFFF;
border-right-width: 5px;
border-bottom-width: 5px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
#lselect li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#lselect li a:link, #lselect li a:visited {
color: #FFFFFF;
display: block;
background: url("immagini/menusx.gif");
padding: 8px 0 0px 30px;
}
#lselect li a:hover{
color: #FF3300;
background: 0 url("immagini/menusx.gif") -32px;
padding: 8px 0 0 30px;
}
#lselect ul {
list-style: none;
margin: 0px;
padding: 0px;
}
Permessi di invio
