Menù Top con orientamento orizzontale

Menù Top con orientamento orizzontale postato il 14/07/2014 18:49:52 nel forum programmazione, open source e hosting e modificato da survivorzombie il 14/07/2014 18:51:25

Salve!
Ho preferito creare un topic separato, per questo argomento:
come ho già scritto altrove sto usando GDRCD 5.2 Stable, con impostazione grafica Basic.
Usando il frame left-top-right, vorrei piazzare il menù utente nella fascia Top, con un orientamento orizzontale, e non verticale.

Ho provato parecchi sistemi, ma non ci sono ancora riuscito. Avevo anche trovato un topic qui sul forum che ne parlava, ma non ho ancora capito come fare.

Qualcuno potrebbe spiegarmi come impostare un menù del genere?

Grazie infinite!

14/07/2014 19:25:33

display: inline-block;

al div che contiene il menù... dovrebbe andare

14/07/2014 20:38:14 e modificato da survivorzombie il 14/07/2014 20:57:47

Ho provato ad inserirlo sotto div.menu, e in altri richiami del menu utente sempre in main.css, ma non ha sortito alcun effetto ç__ç

Temo mi sfugga qualcosa.
Se lo inserisco nei menù interni funziona... è sul menù utente del main, che non riesco ad applicarlo.
Dove devo inserirlo perchè funzioni sulle voci del menù utente nella pagina dove c'è la mappa principale e tutto il resto?

Grazie ancora!

14/07/2014 21:24:32

Non sono dei div con class="link_menu" ?
a questi assegni display: inline (o inline-block), dovrebbe andare.

14/07/2014 21:43:01 e modificato da survivorzombie il 14/07/2014 21:51:14

L'ho inserito in tutti gli spazi

div.pagina_link_menu

e

div.link_menu

compreso

img.link_menu_point

...ma non funziona. O meglio: funziona sui menù INTERNI: se clicco ad esempio su 'gestione', vedo che nel menù gestione tutte le voci sono disposte in orizzontale. Ma a me le voci interne servono verticali XD

E' il menù utente più esterno, quello sopra la mappa nella fascia Tip del frame, che mi serve in orizzontale XD ed è l'unico che non riesco a mettere in linea orizzontale. Non so cosa sbaglio ç__ç

14/07/2014 21:59:58

Premetto che non uso menù orizzontali, ma ho questa versione che avevo fatto tempo fa, tra l'altro mettendo insieme risorse e indicazioni prese qui su gdronline.

Provo ad incollartela, magari ci trai delle indicazioni che ti servono. Come vedi il menù è stato slegato, preventivamente dal div degli altri contenitori, ti ho messo tutto, poi te la personalizzi^^

/** * Stile dei contenitori grigi con i bordini arrotondati
*/
div.pagina_info_location, div.msgs, div.presenti, div.output{
margin:5px auto;
padding:10px;
width:180px;
background-color:#b9b9b9;
border:solid 1px #444;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.output{
position:absolute;
top:0;
bottom:0;
right:0px;
left:0px;
width:auto;
overflow:auto;
text-align:center;
background:url("") no-repeat top center #b9b9b9;
}



/** * Informazioni con anteprima luogo
*/
div.info_image{
text-align:center;
}

div.box_stato_luogo{
padding-top:2px;
margin-bottom:15px;
}

div.meteo, div.meteo_date{
padding-top:5px;
text-align:center;
font-size:12px;
}

/** * Frame Messaggi
*/
iframe.iframe_messaggi{
height: 20px;
width: 180px;
}

div.pagina_messaggi{
text-align:center;
font-size:14px;
}

div.pagina_messaggi a, div.pagina_messaggi a:visited{
text-decoration:none;
color:#444;
}

div.messaggio_forum_nuovo a, div.messaggio_forum_nuovo a:visited{
font-weight:bolder;
font-style:italic;
color:#111;
}


/** * Menù di gioco
*/

div.pagina_gotomap{
background-color:#b9b9b9;
padding:10px;
margin-top:-10px;
margin-left:5px;
width: 180px;
border:1px solid #000000;
border-radius:5px;
}
div.pagina_gotomap_separato{
margin-top:5px;
font-size:12px;
margin:5px auto;
width:180px;
height:23px;
border:1px dotted #ffffff;

}
select#gotomap{
display:block;
width:180px;
background-color:#550000; /* sfondo selezione luoghi in top */
text-decoration:none;
color:#fff;
border:1px dotted #ffffff;
}




//* stile per i componenti della pagina servizi, menù utente e gestione*//
div.link_menu{
padding:0 0 0 10px;
font-size:14px;
border:1px dotted #ff0000;
}

div.link_menu a{
display:block;
padding:5px;
text-align:left;
border:1px dotted #ff0000;
}

div.link_menu a:hover{
background-color:#cfcfcf;
text-decoration:none;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.menu_top{
margin-top:20px;
margin-left:100px ;
padding:0px;
height:90px;
border:1px dotted #000000;
border-radius:5px;
//background-color: #800000;
}

div.link_menu_top{
padding:2px;
font-size:14px;
float: left;
background-color:none;

}
div.link_menu_top a{
display:block;
padding:5px;
text-align:center;
}
div.link_menu_top a:hover{
background-color:none;
text-decoration:none;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

14/07/2014 22:26:42

Ti ringrazio molto per l'aiuto, ma sei certa che il codice non sia troppo vecchio, o magari è per un'impostazione diversa dal basic? O_O
Io non sono esperto e magari non capisco io, ma comparandolo col codice che ho io non mi ci raccapezzo, mi pare settato in modo troppo diverso.

14/07/2014 22:44:12

E' tratto dal main.css di un 5.1 ma è compatibile col 5.2, come ho premesso è un esperimento che feci a suo tempo (un annetto fa) ma essendo ancora montato in un sito di prova, è funzionante, poi ho abbandonato il menù orizzontale perchè col tablet che uso spesso non lo visualizza correttamente.

15/07/2014 07:26:59

Ciao,
ho fatto una velocissima prova con i settaggi che hai descritto.
Usando un layout left-top-right.
Nei seguenti $PARAMETERS ho sostituito left-column cont top-column:
$PARAMETERS['top_column']['box']['link_menu']['class']='menu';
$PARAMETERS['top_column']['box']['link_menu']['page']='link_menu';
In questo modo il menu viene visualizzato nella zona Top
Poi sono andata nella cartella basic dei layout in main.css
li ho aggiunto al div.link_menu un bel display: inline

A me funziona.
C'è da sistemare ancora il titolo e le misure del box, ma insomma non mi dà problemi

15/07/2014 08:19:10

Probabilmente devi modificare la larghezza del div_menu ;-)

17/07/2014 21:15:17

f_dc90 ha scritto: Probabilmente devi modificare la larghezza del div_menu ;-)

Allora... credo di esserci quasi.
Modificando la larghezza del menù sono riuscito a mettere di lungo in orizzontale le varie voci.

Il problema è che le voci vengono tutte attaccate l'una all'altra senza soluzione di continuità ç__ç

PS: ho provato anche la funzione word-spacing, ma non attecchisce.