[RISOLTO][GDRCD 5.4] Menù in topframe non centrato

[RISOLTO][GDRCD 5.4] Menù in topframe non centrato postato il 18/06/2017 17:11:37 nel forum programmazione, open source e hosting e modificato da fujafox il 21/06/2017 20:14:50

Ciao a tutti!Dopo settimane di prove più o meno vane, mi rivolgo a voi nella speranza possiate aiutarmi. Per la realizzazione di diversi menù (uno nella colonna di sinistra e uno nel top-frame) ho seguito le guide trovate su questo forum, più esattamente queste due: https://www.gdr-online.com/readforum.asp?id=215092 ↗ e https://www.gdr-online.com/readforum.asp?id=221334 ↗.Sono riuscita a sdoppiare i menù e a dargli effetti CSS diversi, anche se per riuscirci alla fine ho dovuto sdoppiare la pagina link_menu.inc.php, e realizzarne una seconda che ho chiamato link_menu_up.inc.php, e che viene richiamata dal menù che ho inserito nel top-frame. Speravo che, con questa soluzione, sarei finalmente riuscita a risolvere il problema principale: il menù superiore non vuole saperne di starsene al centro del frame-top, e continua a essere spostato sulla sinistra (la prima voce del menù dista dal bordo laterale del frame solo per i 20px che gli ho assegnato di padding).Per intenderci, questo è il risultato attuale:Questo è il codice delle pagine interessate:config.inc.php:

/*COLONNA ALTA*/ $PARAMETERS['top_column']['box']['link_menu_up']['class'] = 'link_menu_up'; $PARAMETERS['top_column']['box']['link_menu_up']['page'] = 'link_menu_up'; $PARAMETERS['names']['gamemenu']['secondo_menu'] = 'Menu 2'; $PARAMETERS['top_column']['box']['link_menu_up']['menu_key'] = 'secondo_menu'; $PARAMETERS['top_column']['box']['link_menu_up']['no_gotomap_list'] = true;

link_menu_up.inc.php:

echo '<div class="link_menu_up"><a href="' . $link_menu['url'] . '" id="link_' . $mkey . '_' . $key . '"'; foreach ($link_menu as $k => $v) { if (!in_array($k, array('text', 'image_file', 'url', 'image_file_onclick', 'sprite'))) { echo $k . '="' . $v . '"'; } } echo $content . '</a></div>';

main.css:

div.link_menu_up{ width:auto; margin:0 auto; text-align:center; display:inline-block !important; padding:0 0 0 20px; font-size:13px;}div.link_menu_up a{ display:inline-block; text-transform: uppercase; text-shadow: 0px 2px 3px #080808; padding:5px; text-align:center;}div.link_menu_up a:hover{ display:inline-block; text-transform: uppercase; text-shadow: 0px 2px 3px #080808; background-color:none; text-decoration:none; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius: 5px; border-radius:5px;}div.link_menu_up a.sprite {margin:auto; display: block; width: 50px; height: 50px; background: no-repeat top left;}div.link_menu_up a.sprite:hover { background-position: 0 100%;}

left-top_frames.php:

#framecontentLeft, #framecontentTop{position: absolute; top: 0; left: 0; width: 210px; /*Width of left frame div*/height: 100%;overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/}#framecontentTop{ top:5px;left: 210px; /*Set left value to WidthOfLeftFrameDiv*/right: 0;width: auto;height: 95px; /*Height of top frame div*/overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ background-color:rgba(0,0,0,0.3); border:solid 1px #DC5100; -moz-border-radius:5px; /* Bordi arrotondati */ -webkit-border-radius:5px; -khtml-border-radius: 5px; border-radius:5px; text-align:center;}

Grazie anticipatamente a chiunque abbia voglia di aiutarmi!

19/06/2017 09:43:02 e modificato da maclay il 19/06/2017 09:44:25

Da quello che vedo, sia il #framecontentTop che il div.link_menu_up sono settati su "width: auto;".Questo parametro, settato in questo modo, ha la precedenza sul posizionamento con "margin: 0 auto;".Il mio consiglio quindi è di settare il #framecontentTop perchè abbia un width abbastanza largo da prendere tutta la pagina, quindi (ti faccio qualche esempio, tu scegli pure quello che si adatta meglio alla tua situazione):

#framecontentTop {width: 100%; /* metodo "classico" */width: 100vw; /* metodo un po' più nuovo della % */width: calc(100vw - 210px); /* metodo che calcola la larghezza del frame sottraendo a quella della finestra del browser (vw) la larghezza del frame sinistro (210px); */}

Fatto questo, se non ci sono altri div contenitori, settando anche il width del div.link_menu_up dovresti essere a posto.Fai qualche prova e facci sapere!

20/06/2017 12:10:05 e modificato da fujafox il 20/06/2017 12:21:15

Innanzitutto, grazie mille per le dritte :)Ho modificato i width del Topframe e del div.link_menu_up come da te suggerito, e in effetti sembra che rispetto a prima i link del menù siano un po' più centrati, il problema è che ora il codice ignora il comando display:inline-block, e i link non vengono più visualizzati in linea orizzontale bensì come elenco verticale.In pratica, così:Le modifiche effettuate sono le seguenti (non ho toccato nient'altro):

