Ecco raga ho un problema che non riesco a risolvere che riguarda lo sfondo della pagina e un menu creato con css.
Cioè essendoci sia il menù che l'immagine mi mostra solo l'immagine di sfondo e il menù non viene visualizzato... E un'altra cosa.... volevo chiedervi come posizionare il menù semplice...
Ecco il codice HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" href="menu/menu_style.css" type="text/css" />
</head>
<body>
<div align="center">
<ul id="menu">[*]Home[*]ila18's Gameplay[*]Platinum Trophies[/list]
</div>
<div id="background">[img]Immagini/sfondo.jpg[/img]
</a></div>
</body>
</html>
Ecco il relativo codice CSS:
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:375px;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(images/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}
img.bg {
/* regole per riempire la pagina con lo sfondo prescelto */
min-height: 100%;
min-width: 1024px;
/* regole per ridimensionare l'immagine proporzionalmente */
width: 100%;
height: auto;
/* posizonamento dello sfondo */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
div#content {
/* regola importante per mostrare il contenuto sopra lo sfondo */
position: relative;
/* formattazione del div, non ha effetti sullo sfondo */
width: 500px;
margin: 0 auto;
background: #fff;
padding: 20px;
font-family: helvetica, arial, sans-serif;
font-size: 10pt;
line-height: 16pt;
-moz-box-shadow: #000 4px 4px 10px;
-webkit-box-shadow: #000 4px 4px 10px;
}
body {
/* formattazione del body, non ha effetti sullo sfondo */
margin: 0;
padding: 20px 0 0 0;
}
Rispondi quotando
