comortamento anomalo dei DIV

[MrClog]

Ciao a tutti, mi capita una cosa strana. Ho un div che riesco a visualizzarlo con le corrette impostazioni solo con Chrome, mentre con FireFox e i.e. nulla è come se quel div non esistesse. Ispezionando l'elemento sui vari browser vedo che mantiene le impostazioni solo con Chrome, con gli altri no.

#mycontainer{    position: relative; 
    width: 900px;
    margin: auto;
    padding:0px 0px;
}

questo tag viene caricato in uno script a secondo della pagina che carico

<?php
if(isset($_GET['req'])){      //home   
 if($_GET['req']== "home")       
  require ("inc/home.inc.php");


    //galleria immagini   
 if($_GET['req']== "prod"){        
      echo('<div id="mycontainer">');        
      require ("inc/galleria.inc.php");        
      echo('</div>');    }   

//chi siamo    
if($_GET['req']== "about"){        
      echo('<div id="mycontainer">');        
      require ("inc/chisiamo.inc.php"); 
      echo('</div>');    
}    

//dove siamo    
if($_GET['req']== "dove"){
        echo('<div id="mycontainer">');
        require ("inc/dove.inc.php");
        echo('</div>');    }    

//contact    
if($_GET['req']== "contact"){ 
       echo('<div id="mycontainer">'); 
       require ("inc/contact.inc.php");  
      echo('</div>');    }    

//qualità   
 if($_GET['req']== "qualita"){       
       echo('<div id="mycontainer">');
        require ("inc/qualita.inc.php");
        echo('</div>');    
}        
}else     
    require ("inc/home.inc.php");
 ?>

se volete dare un occhiata potete vedere la pagina sul mio ambiente di prova testwebmarco.altervista.org/framessara2

grazie

grazie a tutti
Ultima modifica di MrClog76; 21-05-13 alle 00:42

 

[Fez Vrasta]

Intanto scriverei il codice PHP in maniera più logica...

switch ($_GET['req']) {
    
case "prod":
    echo '<div id="mycontainer">';
    require("inc/galleria.inc.php");
    echo('</div>');
    break;
    
case "about":
    echo '<div id="mycontainer">';
    require("inc/chisiamo.inc.php");
    echo '</div>';
    break;
    
case "dove":
    echo '<div id="mycontainer">';
    require("inc/dove.inc.php");
    echo '</div>';
    break;
    
case "contact":
    echo '<div id="mycontainer">';
    require("inc/contact.inc.php");
    echo '</div>';
    break;
    
case "qualita":
    echo '<div id="mycontainer">';
    require("inc/qualita.inc.php");
    echo '</div>';
    break;
    
case "home":
default:
    require("inc/home.inc.php");
}

Prova ad aggiungere un...

case "test":
      echo '<div id="mycontainer">'; 
      echo 'test';
      echo '</div>'; 
      break;

... prima di case "home": default:

E vedi se in questo modo il div ottiene i CSS corretti

 

[Jonn]

Io penso che sia quel:
- position: relative;
Che ti scombina il tutto.
prova a toglierlo e riscrivere così:

#mycontainer{
    width: 900px;
    margin: 00px auto 00px auto;
    padding:00px 00px 00px 00px;
}

Riguardando ho visto anche che hai usato il position relative anche su altri div, sinceramente mi sento di sconsigliarti l'uso di questo selettore se non necessario e di usare i margin, i padding, i float ed i clear per l'allineamento dei div (io ho sempre usato questi e non ho mai avuto alcun problema nei posizionamenti più disparati dei div).

Poi comunque ti voglio anche segnalare che guardando il sorgente con Firefox ho visto un errore alla riga 51:

[/HTML]<li> <a href="./index.php?req=home"">Home</a></li>

Dopo home hai messo due volte i doppi apici.

Sempre nel menu ti consiglio di spaziare di più i <li> perchè io li vedo sovrapposti su Firefox (con Chrome no), e (sempre su Firefox) di specificare nel css del menu:
[CODE]list-style: none;[/CODE]
perchè si vede il classico pallino (che secondo me è anche schifoso da vedere XD).

