Contenitori:

**william.s** · 16-04-2008, 22:06

Io vorrei provare a fare una home page impaginandola con i contenitori, che a quanto mi pare di capire danno un ordine simile a quello delle tabelle html ma molto più dettagliato e dall'effetto estetico, aderente alla pagina.

Qualcuno mi sa dire come potrei procedere?

:berto:

Vorrei collegare uno o più contenitori a fogli di stile esterni, si dovrebbe fare con questa stringa:

<link rel=stylesheet href="miofile.css" type="text/css">

Per aprire un contenitore

#contenitore{

}

Che valori gli do??

Ogni consiglio è accettato.

Forse con "position"...

**Myaku** · 17-04-2008, 07:43

Bè, non è che possiamo farti un corso di css qui sul forum

Forse, è meglio che parti da qui:
http://css.html.it
e poi eventualmente richiedere aiuto su problemi un po' più specifici.

**william.s** · 17-04-2008, 11:03

Si la rileggo un pò, anche se ieri ho già passato una bela dose di tempo a leggerla, senza capirci moltissimo! Eventualmente poi posso chiedere a te in privato? Potresti farmi una mini mini lezioncina nei momenti di difficoltà.. che so, magari sentendoci su messenger.

**william.s** · 17-04-2008, 12:56

Sto iniziando a fare prove utilizzando fogli di stile per capire le loro proprietà, avvalendomi degli esempi di varie guide.

Ho collegato la pagina html su cui sperimento, con fogli di stile esterni. Il problema è che ogni nuovo foglio di stile aggiunto, sembra annullare quello precedente e non ne capisco la ragione.

Questo è il codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<body>

<link rel="stylesheet" type="text/css" href="background.css">

<link rel="stylesheet" type="text/css" href="sfondi.css">

</body>

</head>

</html>

Questi sono i due css:

body { background: black; fixed repeat-x top}

---------------------------------

body {
background-color: #FFCC66;
}

h1 {
color: #990000;
background-color: #FC9804;
}

----------------------------------

Il primo foglio di stile innestato, imposta lo sfondo nero. I comandi fixed repeat-x top dovrebbero consentire di centrare lo sfondo nella pagina, ma in definitiva non agiscono, altro mistero.

Il secondo css è un color marroncino, di fatto però l'ultimo css inserito annulla quello precedente..

Come deve essere inserito il codice, affinchè i vari effetti e le varie modifiche si sommino piuttosto che sostituirsi?

**Room237** · 17-04-2008, 13:25

Uhm, sei proprio principiante, vero?
Cioè hai qualche esperienza di html?

