Salve a tutti. Non so se è la sezione adatta ma ho un problema che apparentemente sembra banale ma penso sia dovuto ai css: ho una pagina html con un javascript funzionante a cui devo aggiungere come sfondo un immagine che però si adatti alla grandezza dello schermo.
Lo script che ho trovato sempre qui su html.it era corredato di 4 css. Per chiarezza il codice della pagina:
<html>
<head>
<title>devivo_Prova5</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Displa y:400italic' rel='stylesheet' type='text/css' />
</head>
<body class="bg-default" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="1024" height="769" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabella_01">
<tr>
<td colspan="6"><div class="contenitore_header"><div class="contenuto_header"></div></div>
</td>
</tr>
<tr>
<td colspan="3">
[img]immagini/index_02.jpg[/img]</td>
<td colspan="3">
[img]immagini/index_03.jpg[/img]</td>
</tr>
<tr>
<td colspan="6">
[img]immagini/index_04.jpg[/img]</td>
</tr>
<tr>
<td>
[img]immagini/index_05.jpg[/img]</td>
<td>
[img]immagini/index_06.jpg[/img]</td>
<td colspan="2">
[img]immagini/index_07.jpg[/img]</td>
<td>
[img]immagini/index_08.jpg[/img]</td>
<td>
[img]immagini/index_09.jpg[/img]</td>
</tr>
<tr>
<td colspan="6">
[img]immagini/index_10.jpg[/img]</td>
</tr>
<tr>
<td colspan="6">
[img]immagini/index_11.jpg[/img]</td>
</tr>
<tr>
<td>
[img]immagini/spaziatore.gif[/img]</td>
<td>
[img]immagini/spaziatore.gif[/img]</td>
<td>
[img]immagini/spaziatore.gif[/img]</td>
<td>
[img]immagini/spaziatore.gif[/img]</td>
<td>
[img]immagini/spaziatore.gif[/img]</td>
<td>
[img]immagini/spaziatore.gif[/img]</td>
</tr>
</table>
</body>
</html>
ed i relativi css:
DEMO.CSS=
@import url('reset.css');
/* General Demo Style */
a {
color : #555;
text-decoration : none;
}
a:hover {
color : #000;
}
.clr {
clear : both;
}
.wrapper {
position : relative;
width : 1024px;
}
.wrapper p {
clear : both;
font-size : 24px;
line-height : 40px;
text-align : center;
}
.reference {
padding-top : 40px;
}
h1 {
font-size : 34px;
position : relative;
color : #000;
font-weight : 400;
padding : 20px;
z-index : 1000;
text-transform : uppercase;
text-align : center;
}
h1 span {
font-family : 'Playfair Display', serif;
font-style : italic;
text-transform : none;
font-size : 20px;
}
.header {
font-family : "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
font-size : 10px;
padding : 3px 5px;
text-transform : uppercase;
}
.header a {
line-height : 18px;
padding : 0 4px;
letter-spacing : 1px;
color : #ddd;
}
.header a:hover {
}
.header a span {
font-weight : bold;
}
.header span.right {
float : right;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,f orm,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
STYLE.CSS=
.ei-slider{
position: relative;
width: 1024px;
height: 350px;
margin: 0 auto;
}
.ei-slider-loading{
width: 1024px;
height: 350px;
position: absolute;
top: 0px;
left: 0px;
z-index:999;
background: rgba(0,0,0,0.9);
color: #fff;
text-align: center;
line-height: 400px;
}
.ei-slider-large{
height: 350px;
width: 1024px;
position:relative;
overflow: hidden;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
height: 350px;
width: 1024px;
}
.ei-slider-large li img{
width: 1024px;
}
.ei-title{
position: absolute;
right: 45%;
margin-right: 13%;
top: 30%;
}
.ei-title h2, .ei-title h3{
text-align: right;
}
.ei-title h2{
font-size: 40px;
line-height: 50px;
font-family: 'Playfair Display', serif;
font-style: italic;
color: #b5b5b5;
}
.ei-title h3{
font-size: 70px;
line-height: 70px;
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
color: #000;
}
.ei-slider-thumbs{
height: 0px;
width: 0px;
margin: 0 auto;
position: relative;
opacity: 0;
}
.ei-slider-thumbs li{
float: left;
height: 0px;
width: 0px;
opacity; 0;
}
.ei-slider-thumbs li.ei-slider-element{
top: 0px;
left: 0px;
position: absolute;
height: 0px;
width: 0px;
opacity: 0;
}
.ei-slider-thumbs li a{
display: block;
opacity: 0;
widht: 0px;
height: 0px;
}
.ei-slider-thumbs li a:hover{
background-color: #f0f0f0;
opacity: 0;
height: 0px;
widht: 0px;
}
.ei-slider-thumbs li img{
position: absolute;
opacity: 0;
height: 0px;
widht: 0px;
}
.ei-slider-thumbs li:hover img{
opacity: 0;
bottom: 0px;
height: 0px;
widht: 0px;
}
#text-box {
width:400px;
margin:20px auto;
background:#fff;
padding:10px;
color: #666666;
text-align:justify;
}
#text-box h3 {
margin-bottom:10px;
}
#text-box p {
margin-bottom:10px;
}
a {
text-decoration:none;
}
a:hover {text-decoration:underline;}
#quote { font-size: 32px; color: #000; opacity: 1; filter: alpha(opacity=100); }
#quotebox { opacity: 0.65; filter: alpha(opacity=65); background:#fff;
}
.contenitore {
opacity: 0.75; filter: alpha(opacity=75);
background-color: #FFFFFF;
height: 572px;
width: 1023px;
}
.contenuto {
height: 572px;
width: 1023px;
text-align: justify;
margin-left: 20px;
}
@media screen and (max-width: 830px) {
.ei-title{
position: absolute;
right: 0px;
margin-right: 0px;
width: 100%;
text-align: center;
top: auto;
bottom: 10px;
background: #fff;
padding: 5px 0;
}
.ei-title h2, .ei-title h3{
text-align: center;
}
.ei-title h2{
font-size: 20px;
line-height: 24px;
}
.ei-title h3{
font-size: 30px;
line-height: 40px;
}
}
.contenuto_header {
height: 91px;
width: 1024px;
}
.contenitore_header {
opacity: 0.75; filter: alpha(opacity=75);
background-color: #FFFFFF;
height: 91px;
width: 1024px;
}
Spero che ci sia qualcuno che possa darmi una mano a risolvere questo problema.
Rispondi quotando
