[CSS]Padding

**21Edoardo96** · 30-10-2013, 19:57

Ciao,
sto facendo questo sito usando il css ma, ho dei problemi con il box centrale. In particolare il problema è : anche se metto il padding il testo (quello in rosso) non va a capo ma continua sparendo sotto il box successivo.

Index

codice:

<!doctype html>
<html>
 <head>
  <title>Officine Sala</title>
  <link rel="stylesheet" type="text/css" href="esterno.css"/>
 </head>
 <body>
  <div class="titolo">
   <h1 class="scruggine grassetto">Officine Sala</h1>
  </div>
  <div class="logo">
   <img src="logo.jpg" title="Le mitiche chiavi inglesi">
  </div>
  <div class="lavorazioni">
   <h3 class="tit">Nostre lavorazioni</h3>
       <ul class="elenco">
    <li><a class="link" href="ele.html">Elettrovalvole</li>
    <li><a class="link" href="">Corpi valvole</li>
    <li><a class="link" href="">Torniture speciali</li>
  </div>
  <div class="centro">
   <h3 class="tit">Storia</h3>
   <p> Le officine Sala e' costruzione e lavorazione di pezzi speciali su disegno di medie e grandi dimensioni, con macchine a CNC</br>
         supportate da sistema CAD CAM. L' azienda  e' specializzata nella tornitura verticale diametro 5.000, </br>
    nella fresatura 10.000 x 3.000 e nella tornitura parallela diametro 1.250 x 12.000. </br>
       Officine Sala dal 1989 al vostro servizio. </br>
   </p>
  </div>
  <div class="destra">
  
  </div>
  <div class="footer">
   <p>Per problemi contatta il <a class="link" href="mailto:officinesala@virgilio.it ?subject=Maggiori informazioni" >webmaster</p>
  </div>
 </body>
</html>

Pagina in cui vi è problema

codice:

<!doctype html>
<html>
 <head>
  <title>Officine Sala</title>
  <link rel="stylesheet" type="text/css" href="esterno.css"/>
 </head>
 <body>
  <div class="titolo">
   <h1 class="scruggine grassetto">Officine Sala</h1>
  </div>
  <div class="logo">
   <img src="logo.jpg" title="Le mitiche chiavi inglesi">
  </div>
  <div class="lavorazioni">
   <h3 class="tit">Nostre lavorazioni</h3>
       <ul class="elenco">
    <li>Elettrovalvole</li>
    <li>Corpi valvole</li>
    <li>Torniture speciali</li>
  </div>
  <div class="centro">
   <h3 class="tit">Elettrovalvole</h3>
   <p> L'elettrovalvola e' funzionalmente un rubinetto che consente il passaggio di un fluido (liquido o gassoso) attraverso il varco individuato dalla valvola stessa.
    L'elettro nel nome indica che l'attuatore dell'azionamento meccanico della valvola, tradizionalmente un operatore umano od un rinvio meccanico predisposto, 
    viene sostituito da un attuatore comandato elettricamente, solitamente un solenoide.
   </p>
  </div>
  <div class="destra">
  
  </div>
  <div class="footer">
   <p>Per problemi contatta il <a class="link" href="mailto:officinesala@virgilio.it ?subject=Maggiori informazioni" >webmaster</p>
  </div>
 </body>
</html>

CSS esterno

codice:

