Disperazione dimensionamento testo

**D4rkAng3l** · 05-05-2008, 23:53

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/archivi.../template.html

e quì invece un'immagine jpg di come dovrebbe venire fuori alla fine: http://www.siatec.net/andrea/archivi...plateFinal.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:

codice:

<!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">

Raduni - news - novità - ultimi raduni inseriti</p></div>
               
             <div id="voci_articoli_sin">
            
                

Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed                   interessante della provincia di Reggio Emilia</p>
               
                

Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed                   interessante della provincia di Reggio Emilia</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">
            
               

Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed                   interessante della provincia di Reggio Emilia</p>
               
                

Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed                   interessante della provincia di Reggio Emilia</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 (recensioni@autoelaborate.com)            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

ALTRO FOOTER</p>

ALTRO FOOTER</p></div>
</body>
</html>

**D4rkAng3l** · 05-05-2008, 23:54

CSS:

codice:

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
Andrea

**Mich_** · 06-05-2008, 09:00

Ho dato un'occhiata veloce al CSS, ed ho trovato questa perla:
font-size: 13,4pt;
Cosa significa?

Che significato ha la virgola? Non mi pare che si possano dare piu` parametri al font-size.
Se voleva essere un punto decimale (che comunque si fa con ilpunto, noncon la virgola), non credo sia possibile definire il font-size con misure frazionarie: vengono arrotondate all'intero secondo le regole dei singoli browser.

E perche` espresso in pt? I pt sono un'unita` di misura per la stampa, hanno poco significato su video

Altra cosa:
hai espresso tutte le dimensioni dei caratteri in px: ma i browser possono sovrascrivere quelle dimensioni, per cui non e` una misura affidabile: avrai grosse sorprese nel layout in qualche brwoser/sistema. Il Web non e` la carta, non si possono usare gli stessi metodi.

**D4rkAng3l** · 06-05-2008, 11:27

Già...il grafico mi aveva espressamente detto di usare i pt anche se mi sembrava strano perchè personalmente avevo sempre usato i px o gli em...ora si è deciso di usare i px...quindi con i px pensi che risolva completamente tale problema?

Grazie
Andrea

**Mich_** · 06-05-2008, 15:23

Quella riga e` SBAGLIATA, comunque la si guardi.
Correggere gli errori puo` essere utile per far funzionare le cose ...
Gia ` che ci sei passa dai validatori HTML e CSS: magari ci sono altri erorri di sintassi, che mi sono sfuggiti.

Comunque quel layout probabilmente funzionera` nel vostro browser, ma in molti altri browser non puo` funzionare, dato che avete definito misure fisse e piccole, che vengono sovrascritte dai browser. Basta fare una prova in qualsiasi browser serio (quindi escludendo IE) premendo control_+ (tastierino numerico): ottieni quello che visualizzano molte persone.

**D4rkAng3l** · 06-05-2008, 16:00

mmm purtroppo per i vari box dovevo farlo per forsa fisso, per risolvere l'eventuale inconveniete dei testi che ingranditi escono fuori dai box cosa potrei fare?c'è una soluzione razionale?

Grazie
Andrea

**Mich_** · 06-05-2008, 17:10

Come ho ripetuto fino alla nausea in questi giorni, ci sono ottimi layout pronti da copiare ed adattare che sono robusti rispetto alla variazione dei font.
Alcuni riferimenti sono anche riportati tra i "link utili".

Discussione: Disperazione dimensionamento testo

Strumenti discussione

Ricerca discussione

Visualizza

Disperazione dimensionamento testo

Permessi di invio