Back to top

rss feed
« precedente successivo »
Pagine: [1]   Vai giù

Autore Topic: Perchè ci sono questi bordi?  (Letto 1586 volte)

Offline cuordileone

  • Appassionato
  • ***
  • Post: 775
    • Mostra profilo
Perchè ci sono questi bordi?
« il: 20 Feb 2010, 13:22:07 »
Salve. Per il mio sito http://informazionepura.it stavo cercando di creare un nuovo template tutto da capo.

Tra il Logo e il 3top c'è però una distanza (come mostra la foto) che non mi spiego, e vorrei sapere da voi come faccio a ridurla ad un solo pixel.

Grazie.

Vi allego il codice che ho scritto sinora:

Codice: [Seleziona]
@charset "utf-8";
/* CSS Document */
body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFFF99;
margin: 0;
padding: 5px 5px 5px 5px;
text-align: center;
color: #000000;
}
.classetutto #contenitore {
width: 980px; 
background: #FFFFCC;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.classetutto #header {
background: #DDDDDD;
width: 980px; 
padding: 0 0 0 0; 
}
.classetutto #header h1 {
margin: 0;
padding: 0 0;
}
.classetutto #headermetasx {
margin: 1px 1px 1px 1px;
background: #FF0000;
padding: 0 0px 0 0px; 
float: left;
height: 282px;
width: 338px;
}
.classetutto #headermetadx {
margin: 1px 1px 1px 1px;
background: #0000FF;
padding: 0 0px 0 0px; 
float: right;
height: 282px;
width: 638px;
}
.classetutto #logo {
background: #DDDDDD;
margin: 1px 1px 1px 1px;
padding: 0 0px 0 0px; 
float: none;
height: 115px;
width: 636px;
}
.classetutto #tretop {
background: #99FF33;
margin: 1px 1px 1px 1px;
padding: 0 0px 0 0px; 
float: none;
height: 163px;
width: 636px;
}
.classetutto #sidebar1 {
float: left;
width: 150px;
background: #EBEBEB;
padding: 0px 0px 0px 0px;
}
.classetutto #sidebar2 {
float: right;
width: 160px;
background: #EBEBEB;
padding: 0px 0px 0px 0px;
}
.classetutto #mainContent {
margin: 0 200px;
padding: 0 0px;
}
.classetutto #footer {
padding: 0 0px 0 0px;
background:#DDDDDD;
}
.classetutto #footer p {
margin: 0;
padding: 0px 0;
}
.fltrt {
float: right;
margin-left: 1px;
}
.fltlft {
float: left;
margin-right: 1px;
}
.clearfloat {
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
[allegato vecchio più di un anno eliminato automaticamente]
« Ultima modifica: 20 Feb 2010, 13:25:45 da sbattitene »
Connesso
We-News | Paid-To-Write | Guadagnare scrivendo articoli.

Oslino

  • Visitatore
Re:Perchè ci sono questi bordi?
« Risposta #1 il: 20 Feb 2010, 13:54:23 »
Ci vorrebbe anche l'html, ma così a occhio vedo un sacco di codice inutile e/o ripetuto.
« Ultima modifica: 20 Feb 2010, 14:06:45 da Oslino »
Connesso

Offline cuordileone

  • Appassionato
  • ***
  • Post: 775
    • Mostra profilo
Re:Perchè ci sono questi bordi?
« Risposta #2 il: 20 Feb 2010, 14:09:03 »
Io vedo un ...
Citazione
.classetutto #headermetasx
... ed un ...
Citazione
.classetutto #headermetadx

1) Dov'è che è doppio?

2) In che senso html?
Connesso
We-News | Paid-To-Write | Guadagnare scrivendo articoli.

Oslino

  • Visitatore
Re:Perchè ci sono questi bordi?
« Risposta #3 il: 20 Feb 2010, 14:18:26 »
Infatti avevo visto male io e avevo già cancellato.

In codice inutile è in tutte le dichiarazioni di margin e padding a zero.

Invece di

Codice: [Seleziona]
padding: 0 0px 0 0px;

basta mettere

Codice: [Seleziona]
padding: 0;

per l'html bisognerebbe vedere come hai nidificato i vari elementi e che tipo di elementi sono.
Connesso

Offline cuordileone

  • Appassionato
  • ***
  • Post: 775
    • Mostra profilo
Re:Perchè ci sono questi bordi?
« Risposta #4 il: 20 Feb 2010, 14:36:55 »
Ecco le nidificazione del file index.php ...

Dimmi te:

Codice: [Seleziona]
<body class="classetutto">

<div id="contenitore">
  <div id="header">
     <div id="headermetasx">
         <h3>Contenuto headermetasx</h3>
     </div>
     <div id="headermetadx">
         <div id="logo">
         <h5>Logo</h5>
         </div>
         <div id="tretop">
         <h5>3top</h5>
         </div>
     </div>
  <!-- end #header --></div>
  <div id="sidebar1">
  <?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="" />
