Ordinare immagini veticale e in orizzontale in una sola riga

30-06-2011, 14.25.59

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!

**karl94** · 30-06-2011, 14.35.04

Imposta a zero i margini e il padding degli elementi ul che hai usato per i menù.

30-06-2011, 18.49.46

Non funziona! :-(

**karl94** · 01-07-2011, 15.18.55

Il foglio di stile (che hai incluso due volte) è uguale. Cosa hai provato a fare?

Discussione: Ordinare immagini veticale e in orizzontale in una sola riga

LinkBack

Strumenti discussione

Display

Ordinare immagini veticale e in orizzontale in una sola riga

Regole di scrittura