abc84XXX
05-05-2008, 23:55
Ragazzi ho un problemone e chiedo a voi sperando che mi sappiate sbloccare la situazione in qualche modo. Stò realizzando un layout HTML\CSS partendo da un template in Photoshop (dal file psd).
Qui potete vedere il mio layout in costruzione: http://www.siatec.net/andrea/archivio/template/template.html
e quì invece un'immagine jpg di come dovrebbe venire fuori alla fine: http://www.siatec.net/andrea/archivio/template/img/TemplateFinal.jpg
Il mio grosso grosso problema sono i testi...non riesco proprio a dimensionarli nel modo corretto...
Per esempio Photoshop mi dice che il testo presente nei titoli dei box sulla colonna sinistra (le scritte su sfondo arancione come: "Recensione modelli") sono in Verdana con dimensione 13,4pt,
le scritte dei testi presenti nei box (su sfondo bianco come AAA AAAA BBB BBB nel primo box) hanno dimensione 11pt così come il testo nella colonna centrale...bene io sono andato ad inserire tali valori usando l'unità pt nel mio CSS e come potete vedere voi stessi dal link postato sopra vengono giganteschi...COME MAI?!?! sono abbastanza disperato...non sò come risolvere....il grafico mi ha detto di inserirli pari pari in pt come stanno sul file di photoshop da lui fornitomi ma nada...non funziona...che devo fare per risolvere? da che dipende? Ma poi perchè usare pt come unità di misura? non è meglio usare i px o gli em? perchè mi ha detto di usare i pt?
Vi posto anche i codice HTML e CSS...casomai se gli date un'occhiata ve ne sarei molto grato
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" href="default.css" type="text/css" />
</head>
<body>
<div id="centrato">
<div id="intestazione">
<div id="logo"></div>
<div id="spot1"></div>
</div>
<div id="mainmenu"></div>
<div id="corpo">
<div id="upperbox">
<div id="recefoto"></div>
<div id="spot2"></div>
</div>
<div id="colonna-1">
<div id="primo">
<div class="box1-top"><div>Recensioni modelli</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="boxsin">
<div class="contenuto_primo">AAA</div>
<div class="contenuto_primo">AAA</div>
<div class="contenuto_primo">AAA</div>
<div class="contenuto_primo">AAA</div>
<div class="contenuto_primo">AAA</div>
<div class="contenuto_primo">AAA</div>
</div>
<div class="boxdes">
<div class="contenuto_primo">BBB</div>
<div class="contenuto_primo">BBB</div>
<div class="contenuto_primo">BBB</div>
<div class="contenuto_primo">BBB</div>
<div class="contenuto_primo">BBB</div>
<div class="contenuto_primo">BBB</div>
</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
<div class="generic_sin_box">
<div class="box1-top"><div>Ultime 10 ricerche</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="boxsin">
<div class="contenuto_primo">Ricerca 1</div>
<div class="contenuto_primo">Ricerca 2</div>
<div class="contenuto_primo">Ricerca 3</div>
<div class="contenuto_primo">Ricerca 4</div>
</div>
<div class="boxdes">
<div class="contenuto_primo">Ricerca 5</div>
<div class="contenuto_primo">Ricerca 6</div>
<div class="contenuto_primo">Ricerca 7</div>
<div class="contenuto_primo">Ricerca 8</div>
</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
<div class="generic_sin_box">
<div class="box1-top"><div>Ultimi post e video</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="box1_single_cont">Post 1</div>
<div class="box1_single_cont">Post2</div>
<div class="box1_single_cont">Video 1</div>
<div class="box1_single_cont">Video 2</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
<div class="generic_sin_box">
<div class="box1-top"><div>Statistiche</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="box1_single_cont">Statistica 1</div>
<div class="box1_single_cont">Statistica 2</div>
<div class="box1_single_cont">Statistica 3</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
<div class="generic_sin_box">
<div class="box1-top"><div>Directpry</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="box1_single_cont">Adesivi</div>
<div class="box1_single_cont">Altro</div>
<div class="box1_single_cont">Annunci auto</div>
<div class="box1_single_cont">Aziende</div>
<div class="box1_single_cont">Moto</div>
<div class="box1_single_cont">Officine</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
</div>
<div id="colonna-2">
<div id="searchbox1"></div>
<div id="voci_articoli">
<div id="menu2"><p>Raduni - news - novità - ultimi raduni inseriti</p></div>
<div id="voci_articoli_sin">
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
</div>
<div id="voci_articoli_des">
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
</div>
<div id="art_home">
<p class="art_title">Invia la tua recensione</p>
<p class="art_testo">Invia il tuo articolo allo staff di Auto Elaborate utilizzando il MODULO DI INVIO, lo vedrai pubblicato in tempo reale. L'invio dell'articolo è completamente GRATUITO, così come la registrazione al sito. Per richieste particolari, aggiornamenti o recensioni fuori dalla norma, invia una mail a RECENSIONI ([email protected]) specificando il link della recensione da aggiornare.</p>
<p class="art_title">Di cosa tratta Auto Elaborate?</p>
<p class="art_testo">Il sito Auto Elaborate nasce dalla passione per l'Auto Tuning, fenomeno che colpisce i giovani e i meno giovani che si divertono nel personalizzare l'auto per uscire dall'anonimato.</p>
<p class="art_testo">L'idea è quella di creare un punto di incontro tra appassionati del settore e dare la possibilità ad ognuno di scrivere una recensione della propria auto potendo inserire anche le foto della propria auto elaborata.Ogni recensione ha la possiiblità di essere commentata e votata come ogni singola foto del tuning della propria autovettura.</p>
<p class="art_testo">Il sito contiene molti modelli di auto elaborate, ad esempio:</p>
<p class="art_testo">Peugeot Peugeot 1.1 tuning, Peugeot 206 tuning, Opel Astra Coupe' elaborate, Raduni Winterly and Summerly NCA modificate, Audi B5 Avant elaborate, VolksWagen Golf IV con elaborazioni, Renault Clio Renault elaborate, Raduni 1° Magik Tuning Day con elaborazioni, Ford Fiesta tuning, Opel Opel Tigra 1600 elaborate.</p>
<p class="art_testo">Su Auto Elaborate trovi tutto questo, e anche di piu !!!</p>
</div>
</div>
</div>
<div id="colonna-3">...</div>
</div>
</div>
<div>FOOTER<p>ALTRO FOOTER</p><p>ALTRO FOOTER</p></div>
</body>
</html>
CSS:
CSS:
body{
background-color: #20a6c1;
margin: 0;
padding: 0;
text-align: center; /* Per IE5.X/Win */
background-image: url(img/sfondobody.jpg);
background-repeat:repeat-x;
padding-top: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#centrato{
width: 966px;
margin: 0 auto;
text-align:left; /* Per IE5.X/Win */
}
#intestazione{
background-image: url(img/header.png);
width: 966px;
height: 137px;
padding: 0px;
}
#logo{
float: left;
background-image:url(img/logo.png);
background-repeat:no-repeat;
width: 190px;
min-height: 82px;
margin-left: 22px;
margin-top: 22px;
}
#spot1{
float: left;
background-image:url(img/publiheader.jpg);
width: 732px;
min-height: 94px;
margin-left: 5px;
margin-top: 15px;
}
#mainmenu{
background-image:url(img/menu.png);
background-repeat: repeat-x;
min-height: 47px;
padding: 0px;
}
#corpo{
background-image: url(img/sfondocorpo.png);
width: 966;
height: 1348px;
padding: 0px;
}
#upperbox{
min-height: 261px;
}
#recefoto{
float: left;
background-image: url(img/recefoto.jpg);
background-repeat: no-repeat;
width: 530px;
min-height: 243px;
margin-left: 22px;
margin-top: 16px;
}
#spot2{
float: left;
background-image: url(img/spot2.jpg);
background-repeat: no-repeat;
width: 355px;
min-height: 243px;
margin-left: 22px;
margin-top: 16px;
}
#colonna-1{
float: left;
width: 230px;
background: transparent;
}
#colonna-2{
float: left;
width: 530px;
background: transparent;
}
#colonna-3{
float: left;
width: 197px;
background: transparent;
}
/* Contenuto Colonna-1 */
#primo{
margin-left: 25px;
margin-top: 40px;
width: 208px;
}
.box1-top{
background-image: url(img/box/up-box1.png);
background-repeat: no-repeat;
height: 33px;
}
.box1-top div{
padding-top: 7px;
text-align: center;
color: #ffffff;
font-size: 13,4pt;
font-weight: bold;
}
.box1-sfondo{
background-image: url(img/box/sfondo-box1.png);
}
.box1-contenitore{
padding-top: 10px;
}
.boxsin{
float: left;
width: 104px;
background-image: url(img/box/des.png);
}
.boxdes{
float: left;
width: 104px;
background-image: url(img/box/sin.png);
}
.contenuto_primo{
padding-left: 20px;
text-align: left;
font-size: 11pt;
font-weight: normal;
}
.box1-footer{
clear: left;
width: 208px;
min-height: 26px;
background-image: url(img/box/bottom-box1.png);
background-repeat: no-repeat;
}
.generic_sin_box{
margin-left: 25px;
margin-top: 15px;
width: 208px;
}
.box1_single_cont{
padding-left: 20px;
font-size: 11pt;
font-weight: normal;
}
/* Contenuto Colonna-2 */
#searchbox1{
background-image: url(img/sfondosearch.png);
background-repeat: no-repeat;
width: 482px;
height: 64px;
margin-left: 20px;
margin-top: 40px;
}
#voci_articoli{
margin-left: 25px;
margin-top: 35px;
}
#voci_articoli_sin{
float: left;
width: 236px;
margin-right: 22px;
background: transparent;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
font-weight: bold;
}
#voci_articoli_des{
float: left;
width: 236px;
background: transparent;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
font-weight: bold;
}
#menu2{
color: #f58220;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bolder;
}
.art_title{
color: #f58220;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bolder;
padding-top: 45px;
clear: left;
}
.art_testo{
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
font-weight: bold;
}
Grazie
Abc
Qui potete vedere il mio layout in costruzione: http://www.siatec.net/andrea/archivio/template/template.html
e quì invece un'immagine jpg di come dovrebbe venire fuori alla fine: http://www.siatec.net/andrea/archivio/template/img/TemplateFinal.jpg
Il mio grosso grosso problema sono i testi...non riesco proprio a dimensionarli nel modo corretto...
Per esempio Photoshop mi dice che il testo presente nei titoli dei box sulla colonna sinistra (le scritte su sfondo arancione come: "Recensione modelli") sono in Verdana con dimensione 13,4pt,
le scritte dei testi presenti nei box (su sfondo bianco come AAA AAAA BBB BBB nel primo box) hanno dimensione 11pt così come il testo nella colonna centrale...bene io sono andato ad inserire tali valori usando l'unità pt nel mio CSS e come potete vedere voi stessi dal link postato sopra vengono giganteschi...COME MAI?!?! sono abbastanza disperato...non sò come risolvere....il grafico mi ha detto di inserirli pari pari in pt come stanno sul file di photoshop da lui fornitomi ma nada...non funziona...che devo fare per risolvere? da che dipende? Ma poi perchè usare pt come unità di misura? non è meglio usare i px o gli em? perchè mi ha detto di usare i pt?
Vi posto anche i codice HTML e CSS...casomai se gli date un'occhiata ve ne sarei molto grato
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" href="default.css" type="text/css" />
</head>
<body>
<div id="centrato">
<div id="intestazione">
<div id="logo"></div>
<div id="spot1"></div>
</div>
<div id="mainmenu"></div>
<div id="corpo">
<div id="upperbox">
<div id="recefoto"></div>
<div id="spot2"></div>
</div>
<div id="colonna-1">
<div id="primo">
<div class="box1-top"><div>Recensioni modelli</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="boxsin">
<div class="contenuto_primo">AAA</div>
<div class="contenuto_primo">AAA</div>
<div class="contenuto_primo">AAA</div>
<div class="contenuto_primo">AAA</div>
<div class="contenuto_primo">AAA</div>
<div class="contenuto_primo">AAA</div>
</div>
<div class="boxdes">
<div class="contenuto_primo">BBB</div>
<div class="contenuto_primo">BBB</div>
<div class="contenuto_primo">BBB</div>
<div class="contenuto_primo">BBB</div>
<div class="contenuto_primo">BBB</div>
<div class="contenuto_primo">BBB</div>
</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
<div class="generic_sin_box">
<div class="box1-top"><div>Ultime 10 ricerche</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="boxsin">
<div class="contenuto_primo">Ricerca 1</div>
<div class="contenuto_primo">Ricerca 2</div>
<div class="contenuto_primo">Ricerca 3</div>
<div class="contenuto_primo">Ricerca 4</div>
</div>
<div class="boxdes">
<div class="contenuto_primo">Ricerca 5</div>
<div class="contenuto_primo">Ricerca 6</div>
<div class="contenuto_primo">Ricerca 7</div>
<div class="contenuto_primo">Ricerca 8</div>
</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
<div class="generic_sin_box">
<div class="box1-top"><div>Ultimi post e video</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="box1_single_cont">Post 1</div>
<div class="box1_single_cont">Post2</div>
<div class="box1_single_cont">Video 1</div>
<div class="box1_single_cont">Video 2</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
<div class="generic_sin_box">
<div class="box1-top"><div>Statistiche</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="box1_single_cont">Statistica 1</div>
<div class="box1_single_cont">Statistica 2</div>
<div class="box1_single_cont">Statistica 3</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
<div class="generic_sin_box">
<div class="box1-top"><div>Directpry</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="box1_single_cont">Adesivi</div>
<div class="box1_single_cont">Altro</div>
<div class="box1_single_cont">Annunci auto</div>
<div class="box1_single_cont">Aziende</div>
<div class="box1_single_cont">Moto</div>
<div class="box1_single_cont">Officine</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
</div>
<div id="colonna-2">
<div id="searchbox1"></div>
<div id="voci_articoli">
<div id="menu2"><p>Raduni - news - novità - ultimi raduni inseriti</p></div>
<div id="voci_articoli_sin">
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
</div>
<div id="voci_articoli_des">
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
</div>
<div id="art_home">
<p class="art_title">Invia la tua recensione</p>
<p class="art_testo">Invia il tuo articolo allo staff di Auto Elaborate utilizzando il MODULO DI INVIO, lo vedrai pubblicato in tempo reale. L'invio dell'articolo è completamente GRATUITO, così come la registrazione al sito. Per richieste particolari, aggiornamenti o recensioni fuori dalla norma, invia una mail a RECENSIONI ([email protected]) specificando il link della recensione da aggiornare.</p>
<p class="art_title">Di cosa tratta Auto Elaborate?</p>
<p class="art_testo">Il sito Auto Elaborate nasce dalla passione per l'Auto Tuning, fenomeno che colpisce i giovani e i meno giovani che si divertono nel personalizzare l'auto per uscire dall'anonimato.</p>
<p class="art_testo">L'idea è quella di creare un punto di incontro tra appassionati del settore e dare la possibilità ad ognuno di scrivere una recensione della propria auto potendo inserire anche le foto della propria auto elaborata.Ogni recensione ha la possiiblità di essere commentata e votata come ogni singola foto del tuning della propria autovettura.</p>
<p class="art_testo">Il sito contiene molti modelli di auto elaborate, ad esempio:</p>
<p class="art_testo">Peugeot Peugeot 1.1 tuning, Peugeot 206 tuning, Opel Astra Coupe' elaborate, Raduni Winterly and Summerly NCA modificate, Audi B5 Avant elaborate, VolksWagen Golf IV con elaborazioni, Renault Clio Renault elaborate, Raduni 1° Magik Tuning Day con elaborazioni, Ford Fiesta tuning, Opel Opel Tigra 1600 elaborate.</p>
<p class="art_testo">Su Auto Elaborate trovi tutto questo, e anche di piu !!!</p>
</div>
</div>
</div>
<div id="colonna-3">...</div>
</div>
</div>
<div>FOOTER<p>ALTRO FOOTER</p><p>ALTRO FOOTER</p></div>
</body>
</html>
CSS:
CSS:
body{
background-color: #20a6c1;
margin: 0;
padding: 0;
text-align: center; /* Per IE5.X/Win */
background-image: url(img/sfondobody.jpg);
background-repeat:repeat-x;
padding-top: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#centrato{
width: 966px;
margin: 0 auto;
text-align:left; /* Per IE5.X/Win */
}
#intestazione{
background-image: url(img/header.png);
width: 966px;
height: 137px;
padding: 0px;
}
#logo{
float: left;
background-image:url(img/logo.png);
background-repeat:no-repeat;
width: 190px;
min-height: 82px;
margin-left: 22px;
margin-top: 22px;
}
#spot1{
float: left;
background-image:url(img/publiheader.jpg);
width: 732px;
min-height: 94px;
margin-left: 5px;
margin-top: 15px;
}
#mainmenu{
background-image:url(img/menu.png);
background-repeat: repeat-x;
min-height: 47px;
padding: 0px;
}
#corpo{
background-image: url(img/sfondocorpo.png);
width: 966;
height: 1348px;
padding: 0px;
}
#upperbox{
min-height: 261px;
}
#recefoto{
float: left;
background-image: url(img/recefoto.jpg);
background-repeat: no-repeat;
width: 530px;
min-height: 243px;
margin-left: 22px;
margin-top: 16px;
}
#spot2{
float: left;
background-image: url(img/spot2.jpg);
background-repeat: no-repeat;
width: 355px;
min-height: 243px;
margin-left: 22px;
margin-top: 16px;
}
#colonna-1{
float: left;
width: 230px;
background: transparent;
}
#colonna-2{
float: left;
width: 530px;
background: transparent;
}
#colonna-3{
float: left;
width: 197px;
background: transparent;
}
/* Contenuto Colonna-1 */
#primo{
margin-left: 25px;
margin-top: 40px;
width: 208px;
}
.box1-top{
background-image: url(img/box/up-box1.png);
background-repeat: no-repeat;
height: 33px;
}
.box1-top div{
padding-top: 7px;
text-align: center;
color: #ffffff;
font-size: 13,4pt;
font-weight: bold;
}
.box1-sfondo{
background-image: url(img/box/sfondo-box1.png);
}
.box1-contenitore{
padding-top: 10px;
}
.boxsin{
float: left;
width: 104px;
background-image: url(img/box/des.png);
}
.boxdes{
float: left;
width: 104px;
background-image: url(img/box/sin.png);
}
.contenuto_primo{
padding-left: 20px;
text-align: left;
font-size: 11pt;
font-weight: normal;
}
.box1-footer{
clear: left;
width: 208px;
min-height: 26px;
background-image: url(img/box/bottom-box1.png);
background-repeat: no-repeat;
}
.generic_sin_box{
margin-left: 25px;
margin-top: 15px;
width: 208px;
}
.box1_single_cont{
padding-left: 20px;
font-size: 11pt;
font-weight: normal;
}
/* Contenuto Colonna-2 */
#searchbox1{
background-image: url(img/sfondosearch.png);
background-repeat: no-repeat;
width: 482px;
height: 64px;
margin-left: 20px;
margin-top: 40px;
}
#voci_articoli{
margin-left: 25px;
margin-top: 35px;
}
#voci_articoli_sin{
float: left;
width: 236px;
margin-right: 22px;
background: transparent;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
font-weight: bold;
}
#voci_articoli_des{
float: left;
width: 236px;
background: transparent;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
font-weight: bold;
}
#menu2{
color: #f58220;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bolder;
}
.art_title{
color: #f58220;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bolder;
padding-top: 45px;
clear: left;
}
.art_testo{
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
font-weight: bold;
}
Grazie
Abc