Problema CSS GDRCD 5.2

Problema CSS GDRCD 5.2 postato il 23/09/2014 18:51:55 nel forum programmazione, open source e hosting

Salve a tutti, ho un problema nell'impostare il CSS della main di GDRCD 5.2

Ho scelto il layout "left-bottom", innanzitutto, perciò i link/bottoni dei menù mi si sono posizionati in un frame in basso.

Ho editato il file main.css nella cartella apposita (/advanced) in questo modo

#framecontentBottom { display:inline; }
div.link_menu{
display:inline;
width:2000;
float:left;
padding:0 0 0 0;
font-size:14px;

Fin qui, tutto bene, nel senso che i link testuali (aggiorna, presenti... ecc) mi compaiono su una riga unica in orizzontale.

Il problema è quando vado a inserire delle immagini png da mettere al posto del semplice link testuale, inserendo l'indirizzo delle immagini in questione nel file all'altezza di

/* voci del menù /*


/* VOCI DEL MENU */
$PARAMETERS['menu']['refresh']['text']='Aggiorna';
$PARAMETERS['menu']['refresh']['url']='main.php?dir='.$_SESSION['luogo'];
$PARAMETERS['menu']['refresh']['image_file']='aggiorna.png';
$PARAMETERS['menu']['refresh']['image_file_onclick']='';

e così via

il mio problema è che le immagini (piccole iconcine quadrate) NON si dispongono in UNA sola linea orizzontale, ma restano raggruppate in una specie di colonna 2x3 (due immagini in linea, e poi le altre a fare righe sotto)

Non riesco a capire dove sia il problema ed è da parecchio tempo che sto cercando di studiare e approntare tutte le soluzioni possibili

grazie a chi mi può aiutare

23/09/2014 19:10:37 e modificato da markusbbn il 23/09/2014 19:14:46

io per il top ho fatto così, poi vedi se funge anche per il bottom

position: absolute;
top: 10px;
left: 169px; /*Set left value to WidthOfLeftFrameDiv*/
right: 215px; /*Set right value to WidthOfRightFrameDiv*/
width: auto;
height: 100px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/

e poi nella link_menu.inc.php

<?php
/* Generazione automatica del menu del gioco */
$raw_counter=0;
echo '<div class="link_menu">';
foreach($PARAMETERS['menu'] as $link_menu){

if (empty($link_menu['url'])===FALSE){
if (empty($link_menu['image_file'])===TRUE){
if (empty($link_menu['text'])===FALSE){
echo '<a href="'.$link_menu['url'].'">'.gdrcd_filter('out',$link_menu['text']).'</a>';
}
} else {
if (empty($link_menu['image_file_onclick'])===TRUE){
$img_up=$link_menu['image_file'];
$img_down=$link_menu['image_file'];
} else {
$img_up=$link_menu['image_file'];
$img_down=$link_menu['image_file_onclick'];
}
echo '<SCRIPT LANGUAGE="JavaScript"> if (document.images) { var n'.$raw_counter.'_button1_up = new Image(); n'.$raw_counter.'_button1_up.src = "themes/'. $PARAMETERS['themes']['current_theme'].'/imgs/menu/'.$img_up.'"; var n'.$raw_counter.'_button1_over = new Image(); n'.$raw_counter.'_button1_over.src = "themes/'. $PARAMETERS['themes']['current_theme'].'/imgs/menu/'.$img_down.'";} function n'.$raw_counter.'_over_button() { if (document.images) { document["n'.$raw_counter.'_buttonOne"].src = n'.$raw_counter.'_button1_over.src;}} function n'.$raw_counter.'_up_button() { if (document.images) { document["n'.$raw_counter.'_buttonOne"].src = n'.$raw_counter.'_button1_up.src}}</SCRIPT>';
echo '<a href="'.$link_menu['url'].'" onMouseOver="n'.$raw_counter.'_over_button()" onMouseOut="n'.$raw_counter.'_up_button()"><img src= "themes/'. $PARAMETERS['themes']['current_theme'].'/imgs/menu/'.$link_menu['image_file'].'" alt="'.gdrcd_filter('out',$link_menu['text']).'" title="'.gdrcd_filter('out',$link_menu['text']).'" name="n'.$raw_counter.'_buttonOne" /></a>';
}
}
$raw_counter++;
}
echo '</div>';

?>

25/09/2014 12:14:33

zaur-21 ha scritto:
Ho editato il file main.css nella cartella apposita (/advanced) in questo modo

#framecontentBottom { display:inline; }
div.link_menu{
display:inline;
width:2000;
float:left;
padding:0 0 0 0;
font-size:14px;

Tanto per cominciare, ti suggerisco di sostituire la larghezza da 2000 a 100%, perchè 2000 pixel (immagino fosse questa l'unità di misura che volevi utilizzare) sono veramente eccessivi.

Per il resto, comincia con l'assegnare anche un heigth al div. Dici che le icone sono 23x23, quindi un height: 25px dovrebbe andare più che bene, (tendo sempre, laddove possibile, a lasciare un piccolo margine).

Questo per quanto riguarda il CSS.
Per quanto riguarda l'HTML/PHP, riesci a inserire lo stralcio interessato? Dovrebbe essere in pages/link_menu.inc.php se non erro.
Te lo chiedo perchè la "struttura" del menù può essere stata specificata in parte anche in quel file e io, sinceramente, non ricordo com'era il mio originale prima che lo modificassi ad hoc.

01/10/2014 15:41:15

Solo un attimo che il problema mi pare molto semplice eppure non riesco a venirne a capo.

In poche parole attualmente il main del gdrcd, per quanto riguarda il menù si presenta così:



dove "aggiorna", "mappa", "scheda" ecc., sono delle piccole immagini .png, il cui indirizzo è stato inserito nel file config.inc.php come il programmatore vuole.

Quello che io vorrei è che quelle piccole immagini .png invece di incolonnarsi verso il basso in verticale, si mettessero in file in orizzontale e, nonostante tutte le possibili modifiche al CSS con tutte le possibili opzioni, non riesco a metterle come voglio.

Infine, non capisco perché dovrei modificare il file link_menu.inc.php.

Chi mi spiega? Chi mi aiuta?
Grazie :=)

02/10/2014 15:48:28

nulla!

Ho editato così il file main.css

framecontentBottom { display:table-cell; }
div.link_menu{
position:absolute;
display: inline;
top: 5px
left: 0px
right: 0px
width:100%;
height:10px;
float:left;
text-align:left;
padding:5 5 5 5;
font-size:14px;
}

div.link_menu a{
position:absolute;
display: inline;
top: 5px
left: 0px
right: 0px
width:100%;
height:10px;
float:left;
text-align:left;
padding:5 5 5 5;
font-size:14px;
}

div.link_menu a:hover{
position:absolute;
display: inline;
top: 5px
left: 0px
right: 0px
width:100%;
height:10px;
float:left;
text-align:left;
padding:5 5 5 5;
font-size:14px;
background-color:#cfcfcf;
text-decoration:none;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

e non succede niente di che

c'è anche il CSS sul file della cartella layout che potrebbe avere la sua incidenza, ma non so come

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontentLeft, #framecontentBottom{
position: absolute;
top: 0;
left: 0;
width: 210px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
}

#framecontentBottom{
top: auto;
left: 210px; /*Set left value to WidthOfLeftFrameDiv*/
width: auto;
bottom: 0;
right: 0;
height: 100px; /*Height of bottom frame div*/
overflow: ; /*Disable scrollbars. Set to "scroll" to enable*/
}