Valutazione 4.87/ 5 (100.00%) 5838 voti

Condividi:        

Filosofia CSS

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Triumph Of Steel, archimede

Filosofia CSS

Postdi janfri » 10/03/06 16:06

Sebbene sia a favore dell'utilizzo dei CSS come filosofia e come tecnico
ho due quesiti da porre che mi ronzano in testa ogni volta che scrivo del codice.

La filosofia pura è quella di scrivere tutto ciò che riguarda
la formattazione e design del testo con i fogli di stile.

Cosa mi dite del fatto che spesso ci si ritrova a costruire contenuti
che variano anche di poco rispetto a una classe o un id già incluso nel css in uso?

Esempio un padding-left di 10px pittosto che di 5px.
Se si dovesse fare tutto nel foglio di syle, nel caso di un portale medio, incrementerebbe di dimensione e verrebbe trasportato anche
su pagine a cui non interessa la differenza. E' vero che si possono fare o includre parti di foglio solo nella pagina interessata ma, i tempi di sviluppo?
I clienti vogliono il massimo della tecnologia con il minimo dispendio economico
relegandoci spesso a meri scrittori di codice senza proprio neanche avvicinarsi alla realtà di quello che siamo
in grado di fare.

Quindi alla fine mi ritrovo con un buon lavoro su foglio di stile ma immancabilmente adotto dei style negli tag all'interno della pagina.
Faccio schifo ?
Non lo so!!! A voi l'ardua sentenza.

Altra cosa che mi ha sempre spiazzato.
A me piacerebbe fare una bella pagina completamente in liquid (cioè completamente elastica, solo % e con dimensionamento dei caratteri in em)..
Ci ho provato varie volte ma ho concluso che sia possibile solo ove uno rinunci ad un minimo di grafica.
Esempio: quante volte avete provato ad affiancare due box con dei contenuti? spesso direi..bene, e cosa succede quando il
contenuto di destra supera l'altezza del box di sinistra ? Il contenuto slitta (correttamente) sotto il box di sinistra..
Questo è il giusto funzionamento del css liquid.. ma se io volessi che il contenuto stia nel suo box e prosegua in basso nella sua
giusta verticale?
Io ho trovato solo la soluzione di fissare una misura di width perdendo così l'obbiettivo di fare un portale completamente in liquid.
Ehmmm spero di non aver incasinato troppo il discorso..
Se qualcuno vuole rispondere, dare soluzioni, o solo commentare sarò felice di leggerlo.
:)
janfri
Utente Junior
 
Post: 14
Iscritto il: 10/03/06 09:46
Località: Gabicce Mare

Sponsor
 

Postdi Triumph Of Steel » 10/03/06 17:24

a volte io usi multiple classi... nel senso

Codice: Seleziona tutto
.content { font-family: Verdana; size:12px; }
.padding5 {padding: 5px 5px 5px 5px;}



e poi nell'HTML
Codice: Seleziona tutto
<span class="content padding">testo testo</span>


per quanto riguarda i BOX, non saprei, usando sempre CSS dovresti usare un po' di SPAN e DIV. Io per un sito sono riuscito a fare quello che cerchi di fare tu, ma con CSS2 (che non sempre è compatibile con tutti i browser/piattaforme). Questo vuol dire però usare livelli.
Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00

Postdi bella » 10/03/06 21:13

Innanzitutto complimenti Janfry, ho scoperto i CSS da poche settimane, e devo dire che il mio modo di programmare e' TOTALMENTE cambiato.

A questo punto io sarei un "purista" del CSS, ovvero come dice Triumph puoi assegnare diverse "classi" nel file del CSS.

Il resto delle pagine Web, dovrebbero rimanere "pure" da codici Html, il che' rendera' migliorativa la compatibilita' tra browser e browser.
bella
Utente Junior
 
Post: 84
Iscritto il: 05/10/05 11:38

Re: Filosofia CSS

Postdi archimede » 11/03/06 10:37

janfri ha scritto:ho concluso che sia possibile solo ove uno rinunci ad un minimo di grafica.
Ah sì? ;)

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi janfri » 16/03/06 11:20

Dopo una breve assenza ripendo il discorso.
L'affermazione di rinunciare ad una certa presentazione grafica riguarda il costo di produzione effettivo e non tanto la possibilità di costruire qualcosa ad affetto, compatibile con i browser maggiori e accessibile.

