Menù orizzontale, voci appiccicate

Menù orizzontale, voci appiccicate postato il 10/10/2015 16:18:33 nel forum programmazione, open source e hosting e modificato da bakemono82 il 10/10/2015 16:22:11

Salve di nuovo!
Ho ricreato un menù orizzontale seguendo passo passo le spiegazioni di un thread che ho trovato qui.
Lo avevo già usato con successo, nelle prima versione del mio sito.

Ora nell'andare a rifarlo passo passo, però, qualcosa è andato storto e non capisco cosa.

L'effetto che ho è questo:



Mentre le voci del menù dovrebbero ovviamente estendersi verso destra, ben separate da uno spazietto.

Vi allego le parti di codice, per vedere se sapete dirmi che errore ho fatto:

Da Main CSS:

/** * Menù di gioco
*/
select#gotomap{
display:block;
width:160px;
margin:0 auto 15px auto;

}

div.link_menu{
padding:0 0 0 20px;
font-size:14px;
}

div.link_menu a{
display:block;
padding:5px;
text-align:center;
}

div.link_menu a:hover{
text-decoration:none;

}

div.link_menu_top{
padding:0 0 0 0;
font-size:14px;
float: left;
max-width:10%;
max-height:auto
position:fixed;


}
div.link_menu_top a{
display:block;
padding:5px;
text-align:left;



}
div.link_menu_top a:hover{
text-decoration:none;

}

Da link_menu.inc.php ho sostituito i due echo aggiungendo solo la variabile 'Top' a link_menu:

echo '<div class="link_menu_top"><a href="'.$link_menu['url'].'">'.gdrcd_filter('out',$link_menu['text']).'</a></div>';
}
} 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 '<div class="link_menu_top"><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></div>';

E da left-top-right_frames.php

if($PARAMETERS['top_column']['activate'] == 'ON')
{
?>

<!-- Riga superiore -->
<div id="framecontentTop">
<div class="innertube">

<div class="colonne_top">
<?php

foreach($PARAMETERS['top_column']['box'] as $box)
{
echo '<div class="'.$box['class'].'">';

gdrcd_load_modules('pages/'.$box['page'].'.inc.php');

echo '</div>';

}

?>
</div>

</div>
</div>

<?php

}
?>

Ovviamente in config. ho dichiarato il giusto layout.
Il thread guida che ho trovato si riferisce al left-top, ma la prima volta che l'ho usato (forse aggiungendo qualche variabile ma non ricordo) ha funzionato perfettamente. Ora non riesco a venirne a capo, pur consultando delle guide online che sto studiando per farmi un pò le ossa e rompervi meno i maroni :P

Il thread a cui facevo riferimento è questo qui: https://www.gdr-online.com/readforum.asp?id=148378 ↗

10/10/2015 17:00:01 e modificato da stellawasadiver il 10/10/2015 17:09:32

Io non ho toccato nè il main, nè nient'altro, ho inserito direttamente nella pagina del layout questo CSS

div.link_sopra a
{
font-family: 'nomefont';
font-size: dimensionefontnumeropx;
font-color: codicecolorefont;
}

e questo sotto a dove dice "Riga Superiore" sempre in quella pagina

<*--MENU ORIZZONTALE SOPRA-->
<div class="link_sopra">
<table width="60%" height="80px" style="margin-left: 400px"><tr>
<td width="20%"><a href="urlpagina"><center>NOMEPAGINA</center></a></td>
<td width="20%"><a href="urlpagina"><center>NOMEPAGINA/center></a></td>
<td width="20%"><a href="urlpagina"><center>NOMEPAGINA</center></a></td>
<td width="20%"><a href="urlpagina"><center>NOMEPAGINA</center></a></td>
<td width="20%"><a href="urlpagina"><center>NOMEPAGINA</center></a></td>
</tr></table></div>

Non credo sia molto ortodosso come metodo, ma funziona e non dà problemi. Chiaramente sostituisci nomefont, dimensionefontnumeropx, codicecolorefont, NOMEPAGINA e urlpagina in base a quello che ti serve. :)
Se poi magari qualcuno più esperto riesce a darti consigli più corretti dal punto di vista tecnico meglio, ma per lo scopo dovrebbe funzionare anche questo metodo supereasy.

10/10/2015 17:26:24

Grazie, però il problema è che così temo che cambierei tutto lo schema e al momento di inserire le immagini al posto delle voci in font, credo che non le troverebbe più.. ç_ç

10/10/2015 17:42:14

Per inserire le immagini al posto delle voci devi farlo sempre da qui, non da config come si farebbe normalmente.
Devi fare, banalmente:

<td width="20%"><a href="urlpagina"><center><img src="urlimmagine"></center></a></td>

Questo codice che ho usato io crea direttamente un nuovo menu, non sposta quello laterale originale del layout. Quello laterale va poi cancellato a mano, riga per riga, da config, per questo dicevo sopra che è un po' poco ortodosso come metodo.