div.link_menu_up{ display:inline-block !important; width:100vw; margin:0 auto; text-align:center; padding:0 0 0 20px; font-size:13px;}

e

#framecontentTop{ top:5px;left: 210px; /*Set left value to WidthOfLeftFrameDiv*/right: 0;width: calc(100vw - 210px);height: 95px; /*Height of top frame div*/overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ background-color:rgba(0,0,0,0.3); border:solid 1px #DC5100; -moz-border-radius:5px; /* Bordi arrotondati */ -webkit-border-radius:5px; -khtml-border-radius: 5px; border-radius:5px; text-align:center;}

Quanto ad altri contenitori, ho provato a dare un'occhiata col tool Ispeziona e mi sembra che altri implicati nel Topframe possano essere: div.innertube e div.colonne_top. Solo che mi sembra che innertube si riferisca a tutte le colonne e non solo al topframe, mentre div.colonne_top è nell'html ma non riesco a trovare il css di riferimento (perdona l'ignoranza).Qualche idea?Ancora grazie mille per la disponibilità!

21/06/2017 10:23:36 e modificato da maclay il 21/06/2017 10:27:23

La colpa è mia, ti ho effettivamente dato i nomi sbagliati.Ho rifatto delle prove sul mio menù top, con questi parametri:

div.colonne_top {width: calc(100vw - 210px); /* ma puoi settarla come preferisci */}div.pagina_link_menu { /* dovrebbe corrispondere al tuo link_menu_up */width: 800px; /* ovviamente qui la larghezza la devi settare per il tuo menù */margin: 0 auto;}

Prova così e fammi sapere!EDIT: mi raccomando, setta bene la larghezza del link_menu_up. Non a 100vw o 100% o cose simili, ma in pixel facendo delle prove per vedere qual'è la larghezza minima che ti serve perchè i link siano effettivamente inline e non vadano a capo. Se poi dovessi aggiungere altri link a quel menù, non dovrai fare altro che aumentarne la larghezza.

21/06/2017 18:01:59

Ooooh, grazie!Aggiungendo la larghezza a div.colonne_top, togliendola da div.link_menu_up e settandola invece su div.pagina_link_menu_up finalmente il menù si è centrato e allineato in orizzontale. Sembrava impossibile ormai XDPenso che il thread possa essere considerato come risolto!Ancora grazie mille!

21/06/2017 18:08:33

Di niente, felice di esserti stata d'aiuto! 😆Se puoi, modifica il titolo della discussione aggiungendo (RISOLTO) o simile 😁