Infatti le differenze (che sopratutto arrivano da internet explorer 5 e 5.5 nel leggere ed interpretare i box model ) fa si che si debba ricorrere a trucchi sporchi o cotrutti rindondanti per costruire una struttura stabile e corretta e ciò incrementa il costo di sviluppo e test. Nei tempi in cui siamo l'aumento del costo di sviluppo purtroppo non viene riconoscuto. Infatti, la maggioranza dei possibili clienti usa la linea "meno spendo meglio è" e non riconosce la differrenza tra un portale professionale da qualcosa costruito attraverso automatismi da persone che non saprebbero neanche cambiare una proprità di tag senza il programma di tools. (scusate è solo uno sfogo personale)

Se qualcuno mi indica come fare a scrivere una parte di codice nel post riporterei un piccolo esempio di supporto alla discussione.
janfri
Utente Junior
 
Post: 14
Iscritto il: 10/03/06 09:46
Località: Gabicce Mare

Postdi archimede » 16/03/06 12:06

janfri ha scritto:Se qualcuno mi indica come fare a scrivere una parte di codice nel post riporterei un piccolo esempio di supporto alla discussione.
C'è l'apposito pulsante Code nella form di inserimento messaggio, ma devi deselezionare Disabilita il BBCode in questo messaggio.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Primo Esempio

Postdi janfri » 17/03/06 08:37

Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>BOX MODEL</title>
</head>
<style>
#corpo {
   width:160px
}
#sx_top {
   float:left;
   width:10px;
   height:10px;
   background: url(./_image/box_top_sx.jpg) no-repeat
}
#center_top {
   float:left;
   width:140px;
   height:10px; 
   background-color:#F0F0F0
}
#dx_top {
   float:left;
   width:10px;
   height:10px;
   background: url(./_image/box_top_dx.jpg) no-repeat
}
#content {
   float:clear;
   background-color:#F0F0F0;
   padding: 3px 5px 3px 5px
}
#sx_bottom {
   float:left;
   width:10px;
   height:10px;
   background: url(./_image/box_down_sx.jpg) no-repeat
}
#center_bottom {
   float:left;
   width:140px;
   height:10px;
   background-color:#F0F0F0
}
#dx_bottom {
   float:left;
   width:10px;
   background: url(./_image/box_down_dx.jpg) no-repeat
}
</style>
<body>

<div id="corpo">
   <div>
      <div id="sx_top">&nbsp;</div>
      <div id="center_top">&nbsp;</div>
      <div id="dx_top">&nbsp;</div>
   </div>
   <div id="content">
   prova di scrittura prova di scrittura prova di scrittura
   prova di scrittura prova di scrittura prova di scrittura
   prova di scrittura prova di scrittura prova di scrittura
   </div>
   <div>
      <div id="sx_bottom">&nbsp;</div>
      <div id="center_bottom">&nbsp;</div>
      <div id="dx_bottom">&nbsp;</div>
   </div>
</div>
</body>
</html>


Questo semplice codice dovrebbe costruire un semplice box con gli angoli arrotondati.
Il risutato è corretto in FireFox ma NON in I.E. 6.0 (quindi posso immaginare in versioni più vecchie).
Secondo voi cosa c'è di sbagliato ?
janfri
Utente Junior
 
Post: 14
Iscritto il: 10/03/06 09:46
Località: Gabicce Mare

Postdi archimede » 17/03/06 09:48

Non ho FF né le immagini che, suppongo, danno i bordi arrotondati.

Comunque ci sono alcune imprecisioni nel tuo codice. Prova così (che con IE6 mi sembra funzionare):
Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>BOX MODEL</title>
<style type="text/css">
#corpo {
   width:160px;
}
#sx_top {
   float:left;
   width:10px;
   height:10px;
   background: url(./_image/box_top_sx.jpg) no-repeat;
}
#center_top {
   float:left;
   width:140px;
   height:10px;
   background-color:#F0F0F0
}
#dx_top {
   float:left;
   width:10px;
   height:10px;
   background: url(./_image/box_top_dx.jpg) no-repeat;
}
#content {
   clear:both;
   background-color:#F0F0F0;
   padding: 3px 5px 3px 5px;
}
#sx_bottom {
   float:left;
   width:10px;
   height:10px;
   background: url(./_image/box_down_sx.jpg) no-repeat;
}
#center_bottom {
   float:left;
   width:140px;
   height:10px;
   background-color:#F0F0F0;
}
#dx_bottom {
   float:left;
   width:10px;
   background: url(./_image/box_down_dx.jpg) no-repeat;
}
</style>
</head>
<body>
<div id="corpo">
   <div>
      <div id="sx_top">&nbsp;</div>
      <div id="center_top">&nbsp;</div>
      <div id="dx_top">&nbsp;</div>
   </div>
   <div id="content">
   prova di scrittura prova di scrittura prova di scrittura
   prova di scrittura prova di scrittura prova di scrittura
   prova di scrittura prova di scrittura prova di scrittura
   </div>
   <div>
      <div id="sx_bottom">&nbsp;</div>
      <div id="center_bottom">&nbsp;</div>
      <div id="dx_bottom">&nbsp;</div>
   </div>
