copiare Menù sia a destra che a sinistra del sito

29-10-2009, 14.30.14

Salve, questo è il mio primo post...allò ho fatto sto sito http://uotla.altervista.org/, ora ho questo problema...alla sinistra del sito c'è un menù, ora io vorrei semplicemente farlo uno uguale a destra, è possibile???mi spiegate come fare???

29-10-2009, 19.48.28

Specifica come lo vuoi fare.
Il menù di destra lo vuoi con la stessa larghezza del menù già esistente di sinistra?
La pagina (in pixel) aumenterà di larghezza, ad occhio e croce sarà 900pixel.

29-10-2009, 19.49.40

si esatto, se aumenta la larghezza della pagina non fa niente, a limite aggiusto poi, sai aiutarmi?

visto che ci sei, sai dirmi come creare il menù sotto al logo, come nel tuo sito musicanapoli.org??

29-10-2009, 21.11.29

Il codice contenuto nell'HTML della tua pagina è abbastanza caotico ed aggiungere una colonna a destra era una missione!
Poi è tutto costruito con le tabelle, invece è meglio utilizzare i <div>.

Ho fatto da capo tutto il codice, vedi se ti può piacere (copia ed incolla nell'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>
<title>The Lost Atlantis</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body {
    background-color:#FFFFFF;
    background-image:url('http://www.starlightwind.org/skinlab/rautonas/sfondo.gif') ;
    color:#000000;
    text-align: center; /* IE 5, in questo modo centra il div */

}

a:visited , a:link , a:hover {
    color:#990000;
    text-decoration:none;
}

#container {
    width:810px;
    margin:0px auto;
}

#header {
    color:#fff;
    background-image:url('http://uotla.altervista.org/cellpic3.gif') ;
    text-align:center;
    font-weight:bold;
    margin-bottom:80px;
}

#menu-sinistra {
    float:left;
    margin:0 40px 0 0px;
    color:#fff;
    font-weight:bold;
    width:185px;
    text-align:center;
    background-image:url('http://uotla.altervista.org/gen_background.jpg') ;
    font-size:14px;
}

#menu-sinistra li, #menu-sinistra ul {
    list-style:none;
    margin:0px;
    padding:1px 2px 1px 4px;
}

.titolo{
    background-image:url('http://uotla.altervista.org/cellpic3.gif') ;
    color:#fff;
    font-weight:bold;
}

#content {
    float:left;
    width:360px;
    background-image:url('http://uotla.altervista.org/gen_background.jpg') ;
    text-align:center;
}

#menu-destra {
    float:left;
    margin:0 0 0 40px;
    color:#fff;
    font-weight:bold;
    width:185px;
    text-align:center;
    background-image:url('http://uotla.altervista.org/gen_background.jpg') ;
    font-size:14px;
}

#menu-destra li, #menu-destra ul {
    list-style:none;
    margin:0px;
    padding:1px 2px 1px 4px;
}
    
    </style>
</head>

<body>

<div id="container">
<div id="header">
Ultima Online The Lost Atlantis</div>

<div id="menu-sinistra">
<div class="titolo">The Lost Atlantis </div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Screenshot</a></li>
</ul>

<div class="titolo">Informazioni </div>
<ul>
<li><a href="#">Faq</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Regolamento</a></li>
</ul>

<div class="titolo">Mondo</div>
<ul>
<li><a href="#">Storia</a></li>
<li><a href="#">Razze</a></li>
<li><a href="#">Classi</a></li>
</ul>

</div><!-- fine menu sinistra -->


<div id="content">
<div class="titolo">News and Updates</div>
<center>Sito in costruzione</center>
<div class="titolo">You Can Add Other Text Here</div>
Sito in costruzione
</div><!-- fine content -->

<div id="menu-destra">
<div class="titolo">The Lost Atlantis </div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Screenshot</a></li>
</ul>

<div class="titolo">Informazioni </div>
<ul>
<li><a href="#">Faq</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Regolamento</a></li>
</ul>

<div class="titolo">Mondo</div>
<ul>
<li><a href="#">Storia</a></li>
<li><a href="#">Razze</a></li>
<li><a href="#">Classi</a></li>
</ul>

</div><!-- fine menu destra -->
</div><!-- fine container -->
</body>
</html>

E' buono per tutte le risoluzioni, è visibile bene sia su Firefox che su IE, è validato XHTML 1.0 transitional.

29-10-2009, 21.39.41

Molto bene, sei stato gentilissimo.

Discussione: copiare Menù sia a destra che a sinistra del sito

LinkBack

Strumenti discussione

Display

copiare Menù sia a destra che a sinistra del sito

Regole di scrittura