Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    25

    visualizzazione sotto-menu di menu a tendina

    Buonasera, vorrei chiedere se qualcuno potesse spiegarmi se e come fosse possibile allineare le voci del sotto-menu su di un'unica riga in orizzontale, invece che elencate in verticale, con css.
    Scusate la domanda magari banale, ma io non ci arrivo.
    Grazie a chi mi risponderà
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,601
    Ciao, è possibile fare in vari modi, non c'è una regola fissa, bisogna prima di tutto capire quale è la situazione di partenza quindi sarà possibile valutare come intervenire per ottenere ciò che stai chiedendo. Se posti un po' di codice HTML e le eventuali regole CSS che sono applicate, si potrà ragionare sulle possibili soluzioni. Se la pagina in questione è online e accessibile pubblicamente, puoi postare il link; sarà più semplice, per chi vuole aiutarti, verificare direttamente l'attuale situazione ed eventualmente capire come intervenire.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    25
    Ciao grazie per la risposta, faccio che postare il link di prova così magari rimane più semplice da consultare.
    Il menu in questione, sarebbe quello orizzontale subito sotto la prima immagine di banner, mi piacerebbe che, invece di apparirmi il sotto menu in verticale, mi apparisse su di un'unica riga in orizzontale. Altra cosa, ridimensionando la finestra, noto che viene visualizzato non proprio in modo bello da vedere, non saprei se ci sarebbe un modo migliore, nel caso sono disponibilissimo a suggerimenti vari ed eventuali. Naturalmente se ci fossero anche altri suggerimenti in generale, sarei strafelice di ascoltare, in modo da apprendere al meglio.

    http://www.flydrose.epizy.com/indexprova.html
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,601
    Ciao, bene, ho visto. Per mettere in orizzontale gli elementi del sottomenu il discorso è abbastanza semplice. La larghezza dell'elemento contenitore <ul> attualmente è fissa, basterebbe lasciarla automatica.

    Nel file style2col.css alla riga 77 è definita questa regola:
    codice:
    #menu_s li:hover ul {
    	position: absolute;
    	display: block;
    	z-index: 1;
    	width: 120px;
    	padding: 0;
    	margin: 0;
    	border-top: 1px solid white;
    	border-radius: 5px;
    	background: #000000;
    }
    basterebbe rimuovere la riga in rosso (width: 120px;) ma il problema ora sta nel capire come vuoi che sia posizionato l'intero sottomenu.

    Al momento la posizione resta quella di default, cioè le voci restano allineate da destra a sinistra a partire dal limite sinistro della voce del menu padre; in tal caso però, riducendo la finestra, i sottomenu più a destra vanno a ridimensionarsi e le voci si incolonnano.

    Se si forzasse la disposizione orizzontale rischierebbero comunque di risultare tagliate fuori dal limite destro della pagina.

    Si potrebbe pensare di centrare i blocchi relativi ai singoli sottomenu rispetto alla voce del menu padre. Se ci fossero molte voci di sottomenu, il problema precedente rimarrebbe.

    Si potrebbe pensare di centrare i sottomenu rispetto all'intera larghezza del menu principale (o della pagina) ma ci sarebbe però un problema di corrispondenza per le voci di menu più esterne. Ad esempio se la prima voce avesse una sola voce di sottomenu, queste risulterebbero troppo distanti dal momento che il sottomenu risulterà al centro dell'intera larghezza, col rischio di non poter nemeno raggiungere col cursore tale sottomenu perché si uscirebbe dall'area sensibile per cui viene mantenuto aperto il sottomenu.

    Si potrebbe però pensare di estendere il contenitore del sottomenu mantenendo le voci centrate rispetto a tutta la larghezza, quindi risolvere il precedente problema, ma nascerebbe un problema di definizione della grafica; infatti il contenitore del sottomenu ha un bordo superiore visibile che si estenderebbe per tutta la larghezza.

    Inutile continuare ad elencare ipotetici scenari, piuttosto sarebbe più opportuno che tu facessi i tuoi ragionamenti e magari fornissi delle indicazioni più precise su come vorresti sia impostata esattamente la cosa; eventualmente anche una bozza grafica potrebbe essere utile per comprendere il risultato da ottenere.

    Altra cosa, ridimensionando la finestra, noto che viene visualizzato non proprio in modo bello da vedere, non saprei se ci sarebbe un modo migliore, nel caso sono disponibilissimo a suggerimenti vari ed eventuali.
    Qui entriamo in un discorso di impostazione responsive. Potrebbero esserci diverse soluzioni. In linea di massima per gestire al meglio le diverse impaginazioni relativamente alla dimensioni del viewport (cioè della finestra) si utilizzano i breakpoint con i quali è possibile definire diverse regole a seconda dell'attuale dimensione del viewport.

    Il discorso però si estenderebbe troppo se deve essere affrontato a partire dalle basi. Ti consiglio eventualmente di dare uno sguardo a qualche guida per apprendere (qualora tu fossi a digiuno) quelle nozioni fondamentale relative all'impostazione di layout responsive.
    Puoi iniziare da questa guida: https://www.html.it/guide/responsive...sign-la-guida/

    Se vuoi approfondire puoi trovare altri interessanti riferimenti a guide ed articoli al capitolo 3 dei link utili CSS.

    Definiti i breakpoint potresti ad esempio decidere di impostare una grandezza del font più piccola quando il viewport si riduce ad una determinata dimensione; magari ridurre anche gli spazi tra una voce e l'altra del menu. E' chiaro però che se il menu stesso comprende molte voci, tali da non starci comunque in una singola riga, bisognerà valutare bene quale disposizione si intende ottenere.

    Spesso, per visualizzazioni su mobile, si adopera quello che in gergo viene chiamato "hamburger menu", cioè un menu nascosto che si estende (generalmente in colonna) premendo/toccando il pulsante ☰ (le famose tre lineette che ricordano appunto un hamburger) ma qui ci sono diverse scuole di pensiero che mettono in discussione l'usabilità di tale sistema. In tal caso dovrai valutare bene se e come puoi applicarlo al tuo progetto.

    Tra le altre cose, riducendo la finestra nella tua pagina, noto che i vari blocchi di testo (a fianco alle immagini tra i contenuti) vengono tagliati in altezza; questo, perché è stata impostata un'altezza fissa per quei contenitori. Mi sembra di capire che il layout non sia stato concepito per essere responsive. Il discorso diventa troppo ampio ed eterogeneo per poterne discutere in un'unica discussione del forum. Il mio consiglio è quello di iniziare intanto a leggere qualche guida, come già indicato, quindi cercare di risolvere un problema alla volta.

    Ritornando quindi al menu, prova a impostare ciò che ti ho indicato e ragionare tu stesso sulla disposizione esatta che vorresti ottenere. Fai sapere se serve ulteriore aiuto.

    Buon proseguimento.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    25
    Grazie. Farò un pò di prove e rileggo bene il tutto e ti farò sapere, gentilissimo.
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

  6. #6
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    25
    Ciao KillerWorm. Scusami, sto andando avanti un pò a rilento perchè ultimamente non riesco a proseguire nella mia pagina causa altri impegni, ma qualcosa sto facendo.. intanto completando i testi, poi con calma guarderò anche la responsività (spero averlo detto giusto )
    Appena possibile pubblicherò gli aggiornamenti così magari mi darai, spero, un tuo preziosissimo parere.

    Dimenticavo di dire una cosa per quanto riguarda i blocchi con testo e immagini accanto che dicevi non pensavi concepito per essere responsive. In realtà il sito è concepito per esserlo, avevo solo impostato l'altezza dei blocchi perchè volevo inserire un link che mi collegasse ad una pagina apposita per parlare dei vari argomenti in questione, lasciandomi una specie di riassunto o testo parziale per rendere l'idea di cosa trattasse l'argomento, così che cliccando su "continua a leggere", l'utente venga reindirizzato su di un'altra pagina. Scusami se la mia spiegazione è un pò contorta, ma sto scrivendo di fretta.
    Ultima modifica di flydrose; 07-03-2020 a 15:13
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,601
    Ciao KillerWorm. Scusami, sto andando avanti un pò a rilento
    [...]
    ma qualcosa sto facendo..
    Ciao, nessun problema, figurati mi fa comunque piacere rileggerti

    poi con calma guarderò anche la responsività (spero averlo detto giusto )
    bene

    Dimenticavo di dire una cosa per quanto riguarda i blocchi con testo e immagini
    [...]
    cliccando su "continua a leggere", l'utente venga reindirizzato su di un'altra pagina. Scusami se la mia spiegazione è un pò contorta, ma sto scrivendo di fretta.
    Capito, in tal caso però, riducendo il contenitore, il testo potrebbe risultare letteralmente tagliato producendo un effetto sgradevole e nascondendo addirittura il presunto link "continua a leggere". Suppongo tu debba lavorarci ancora, ad ogni modo una delle soluzioni più semplici e utilizzate è quella di avere i testi di anteprima già preparati preventivamente, tenendo conto ad esempio di un numero massimo di caratteri o parole, per cui senza troncamenti al volo del testo o tecniche simili; lasciare quindi il contenitore libero di estendersi in base al suo effettivo contenuto, dal momento che il testo sarà comunque breve, e inserire l'eventuale link "Continue..." del caso.

    Eventuali tecniche di troncamento sono possibili via CSS ma attualmente hanno delle limitazioni (come l'uso della proprietà text-overflow:ellipsis non supportato però da contenuto multiriga) o sono macchinose (vedi questo Pen o altri simili approcci, qui, qua, che potrebbero fare al caso ma in cui si usano dei "sofisticati hack" che lasciano il tempo che trovano).

    Una novità in CSS3 è la proprietà line-clamp con cui è possibile specificare il numero massimo di linee di testo da mostrare. Potrebbe essere una soluzione alternativa in questo caso, se l'intento è quello di troncare il testo ad un tot di righe. Attualmente è supportata dalle ultime versioni di tutti i moderni browser (vedi caniuse) ma non è ancora una specifica standard (va usata col prefisso -webkit-), per cui è una soluzione che prenderei con le pinze.

    A mio parere la scelta più efficace resta quella di usare, come anteprima, un sunto del testo preparato preventivamente ad hoc e lasciato comunque libero di occupare il suo spazio, considerando magari anche il fattore responsive, e aggiungere il semplice link a fine testo o in basso al contenitore... ma questa è un'altra storia da trattare magari in un'altra discussione.

    Per il momento buon proseguimento e in bocca al "luppolo" per tutto il resto
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.