</div>
</body>
</html>
HTH.

Alessandro

PS: noto ora che la sintassi del percorso alle immagini è, per me, un po' strana: non ci andrebbero DUE punti?
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi Triumph Of Steel » 17/03/06 11:49

dipende se deve tornare su di una cartella (../) o se si trova nella stessa cartella (./)
Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00

Postdi archimede » 17/03/06 13:10

Triumph Of Steel ha scritto:dipende se deve tornare su di una cartella (../) o se si trova nella stessa cartella (./)
Questa non la sapevo: quando sono nella stessa cartella uso "<nome_cartella>/<nome_file>". C'è sempre da imparare...

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi Triumph Of Steel » 17/03/06 14:32

si si, è la stessa cosa...
Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00

percorso

Postdi janfri » 17/03/06 18:53

per la precisione:

Codice: Seleziona tutto
./<nome cartella>

va ad un cartella figlia della cartella in cui ci si trova
Codice: Seleziona tutto
../<nome cartella>

va ad una cartella dello stesso livello della cartella in cui ci si trova

Dato che ci sono inserisco le immagini per il box:
Immagine
Immagine
Immagine
Immagine
Immagine

Il box ancora non va !!!!!!! :D

Ci rido sopra se no mi arrabbio. Perdere temp per cose che dovrebbero essere semplici è frustrante.
janfri
Utente Junior
 
Post: 14
Iscritto il: 10/03/06 09:46
Località: Gabicce Mare

Postdi janfri » 17/03/06 18:56

Devo dire che non ho ancora capito bene come funzionano i BBCode !! scusatemi
janfri
Utente Junior
 
Post: 14
Iscritto il: 10/03/06 09:46
Località: Gabicce Mare

Postdi archimede » 18/03/06 09:43

A me sembra che vada benissimo... :?:

Alessandro

EDIT: no, ho capito cosa intendi ora...

EDIT2: una pezza puoi provare a metterla usando overflow: hidden; per i due ID centrali. Non è certo la soluzione definitiva, ma non sono riuscito a trovare di meglio... :mmmh:
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

X Archimede

Postdi janfri » 22/03/06 21:37

Non so se hai provato la soluzione che hai proposto ma non va.. ed io rimango sempre con i dubbio che non mi permette di scrivere box con angoli arrotondati utilizzando i flogli di stile. Forza ragazzi si accettano proposte per questo semplice quesito ma che serve sicuramente a molti. Non sei daccordo archimede ? :)
janfri
Utente Junior
 
Post: 14
Iscritto il: 10/03/06 09:46
Località: Gabicce Mare

Postdi archimede » 23/03/06 09:04

Non va è un po' vaga come descrizione di un problema: questo è "il meglio" che sono riuscito ad ottenere. :(

Purtroppo non sono un esperto di CSS e sono convinto che sia una stupidata, ma non l'ho individuata.

Quanto al fatto che serva a molti, personalmente è la prima volta che incontro un'esigenza simile; d'altra parte non sono un esperto...

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Soluzione compatibile con IE e FireFox

Postdi janfri » 24/03/06 09:21

