Scritto e lista sullo stesso Rigo

[Gae58]

salve,

non so come risolvere questa situazione.
Vorrei mettere sullo stesso rigo queste scritte

MENU' UNO DUE TRE
Codice: MENU' <ul>[*]UNO[*]DUE[*]TRE[/list]



Qualcuno mi sa dire come settare il CSS?

grazie

Gaetano

[marty89]

Ciao, ponendo questo codice html:

MENU'</p>
<ul>[*]UNO [*]DUE [*]TRE[/list]

potresti provare ad adattare queste proprietà alle tue esigenze:

p{
   display: inline;
   float: left;
}

ul{
   width: 200px;
   float: left;
}

li{
   display: inline;
}

Spero di esserti stata di aiuto.

[Gae58]

non va, ho aggiornato il mio CSS con le tue indicazioni:
#MenuOri{
background-colorrange;
padding:2px;
padding-left:30px;
vertical-align: middle;
display: inline;
float: left;
}

#MenuOri a:link, a:visited {
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#MenuOri a:hover, a:active {
background-color:#7A991A;
}
#MenuOri ul{
float: left;
}
#MenuOri li{
display: inline;
}

Codice html:
<div id="MenuOri">
<?php MenuOri(); ?>
</div>

Function MenuOri() {
echo "MENU'";
echo '<ul>';
echo '[*] Gestione ';
echo '[*] Tabelle ';
echo '[*] Contratti ';
echo '[/list]';
}

Addirittura mi mette la scritta MENU' alla dx dell'ultimo[*]

cosa ne pensi?

[marty89]

Prova a fare in questo modo.
Html:

<div id="MenuOri">
   

MENU'</p>
   <ul>[*] Gestione [*] Tabelle [*] Contratti [/list]
</div>

Css:

#MenuOri{
   background-color:orange;
   padding:2px;
   padding-left:30px;
   vertical-align: middle;
   display: inline;
   float: left;
   width: 500px;
}
#MenuOri p{
   display: inline;
   float: left;
}
#MenuOri a:link, a:visited {
   width:120px;
   font-weight:bold;
   color:#FFFFFF;
   text-align:center;
   padding:4px;
   text-decoration:none;
   text-transform:uppercase;
}
#MenuOri a:hover, a:active {
   background-color:#7A991A;
}
#MenuOri ul{
   float: left;
   width: 400px;
}
#MenuOri li{
   display: inline;
   width: 100px;
}

Così a me lo visualizza giusto.

[Gae58]

ti ringrazio per l'aiuto, ho notato che è il selettore

settato a float left che lo fa mettere sulla stessa linea. Il prblema adesso è cje la scritta MENU' e quelle della lista sono leggermente sfalzate. E poi la lista non InLine (cioè sulla stessa linea), ma si è spostata in orizzontale.

Scusa la domanda, ma io con i css esco pazzo.
se dipaly inLine serve a far visualizzare tutto sulla stessa linea che cos'é che gli da' fastidio?

Come posso fare a distnziare la lista dalla scritta menu'?

[Gae58]

scusa per capire meglio come funziona ho provato questo

codice html:
<div id="Contenitore">
<ul>
[*]uno[*]due
[*]tre
[*]quattro
[/list]
</div>

codice css:
#Contenitore{
width:81%;
float:left;
margin:0px 10px 10px 10px;
padding:0% 1% 1% 1%;
}

#Contenitore h1{
text-align:center;
color:blue;
}

#Contenitore a:link, a:visited {
display:block;
color:blue;
text-align:center;
padding:4px;
text-decoration:none;
}

#Contenitore a:hover, a:active {
background-color:#E8E4E4;
}
#Contenitore ul{
color:red;
display:inline;
}
#Contenitore li{
display:block;
}

Va tutto bene e la lista viene visualizzata in verticale.
Per farla visualizzare in orizzontale uso il selettore displaynline in #Contenitore li{...
e funziona, ma nel programma mio non va.

Probabilmente c'è qualche altro selettore precedente che mi da' fastidio.

Mica sai un metodo per trovare l'errore?

grazie

Gaetano

L'ho provato ma non funziona

[Gae58]

alleluia,

ho modificato e spostato alcuni selettori ed é andato tutto bene.

Ho inserito degli spazi, così anche il menù è spostato.

Ti ringrazio di nuovo per l'aito.

Il selettore fonfamentale è sttao

con ilsettaggio float left.

ciao ed alla prossima

Gaetano

[marty89]

Sì, devi mettere display: inline agli elementi "li" della lista, ma devi anche togliere display: block da "#Contenitore a:link, a:visited".
Per correggere la leggera differenza di spostamento in orizzontale ti consiglio di provare a modificare i margin e i padding dei vari elementi. Se non riesci a trovare l'errore, questa volta prova a postare un link a quella pagina, così cerco di capire dove sbagli.

EDIT: non avevo visto che hai risolto.