Layout con CSS: problema

[Sgnafurz]

Originariamente inviato da crazymac
No no, nessun editor online, si tratta di un refuso...
Il file "testi.css" è questo:
h1 {
font: verdana,helvetica,sans-serif;
font-size: 12px;
color: #000;
background: #7DA7D9;
font-weight: bold;
padding-top: .5em;
padding-bottom: .5em;
}
h2 {
font: verdana,helvetica,sans-serif;
font-size: 12px;
color: #000;
background: #aaa;
font-weight: bold;
padding-top: .5em;
padding-bottom: .5em;
}

Mi serve per colorare lo sfondo dei titoli ("editoriale", "ultime notizie" e così via): alla fine avrei accorpato i due css ma per mia praticità li tenevo separati.

senti ma perché qui hai i padding in em anziché in px?

[crazymac]

Originariamente inviato da Sgnafurz
senti ma perché qui hai i padding in em anziché in px?

Perchè temo di aver fatto un po' di casino...
Inizialmente avevo provato a mettere le varie spaziature in em, accorgendomi poi che mi era più conveniente ragionare in px.
Forse sarebbe meglio ripulire un po' il codice prima di postarlo... (/me si vergogna)

[Marcolino's]

Perchè fa troppi copia e incolla

Comunque se vuoi che lo legga, invece di:

<style type="text/css" media="screen">
@import url(layout.css);
</style>
<style type="text/css" media="screen">
@import "testi.css";
</style>

devi fare così:

<style type="text/css" media="screen">
@import url(layout.css);
@import url(testi.css);
</style>

[crazymac]

Originariamente inviato da Marcolino's
Perchè fa troppi copia e incolla

Veramente si tratta solo di copia... :tongue:
Cerco sempre di imparare la sintassi delle cose che non conosco da quelle che trovo sui tutorial (e che so funzionanti): in questo caso comunque ero curioso di vedere come funzionava la spaziatura in em piuttosto che quella in px (dato che non l'avevo mai vista), dimenticandomi poi di riconvertirla.
BTW, mille grazie per la correzione dell' @import!

[Marcolino's]

Comunque un em circa quasi 10 pixel

[K2208]

Originariamente inviato da Marcolino's
Comunque un em circa quasi 10 pixel

Em non ha un corrispettivo in px, ma funziona come le percentuali,
0.70 em (o .7em)= 70%, è cosigliabile usarlo per il testo, non per padding.
Se i caratteri (nel browser)sono impostati di default a 10px,
ecco allora che mettento la gtandezza dei caratteri a 1em (o 100%)
1em arriva a valere circa 10px, ma se si costruisce un box e gli si da "width:1em" il box occuperà tutto lo schermo in lunghezza.

[crazymac]

Proprio nessuno che riesca a darmi un aiuto?

[Shores]

Beh, allora, cominciamo con le cose semplici:

1) i fogli di stile sono case sensitive, e vanno scritti MINUSCOLI!!!!

2) Gli attributi border li hai usati in modo sbagliato:
border-top: 1px solid red;

cioè:
border-top: spessore stile colore;

E non in altri ordini.

3)E' pericoloso usare contemporaneamente margin e padding, poichè IE si comporta in modi molto strani, al riguardo, anche in dipendenza dai diversi DOCTYPE che puoi mettere in cima al documento.

Ed ora veniamo alle cose più complesse.

Se quel che volevi era ottenenre una colonna laterale sinistra (per intenderci, "ultime uscite") a dimensioni fisse, perchè usare poistion:absolute? è molto più conveniente usare i float, che ti permettono di avere il tutto sempre ben posizionato.

Per capirci: la div ultime uscite dovrebbe avere un position:relative; e un float:left; ed essere CONTENUTA nella div notizie:

div notizie
   div ultime con float left
       contenuto ultime uscite
   div
   contenuto notizie
   div vuota a larghezza uguale alla notizie con clear:both
   div
div

L'ultima div vuota con clear:both; ti garantisce che la div notizie sarà sempre alta come la div ultime uscite.

Altra cosa: non so se sia già così, ma tutti i bordi bianchi che corrono orizzontali lungo tutta la larghezza della pagina dovrebbero essere assegnati alle div sopra o sott, che appunto corrono per tutta la larghezza, e non a ultime o notizie che non occupano tutta la larghezza.

Ciao!