[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, gdrcd, open source, 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!

CRSED: F.O.A.D. ↗
Brutale sparatutto MMO in cui vince l'ultimo giocatore che resta in vita! Il giocatore sarà accompagnato da armi realistiche e magie!

quota

Pagine → 1

maclay

SCRIVI

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!

In peace, may you leave this shore.
In love, may you find the next.
Safe passage on your travels,
until our final journey to the ground.
May we meet again.

Reshop, Heda.

quota

fujafox

SCRIVI

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;
}

#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à!

AlterEgo ↗
Scopri AlterEgo GdR: un incredibile universo narrativo in stile medievale fantasy che cresce, muta e vive giorno dopo giorno grazie ai suoi giocatori!

quota

maclay

SCRIVI

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.

In peace, may you leave this shore.
In love, may you find the next.
Safe passage on your travels,
until our final journey to the ground.
May we meet again.

Reshop, Heda.

quota

fujafox

SCRIVI

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!

War Thunder ↗
Aviazione, veicoli corazzati e flotte militari della seconda guerra mondiale. Parteciperai a tutte le principali battaglie!

quota

maclay

SCRIVI

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 😁

In peace, may you leave this shore.
In love, may you find the next.
Safe passage on your travels,
until our final journey to the ground.
May we meet again.

Reshop, Heda.

quota

Discussione seguita da › fujafox › nobara

Pagine → 1

Rispondi alla Discussione + Segui Discussione Inoltra Discussione Forum Programmazione, GDRCD, Open Source, Hosting Elenco Forum