Per il resto ti consiglio solo di ridare un'occhiata all'indenting (sarà che sono malato io ma è una cosa che considero quasi vitale anche se è solo una comodità in più in html).

 

[Fez Vrasta]

position: realative non da assolutamente alcun problema in nessun caso, e non è quello che genera il problema in questione.

 

[MrClog]

Grazie ragazzi,
ora controllo e cerco di utilizzare al meglio i vostri consigli e vi aggiorno sul tutto :mavieni:

 

[Jonn]

Comunque secondo me la situazione si risolve usando un div contenitore nel quale si inseriscono 2 div box, e dando a questo div contenitore margin: 00px auto 00px auto; ... ho comunque scritto un esempio perchè è una soluzione veramente semplicissima e crossbrowser:

<div id="pagina" style="width:800px; min-height:500px; margin:00px auto 00px auto; background: #333333;"><!--Questo è il div che contiene tutte le pagine-->
	<div id="homepage" style="width: 400px; height: 210px; margin: 00px auto 00px auto;"><!-- Questo è il div centrato che contiene i 2 box-->
		<div id="box1" style="float: left; width: 180px; min-height: 180px; margin: 10px 00px 00px 00px; padding: 10px; background: #FF0000;">Ciao</div>
		<div id="box2" style="float: left; width: 180px; min-height: 180px; margin: 10px 00px 00px 00px; padding: 10px; background: #FF00FF;">Ciao</div>
	</div>
	<div id="footer" style="clear: both;"></div>
</div>

 

[Fez Vrasta]

quei CSS devono applicarsi comunque, se non si applicano è probabilmente perché le pagine PHP che include hanno qualche errore (elementi non chiusi o roba del genere).

 

[Jonn]

Diciamo che nel 90% dei casi è così se chi le progetta sà quello che scrive, altrimenti ci può essere anche una scarsa conoscenza dei tag, dei selettori, degli attributi dei tag e dei selettori e tutto il resto, come per esempio:

- Avere un div che fa da corpo pagina, inserirvici dentro un div con position absolute e poi domandarsi il perchè quest'ultimo non segue il flusso della pagina basandosi sul div genitore.

Come intendevo dire in uno dei post precedenti che ho scritto che potrebbe essere quel position absolute; forse ho scritto male, ma non intendevo dire che il selettore non è valido, intendevo dire che di certi selettori bisogna saper bene il loro funzionamento e quali conseguenze comportano al flusso della pagina, nel caso una persona non lo sappia allora si cerca sempre di usare le regole più semplici (come quelle che appunto ho indicato io) per cui se si dovesse presentare un problema, trovare la soluzione sarebbe molto più veloce e meno laborioso.

Una volta stilata una struttura molto semplice allora uno passa a rifinire tutte le varie positions (div contenenti moduli statici quali, header, footer..)
e si valuta l'utilizzo di altri selettori (come il tipo di position in questo argomento).

Questa come ho appena detto però è una strada che se pur più lunga consente a chi ha meno esperienza di capire meglio i funzionamenti dei vari selettori se non vuole leggersi le definizioni sui siti che li spiegano.

Sto solo dicendo: "Prima di correre bisogna imparare a camminare".

Poi non sapendo le conoscenze di chi scrive il codice è logico che i motivi per cui la struttura non funziona a modo possono essere molteplici, vai a sapere...

 

[MrClog]

Finalmente ho risolto, mi sono messo piano piano è finalmente funziona. Non saprei esattamente cosa avevo sbagliato, ma ripulendo il codice il tutto funziona ora.

Jonn
Io penso che sia quel:
- position: relative;
Che ti scombina il tutto.

Quel div mi serviva relative, altrimenti non lo avrei inserito.

Fez Vrasta
Intanto scriverei il codice PHP in maniera più logica...

Grazie non avevo pensato al case. Ho seguito il tuo consiglio.



