Salve a tutti,
sono nuovo del forum e non mi sono ancora presentato, mi chiamo Manuel Reza.
Vi scrivo per chiedervi aiuto su una pagina HTML che ho scritto per redarre il mio CV.
Allego il file HTML, purtroppo non posso inviare degli spezzoni perché il problema non è molto localizzato
Strutturandolo con tanti blocchi ho introdotto molti div magari non necessari, pensando di garantire la maggior flessibilità possibile. Siccome ho utilizzato Notepad++ con un plug-in per l'HTML, la chiusura di ogni blocco era scritta automaticamente.codice:<html> <head> <title> Manuel Reza - Curriculum Vitae </title> <style type = "text/css"> * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @page { size: 210mm 297mm; margin: 30mm; } body { font-family: Georgia, Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; } .titolo { width: 80%; margin-bottom: 10px; margin-top: 15px; border-right: dotted; border-bottom: dotted; border-width: 1px; padding-left: 35px; padding-right: 5px; text-align: right; } #intestazione { margin: 0 auto; width: 170mm; border-bottom: solid; text-align: center; } h1{ padding: 0px; margin: 0px; } h2{ padding: 0px; margin: 0px; } h6{ font-style: italic; font-size: 8pt; text-align: center; } .content { text-align: justify; } .blocco { margin-bottom: 5px; padding: 0px; } .periodo { float: left; width: 40mm; padding-right: 4mm; font-weight: bold; text-align: left; overflow: hidden; } .esperienza { float: left; width: 128mm; padding: 0px; } .clearer { float: none; clear: left; padding: 5px; } </style> </head> <body> <div id = "intestazione"> <h1>Manuel Reza - Curriculum Vitae</h1> </div> <div class = "titolo" id = "dati"> <h2>Dati personali</h2> </div> <div class = "content"> Manuel Reza <br> [...] Email: <a href = "mailto:ma.reza29@gmail.com">ma.reza29@gmail.com</a> </div> <div class = "titolo" id = "formazione"> <h2>Formazione</h2> </div> <div class = "content"> <div class = "blocco"> <div class = "periodo"> Settembre 2011 - Dicembre 2013: </div> <div class = "esperienza"> Laurea Magistrale in Ingegneria Elettronica, indirizzo fotonica <br> – Università degli Studi di Pavia, Pavia. <br> Votazione finale: 110/110 e lode. <br> Tesi: <i>“Characterization of HgGa2S4-based nanosecond optical parametric oscillators”.</i> </div> <div class = "clearer" /> </div> <div class = "blocco"> <div class = "periodo"> Settembre 2008 - Ottobre 2011: </div> <div class = "esperienza"> Laurea Magistrale in Ingegneria Elettronica e delle Telecomunicazioni <br> – Università degli Studi di Pavia, Pavia. <br> Votazione finale: 109/110. <br> Tesi: <i>Studio di nuovi materiali per la realizzazione di guide d’onda integrate</i> </div> <div class = "clearer" /> </div> <div class = "blocco"> <div class = "periodo"> Settembre 2003 - Luglio 2008: </div> <div class = "esperienza"> Diploma di Maturità scientifica <br> Liceo Scientifico T. Taramelli, Pavia. Votazione finale:78/110. </div> <div class = "clearer" /> </div> </div> <div class = "titolo"> <h2>Esperienze professionali</h2> </div> <div class = "content"> <div class = "blocco"> <div class = "periodo"> 2004 - oggi: </div> <div class = "esperienza"> Ristorante La Roggia s.a.s, Rosate (Milano). <br> Cameriere in sala. </div> <div class = "clearer" /> </div> <div class = "blocco"> <div class = "periodo"> Marzo 2013 - Settembre 2013: </div> <div class = "esperienza"> Max-Born Institute for Nonlinear Optics and Ultrafast Spectroscopy, Berlino (Germania). <br> Ricercatore: studio di sistemi laser (OPO), misure e analisi di dati, simulazioni. </div> <div class = "clearer" /> </div> <div class = "blocco"> <div class = "periodo"> Settembre 2011 - Febbraio 2013: </div> <div class = "esperienza"> Università degli Studi di Pavia, Pavia. <br> Tutor universitario: esercitazioni per gli studenti, assistenza agli esami. </div> <div class = "clearer" /> </div> </div> <div class = "titolo"> <h2>Conoscenze linguistiche</h2> </div> <div class = "content"> <ui> <li><b>Inglese:</b> fluente - First Certificate in English (FCE), Marzo 2009</li> <li><b>Tedesco:</b> elementare</li> </ui> </div> <div class = "titolo"> <h2>Conoscenze informatiche</h2> </div> <div class = "content"> <ui> <li>Ottima padronanza del pacchetto Microsoft Office e analoghi e capacità di lavorare su diversi sistemi operativi (Windows, Mac OS X, Linux);</li> <li>[...]</li> <li>padronanza di software di simulazione. padronanza di software per l'analisi dei dati.</li> </ui> </div> <div class = "titolo"> <h2>Altre competenze</h2> </div> <div class = "content"> <ui> <li>Conoscenze amatoriali di fotografia, apparecchiature fotografiche e strumenti di ripresa.</li> <li>Operatore laico BLSD - Basic Life Support and Defibrillation</li> </ui> </div> <h6>Autorizzo il trattamento dei miei dati personali ai sensi del D.Lgs. 196/2003.</h6> </body> </html>
Quando però facevo delle modifiche con il css alla classe "blocco", la quale ha una proprietà float, esse si riflettevano su tutti i blocchi successivi, pur essendomi assicurato di inserire una classe clearer dopo ciascun div "blocco".
Ho quindi aperto il file con il DevTools di Chrome e l'analisi mi ha permesso di rilevare una gerarchia di div non corrispondente a quello che ho scritto: in particolare la classe "blocco" dopo la classe con id "formazione" contiene il rimanente contenuto, quando invece dovrebbe avere altri fratelli "blocco".
La cosa strana è che per altri div "blocco" il discorso funziona proprio come l'avevo pensato! Quale può essere il problema? Forse non ho capito bene il discorso della gerarchia html.
Rispondi quotando