|
| Precedente :: Successivo |
| Autore |
Messaggio |
gek
Eroe
Registrato: 22/01/06 16:55
Messaggi: 53
Residenza: Ravenna
|
 Inviato: 22 Gen 2006 20:19 Oggetto: * div che non si adeguano |
 |
|
Ciao! innanzitutto voglio salutare e ringraziare tutti i partecipanti a questo forum: sono ormai anni che vi seguo attraverso newsletter, blog e forum, e se mi sono deciso a scrivere in prima persona è perché nonostante i vostri preziosissimi consigli (in particolare a rebelia, ogni volta che creo un sito penso: come farebbe lei??) non riesco a risolvere un piccolo problemino di ... neanche a dirlo, CSS.
il sito in questione è http://ricettemamma.altervista.org , niente più di uno strumento php+Mysql che ho regalato a mia mamma per archiviare le sue ricette. anzi, a chi mi risolve il problema invierò una fetta della sua celeberrima crostata alla nutella!  e sentiteti pure liberi di provare qlc ricetta, le ricerche sono libere (anche se le query sono limitate a 100 all'ora  ( maledetta altervista!).
ma per tornare al mio problema: ho creato un layout a 2 colonne fluido (o almeno questa era la mia intenzione), ma mi sa che ho fatto un bel pasticcio con i CSS... cercavo solo di seguire i consigli di rebelia! fatto sta che il risultato è questo : http://ricettemamma.altervista.org/main.php Bello no? ma vedete il menu di sinistra? è separato dalla parte centrale da una "righina blu" (come per le altre parti: intestazione, footer ecc). bene, io vorrei:
che la riga arrivasse sempre e cmq in fondo fino al footer, indipendentemente dalla lunghezza del menu di sx o del contenuto di dx  Non c'è verso d farlo! nn ci riesco!!!
che l'immagine (a proposito, è mia mamma!) fosse più centrata, o almeno staccata dal bordo...
inoltre sono ben accetti commenti sulla qualità del codice... posto il toto il css, mentre per l'HTML vi conviene andare a vedere la pagina!
| Codice: | /***********************************************/
/*
Css generale per il sito.
Tuffo Produciònes copyright. Please do not remove this credits
http://ricettemamma.altervista.org
*/
/***********************************************/
body{
background-color: #FFCCCC;
font-family: Arial,sans-serif;
color: #330033;
margin: 0px;
padding: 0px;
}
a{
color: #CC3333;
text-decoration: none;
}
a:link{
color: #006699;
text-decoration: none;
}
a:visited{
color: #006699;
text-decoration: none;
}
a:hover{
color: #006699;
text-decoration: underline;
}
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #333333;
margin: 0px;
padding: 0px;
}
h2{
font-family: Arial,sans-serif;
font-size: 114%;
color: #666699;
margin: 0px;
padding: 0px;
}
h3{
font-family: Arial,sans-serif;
font-size: 100%;
color: #993399;
margin: 0px;
padding: 0px;
}
h4{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}
h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #333366;
margin: 0px;
padding: 0px;
}
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}
/***********************************************/
/* Layout Divs */
/***********************************************/
#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#navBar{
float: right;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
#headlines{
float:left;
width: 20%;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 10px;
}
#content{
float: left;
width: 55%;
}
/***********************************************/
/* Components */
/***********************************************/
#siteName{
margin: 0;
padding: 0 0 0 10px;
}
/************* #globalNav styles **************/
#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #CCC;
color: #cccccc;
}
#globalNav img{
display: block;
}
#globalNav a {
font-size: 90%;
padding: 0 4px 0 0;
}
/*************** #pageName styles **************/
#pageName{
margin: 0px;
padding: 0px 0px 0px 10px;
}
/************* #breadCrumb styles *************/
#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}
/************** .feature styles ***************/
.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}
.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}
.feature img{
float: left;
padding: 10px 10px 0px 0px;
}
/************** .story styles *****************/
.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}
.story p{
padding: 0px 0px 10px 0px;
}
/************* #siteInfo styles ***************/
#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #08bdff;
padding: 10px 10px 10px 10px;
}
#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}
/************* #search styles ***************/
#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#search form{
margin: 0px;
padding: 0px;
}
#search label{
display: block;
margin: 0px;
padding: 0px;
}
/*********** #navBar link styles ***********/
#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}
/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}
/*********** #sectionLinks styles ***********/
#sectionLinks{
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
}
#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}
#sectionLinks a:hover{
background-color: #dddddd;
}
/*********** .relatedLinks styles ***********/
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}
.relatedLinks h3{
padding: 10px 0px 2px 0px;
}
.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}
/************** #advert styles **************/
#advert{
padding: 30px 0px 10px;
}
#advert img{
display: block;
}
/************** #headlines styles **************/
#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}
#headlines p{
padding: 5px 0px 5px 0px;
}
|
grazie mille in anticipo!!  |
|
| Top |
|
 |
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 22 Gen 2006 22:13 Oggetto: Re: div che non si adeguano |
|
|
ciao, benvenuto e grazie per la fiducia! cerchero' di non tradirla
| Citazione: | | che la riga arrivasse sempre e cmq in fondo fino al footer, indipendentemente dalla lunghezza del menu di sx o del contenuto di dx Non c'è verso d farlo! nn ci riesco!!! |
non sei il solo 
dunque: la riga da cima a fondo a cui ci avevano abituato le tabelle, con i div non si puo' piu' realizzare, nel senso che nelle tabelle la cella piu' lunga determina la lunghezza di tutte le celle della stessa riga, ma la lunghezza dei div non puo' essere legata alla lunghezza di un altro div che gli e' affiancato
di solito il trucco per simulare le celle e' questo: creare una gif larga quanto basta ed usarla come sfondo del div contenitore dei due div menu e contenuto
per adottare questa soluzione, nel tuo caso dovresti: creare un div esterno che contenga menu e contenuto (la foto di tua mamma), dare al menu una larghezza fissa, creare una gif larga poco piu' del menu e alta es. 10 pixel e usarla come sfondo del div contenitore in questo modo:
| Codice: |
#contenitore {background: url(sfondo.gif) repeat-y;}
|
| Citazione: | | che l'immagine (a proposito, è mia mamma!) fosse più centrata, o almeno staccata dal bordo... |
il problema lo risolvi dando al div che contiene l'immagine (il div #story) text-align: center e l'immagine sara' centrata 
per quanto riguarda il codice della pagina, ti consiglierei di usare un elenco puntato per elencare le voci del menu: semanticamente e' la scelta piu' corretta, mentre per il css ho visto che abbondi con alcuni parametri: le caratteristiche della font, per esempio, e' sufficiente elencarle nel body e tutti gli elementi contenuti si adegueranno (il termine "a cascata" sta proprio a significare che un parametro dato all'elemento contenitore si ripercuote - salvo parametri diversi - anche sull'elemento contenuto)
a cio' ci sono alcune eccezioni dovute soprattutto a come i browser interpretano il codice, percio' a volte e' necessario abbondare, ma - appunto - NON E' la regola
ultima cosa, ti consiglio di verificare il contrasto colori: l'azzurro e il rosa che hai scelto per il testo e lo sfondo (mi sto riferendo al pie' di pagina) non hanno un contrasto elevato e potrebbero creare difficolta' di lettura ad alcuni
nel nostro thread in evidenza e per l'esattezza nella pagina degli strumenti utili (un po' di SPAM ) trovi segnalata questa pagina dove puoi inserire i due valori esadecimali e calcolarne il contrasto
infine, per migliorare la leggibilita' delle ricette ti consiglio di allineare il testo a sinistra e di evidenziare i termini come "categoria", "tempo preparazione", "ingredienti" eccetera, cosi' da rendere piu' efficace il colpo d'occhio dei navigatori
un consiglio: anziche' usare una tabella per elencare le ricette, userei un elenco numerato (<ol>), allineerei anche qui il testo a sinistra e linkerei la ricetta direttamente al nome anziche' a "visualizza" per alleggerire e ottimizzare il codice della pagina
... e complimenti alla mamma! vista la mia abilita' culinaria molto scarsa, mi sa che mi segno il link tra i preferiti |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 22 Gen 2006 22:28 Oggetto: |
|
|
ops! dimenticavo:
| Codice: | | #navBar ul {list-style: none; margin: 0; padding: 0;} |
metti l'unita' di misura: margin: 0px; padding: 0px; |
|
| Top |
|
|
gek
Eroe
Registrato: 22/01/06 16:55
Messaggi: 53
Residenza: Ravenna
|
| Inviato: 23 Gen 2006 21:50 Oggetto: non ho parole... |
|
|
come volevasi dimostrare... NON CI SONO PAROLE per descrivere la precisione, la velocità e l'esaustività della risposta! grazie mille, ti sono davvero grato! se passi dalle mie parti (ravenna) fammelo sapere che ti invito per davvero ad assaggiare qlc prelibatezza (devi sentire che pizza fa mia mamma!). il trucchetto dell'immagine di sfondo l'avevo già sentito dire, ma speravo ci fosse una soluzione alternativa più semplice.. e poi nn è che mi sia così chiaro come applicarlo al mio caso. vabbé devo ancora lavorarci bene per valutare!
| Citazione: | per il css ho visto che abbondi con alcuni parametri: le caratteristiche della font, per esempio, e' sufficiente elencarle nel body e tutti gli elementi contenuti si adegueranno (il termine "a cascata" sta proprio a significare che un parametro dato all'elemento contenitore si ripercuote - salvo parametri diversi - anche sull'elemento contenuto)
|
non ho capito se ho corretto del tutto... in fondo riposto il file .css per verifica (del compito svolto! )
per il resto adesso ci lavoro un po' e risistemo il tutto. grazie ancora per i preziosissimi consigli! ci vediamo in giro per la rete! Gek
| Codice: | /***********************************************/
/*
Css generale per il sito.
Tuffo Produciònes copyright. Please do not remove this credits
http://ricettemamma.altervista.org
*/
/***********************************************/
body{
background-color: #FFCCCC;
font-family: Arial,sans-serif;
color: #330033;
margin: 0px;
padding: 0px;
}
a{
color: #CC3333;
text-decoration: none;
}
a:link{
color: #006699;
text-decoration: none;
}
a:visited{
color: #006699;
text-decoration: none;
}
a:hover{
color: #006699;
text-decoration: underline;
}
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #333333;
margin: 0px;
padding: 0px;
}
h2{
font-size: 114%;
color: #666699;
margin: 0px;
padding: 0px;
}
h3{
font-size: 100%;
color: #993399;
margin: 0px;
padding: 0px;
}
h4{
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}
h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #333366;
margin: 0px;
padding: 0px;
}
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
label{
font-size: 100%;
font-weight: bold;
color: #334d55;
}
/***********************************************/
/* Layout Divs */
/***********************************************/
#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#navBar{
float: right;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
#headlines{
float:left;
width: 20%;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 10px;
}
#content{
float: left;
width: 55%;
}
/***********************************************/
/* Components */
/***********************************************/
#siteName{
margin: 0px;
padding: 0px 0px 0px 10px;
}
/************* #globalNav styles **************/
#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #CCC;
color: #cccccc;
}
#globalNav img{
display: block;
}
#globalNav a {
font-size: 90%;
padding: 0px 4px 0px 0px;
}
/*************** #pageName styles **************/
#pageName{
margin: 0px;
padding: 0px 0px 0px 10px;
}
/************* #breadCrumb styles *************/
#breadCrumb{
font-size: 80%;
padding: 2px 0px 0px 10px;
}
/************** .feature styles ***************/
.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}
.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}
.feature img{
float: left;
padding: 10px 10px 0px 0px;
}
/************** .story styles *****************/
.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
text-align:center;
vertical-align:middle;
}
.story p{
padding: 0px 0px 10px 0px;
}
/************* #siteInfo styles ***************/
#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #08bdff;
padding: 10px 10px 10px 10px;
}
#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}
/************* #search styles ***************/
#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#search form{
margin: 0px;
padding: 0px;
}
#search label{
display: block;
margin: 0px;
padding: 0px;
}
/*********** #navBar link styles ***********/
#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0px; padding: 0px;}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}
/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}
/*********** #sectionLinks styles ***********/
#sectionLinks{
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
}
#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}
#sectionLinks a:hover{
background-color: #dddddd;
}
/*********** .relatedLinks styles ***********/
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}
.relatedLinks h3{
padding: 10px 0px 2px 0px;
}
.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}
/************** #advert styles **************/
#advert{
padding: 30px 0px 10px;
}
#advert img{
display: block;
}
/************** #headlines styles **************/
#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}
#headlines p{
padding: 5px 0px 5px 0px;
} |
|
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 23 Gen 2006 22:38 Oggetto: |
|
|
'petta che e' lungo, te lo correggo un pezzetto alla volta
| Codice: |
a{
color: #CC3333;
text-decoration: none;
}
a:link{
color: #006699;
text-decoration: none;
}
a:visited{
color: #006699;
text-decoration: none;
}
|
definisci il generico a e poi definisci lo specifico a:link : puoi omettere il secondo (tra l'altro col secondo sovrascrivi il primo che non risulterebbe da nessuna parte)
metti PRIMA visited e DOPO hover: in questo modo otterrai l'effetto voluto, altrimenti non funziona come vorremmo
consiglio: con i css puoi "accorciare" i valori esadecimali: nel caso le cifre siano uguali a coppie, infatti, e' possibile scrivere la cifra una sola volta, percio' #006699 diventera' #069, #cc3333 diventera' #c33 etc
| Codice: |
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #333333;
margin: 0px;
padding: 0px;
}
h2{
font-size: 114%;
color: #666699;
margin: 0px;
padding: 0px;
}
h3{
font-size: 100%;
color: #993399;
margin: 0px;
padding: 0px;
}
h4{
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}
h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #333366;
margin: 0px;
padding: 0px;
|
altro consiglio (che puoi comunque non seguire, e' solo un'alternativa a quel che hai fatto tu):
anziche' definire margin e padding per OGNI titolo, puoi scrivere:
| Codice: |
h1, h2, h3, h4, h5 {margin: 0px; padding: 0px;}
|
e poi definire sotto i soli valori specifici per ognuno
cosi' al volo non vedo altro; una cosa ('n'altro consiglio! ebbasta reb!!!   ): cerca di usare meno hack possibili: vanno bene per adattare il tuo layout ai browser attuali, ma rischi di aver problemi con le versioni successive, percio' come norma e' meglio scegliere una strada diversa (="regolare") per ottenere il risultato desiderato oppure optare per una soluzione alternativa |
|
| Top |
|
|
gek
Eroe
Registrato: 22/01/06 16:55
Messaggi: 53
Residenza: Ravenna
|
| Inviato: 23 Gen 2006 23:47 Oggetto: sempre meglio... |
|
|
grazie! per quanto riguarda i colori dei link sto impazzendo, ora nn mi piacciono più quelli di prima e nn riesco a trovare una combinazione sfondo-link-link visitato-link hover che mi soddisfi. uffi!
però ho sistemato il css come mi hai suggerito (come basta suggerimenti , sono proprio quelli che servono!!!!) e adesso mi sembra vada meglio!
mi sono installato EditCSS, una extension per firefox che permette di cambiare al volo i css e vedere subito i risultati (certamente lo conosci già, ma non l'ho trovato tra gli strumenti utili...), davvero UTILE!
ancora grazie, ci sentiamo appena mi esce un altro problema... (è una promessa ma anche una minaccia!!) |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 24 Gen 2006 00:01 Oggetto: Re: sempre meglio... |
|
|
| gek ha scritto: | | (è una promessa ma anche una minaccia!!) |
e' una promessa, visto che le nostre chiacchierate sicuramente servono anche a tanti altri con gli stessi dubbi o problemi
a presto |
|
| Top |
|
|
gek
Eroe
Registrato: 22/01/06 16:55
Messaggi: 53
Residenza: Ravenna
|
| Inviato: 26 Gen 2006 19:56 Oggetto: nn si aggiusta... |
|
|
naturalmente sono ancora io...
ho provato a inserire un nuovo div (chiamato "principale") che contenesse il div content e headline (ricordo che content a sua volta contiene feature e story). ho dato anche una ripulita al css togliendo i campi che nn mi interessano per ora (li avevo inseriti per una futura implementazione, ma li aggiungerò al momento giusto). ho inserito l'immagine /immagini/sfondo_menu.gif (viva la fantasia) come mi avevi detto e devo dire che HA FUNZIONATO!
ma ora ho un altro problema (chissà x' con i css mi succede sempre che una soluzione crea un nuovo problema...  ) adesso il div content è tutto spostato in basso e nn c'è verso di alzarlo! controllate voi stessi:
http://ricettemamma.altervista.org/main.php
dove sbaglio??
rebelia (o chiunque abbia una buona idea...) AIUTO! |
|
| Top |
|
|
juzo kun
Dio maturo
Registrato: 19/04/04 09:32
Messaggi: 1853
Residenza: tra la tastiera e la sedia
|
| Inviato: 26 Gen 2006 22:14 Oggetto: Re: nn si aggiusta... |
|
|
| gek ha scritto: | | ma ora ho un altro problema |
Manca un puntoevirgola dopo float:left, qua:
| Codice: | #headlines{
float:left
width: 140px;
/*border-right: 1px solid #ccffff;
border-bottom: 1px solid #ccffff;*/
} |
Cià
JK |
|
| Top |
|
|
gek
Eroe
Registrato: 22/01/06 16:55
Messaggi: 53
Residenza: Ravenna
|
| Inviato: 27 Gen 2006 00:09 Oggetto: oooops |
 |
|
| ma dove ho la testa!!! grazie! e pensare che ci ho pure riguardato 80 volte minimo! vabbè è tutto il pome che ci lavoro, devo essere un po' fuso! grazie mille, adesso pare proprio funzionare!! |
|
| Top |
|
|
|
|
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