10/10/2015 17:59:03 e modificato da bakemono82 il 10/10/2015 18:45:57

Posso fare un tentativo allora!

Però vediamo se ho capito... per urlimmagine metto tipo l'intera directory della cartella..? tipo Root/theme/advanced/imgs/menu/nomeimmagine?

Per 'urlpagina', stessa domanda.. che devo mettere, tipo nomepagina.php?

Scusa per le domande precise, ma vorrei capire esattamente come creare i 'collegamenti', dato che è un codice ex nuovo integrato a gdrcd, ed io della programmazione sono niubbissimo :)

10/10/2015 18:39:32

Oui, dovrebbe andarci l'url per intero
(dico "dovrebbe" perchè non ho provato con le immagini, a logica dovrebbe essere così, ndr).

Quello che devi scrivere al posto di "nomepagina", invece, dipende da cosa ci vuoi nello specifico e da come e dove vuoi che ti apra il link. In genere, per contenuti che vuoi far aprire nel frame centrale della pagina, l'url è "/main.php?page=nomepagina".

Ad esempio, nel mio caso, per "Mappa Principale" e "Servizi" i link sono questi:

<td width="20%"><a href="/main.php?page=mappaclick&map_id=1"><center><img src="urlimmagine"></center></a></td>

e

<td width="20%"><a href="/main.php?page=uffici"><center>UFFICI</center></a></td>

Spero di esserti stata utile, scusa tu per le eventuali imprecisioni ma non sono affatto una professionista, questo è solo il modo in cui sono riuscita a risolvere io la questione. ;)

10/10/2015 18:47:42

Sei stata molto più che utile, grazie mille!

Ora provo, spero funzioni :)

Ultimissima cosa..

Secondo questo metodo sai dirmi anche come fare dei collegamenti modali (i pop up per intenderci)?

E anche per gestire i 'permessi', per esempio per far visualizzare ed aprire l'intera sezione 'Gestione' ai soli gestori?

Grazie ancora!

10/10/2015 19:06:21

Dimenticavo: se continua ad addossarti tutto, imposta su [OFF] la colonna Top in config, altrimenti ti crea casini da sovrapposizioni strane.

Per la questione "permessi", ti conviene mettere "Gestione" come sottolink da qualche altra parte, perchè se lo metti direttamente come voce del Menu, credo che salti la formattazione della tabella. Mettendolo come sottolink da qualche altra parte (ad esempio in "Servizi") i permessi restano invariati, sono quelli che imposti da config. Per quanto riguarda le modali, non ho ancora finito di lavorare su quella parte, quindi evito di dirti idiozie per il momento.

10/10/2015 19:23:47 e modificato da bakemono82 il 10/10/2015 20:24:13

Grazie mille, sei una risorsa inestimabile di info utili *_*

Non è che hai idea di come espandere lo spazio mappa, per caso?
Lo spazio standardizzato mi permette di inserire una mappa piccinissima, e se ne metto una più grande inserisce gli scroll, che vorrei evitare. Vorrei solo espandere un pò il box mappa insomma, spazio inutilizzato ne ho..!

PS: Ho provato il metodo, funziona!!!
Grazie!

10/10/2015 20:22:16

Uhm. Hai messo questo prima dei link, chiudendolo alla fine?

<table width="60%" height="80px" style="margin-left: 400px"><tr>
<td width="20%">blablalink

Le dimensioni dei frame invece si modificano dal CSS che trovi direttamente nella pagina del layout che hai scelto.

10/10/2015 21:03:49 e modificato da bakemono82 il 10/10/2015 22:26:12

Avevo toppato proprio quella stringa, ora funziona perfettamente XD

Però per le dimensioni, non riesco a capire come funzioni.

Immagino tu ti riferisca a questi, mi sembrano dei CSS all'inizio della pagina php del mio layout, però sono tutti in nero a differenza degli altri nei fogli di stile.

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

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

#framecontentRight{
left: auto;
right: 0;
width: 215px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
}

#framecontentTop{
position: absolute;
top: 0;
left: 210px; /*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*/
}

#maincontent{
position: absolute;
top: 100px !important; /*Set top value to HeightOfTopFrameDiv*/
left: 210px; /*Set left value to WidthOfLeftFrameDiv*/
right: 215px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0;
overflow: auto;

Ho provato ad alterare i valori di altezza e larghezza dei px, e poi delle percentuali, nei CSS che riguardano il Main, ma lo spazio resta invariato... Leggendo le guide mi sembra che queste cose siano semplici, invece evidentemente non capisco come diavolo funzionino width, e height e simili .__.

Non riesco nè a ingrandire/rimpicciolire i box, né a spostarli, altra cosa che mi servirebbe molto. Ho provato con margin, ma non riesco a farlo funzionare bene.