[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 XD

Penso 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 😁