come fare curriculum con xml e css

Salve devo realizzare un curriculum vitae con l'xml e il css, ho provato a fare questo ma quando provo dal browser insieme al testo del curriculum mi escono una serie di linee e fasce colorate sparse, che sono intervallate da spazi bianchi, nell' insieme però è disordinatissimo, io invece vorrei che uscisse tutto allineato,  con un header un footer ecc.,credo di aver sbagliato qualcosa nel css ma nn so dove correggere e come correggere,  indicarmi per filo e per segno come e dove devo correggere il css, perche è la prima volta che mi trovo ad abbellire la struttura xml con i css, è mi trovo in difficcoltà

ecco l'xml:

<?xml version="1.0" encoding="iso-8859-1" ?>

<?xml:stylesheet href="currric2.css" type="text/css"?>

<curriculum>

         <dati>

                <nomecogn>webby webby81  </nomecogn>

                <indirizzo> Via Papuasia,14    </indirizzo>

                 <nascita> 05/07/1971     </nascita>

                 <cf>ooooooooooohdcg              </cf>

        <email> web.@.it    </email>

        </dati>

            <studi>

                   <diploma>

                           <titolo> Licenza scentifica         </titolo>

                           <istituto> Liceo  Parini RO </istituto>

                           <voto> 78/100            </voto>

                    </diploma>

                    <laurea>

                           <titolo> Laureata in Giusprudenza          </titolo>

                           <ateneo> Facoltà di Giurisprudenza BO </ateneo>

                           <voto> 104/110            </voto>

                    </laurea>

                    <corsi>

                            <istituto> professionale               </istituto>

                            <qualifica> Nessuno                </qualifica>

                    </corsi>

                </studi>

                <esplavoro>

                         <datore> nessuno             </datore>

                         <mansione> nessuna                 </mansione>

                         <durata> nessuna               </durata>

                 </esplavoro>

</curriculum>

 ecco il css:

curriculum

dati {margin:0 0 0 0;}

nomecogn {border-left:1px solid #ccc;

border-right:1px solid #ccc;

border-top:0px solid #ccc; border-bottom:0px solid #ccc;

  width:740px; margin-left:200px;

}

indirizzo {    background-color:red;

               padding:0 0 0 0;

        }

nascita { display:inline;

         height:80px;

         width:80px;

        border-width:2px;

        border-style:solid;

        margin:0 0 0 0;}

cf { display:inline;

        height:80px;

        font-size:30px;

        border-color:black;

        border-width:2px;

        border-style:solid;

        margin:0 0 0 0;}

titolo{    background-color:green;

           padding:0 0 0 0;

            }     

istituto{ display:inline;

        font-size:30px;

        padding:5px 15px 5px 15px; }

voto{color:black;  }

titolo {    background-color:gray;

        padding:10px 20px 0 20px;

        height:300px;}

ateneo{    background-color:yellow;

        padding:10px 20px 0 20px;

        height:100px;}

voto { background-color:black;

        padding:10px 20px 0 20px;

        height:100px; }

corsi

istituto{ background-color:purple;

        padding:10px 20px 0 20px;

        height:100px;  }

qualifica { background-color:blach;

        padding:10px 20px 0 20px;

        height:100px; }

esplavoro

datore {  background-color:yellow;

        padding:10px 20px 0 20px;

        height:100px; }

durata  {  background-color:yellow;

        padding:10px 20px 0 20px;

        height:100px; }

ecco come vorrei che uscisse il mio curriculum formattato con i css:

http://www.imontanari.it/csslayout/layout01f.html

Grazie per il vostro prezioso aiuto

inviato 8 anni fa
mela
mela
1
X 0 X

Così a colpo d'occhio senza entrare nello specifico:

1 - nel css non hai definito l'elemento curriculum

2 - nel css non hai definito l'elemento corsi

3 - nel css non hai definito l'elemento esplavoro

4 - non hai definito cosa vedere come blocco

5 - nomecogn ha una lunghezza di 740 px e un margine di 200px, assurdo per un nome e cognome (a anche le dimensioni per gli altri elementi)!

Come ti ho già scritto nel topic: css + layout senza spazi è meglio che prima vai a studiarti i css, non si può partire da zero.

Buon lavoro.

