Ordinare immagini veticale e in orizzontale in una sola riga
Salve ragazzi! Sto ricreando il mio sito, e non riesco a risolvere questa cosa! Sono 2 giorni che ci lavoro sopra, ma niente!
Allora, questa è la prima esp con i css, e questo è quanto.
Come potete vedere sul mio web ( http://www.edownload.altervista.org )
le immagini sono tutte tagliate e non belle allineate come sopra!
Volevo ricreare 2 menù, ma non ci riesco!
Ecco il codice html:
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style/stylegrung.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link href="style/stylegrung.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="header"> </div>
<div id="headerdx"> </div>
<div id="sheader"> </div>
<div id="spaziopubblicita"></div>
<div id="smenusxax"></div>
<div id="slockax"></div>
<div id="smenudxax"></div>
<div id="menusx">
<ul>
<li id="gamesnintendo"></li>
<li id="gamessony"></li>
<li id="gamesmicrosoft"></li>
<li id="gamespc"></li>
<li id="programmipc"></li>
</ul>
</div>
<div id="smenusxdx"></div>
<div id="lock"></div>
<div id="smenudxsx"></div>
<div id="menudx">
<ul>
<li id="regolamento"></li>
<li id="contattaci"></li>
<li id="sezionemenu"></li>
<li id="sezionemenu"></li>
<li id="sezionemenu"></li>
</ul
></div>
</ul>
</div>
</body>
</html>
e il codice css:
Codice:
@charset "utf-8";
/* CSS Document */
body {font-family: Arial, Helvetica, sans-serif;
font-size:14px;
}
#main {width:100%;
}
#header { background-image:url(images/header.gif);
float:left;
width: 81%;
height:153px;
}
#headerdx {background-image:url(images/headerdx.gif);
float:right;
width:19%;
height:153px;
}
#sheader {background-image:url(images/sheader.gif);
clear:both;
width: 100%;
height: 38px;
}
#spaziopubblicita { background-image:url(images/spaziopubblicita.gif);
clear:both;
width:100%;
height: 83px;
}
#smenusxax { background-image:url(images/smenusxax.gif);
float:left;
width:23%;
height:23px;
}
#slockax {background-image:url(images/slockax.gif);
float:left;
width: 54%;
height: 23px;
}
#smenudxax { background-image:url(images/smenudxax.gif);
float:left;
width:23%;
height:23px;
}
#menusx {
display:block;
margin: 0;
padding: 0;
border-left:none;
float:left;
width: 20%;
height:421px;
list-style:none;
}
#gamesnintendo {
width: 100%;
max-width: 100%;
height:84px;
background-image:url(images/gamesnintendooff.gif);
float:left;
}
#gamesnintendo:hover{ background-image:url(images/gamesnintendoon.gif); }
#gamessony {width:100%;
height:86px;
background-image:url(images/gamessonyoff.gif);
float:left;
}
#gamessony:hover{background-image:url(images/gamessonyon.gif); }
#gamesmicrosoft {width:100%;
height:88px;
background-image:url(images/gamesmicrosoftoff.gif);
float:left;
}
#gamesmicrosoft:hover {background-image:url(images/gamesmicrosofton.gif); }
#gamespc {width: 100%;
height:80px;
background-image:url(images/gamespcoff.gif);
float:left;
}
#gamespc:hover{background-image:url(images/gamespcon.gif); }
#programmipc {width:100%;
height:83px;
background-image:url(images/programmipcoff.gif);
float:left;
}
#programmipc:hover{background-image:url(images/programmipcon.gif); }
#smenusxdx {background-image:url(images/smenusxdx.gif);
float:left;
width: 3%;
height: 421px;
}
#lock { background-image:url(images/lock.gif);
float:left;
width:41%;
height:421px;
}
#smenudxsx {background-image:url(images/smenudxsx.gif);
float:left;
width: 3%;
height: 421px;
}
#containermenu {width: 99%;
height: 421px;
}
#menudx {float:right;
width: 20%;
height:421px;
list-style:none;
}
#regolamento {background-image:url(images/regolamentooff.gif);
width:100%;
height:84px;
}
#regolamento:hover {background-image:url(images/regolamentoon.gif);
}
#contattaci {background-image:url(images/contattacioff.gif);
width:100%;
height:86px;
}
#contattaci:hover {background-image:url(images/contattacion.gif);
}
#sezionemenu {background-image:url(images/sezionemenu.gif);
height:88px;
width:100%;
}
ul { list-style:none;
}
Grazie a tutti!