Grazie a tutti anche a Jonn. Purtroppo nei Forum c'è sempre un onnipotente che non riesce mai a dare un consiglio corretto, ma riesce nel contempo ad insultare gli altri dimostrando con la propria presunzione i suoi limiti.

 

[Fez Vrasta]

Prova a vedere se facendo come ho detto il problema persiste, se tutto funziona correttamente il problema è da cercare nei file .inc.php

 

[Fez Vrasta]

Diciamo che nel 90% dei casi è così se chi le progetta sà quello che scrive, altrimenti ci può essere anche una scarsa conoscenza dei tag, dei selettori, degli attributi dei tag e dei selettori e tutto il resto, come per esempio:

- Avere un div che fa da corpo pagina, inserirvici dentro un div con position absolute e poi domandarsi il perchè quest'ultimo non segue il flusso della pagina basandosi sul div genitore.

Come intendevo dire in uno dei post precedenti che ho scritto che potrebbe essere quel position absolute; forse ho scritto male, ma non intendevo dire che il selettore non è valido, intendevo dire che di certi selettori bisogna saper bene il loro funzionamento e quali conseguenze comportano al flusso della pagina, nel caso una persona non lo sappia allora si cerca sempre di usare le regole più semplici (come quelle che appunto ho indicato io) per cui se si dovesse presentare un problema, trovare la soluzione sarebbe molto più veloce e meno laborioso.

Una volta stilata una struttura molto semplice allora uno passa a rifinire tutte le varie positions (div contenenti moduli statici quali, header, footer..)
e si valuta l'utilizzo di altri selettori (come il tipo di position in questo argomento).

Questa come ho appena detto però è una strada che se pur più lunga consente a chi ha meno esperienza di capire meglio i funzionamenti dei vari selettori se non vuole leggersi le definizioni sui siti che li spiegano.

Sto solo dicendo: "Prima di correre bisogna imparare a camminare".

Poi non sapendo le conoscenze di chi scrive il codice è logico che i motivi per cui la struttura non funziona a modo possono essere molteplici, vai a sapere...

Il position relative non influisce sulla posizione nel flusso del documento. E comunque se io dico che #pinco deve avere tali CSS, quei CSS devono applicarsi, non è che visto che han "problemi" non si applicano.
Il problema li è che il codice è pieno di errori, tag non chiusi e cose del genere.

Chrome fa un dannato lavoro di auto correzione del codice (cosa a volta assurda e inconcepibile) che fa sì che anche la pagina scritta da uno scimpanzé abbia tutto il codice scritto correttamente.
Firefox ed Explorer se ne fregano, e si perdono nel codice.

http://validator.w3.org/check?uri=h...alidator/1.3+http://validator.w3.org/services

 

[Jonn]

<?php
		if (isset($_GET['req'])) 
				{
				switch($_GET['req'])
					{
						case "prod":
							echo '<div id="mycontainer">';
							require("inc/galleria.inc.php");
							echo('</div>');
							break;

						case "about":
							echo '<div id="mycontainer">';
							require("inc/chisiamo.inc.php");
							echo '</div>';
							break;

						case "dove":
							echo '<div id="mycontainer">';
							require("inc/dove.inc.php");
							echo '</div>';
							break;

						case "contact":
							echo '<div id="mycontainer">';
							require("inc/contact.inc.php");
							echo '</div>';
							break;

						case "qualita":
							echo '<div id="mycontainer">';
							require("inc/qualita.inc.php");
							echo '</div>';
							break;
					}
				}
				else{echo '<div id="mycontainer">';include('inc/home.inc.php');echo '</div>';}
?>

Appurato quindi che l'errore non è del CSS...
La soluzione di Fez Vrasta scritta in quel modo da un errore PHP, o non l'hai vista perchè il server lo nasconde all'output, oppure hai preso solo i case e lasciato IF ISSET come avevi inizialmente.
Te l'ho comunque riscritta correttamente
Quando la variabile non è settata (cioè nessun link cliccato) il server indica un errore rispondendo che non è definita la index.
In questo modo invece se la variabile è settata, esegue lo switch, altrimenti include home.inc.php.
Non omettere l'IF ISSET prima dello SWITCH.

 