Ad ogni modo: il primo foglio di stile è sbagliato:
c'è il punto e virgola subito dopo black, e quindi quello che c'è scritto dopo non viene interpretato, e anche se venisse interpretato le altre proprietà hanno effetto solo su immagini di sfondo, e quindi non avrebbero effetto.
Inoltre "fixed repeat-x top" significa che l'immagine di sfondo è fissa (non scorre con la pagina), si ripete orizzontalmente ed è allineata in alto.
Nel secondo foglio di stile sostituisci il colore di sfondo della pagina, quindi non ha più senso il primo foglio di stile.
Questa è la particolarità dei CSS, ovvero Cascading Style Sheet, cioè che se sono messi in "cascata" (uno dopo l'altro) l'ultimo sostituisce le proprietà degli altri (se espressamente dichiarate).

Per esempio potresti aver bisogno di un bordo su un contenitore (div):
nella prima dichiarazione ti serve un pixel continuo blu

border: 1px solid #00f;

nella seconda togliamo il bordo dai lati sinistro alto e destro

border-left: none;
border-top: none;
border-right: none;

Queste due dichiarazioni si sommano e quindi un div con la prima regola avrà un bordo continuo, un div con entrambe le regole avrà solo il bordo sotto

Ovviamente questo ha senso solo in alcuni casi, perchè altrimenti potresti semplicemente fare:

border-bottom: 1px solid #00f;

e ottenere lo stesso risultato

**william.s** · 17-04-2008, 14:14

Originariamente inviato da Room237
Uhm, sei proprio principiante, vero?
Cioè hai qualche esperienza di html?

Ad ogni modo: il primo foglio di stile è sbagliato:
c'è il punto e virgola subito dopo black, e quindi quello che c'è scritto dopo non viene interpretato, e anche se venisse interpretato le altre proprietà hanno effetto solo su immagini di sfondo, e quindi non avrebbero effetto.
Inoltre "fixed repeat-x top" significa che l'immagine di sfondo è fissa (non scorre con la pagina), si ripete orizzontalmente ed è allineata in alto.
Nel secondo foglio di stile sostituisci il colore di sfondo della pagina, quindi non ha più senso il primo foglio di stile.
Questa è la particolarità dei CSS, ovvero Cascading Style Sheet, cioè che se sono messi in "cascata" (uno dopo l'altro) l'ultimo sostituisce le proprietà degli altri (se espressamente dichiarate).

Per esempio potresti aver bisogno di un bordo su un contenitore (div):
nella prima dichiarazione ti serve un pixel continuo blu

border: 1px solid #00f;

nella seconda togliamo il bordo dai lati sinistro alto e destro

border-left: none;
border-top: none;
border-right: none;

Queste due dichiarazioni si sommano e quindi un div con la prima regola avrà un bordo continuo, un div con entrambe le regole avrà solo il bordo sotto

Ovviamente questo ha senso solo in alcuni casi, perchè altrimenti potresti semplicemente fare:

border-bottom: 1px solid #00f;

e ottenere lo stesso risultato

Si sono proprio un principiante, e anche di html so molto poco.

Piano piano però, con il tempo... Se avessi qualcuno che mi insegna sarebbe molto più facile e veloce probabilmente. Fare tutto da soli è complicato, specie quando hai a che fare con sistemi di programmazione con tantissime funzioni.

Tanto per intenderci, le proprietà su cui sto sperimentando nemmeno io so precisamente che comportino, vado a tentativi, cercando di capire in modo empirico.

Per ora è così, spero che poi con il tempo vada migliorando...

**william.s** · 18-04-2008, 17:25

Oggi ho fatto un altro tentativo, collegando un foglio di stile esterno al codice HTML in questo modo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<link rel="stylesheet" type="text/css" href="testo.css">

<p class="testo">ciao</p>

</body>
</html>

Il foglio di stile invece è questo..

.p12 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
}

Non mi sembra di aver sbagliato nulla a sto giro, eppure la scritta continua non cambia in italico...

**gengix** · 18-04-2008, 18:13

Già nel primo post, dove avevi riportato il codice avevi fatto un errore abbastanza grossolano di struttura.

Nel primo post avevi annidato l'elemento <body> dentro l'elemento <head>.
Nell'ultimo post invece ha inserito il tag di chiusura </body> dentro l'elemento <head> , inoltre non hai aperto il primo e non hai chiuso il secondo.
Purtroppo questi sono elementi basilari. Non è un rimprovero il mio ma un consiglio come ti è stato dato in precedenza.
Difficilmente in questo forum troverai della gente disposta a tenerti delle lezioni, perchè (ed è normale) avresti bisogno proprio di nozioni di base e in questo forum si presuppone che l'utente che chiede aiuto, abbia già conoscenze di questo tipo.
Armati di pazienza come hanno fatto tutti e comincia dai link che ti hanno postato in precedenza.

Fare tutto da soli è complicato, specie quando hai a che fare con sistemi di programmazione con tantissime funzioni.

Qui non si parla di programmazione, è un altro mondo che va a "braccietto" con questo. Impara prima le basi di html e poi penserai alla programmazione.

**william.s** · 18-04-2008, 18:43

Ho capito ma permettimi di dissentire: se qualcuno ogni tanto si prendesse 10 minuti, o anche 15 minuti del suo preziosissimo tempo per spiegare qualcosa di concreto, non mi spiacerebbe.

Mi rendo perfettamente conto che se tu ora dici queste cose a me, è perche probabilmente prima ti sarai trovato in una situazione analoga alla mia, quindi ora ti pare quasi normale avere questo tipo di comportamento. Probabilmente se ai tuoi tempi qualcuno ti avesse aiutato invece che lasciarti in balia delle onde da solo, faticando 10 invece che 1, il tuo comportamento ora sarebbe diverso, per questo dico che indirettamente non è colpa tua anche se la tua risposta non mi è piaciuta.

Un forum se non è per darsi un aiuto e scambiarsi informazioni, allora a che serve? Solo per quelli che sono esperti perche a quel punto gli altri se ne devono stare fuori e non devono ricevere aiuto sino a che non superano un certo grado?

Ci vuol poco ogni volta che faccio una domanda a spedirmi a calci nel sedere nelle sezioni dei corsi. Se però nonostante tutto continuo ad andare sul forum a porre quesiti è perche i corsi, (ben fatti) nonostante li abbia letti e riletti non mi stanno chiarendo le idee più di tanto.

Scrivo anche in un altro forum dedicato alla metereorologia, campo su cui mi dedico da quasi una vita e sono consapevole di avere conoscenze fuori dal comune, da qui l'esigenza di fare un sito web tutto mio. Se uno che non sa un belino mi viene a fare una domanda (anche banale) attinente al mio campo, nel limite del possibile cerco sempre di spiegargli a parole mie un certo concetto che lui non capisce. (che so, le correnti convettive)

Sennò potrei fare come stai facendo tu, cioè alla domanda posta, mandarlo a quel paese dicendogli "vatti prima a leggere manuali di metereorologia, poi potrai tornare a porre domande più intelligenti".

Sarebbe plausibile certo, ma non per questo la scelta migliore.

**Myaku** · 18-04-2008, 18:48

Originariamente inviato da william.s
Oggi ho fatto un altro tentativo, collegando un foglio di stile esterno al codice HTML in questo modo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<link rel="stylesheet" type="text/css" href="testo.css">

<p class="testo">ciao</p>

</body>
</html>

Il foglio di stile invece è questo..

.p12 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
}

Non mi sembra di aver sbagliato nulla a sto giro, eppure la scritta continua non cambia in italico...

a parte l'annidamento già fatto notare da gengix, hai commesso un altro errore: nel css hai definito una classe chiamata "p12", ma nell'html, anzichè richiamare questa, ne richiami una che ha il nome "testo". E' quindi normale che non ti funzioni, poichè nel css dovrai richiamare le stesse classi, id (ed elementi in genere) che definisci nell'html: a nome html, corrisponde nome css.
Ovvero, non devi richiamare il "nome del file .css" (che nel tuo caso è "testo"), poichè nel momento in cui lo metti nel tag <link> già lo richiami.

Discussione: Contenitori:

Strumenti discussione

Ricerca discussione

Visualizza

Contenitori:

Permessi di invio