<?php endif; ?>
  <!-- end #sidebar1 --></div>
  <div id="sidebar2">
    <h3>Contenuto Sidebar2</h3>
    <p>BLA BLA BLA BLA BLA. </p>
    <p>BLA BLA BLA BLA BLA. </p>
  <!-- end #sidebar2 --></div>
  <div id="mainContent">
    <h1> Contenuto principale</h1>
    <p>BLA BLA BLA BLA BLA. </p>
    <h2>Titolo di livello H2 </h2>
    <p>BLA BLA BLA BLA BLA. </p>
<!-- end #mainContent --></div>
<!-- Questo elemento di clearing deve seguire immediatamente il div #mainContent al fine di forzare il div #container a contenere tutti i float di livello inferiore --><br class="clearfloat" />
  <div id="footer">
    <p>Piè di pagina</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
« Ultima modifica: 20 Feb 2010, 14:40:14 da sbattitene »
Connesso
We-News | Paid-To-Write | Guadagnare scrivendo articoli.

Oslino

  • Visitatore
Re:Perchè ci sono questi bordi?
« Risposta #5 il: 20 Feb 2010, 14:53:20 »
Togli quei due <h5> (o metti nel css  "h5 {margin:0}") e hai risolto il problema.

Quello è lo spazio che di default viene messo nei tag titolo.
Connesso

Offline cuordileone

  • Appassionato
  • ***
  • Post: 775
    • Mostra profilo
Re:Perchè ci sono questi bordi?
« Risposta #6 il: 20 Feb 2010, 15:13:38 »
Non ho ben capito.
Lo dovrei scriver così?

Codice: [Seleziona]
/* Headers */
h1, h2, h3, h4 {
margin: 0;
font: bold 1em/1.5em Arial, Helvetica, sans-serif;
color: #000;
padding: 0px 0px;
}
h1 { font-size: 150%; font-weight: normal; margin: 0; }
h2 { font-size: 175%; font-weight: bold; margin: 0; }
h3 { font-size: 200%; font-weight: bold; margin: 0; }
h4 { font-size: 225%; margin: 0; }
Non ho ottenuto il risultato sperato ... Come mai?
Connesso
We-News | Paid-To-Write | Guadagnare scrivendo articoli.

Oslino

  • Visitatore
Re:Perchè ci sono questi bordi?
« Risposta #7 il: 20 Feb 2010, 15:17:56 »
Per forza non funziona... non hai messo l'unico tag che ti avevo detto di mettere... H5.

E non continuare a ripetere codice inutile (vedi "margin")

Te lo riscrivo, anche se non ho capito perchè al diminuire dell'importanza del titolo, ne fai aumentare il carattere font-size:

Codice: [Seleziona]
/* Headers */
h1, h2, h3, h4, h5 {
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   color: #000;
   padding: 0px 0px;   
}

h1 { font-size: 150%; font-weight: normal;}
h2 { font-size: 175%; font-weight: bold;}
h3 { font-size: 200%; font-weight: bold;}
h4 { font-size: 225%;}
h5 { font-size:250%; }
« Ultima modifica: 20 Feb 2010, 15:25:58 da Oslino »
Connesso

Offline cuordileone

  • Appassionato
  • ***
  • Post: 775
    • Mostra profilo
Re:Perchè ci sono questi bordi?
« Risposta #8 il: 20 Feb 2010, 15:31:31 »
Ottimo .. ps. Secondo te come grandezza vanno bene questi?

Codice: [Seleziona]
h1 { font-size: 200%; font-weight: bold; }
h2 { font-size: 160%; font-weight: bold; }
h3 { font-size: 140%; font-weight: bold; }
h4 { font-size: 120%; font-weight: bold; }
h5 { font-size: 100%; font-weight: bold; }
h6 { font-size: 90%; font-weight: bold; }
Connesso
We-News | Paid-To-Write | Guadagnare scrivendo articoli.

Oslino

  • Visitatore
Re:Perchè ci sono questi bordi?
« Risposta #9 il: 20 Feb 2010, 15:46:14 »
In primis togliere quel "bold". Di default i titoli sono già in bold.

Poi la grandezza va a gusto e dipende anche dal contesto della grafica. Devi provare e vedere come ti piace di più o come sta meglio.

Comunque studiati meglio la struttura dell'html che così com'è mi sa ti darà molti problemi.

Ciao.
Connesso

Offline cuordileone

  • Appassionato
  • ***
  • Post: 775
    • Mostra profilo
Re:Perchè ci sono questi bordi?
« Risposta #10 il: 20 Feb 2010, 19:03:53 »
Grazie mille. Se mi sai dare una mano anche qui: http://forum.joomla.it/index.php/topic,95907.msg422554.html#msg422554

 ;D
Connesso
We-News | Paid-To-Write | Guadagnare scrivendo articoli.
Pagine: [1]   Vai su
« precedente successivo »
 



Web Design Bolzano Kreatif


Copyleft: Tutto il materiale pubblicato o comunque presente all'interno del sito www.joomla.it
può essere utilizzato, diffuso e modificato liberamente.
Hosting fornito gratuitamente da Joomlahost.it
Disegno web da kreatif multimedia srl