Edit:

Senza contare che l'esempio che hai riportato al link non è per un file xml ma per un html e che per lavorare con i file xml dovresti utilizzare XLS anzichè i css.

risposto 8 anni fa
LonelyWolf
modificato 8 anni fa
X 0 X

grazie per l'aiuto ora un pò l'ho migliorato ma nn del tutto dimmi per favore dove devo correggere e cosa devo aggiungere al nuovo css.

Eccolo:

curriculum {   display:block;

      font-size:12pt;

      color:black;

      }

dati {   display:block;

   color:red;

   background-color:pink;

                width:740px;

   margin-left:40px;

   }

nomecogn {display:block;

border-left:1px solid #ccc;

 border-right:1px solid #ccc;

 border-top:0px solid #ccc; border-bottom:0px solid #ccc;

  width:740px; margin-left:200px;

}

indirizzo {   display:block;

             background-color:red;

               padding:0 0 0 0;

        }

nascita { display:block;

                  height:80px;

         width:80px;

        border-width:2px;

        border-style:solid;

        margin:0 0 0 0;}

cf { display:block;

        height:80px;

        font-size:30px;

        border-color:black;

        border-width:2px;

        border-style:solid;

        margin:0 0 0 0;}

email {display:block;}

studi {display:block;

      background-color:red;}

titolo{   display:block;

          background-color:green;

           padding:0 0 0 0; } 

istituto{ display:block;

        font-size:30px;

        padding:5px 15px 5px 15px; }

voto{display:block;

     color:black;  }

laurea  {display:block;

      background-color:red;}       

titolo { display:block;

       background-color:gray;

        padding:10px 20px 0 20px;

        height:300px;}

ateneo{  display:block;

       background-color:yellow;

        padding:10px 20px 0 20px;

        height:100px;}

voto { display:block;

       background-color:red;

        padding:10px 20px 0 20px;

        height:100px; }

corsi    {display:block;

      background-color:gold;}

istituto{display:block;

       background-color:purple;

        padding:10px 20px 0 20px;

        height:100px;  }

qualifica { display:block;

      background-color:yellow;

        padding:10px 20px 0 20px;

        height:100px; }

esplavoro{   display:block;

      background-color:gold;}

datore { display:block;

      background-color:yellow;

        padding:10px 20px 0 20px;

        height:100px; }

durata  {  display:block;

        background-color:yellow;

        padding:10px 20px 0 20px;

        height:100px; }

P.S. so che l'esempio che ho linkato e riferito a l'html, volevo solo darti un idea su come volevo che fosse visualizzato il mio curriculum.

Un' altra precisazione che volevo farti è questa: conosco i css ma li ho sempre utilizzati con l'html e mai con l'xml, percui adesso mi trovo un pò  in difficoltà, per favore dimmi quali correzioni devo apportare

risposto 8 anni fa
mela
mela
1
X 0 X

la sintassi del css che usi non è comunque corretta, infatti mancano gli identificatori per specificare con che tipo di elemento hai a che fare.

risposto 8 anni fa
Andrea Turso
Andrea Turso
86
X 0 X

ma cos'è? :o io lavoro con l'xml con il css l'xml l'ho già fatto ora dovre corregere solo il css ma nn so cosa devo aggiungere o togliere o modificare al blocco dati che risulta sporgente rispetto agli atri blocchi

praticamente e la parte che sta subito sotto curriculum

il mio problema è capire come allineare il blocco dati agli altri blocchi, mi aiuti?

risposto 8 anni fa
mela
mela
1
X 0 X

Come ti ho detto nel post precedente, devi studiarti XSL per gli xml (nonostante i css possano funzionare + o - decentemente).

...ora dovre corregere solo il css ma nn so cosa devo aggiungere o togliere o modificare...

Probabilmente saranno da modificare le dimensioni impostate nel css?

Permettimi di dissentire ma non prenderla come un'offesa, i css non li conosci come dovresti, fai grossi errori e come ti scrissi nel post citato prima conviene che studi.

Non è mia abitudine fare il lavoro per altri, aiutarli a risolvere da soli i problemi lo faccio volentieri.

risposto 8 anni fa
LonelyWolf
X 0 X

allora dimmi come risolvere il problema