[Fez Vrasta]

Non è un errore, è un notice.

default è fatto apposta per gestire quel tipo di situazioni.

 

[Fez Vrasta]

Se non vuoi il notice metti prima del mio codice:

if (!isset($_GET['req'])) { $_GET['req'] = ""; }

così non viene il notice ed usi comunque il default in modo da mantenere il codice pulito.

 

[MrClog]

Grazie,
ma la variabile la avevo già settata. Inizialmente avevo postato solo la parte di interesse :byebye:

grazie a tutti

 

[Fez Vrasta]

ok :byebye:

 

[Jonn]

Non è un errore, è un notice.

default è fatto apposta per gestire quel tipo di situazioni.

Si vabene.... tsk

Un notice è un errore che non ha importanza vitale ma che in certi casi con strutture PHP molto complesse possono generare problematiche.

Default serve solo per definire l'istruzione iniziale nel caso la variabile non abbia alcun valore di quelli contenuti nello switch, non per "gestire quel tipo di situazioni" cioè vedere se è inizializzata o meno.
Per questo motivo è corretto scrivere IF ISSET per controllare prima se la variabile è settata ed agire di conseguenza.
Ma che siamo tornati a scuola?

Che sia un errore significativo o meno è un altro discorso, sempre un errore rimane, rileggiti questa pagina fonzie:...
http://php.net/manual/en/function.error-reporting.php

 

[Fez Vrasta]

se fosse un errore si chiamerebbe ERROR, invece si chiama NOTICE.

E' una semplice notifica che indica che la variabile che stai utilizzando non è definita, niente di più. E può portare ad errori solo se la si usa per effettuare calcoli o se la si usa in funzioni specifiche.
Nel suo caso la variabile è usata solo nello switch e verrà utilizzata per cose più complesse solo nel caso sia definita. Nel caso non sia definita andrà soltanto a finire nel default dello switch.

Ho anche proposto una soluzione VALIDA per evitare il notice, la tua invece, che prevede di modificare completamente il mio script, non è valida e non è facilmente mantenibile, dato che se bisognasse aggiungere un IF per ogni variabile che si usa il codice diventerebbe un inferno.

Prima di fare il saccente con gente che con queste cose ci campa proverei a studiare un po' le buone prassi di scrittura del codice.
Ciao.

 

[Jonn]

Nel suo caso la variabile è usata solo nello switch e verrà utilizzata per cose più complesse solo nel caso sia definita. Nel caso non sia definita andrà soltanto a finire nel default dello switch.

Su questo sono d'accordo, ma gestire già dal principio la situazione prendendo in considerazione se la variabile è inizializzata o meno non è meglio?
In questo modo se il progetto dovesse ingrandirsi notevolmente, il problema del quale abbiamo discusso è da non prendere in considerazione e quindi non ci si perde tempo dietro su questo.
Meglio prevenire che curare.

Ho anche proposto una soluzione VALIDA per evitare il notice, la tua invece, che prevede di modificare completamente il mio script, non è valida e non è facilmente mantenibile, dato che se bisognasse aggiungere un IF per ogni variabile che si usa il codice diventerebbe un inferno.

Ma se è la stessa che aveva usato MrClog inizialmente!!! O.O
Ma se è lo stesso consiglio che hai dato tu 2 messaggi dopo il mio che poi hai scritto la stessa cosa!!! XD
SVEGLIA!!!
ahah, che sagoma XD

Prima di fare il saccente con gente che con queste cose ci campa proverei a studiare un po' le buone prassi di scrittura del codice.
Ciao.

Non ho parole, anzi solo una ..... patetico!

Comunque sia, anche basta con questa buffonata.

 

[Fez Vrasta]

fino a prova contraria io ho dato soluzioni valide alla risoluzione del problema, tu cosa hai fatto esattamente a parte dare la colpa al position:relative? No dai spiegamelo per favore.