.logo
{
 position:absolute;
 width:24%; /*Così facendo mantiene la distanza dallo schermo */
 height:20%;
 left:75%;
}
.titolo
{
 position:absolute;
 width:75%;
 height:20%;
 text-align:center;
 background-color:#FFD700;/* Colore oro */
}
.lavorazioni
{
 position:absolute;
 width:30%;
 height:70%;
 text-align: justify;
 top:20.9%; /* Così non si sovrapone a quello superiore */
 background-color: #FF2400; /*Colore scarlatto*/
 padding:2%;
}
.centro
{
 position:absolute;
 width:50%;
 height:70%;
 left:30%;
 top:20.9%;
 text-align:justify;
 background-color:#808000; /*Colore verde oliva */
 padding:2%; /* Con explorer non c'è bisogno di modificare altezza e larghezza */
 
}
.destra
{
 position:absolute;
 width:19%; /* Così facendo mantiene la distanza dallo schermo */
 height:70%;
 left:80%;
 top:20.9%;
 text-align:center;
 background-color: #4682b4; /*Colore blu acciaio */
}
.footer
{
 position:absolute;
 width:98.6%; /*Così facendo mantiene la distanza dallo schermo */
 height:9.5%;
 top:90.6%;
 text-align:center;
 background-color:#C0C0C0; /*colore argento*/
}
img{height:100%; width:100%;}
.scruggine{color:#B7410E;} /* Colore ruggine */
.grassetto{font-weight:bold;} 
.elenco{list-style-type:square;}
a.link:link {color: blue;}
a.link:visited{color: brown;} 
a.link:hover {color:#8F00FF;} /* Quando il muose passa sopra al link questo diventa di colore viola */
a.link:active {color:lime} 
h3.tit {color: rgb(0%, 75%, 0%); text-transform: uppercase; font-family: Comic Sans MS; text-align: center;}

Ciao e grazie

**21Edoardo96** · 30-10-2013, 23:03

Ok, grazie ora ho un ultimo problema però: che tutto il testo mi viene visto come un link come mai?

codice:

<!doctype html>
<html>
 <head>
  <title>Officine Sala</title>
  <link rel="stylesheet" type="text/css" href="esterno.css"/>
 </head>
 <body>
  <div class="titolo">
   <h1 class="scruggine grassetto">Officine Sala</h1>
  </div>
  <div class="logo">
   <img src="logo.jpg" title="Le mitiche chiavi inglesi">
  </div>
  <div class="lavorazioni">
   <h3 class="tit">Nostre lavorazioni</h3>
       <ul class="elenco">
    <li><a class="link" href="index.html">Home</li>
    <li><a class="link" href="">Corpi valvole</li>
    <li><a class="link" href="">Torniture speciali</li>
   </ul>
  </div>
  <div class="centro">
   <h3 class="tit">Elettrovalvole</h3>
   <p> L'elettrovalvola e' funzionalmente un rubinetto che consente il passaggio di un fluido (liquido o gassoso) attraverso il varco individuato dalla valvola stessa.
    L'elettro nel nome indica che l'attuatore dell'azionamento meccanico della valvola, tradizionalmente un operatore umano od un rinvio meccanico predisposto, 
    viene sostituito da un attuatore comandato elettricamente, solitamente un solenoide.
   </p>
  </div>
  <div class="destra">
  
  </div>
  <div class="footer">
   <p>Per problemi contatta il <a class="link" href="mailto:officinesala@virgilio.it ?subject=Maggiori informazioni" >webmaster</p>
  </div>
 </body>
</html>

codice:

.logo
{
 position:absolute;
 width:24%; /*Così facendo mantiene la distanza dallo schermo */
 height:20%;
 left:75%;
}
.titolo
{
 position:absolute;
 width:75%;
 height:20%;
 text-align:center;
 background-color:#FFD700;/* Colore oro */
}
.lavorazioni
{
 position:absolute;
 width:30%;
 height:70%;
 text-align: justify;
 top:20.9%; /* Così non si sovrapone a quello superiore */
 background-color: #FF2400; /*Colore scarlatto*/
 padding:2%;
}
.centro
{
 position:absolute;
 width:46%;
 height:70%;
 left:30%;
 top:20.9%;
 text-align:justify;
 background-color:#808000; /*Colore verde oliva */
 padding:2%; /* Con explorer non c'è bisogno di modificare altezza e larghezza */
 
}
.destra
{
 position:absolute;
 width:19%; /* Così facendo mantiene la distanza dallo schermo */
 height:70%;
 left:80%;
 top:20.9%;
 text-align:center;
 background-color: #4682b4; /*Colore blu acciaio */
}
.footer
{
 position:absolute;
 width:98.6%; /*Così facendo mantiene la distanza dallo schermo */
 height:9.5%;
 top:90.6%;
 text-align:center;
 background-color:#C0C0C0; /*colore argento*/
}
img{height:100%; width:100%;}
.scruggine{color:#B7410E;} /* Colore ruggine */
.grassetto{font-weight:bold;} 
.elenco{list-style-type:square; color:blue;} /* Coloro anche i quadratini */
a.link:link {color: blue;}
a.link:visited{color: brown;} 
a.link:hover {color:#8F00FF;} /* Quando il muose passa sopra al link questo diventa di colore viola */
a.link:active {color:lime;} 
h3.tit {color: rgb(0%, 75%, 0%); text-transform: uppercase; font-family: Comic Sans MS; text-align: center;}

Ciao e grazie

Discussione: [CSS]Padding

Strumenti discussione

Ricerca discussione

Visualizza

[CSS]Padding

Permessi di invio