Ho realizzato per il piede di un sito 3 classici box estensibili con gli angoli arrotondati, incollando procedimenti macchinosi che ho trovato in giro.
2 dei 3 box sono estensibili ed è tutto ok.
Il 3° box invece ho dovuto farlo fisso come altezza, perché ospita delle slide che ruotano mostrando parole diverse ogni pochi secondi.
Questo per dei casini vari mi ha fatto perdere la stondatura dei due angoli bassi del box.
Avete qualche suggerimento? Vi incollo un po' di codice. Grazie in anticipo
- Codice: Seleziona tutto
<script type="text/javascript" src=ajax-googleapis-com></script>
<script>
$(document).ready(function(){
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.slideUp(1000)
.next()
.slideDown(1000)
.end()
.appendTo('#slideshow');
}, 9000);
});
</script>
<style type="text/css">
body { margin: 0px; padding: 0px; background: #EAEAEA; }
h1 { margin: 0px 0px 1px 15px; padding: 0px; font-family: courier new; color: dimgray; font-size: 12px; font-weight: normal; }
a { color: black; }
a:hover { color: white; background: darkred; text-decoration: none; }
#servizi a { text-decoration: none; }
a.img { text-decoration: none; background: none; }
img { border: 0px; }
#piede td { color: white; font-size: 14px; font-family: courier new; margin: 15px; 0px; 0px; 15px; }
#piede a { color: white;}
#piede a:hover { color: orange; background: none; }
dt { margin:0 1px 0 1px; position:relative; top:-1px; border-top: 1px solid; }
dt b { margin:0 1px 0 1px; position: relative; top:-2px; display: block; border-top: 1px solid;}
dd { margin:0 1px 0 1px; position: relative; bottom: -1px; border-bottom: 1px solid;}
.dd-content { margin:0 1px 0 1px; position:relative; bottom:-2px; border-bottom: 1px solid; }
.box1 { background-color: #9DBB61; }
.box1 dt { border-top-color: #9DBB61; }
.box1 dt b { border-top-color: #9DBB61; font-family: courier new; font-size: 18px; padding: 10px; }
.box1 dd { border-bottom-color: #9DBB61; }
.box1 .dd-content { border-bottom-color: #9DBB61; padding: 0px; font-family: courier new; font-size: 14px; }
.box2 { background-color: #DB9418; }
.box2 dt { border-top-color: #DB9418; }
.box2 dt b { border-top-color: #DB9418; font-family: courier new; font-size: 18px; margin: 10px 5px 0px 10px; padding: 0px; }
.box2 dd { border-bottom-color: #DB9418; }
.box2 .dd-content { border-bottom-color: #DB9418; padding: 0px; font-family: courier new; font-size: 14px; }
#slideshow > div { position: absolute; }
</style>
</head>
<body>
<tr>
<td width="33%" valign="top">
<dl class="box1" style="margin: 8px 8px 15px 0px; height: 380px;">
<dt>
<b>Parole</b>
</dt>
<dd>
<div class="dd-content" style="margin: 5px 20px 0px 15px; height: 229px;" id="slideshow">
<div>
testo 1
</div>
<div>
testo 2
</div>
<div>
testo 3
</div>
<div>
testo 4
</div>
</div>
</dd>
</dl>
</td>