In questo periodo ho letto tante guide, prelevate da html.it, ma dato gli impegni di lavoro e di famiglia, non sono certo diventato un web master!!!!!
A parte tutto, dopo aver letto la guida css di base, ho cercato di realizzare la mia index, utilizzando per l'appunto css, scopiazzando il codice della guida; mi piacerrebbe anche realizzare un css per la stampa.
Il risultato non è un granchè, quindi vi chiedo un consiglio.
Devo ammettere che mi destreggio meglio utilizzando un editor html visuale, finora avevo usato molto le tabelle, più facili da gestire per me; quindi meglio tabelle o i livelli?
Ho anche letto la guida "interfacce web con photoshop" e sto provando a realizzare la index anche così; infatti mi piace molto l'aspetto finale della stessa, riportata sulla guida in questione.
Insomma vorrei che la mia index avesse in alto nel header, una barra di navigazione principale (Home, Contatti, Mappa) e un logo prima del title, mantenedo la colonna sinistra con i menù alle varie sezioni del sito, il corpo centrale per le notizie relative alle varie sezioni del sito, come quella realizzata appunto con photoshop, la colonna destra per le news in genere, campi ricerca e login, e magari un pò di pubblicità, oltre avviamente al footer.
La index poi diverrebbe un modello per le altre pagine del sito, specifiche per le varie sezioni, apportanto le opportune modifiche al codice.
Spero di essere stato chiaro, se non vi dispiace potrei realizzare la index in html con editor visuale, e postarla in modo da farvi rendere conto cosa intendo.
magari si puo' artir da li e' proprio in 3 colonne
scusa ma è tutto grafico? non è pesante da caricare.
Appena posso posto la index cosi mi date un consiglio.
sono appena 11,3 kb ... molto leggera vero? ho visto l tuo index con il css non e' male ma lo devi lavorare molto molto di piu' ... la grandezza in html giusta per la visione deve essere una risoluzione 800x600 inizia da li e inserisci in quello spazio le 3 colonne.....
Ragazzi un'aiuto.
Ho impostato il layout del mio sito, utilizzando css, ma non riesco a mettera la sezione "colonnadx" dove dovrebbe, cioè a dx; anhe il footer non è a posto. (so che c'è molto da lavorare ancora!!!!)
Ho riguardato il codice diverse volte, ma niente.
In allegato i file
Grazie
Ciro
Ragazzi un'aiuto.
Ho impostato il layout del mio sito, utilizzando css, ma non riesco a mettera la sezione "colonnadx" dove dovrebbe, cioè a dx; anhe il footer non è a posto.
Ho riguardato il codice diverse volte, ma niente.
In allegato i file
Grazie
Ciro
line 50 column 1 - Warning: missing </div>
line 13 column 1 - Warning: missing </div>
line 37 column 12 - Warning: <img> attribute "src" lacks value
line 37 column 34 - Warning: <img> attribute "src" lacks value
line 50 column 1 - Warning: <div> attribute "id" has invalid value "sezione centro"
line 51 column 1 - Warning: <div> attribute "id" has invalid value "news brevi"
line 51 column 23 - Warning: <img> attribute "src" lacks value
line 51 column 23 - Warning: <img> attribute "width" lacks value
line 51 column 23 - Warning: <img> attribute "height" lacks value
line 53 column 1 - Warning: <div> attribute "id" has invalid value "primo piano"
line 55 column 4 - Warning: <img> attribute "src" lacks value
line 55 column 4 - Warning: <img> attribute "width" lacks value
line 55 column 4 - Warning: <img> attribute "height" lacks value
line 55 column 44 - Warning: <img> attribute "src" lacks value
line 55 column 44 - Warning: <img> attribute "width" lacks value
line 55 column 44 - Warning: <img> attribute "height" lacks value
line 55 column 84 - Warning: <img> attribute "src" lacks value
line 55 column 84 - Warning: <img> attribute "width" lacks value
line 55 column 84 - Warning: <img> attribute "height" lacks value
line 59 column 4 - Warning: <img> attribute "src" lacks value
line 59 column 4 - Warning: <img> attribute "width" lacks value
line 59 column 4 - Warning: <img> attribute "height" lacks value
line 62 column 4 - Warning: <img> attribute "src" lacks value
line 62 column 4 - Warning: <img> attribute "width" lacks value
line 62 column 4 - Warning: <img> attribute "height" lacks value
line 67 column 1 - Warning: <div> attribute "id" has invalid value "box ricerca"
line 71 column 1 - Warning: <img> attribute "src" lacks value
line 71 column 1 - Warning: <img> attribute "width" lacks value
line 71 column 1 - Warning: <img> attribute "height" lacks value
line 35 column 1 - Warning: trimming empty <p>
0 errors / 30 warnings
Forse perchè hai messo "colonnadx" con float left anziche right?
Ps. nel definire gli stili dei div elimina gli spazi, es: da "siti preferiti" a "sitipreferiti" altrimenti non si tratta di XHTML 1.0 come da te indicato nel file.
Del footer invece hai definito solamente i link non il div...
Per antonello, cosa sono le righe che hai riportato (tieni presente che non avendo ancora le immaggini, non ho messo i riferimenti e altri valori.
Per Mazoco, ho messo colonnadx - float= left, perchè ho capito, leggendo le varie guide su html.it, che cmq questa si appoggia a sx, dove trova la colonna centrale che a sua volta è a sx, appoggiata a colonnasx.
Proverò float= right
Oppure potresti provare con il valore "absolute" o "relative"
mazoco ho risolto spostando sezione centro dopo la colonna dx.
Ora però vorrei chiedertii dei consigli:
1) occorre dare ai div, width diversi per i vari broswer?
2) occorre dare al #sezionecentro il margin= 0 150px, visto che le colonne laterali sono 150px, o va bene il float=left;
3) ho provato a dare un bordo al sezionecentro, ma finisce sotto la colonnasx, con float=left. Devo per caso ridurre width dello spessone del bordo;
4) meglio il float o position?;
5) per caricare un css esterno meglio Link o @import? link va usato per attributo Media con css alternativi;
sto cercando di realizzare il layuot da poter mettere a disposizione di chiunque voglia usarlo come modello per realizzare le pagine del proprio sito.
Rispondo in ordine sparso
3) per il bordo ti complicherò un po' la vita, ma ti assicuro che ti consentirò una totale personalizzazione dei bordi...
prova con:
border-lato del div-color: #colore;
border-lato del div-style: stile (dotted,hidden, none, ecc...);
border-lato del div-width: "tot"px; [spessore del bordo]
"Lato del div" ovviamente sono 4: top, bottom, right, left
1) non necessariamente, una volta impostate le dimensioni esse rimangono tali for even given browser
4) Dipende dalle tue esigenze, float io lo vedo meglio per le immagini. Ma sono opinioni personali...
5) @import te lo consiglio se devi caricare più di un css.
Il primo in elenco sarà il primo ad essere applicato il secondo per secondo e così via...
@import è molto utile per dare uno stile alla versione stampata del sito dando un css per ogni dispositivo.
Ad esempio:
@import url(stampante.css) print;
@import url(sitarello.css) screen;
Presta attenzione alla sintassi dell'@import perchè i browser antidiluviani non lo interpretano facilmente
2) perché margin: 0 150px?
Ho approntato questo modello di layout a tre colonne da poter impiegare eventulamente, come index o anche altre pagine interne, di fcb.
Ritengo a mio parere, che molte pagine interne dal punto di vista prettamente "Stilistico" non sono proprio belle da vedere; anche a livello di codice credo che lo si possa snellire molto rendendole più leggere.
Infatti ci sono troppe tabelle, e tutte definite all'interno della pagine/file stesso.
Penso, Mazoco può smentire o confermare, che con css si possono definire gli attributi ed i valori principali delle tabelle, lasciando poi all'interno del relativo file, la possibilità di adattala alle esigenze.
Spero di avere dato un'idea di cosa intendo, nell'ottica di rendere sempre più completo e bello fcb.
Questa è solo una bozza, cmq in allegato i file index, il file css eanche un css per la stampa.
Fatemi saper qualcosa, ciao e grazie
specifico ancora meglio la mia idea, il layout sarebbe cosi composto (accanto ho messo delle dimensioni che ritendo giuste), salvo poi definire con i css tutto:
1) container, che rappresenta il contenitore principale;
2) header 750x150px, inesire title site, banner, icon;
3) barnav 750x20px, per la barra di navigazione principale (Home Page, Contatti, altro);
4) colonnasx 150px, per il menu di navigazione, preferiti, siti amici, banner;
5) centro, per i contenuti (notizie, approfondimenti, classfiche. ecc);
6) colonnadx 150px, per box ricerca, box news (usufruendi di qualche script per le news brevi), box login (per la index di fcb), sondaggi ed altro;
7)footer 750x30px, per copyright, autore ecc.
Chiaramente avvalendosi dei css si possono definire in html, body gli attributi principali e generali (font-family, font-size, color, background, ecc), lasciando ai singoli div, class specifici e attributi ad hoc.
Ciao
Ritengo a mio parere, che molte pagine interne dal punto di vista prettamente "Stilistico" non sono proprio belle da vedere; anche a livello di codice credo che lo si possa snellire molto rendendole più leggere.
Infatti ci sono troppe tabelle, e tutte definite all'interno della pagine/file stesso.
Penso, Mazoco può smentire o confermare, che con css si possono definire gli attributi ed i valori principali delle tabelle, lasciando poi all'interno del relativo file, la possibilità di adattala alle esigenze.
Appoggio e sottoscrivo, ma ritengo che la strada da seguire per snellire il codice e conferire maggiore personalizzazione e adattabilità a fcb sia quella dei tpl...
Io anzichè definire le dmensioni in px le definirei in percentuale, vanno bene sia per un 800x600 cacio sia per un 1024x768 che per altre definizioni video
intendi i template engine come rain tpl??
tpl, volgarissimi template html con estensione tpl
Se invece si decidesse di usare un engine così su due piedi propenderei per smarty
Se invece si decidesse di usare un engine così su due piedi propenderei per smarty
Alla grande Smarty is the best template engine... sono gia al lavoro
Se invece si decidesse di usare un engine così su due piedi propenderei per smarty
ne parlavamo qualche tempo fa con derevko di utilizzare smarty che per conto mio è una cosa potente!! però bisogna avere il tempo per studiarlo!!
Non vorrei dire una inesattezza, ma credo che Antonello per la 1.5 ha parlato di usare dei template.
Cmq sia ragazzi, chiedo cortesemente un vs giudizio sulla bozza di index; può essere utile alla causa o no??.
Fatemi sapere i vs commenti e le critiche.
Grazie e ciao
Ciro
Secondo me .... e troppo personalizzata dovresti lasciare degli sapzi vuoti dove hai messo news e cosi via e inserire una spiegazione su come personalizzare la pagina.... e soprattutto dovresti fare in modo di colorire o meglio adeguare i colori di base della pagina a quelli di fantabazar... Pero' non e' male
Ho perferzionato ancora il layout.
Prima di postarlo, volevo chiedere se lo si potrebbe utilizzare come modello per le pagine di fcb, almeno avrebbero tutte una struttura impostata, pulita, lineare e similare. (fatte salve le opportune modifiche specifiche per ogni pagina).
Ieri ho provato io a fare qualcosa ma niente da fare (ho inserito echo ai vari div #header, #barnav); risultati pessimi!!!
Difatti partendo da index.php e header.php, volevo fare in modo che la index avesse per l'appunto la struttura definita con il layout, e che la stessa fosse richiamata anche nelle altre pagine, almeno per le componenti essenziali (header, barnav, colonnasx, colonnadx, sezionecentrale e footer) con annidiati il menu ect.
Potreste cortesemente farmi sapere cosa ne pensate!!!
Ciao e grazie
Ciro
Ragazzi nessuno di voi mi dice cosa ne pensa della suddetta proposta?
Vedo che si continua a lavorare su migliorie ai menu, alla grafica, ma pensare di lavorare sul layout, no?
Sarebbe davvero bello se tutte le pagine dello script avessero lo stesso layout, del resto è già pronto, basta solo inserirlo in php (ah.... se solo fossi capace!!!!!).
Ciao, fatemi sapere anche se negativo.
Ciro
Se n'è già parlato in altri thread, il tuo sogno sarà realizzato dopo l'uscita della 1.5 quando verrà inserito smarty
ragazzi sono di nuovo a chiedere il vs aiuto, sopratutto agli esperti di html e di css.
Ho completato e perferzionata la mia index, per la quale vorrei un parere per il codice e css. ho fatto uso del layout a tre colonne con float, con i div per ogni parte dello stesso; leggendo varie guide ho fatto uso anche dei nifty corners. Il mio problema è che se inserisco contenuti superiori nella colonna centrale, dove sono i nifty, questi si estendono a coprire il footer e le colonne laterali non si allungano, pur avendo messo width= 100% (o era meglio auto). altra cosa fastidiosa ogni volta che carico la pagina vista mi chiede autorizzazione per lo script.
Vorrei quindi che qlc di voi mi dia un parere sul mio operato, se devo o potevo alleggerire il codice, critiche, ma siate leggeri, sono pur sempre autodidatta.
resto in attesa dei vs pareri e consigli, cosi posso andare avanti utilizzando la index come modello e completare il sito.
Ciao da ciro
allegati file index e stilisito.css
Un giudizio... apprezzo davvero la buona volonta'... semplice ma chiaro ed efficace e poi bello l'effetto menu anche se io li avrei fatti aprire a destra, e non farli sovrapporre. Pero' bravo, sarebbe una buiona base.
infatti no sono stato capace di farlo apparire a destra, lo avevvo realizzato per metterlo in alto. se sai come modificarlo mi fai un piacere.
Per il resto no puoi dirmi altro.
Ciao ciro
Foglio css aprilo e inserisci questo box modificato
div#vermenu li:hover ul{
display:block;
z-index:1;
width:149px;
padding:0;
margin: 0 0 0 -1px;
border: 1px solid #0000FF;
background:#FFFFCC;
}
al posto del tuo
div#vermenu li:hover ul{
display:block;
position:absolute;
z-index:1;
width:149px;
padding:0;
margin: 0 0 0 -1px;
border: 1px solid #0000FF;
background:#FFFFCC;
}
e vedi la differenza del menu'.
In questo modo si apre smepre in basso ma non sovrappone i link ma apre una nuova finestra tra un link e l'altro
Prova a vedere questo ovviamente i link sono diversi ma se vuoi prova a settare il colore e tutto quello che vuoi e' solo un'idea... i file sono allegati
link online???
non ancora sono in local host
Prova a vedere questo ovviamente i link sono diversi ma se vuoi prova a settare il colore e tutto quello che vuoi e' solo un'idea... i file sono allegati
cosa hai cambiato di preciso, a parte i menu verticale
Nel primo post ti ho postato la modifica al tuo css
Nel secondo ho inserito Sotto al tasto ome i vari link che si aprono e nell'header una parte di codice che racciude lo script e il foglio di stile incorporato...