Di seguito posto la soluzione inerente alla possibilità di visualizzare un box con angoli arrotondati che sia compatibile con IE e FireFox e quindi anche con Netscape (immagino)
Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>BOX MODEL - ANGOLI ARROTONDATI - SOLO CSS</title>
<style type="text/css">
#corpo {
   width:160px
}
#sx_topbox160 {
   float:left;
   width:10px;
   height:10px;
   background: url(./_image/box_top_sx.jpg) no-repeat
}
#center_topbox160 {
   float:left;
   width:140px;
   height:10px;
   background-color:#F0F0F0
}
#dx_topbox160 {
   float:left;
   width:10px;
   height:10px;
   background: url(./_image/box_top_dx.jpg) no-repeat
}
#contentbox160 {
   clear:both;
   background-color:#F0F0F0;
   padding: 3px 5px 3px 5px
}
#sx_bottombox160 {
   float:left;
   width:10px;
   height:10px;
   background: url(./_image/box_down_sx.jpg) no-repeat;
}
#center_bottombox160 {
   float:left;
   width:140px;
   height:10px;
   background-color:#F0F0F0
}
#dx_bottombox160 {
   float:left;
   width:10px;
   height:10px;
   background: url(./_image/box_down_dx.jpg) no-repeat
}
.rigabox {
   line-height:5px
}
#insidebox160 {
   padding-left:2px;
   padding-right:2px;
   padding-top:2px;
   padding-bottom:2px;
   text-align:justify
}
</style>
</head>
<body>
<div id="corpo">
   <div class="rigabox">
      <div id="sx_topbox160">&nbsp;</div>
      <div id="center_topbox160">&nbsp;</div>
      <div id="dx_topbox160">&nbsp;</div>
   </div>
   <div id="contentbox160">
         <div id="insidebox160">
            abc abc abc abc abc abc abc abc abc abc abc abc abc abc
            abc abc abc abc abc abc abc abc abc abc abc abc abc abc
            abc abc abc abc abc abc abc abc abc abc abc abc abc abc
            abc abc abc abc abc abc abc abc abc abc abc abc abc abc
            abc abc abc abc abc abc abc abc abc abc abc abc abc abc
         </div>
   </div>
   <div class="rigabox">
      <div id="sx_bottombox160">&nbsp;</div>
      <div id="center_bottombox160">&nbsp;</div>
      <div id="dx_bottombox160">&nbsp;</div>
   </div>
</div>
</body>
</html>

E' bastato aggiungere un controllo di altezza sulla riga top e bottom.
Hai ragione: "non va" è generico. Era riferito al fatto che anche inserendo la tua proposta il box in IE mi veniva visualizzato in modo sfalsato.

Buona giornata a tutti
janfri
Utente Junior
 
Post: 14
Iscritto il: 10/03/06 09:46
Località: Gabicce Mare

Re: Soluzione compatibile con IE e FireFox

Postdi archimede » 24/03/06 10:35

janfri ha scritto:E' bastato aggiungere un controllo di altezza sulla riga top e bottom.
Immagino tu ti riferisca a rigabox: ma perché 5px?

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi janfri » 24/03/06 12:27

Queste sono le incongruenze che mi fanno irare e perdere tempo quando costruisco un template. Un vero motivo non c'è. Ho solo verificato che lo scoordinamento era dovuto alla riga centrale che avendo la stessa altezza degli angoli mi slittava di 5px in più rispetto alla logica. Allora ho forzato e così funziona.

:D
janfri
Utente Junior
 
Post: 14
Iscritto il: 10/03/06 09:46
Località: Gabicce Mare

CSS Zen Garden

Postdi infinito1971 » 26/04/06 10:19

Ciao a tutti,
già in questo topic il bravo Alessandro, alias archimede, ha citato lo splendido sito csszengarden del noto Dave Shea.
Bene, io vorrei segnalare anche il bellissimo libro di Dave (che sto leggendo con entusiasmo) dal titolo: Lo Zen e l'arte del Web con il CSS.
In tale libro vengono spiegati i più interessanti designs pubblicati sul sito pecedentemente citato e ci si può rendere conto delle vere potenzialità offerte dai CSS nonchè dell'importanza (anche in termini di prestazioni!) fondamentale che essi rivestono nello sviluppo di un sito web.
Insomma credo che sia un libro degno di essere letto da ogni web designer o aspirante tale!

Un saluto,
infinito1971
Questo business è binario: o sei 1 o sei 0, vivo o morto, non esistono secondi classificati!
Avatar utente
infinito1971
Utente Senior
 
Post: 531
Iscritto il: 01/08/02 21:22
Località: Napoli

Prossimo

Torna a Programmazione


Topic correlati a "Filosofia CSS":

LA FILOSOFIA DEL P2P
Autore: epulone
Forum: Software Windows
Risposte: 0

Chi c’è in linea

Visitano il forum: Nessuno e 2 ospiti