Cambiare barra verticale

[leon-kennedy]

Ragazzi non sono molto pratico con il CSS e così ho preso un layout open source.
La mia domanda però è questa:

Come faccio a mettere la barra dove c'è scritto Regolamento,chi siamo,ecc. in orizzontale anzichè verticale?

body {
background: url('body.jpg') top left;
font-size: 14px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#000000;
padding:10px;
margin:10px;
}
a {color: #FFFFFF;}
a:visited {color:#FFFFF;}
a:hover {color: #c43300;}
a:active { color: #c43300;}

h1 {
font-size: 15px;
text-transform:uppercase;

/*border-top:1px solid #564b47;
border-bottom:1px solid #564b47;*/
/*padding:5px 15px;*/
margin:0px }

h2 {
color: #9A1212;
font-size:24px;
font-weight: normal;
padding: 5px 10px;
margin:2px;}

img.download {vertical-align:middle;}

/* ----------layout centrale-------------- */
#container {
width: 910px;

margin-left: auto;
margin-right: auto;
height:100%;
background: #228B22 url('bodycontent.jpg') top left;
border:1px solid #000000;
}

/* ----------logo-------------- */
#banner {
height:114px;
text-align: center;
background: url('logo.jpg') no-repeat bottom center;
background-color: #228B22;

padding: 0px;
margin: 0px;
}
#banner img {padding:10px 0px;}
#bannertitle{padding-top:50px;font-size:2em;font-weight:bold;}

/* -----------------content--------------------- */
#left {

background: ('bodycontent.JPG') no-repeat bottom left;
padding: 23px;
margin-left: 200px;
margin-right: 0px;
}
div#content {
min-height:475px;
/*height:expression(this.scrollHeight > 475 ? "auto":"475px"); */
}

p, pre{
padding: 2px;
margin: 0px;

}

/* --------------barra regolamento,chi siamo,ecc.------------- */
#left {
float: left;
width: 170px;
margin: 1px;
padding: 0px;
background: #228B22 url('bodycontent.JPG') top left;
height:100%;

}


/**********vertical menu***************/
.verticalmenu ul{
list-style:none;
/*list-style-image: url("bullet.gif")*/


padding: 10px;
margin: 2px;
}

.verticalmenu li, a:link, .verticalmenu a:visited, .verticalmenu a:hover {
display: block;
font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
text-align: left;
width: 140px;
height: 50px;
/*background: url('menuhover.gif') no-repeat;*/
}
.verticalmenu a:hover{
background: url('menuhover.gif') no-repeat;
color: #dc4d1b;
}

Attendo risposte!

[ElTiburon76]

ciao,
il codice incollato così non chiarisce granché, se non ci dai almeno un link!
Prova a modificare questo ma non sono assolutamente certo che funzioni, visto che tale modifica potrebbe incasinare tutto il resto del layout:

/* --------------barra regolamento,chi siamo,ecc.------------- */ 
#left { clear:both; width: 170px; margin: 1px; padding: 0px; background: #228B22 url('bodycontent.JPG') top left; height:100%; }

Il fatto è che il div #left è fatto per stare a sinistra, quindi andrebbe spostato fisicamente anche nell'html nel punto in cui vorresti che fosse!

[leon-kennedy]

Ecco il sito è questo,naturalmente ancora tutto in costruzione!

http://beamanager.altervista.org/

[leon-kennedy]

Il codice che mi hai dato è giusto in parte,ma ora come faccio mettere le scritte una dopo l'altra?

Grazie mille e scusa per il disturbo.

[ElTiburon76]

Ok, nella riga di css
.verticalmenu li, a:link, .verticalmenu a:visited, .verticalmenu a:hover
oltre a quelle che ci sono già, metti la regola display:inline (in modo da allineare gli elementi) - Poi ci aggiungi anche un padding: 0 0 0 10px per distanziarli tra di loro.

In soldoni, devi sostituire la regola della seguente classe a quella che c'è ora online:

.verticalmenu li, a:link, .verticalmenu a:visited, .verticalmenu a:hover {
color:#FFF;
display:inline;
height:50px;
padding:0 0 0 10px;
text-align:left;
text-decoration:none;
width:140px;
font:1.1em Verdana, Arial, Helvetica, sans-serif;
}

poi, se vuoi centrare il menu, metti text-align:center al div
.horizontalmenu ul
così:

.horizontalmenu ul {
list-style:none outside none;
margin:2px;
padding:10px;
text-align:center;
}

Mi permetto di darti un consiglio: per prendere dimestichezza con i css usa firefox e installati l'addon Firebug.
Ciao

[leon-kennedy]

1000 grazie per l'aiuto e la disponibilità!
Un'altra cosa che non riesco a capire è come mai sul mio pc l'immagine di sfondo in body si vede,mentre qui su internet no...come mai?premetto che ho caricato l'immagine tra i miei file in altervista.