risposto 8 anni fa
mela
mela
1
X 0 X

Devi studiarti XSL, in alternativa usa pure il css ma definisci correttamente gli elementi con le caratteristiche.

risposto 8 anni fa
LonelyWolf
X 0 X

ma io lo devo fare in xml non in xsl

risposto 8 anni fa
mela
mela
1
X 0 X

Facciamo un po' di chiarezza:

CSS foglio di stile per definire come viene visualizzato un documento html

XML contenitore di dati, semplificando la cosa si può considerare come un database

XSL  foglio di stile per definire come viene visualizzato un documento xml

CSS = HTML Style Sheets

XSL = XML Style Sheets

A questo punto aggiungiamo che si può comunque usare un css anche per i file xml, ma non è la soluzione, ecco un esempio:

Il file xml (prendo un pezzo del tuo):

<?xml version="1.0" encoding="iso-8859-1" ?>
<?xml:stylesheet href="currric2.css" type="text/css"?> 

<curriculum>
         <dati>
                <nomecogn>webby webby81</nomecogn>
                <indirizzo> Via Papuasia,14</indirizzo>
                 <nascita> 05/07/1971</nascita>
                 <cf>ooooooooooohdcg</cf>
                 <email>web.@.it</email>
        </dati>
</curriculum>

Il css associato (imposto solo i colori per essere semplice):

curriculum {
display:block;
font-size:12pt;
}

dati {display:block;}
   
nomecogn {
display:block;
color:red;
}

indirizzo {
display:block;
color:green;
}

nascita {
display:block;
color:blue;
}

cf {
display:block;
color:red;
}
      
email {
display:block;
color:green;
}

Il risultato sarà:

webby webby81

Via Papuasia,14

05/07/1971

ooooooooooohdcg

web.@.it

Se invece usi un XSL (che non ti riporto perchè è più complesso e lungo da fare) per quel file xml puoi ottenere una cosa tipo:

Curriculum Vitae

Nome e Cognome: webby webby81

Indirizzo: Via Papuasia,14

Data di nascita: 05/07/1971

C.F.: ooooooooooohdcg

E-mail: web.@.it

risposto 8 anni fa
LonelyWolf
X 0 X

grazie molto esauriente, ho rislto il problema dell'allineamento mo ora vorrei mettere un' immagine ecco il nuovo css:

curriculum {  display:block;      margin:0;    text-align: center;    color: red;    font-family: helvetica, arial, verdana, tahoma, sans-serif;     border-left:1px solid #ccc;     border-right:1px solid #ccc;     border-top:0px solid #ccc; border-bottom:0px solid #ccc;     width:740px; margin-left:50px; margin-right:50px;        } dati {       border-left:1px solid #000;      border-right:1px solid #000;     margin-rigt:20px;     margin-left:20px;    margin-top:20px;    margin-bottom:0px;     width: 740px;    height: 100px;    border-top: 1px none;    border-bottom: 1px none;    background-color: #ff0000;    color: #000    }     nomecogn {    display:block;           margin:0;    width: 740px;    background: red;    text-align: center;    background-image: url('al_computer.jpg');    background-repeat: no-repeat;    background-position: left;    background-color: #ff0000;    color: blue;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em;    }     indirizzo {   display:block;           margin:0;    width: 740px;    background: red;    text-align: center;    color: blue;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em;    }     nascita { display:block;           margin:0;    width: 740px;    background: red;    text-align: center;    color: blue;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em;    }    cf {display:block;           margin:0;    width: 740px;    background: red;    text-align: center;    color: blue;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em;    }                               email {display:block;           margin:0;    width: 740px;    background: red;    text-align: center;    color: blue;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em;    }             studi { display:block;      border-left:1px solid #000; border-right:1px solid #000; margin:0 auto; width: 740px;    border-top: 0px none;    border-bottom: 0px none;    background: #fff;    color: #000;    text-align:center;    font-variant: small-caps;    font-size: 100%;    line-height: 1.8em;    padding-left: 1em;    padding-right: 1em; }         titolo{  display:block;           margin:0;    width: 740px;    background: pink;    text-align: center;    color: blue;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em;    }                               istituto{ display:block;           margin:0;    width: 740px;    background: pink;    text-align: center;    color: blue;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em;    }     voto{display:block;           margin:0;    width: 740px;    background: pink;    text-align: center;    color: blue;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em;    }         laurea  {    display:block;     text-align: center;    color: red;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;        }            titolo {      display:block;           margin:0;    text-align: center;    color: red;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em;    }               ateneo{   display:block;     text-align: center;    color: red;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;        }     voto { display:block;           margin:0;        text-align: center;    color: #red;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em;    }                         corsi    {     text-align:center;    background: #fff;    color: #940D1E;    padding-bottom: 0.3em;    font: normal 150% Georgia, "Times New Roman", Times, serif;    border-bottom: 1px dotted #FF9006; }        istituto{        display:block;           margin:0;    width: 740px;    background: blue;    text-align: center;    color: orange;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em; }                       qualifica {      display:block;           margin:0;    width: 740px;    background: blue;    text-align: center;    color: orange;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em; }     esplavoro{        margin-rigt:0;    margin-left:0;    margin-top:20px;    margin-bottom:0px;    width: 740px;    background: #ff66ff;    text-align: center;    color: black;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em; }        datore {display:block;           margin-rigt:0;    margin-left:0;    margin-top:20px;    margin-bottom:0px;    width: 740px;    background: #ff66ff;    text-align: center;    color: black;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em; }                       durata  {     display:block;     margin-rigt:0;    margin-left:0;    margin-top:20px;    margin-bottom:0px;    width: 740px;    background: #ff66ff;    text-align: center;    color: black;    border: 1px solid #000;    border-top: 1px;    border-bottom: 1px;    font-family: helvetica, arial, verdana, tahoma, sans-serif;    padding: 0.8em 0.8em; }                      

ecco l'xml:

<?xml version="1.0" encoding="iso-8859-1" ?> <?xml-stylesheet href="22.css" title="Modern" media="screen"   type="text/css"?> <curriculum> CURRICULUM VITAE          <dati>Dati               <nomecogn>mela-webby  </nomecogn>               <indirizzo> Indirizzo:Via Papuasia,14    </indirizzo>              <nascita> Data Di Nacita: 05/08/1981     </nascita>              <cf>ooooooooooohdcg              </cf>        <email> E-Mail: w@.it    </email>       </dati>          <studi> STUDI                 <diploma> DIPLOMA                        <titolo>  Titolo:Licenza scentifica             </titolo>                      <istituto> Istituto: Liceo Parini RO </istituto>                        <voto> 78/100            </voto>                </diploma>                <laurea> LAUREA                        <titolo>Titolo: Laureata in Giusprudenza          </titolo>                      <ateneo>Ateneo: la sapienza RO </ateneo>                        <voto> Voto:104/110         </voto>                </laurea>                <corsi>CORSI                        <istituto>Istituto:  Pacinotti               </istituto>                      <qualifica>Qualifica Nessuno                </qualifica>                </corsi>              </studi>             <esplavoro>ESPERIENZE DI LAVORO                      <datore>Datore: nessuno             </datore>                    <mansione>Mansione: nessuna                 </mansione>                    <durata>Durata: nessuna               </durata>               </esplavoro> </curriculum> </b>            

risposto 8 anni fa
mela
mela
1
X 0 X

L'immagine non puoi metterla con css+xml devi usare xsl.

risposto 8 anni fa
LonelyWolf
X 0 X

Ok grazie scusami se ti rispondo adesso ma ho finito di formmattare il mio curricum creato con xml e il css

mi indichi come mettere un immagine per favore?, ho bisogno di delucidazioni: devo mettere all'inizio questa dicitura:

<?xsl version="1.0" encoding="iso-8859-1" ?> <?xsl:stylesheet href="currric2.css" type="text/css"?>

 il css   rimane inalterato vero?

ciao a domani.

Aspetto chiarimenti

risposto 8 anni fa
mela
mela
1
X 0 X

Forse prima non sono stato abbastanza chiaro:

css+xml: vedi i dati contenuti nel file xml formattati come da css

xsl+xml: vedi i dati contenuti nel file xml, formattati e trasformati come da xsl con tutte le aggiunte che vuoi.

risposto 8 anni fa
LonelyWolf
X 0 X
Effettua l'accesso o registrati per rispondere a questa domanda