|
| Precedente :: Successivo |
| Autore |
Messaggio |
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
 Inviato: 08 Ott 2005 14:42 Oggetto: * [template] layout fluido a tre colonne |
 |
|
oggi vi propongo e commento un layout a tre colonne con posizionamento assoluto, uno dei modi per ottenere un layout solido, ben gestibile e molto usato
questo il codice:
| Codice: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="keywords" content="tutorial, prova, layout tre colonne, linguaggi web" />
<meta name="description" content="Esempio di tutorial a tre colonne creato per la sezione linguaggi del forum di Zeusnews" />
<meta name="robots" content="all" />
<meta name="Author" content="Reb" />
<title>.: Reb's Room :.</title>
<link href="stile_trecolonne.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenitore">
<div id="header">
<h1>Reb's Room</h1>
</div>
<hr />
<div id="corpo">
<div id="sinistra">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Chi sono</a></li>
<li><a href="#">Cosa faccio</a></li>
<li><a href="#">Varie</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
<hr />
<div id="centro">
<h2>Home page</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent risus. In convallis vehicula elit. Fusce id nulla.
Morbi augue nunc, volutpat et, scelerisque eget, aliquet
fermentum, nunc. Maecenas sit amet nisi in urna nonummy aliquet.
Phasellus turpis eros, interdum non, condimentum vel, pulvinar
in, nisi. Duis non turpis vitae erat ultrices sollicitudin.
Donec suscipit sodales nunc. Nulla facilisi. Aliquam erat
volutpat. Aenean a risus. Suspendisse iaculis viverra lorem. Nam
fermentum, mi semper ornare convallis, magna est luctus mauris,
ac congue ante enim quis lorem. Morbi ultricies diam eu leo.
Fusce fringilla sollicitudin sapien. Vivamus et neque in metus
tempus rhoncus.</p>
<img id="logoolimpo" src="olimpo.gif" alt="Il logo dell'Olimpo Informatico" />
<p>Nunc vitae diam lacinia ante iaculis luctus. Sed vel pede. Donec aliquet
luctus mauris. Vestibulum dapibus aliquet dolor. Cras posuere odio in elit.
Donec consectetuer varius mi. Cras molestie sagittis leo. Pellentesque varius,
dui a tempor mollis, mauris mauris ultricies neque, in malesuada augue metus
quis purus. Etiam tincidunt. Ut pulvinar. Pellentesque gravida placerat risus.
Ut malesuada. Fusce diam libero, ornare quis, ornare sed, placerat viverra,
ligula. Quisque mollis commodo quam. Etiam a pede.</p>
</div>
<hr />
<div id="destra">
<h3>News</h3>
<p>Morbi sit amet ipsum sit amet metus porta viverra. Praesent sed
dolor. Aenean a metus. Aliquam pede.</p>
<p>Cras orci. Duis gravida, augue sed gravida hendrerit, lorem
tortor sagittis nisi, at posuere mi augue quis pede.</p>
<p>Aliquam mollis, arcu quis tristique interdum, augue tortor
convallis leo, a condimentum turpis sem id orci. Etiam tincidunt
justo non augue.</p>
<h3>Siti amici</h3>
<ul>
<li><a href="#">Amico di penna</a></li>
<li><a href="#">Compagna di classe</a></li>
<li><a href="#">Vicino di casa</a></li>
<li><a href="#">Fornitore simpatico</a></li>
</ul>
</div>
</div>
<hr />
<div id="footer">
<p>Per info scrivetemi a questo indirizzo: <a href="mailto:reb@somewhere.net">reb@somewhere.net</a></p>
</div>
</div>
</body>
</html>
|
pari a questo risultato:
e questo il css:
| Codice: |
body {
background: #000 url(decobassa.jpg) no-repeat bottom right;
color: #fff;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 80%;
text-align: center;
border: 0px;
margin: 0px;
padding: 0px;
}
hr, h1 {
display: none;
}
h2, h3 {
color: #EC5F56;
}
img {
border: 0px;
}
a {
color: #00C000;
}
a:visited {
color: #C0E96E;
}
a:hover {
color: #D52127;
}
#contenitore {
margin-bottom: 10px;
}
#header {
height: 150px;
background: url(logo.jpg) no-repeat top left;
margin-bottom: 20px;
}
#corpo {
text-align: left;
position: relative;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 0px;
border-left: 1px solid black;
}
#sinistra {
width: 15%;
position: absolute;
top: 20px;
left: 0px;
padding: 10px;
}
#sinistra ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 98%;
}
#sinistra ul li {
margin: 0px 0px 5px 0px;
padding: 0px;
border: 1px solid #000;
}
#sinistra a {
display: block;
background: #808080;
color: #fff;
border-top: 1px solid #c0c0c0;
border-right: 1px solid #404040;
border-bottom: 1px solid #404040;
border-left: 1px solid #c0c0c0;
text-decoration: none;
font-weight: bold;
padding-left: 1%;
}
#sinistra a:hover {
border-top: 1px solid #404040;
border-right: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
border-left: 1px solid #404040;
padding-left: 2%;
}
#centro {
margin: 0% 28% 0% 16%;
padding: 10px;
border-right: 1px solid #fff;
}
#centro img {
width: 311px;
height: 122px;
float: right;
margin: 1%;
}
#destra {
width: 25%;
position: absolute;
top: 0px;
right: 0px;
padding: 10px;
}
#destra ul {
color: #00C000;
}
#footer {
margin-bottom: 50px;
text-align: left;
padding-left: 10px;
}
#footer p {
margin-top: 20px;
}
|
col quale si ottiene dal codice in alto il seguente risultato:
per comodita', spezzettero' il codice in tante sezioni che commentero' una per una
***
le tre immagini usate:
il logo (logo.jpg):
la decorazione in basso (decobassa.jpg):
il logo dell'olimpo (olimpo.gif):
occhio a rinominarle correttamente o a modificare il nome nel codice!
L'ultima modifica di rebelia il 08 Ott 2005 20:06, modificato 6 volte |
|
| Top |
|
 |
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 08 Ott 2005 14:42 Oggetto: |
|
|
prima parte del codice della pagina:
| Codice: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="keywords" content="tutorial, prova, layout tre colonne, linguaggi web" />
<meta name="description" content="Esempio di tutorial a tre colonne creato per la sezione linguaggi del forum di Zeusnews" />
<meta name="robots" content="all" />
<meta name="Author" content="Reb" />
<title>.: Reb's Room :.</title>
<link href="stile_trecolonne.css" media="all" rel="stylesheet" type="text/css" />
</head>
|
ho scelto di scrivere la pagina in xhtml strict, percio' lo indico in alto attraverso il doctype; questa dichiarazione ha la funzione di dire al browser quale linguaggio andro' ad usare e percio' di dargli corrette indicazioni su come interpretarla
all'interno del tag html dichiaro quale lingua usero': questa definizione serve ai browser vocali per la corretta lettura: non ci costa nulla indicarlo ed offre un ottimo servizio ad eventuali utenti che dovessero usare tale sistema di navigazione (e non necessariamente perche' non vedenti)
all'interno del tag head metto:
- i meta
- il titolo della pagina
- il link al css esterno
i meta:
- il primo serve ad indicare quale sara' il set di caratteri usato
- il secondo fornisce le parole chiave per la corretta archiviazione della pagina dai motori di ricerca
- il terzo fornisce la descrizione che comparira' quando il motore di ricerca proporra' il nostro link al pubblico
- il quarto ordina allo spider di visitare tutte le pagine, anche quelle interne
- il quinto indica l'autore
ce ne sono altri, ma diciamo che se questi sono correttamente compilati, gia' si e' a buon punto; attenzione con il meta robot: non sempre "all" e' la scelta migliore; per saperne di piu' sulle opzioni del meta robot e dei meta in generale, vi consiglio di dare un'occhiata qui
il titolo:
il titolo della pagina e' quanto comparira' nella barra in alto della finestra del browser; si puo' decidere di tenere un titolo unico per tutte le pagine, oppure - e secondo me e' la scelta migliore - di adeguarlo pagina per pagina ("reb's room - home", "reb's room - chi sono" etc... ) cosi' se l'utente ad esempio mette nei suoi preferiti piu' di una pagina, evita di sovrascrivere i link
link:
come gia' detto, linkare il file.css esterno e' uno dei modi di allegare i css al codice; per me il piu' efficace e quello che maggiormente sfrutta - assieme ad @import - tutti i vantaggi del css; e' possibile anche linkare piu' di un foglio di stile, ad esempio se se ne preparasse uno per la stampa
il tag head, ricordiamolo, contiene tutte quelle informazioni che - ad eccezione del title - non saranno visibili dal navigatore, ma servono a dare corrette indicazioni al browser ed ai motori di ricerca ed e' importante curare questa sezione esattamente come curiamo la parte visibile, cioe' quella contenuta nel body |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 08 Ott 2005 14:43 Oggetto: |
|
|
e dopo head, passiamo a body, che contiene cio' che il navigatore vedra' nel suo browser:
| Codice: |
<body>
<div id="contenitore">
<div id="header">
<h1>Reb's Room</h1>
</div>
<hr />
<div id="corpo">
<div id="sinistra">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Chi sono</a></li>
<li><a href="#">Cosa faccio</a></li>
<li><a href="#">Varie</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
<hr />
<div id="centro">
<h2>Home page</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent risus. In convallis vehicula elit. Fusce id nulla.
Morbi augue nunc, volutpat et, scelerisque eget, aliquet
fermentum, nunc. Maecenas sit amet nisi in urna nonummy aliquet.
Phasellus turpis eros, interdum non, condimentum vel, pulvinar
in, nisi. Duis non turpis vitae erat ultrices sollicitudin.
Donec suscipit sodales nunc. Nulla facilisi. Aliquam erat
volutpat. Aenean a risus. Suspendisse iaculis viverra lorem. Nam
fermentum, mi semper ornare convallis, magna est luctus mauris,
ac congue ante enim quis lorem. Morbi ultricies diam eu leo.
Fusce fringilla sollicitudin sapien. Vivamus et neque in metus
tempus rhoncus.</p>
<img id="logoolimpo" src="olimpo.gif" alt="Il logo dell'Olimpo Informatico" />
<p>Nunc vitae diam lacinia ante iaculis luctus. Sed vel pede. Donec aliquet
luctus mauris. Vestibulum dapibus aliquet dolor. Cras posuere odio in elit.
Donec consectetuer varius mi. Cras molestie sagittis leo. Pellentesque varius,
dui a tempor mollis, mauris mauris ultricies neque, in malesuada augue metus
quis purus. Etiam tincidunt. Ut pulvinar. Pellentesque gravida placerat risus.
Ut malesuada. Fusce diam libero, ornare quis, ornare sed, placerat viverra,
ligula. Quisque mollis commodo quam. Etiam a pede.</p>
</div>
<hr />
<div id="destra">
<h3>News</h3>
<p>Morbi sit amet ipsum sit amet metus porta viverra. Praesent sed
dolor. Aenean a metus. Aliquam pede.</p>
<p>Cras orci. Duis gravida, augue sed gravida hendrerit, lorem
tortor sagittis nisi, at posuere mi augue quis pede.</p>
<p>Aliquam mollis, arcu quis tristique interdum, augue tortor
convallis leo, a condimentum turpis sem id orci. Etiam tincidunt
justo non augue.</p>
<h3>Siti amici</h3>
<ul>
<li><a href="#">Amico di penna</a></li>
<li><a href="#">Compagna di classe</a></li>
<li><a href="#">Vicino di casa</a></li>
<li><a href="#">Fornitore simpatico</a></li>
</ul>
</div>
</div>
<hr />
<div id="footer">
<p>Per info scrivetemi a questo indirizzo: <a href="mailto:reb@somewhere.net">reb@somewhere.net</a></p>
</div>
</div>
</body>
</html>
|
nessuna indicazione particolare; per comporre la parte qui sopra ed in generale tutta la pagina sono partita da una struttura di questo tipo:
| Codice: |
<html>
<head>
<title></title>
</head>
<body>
<div id="contenitore">
<div id="header"></div>
<div id="corpo">
<div id="sinistra"></div>
<div id="centro"></div>
<div id="destra"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
|
ed ho poi provveduto a rimpolpare le varie sezioni; consiglio di usare l'indentazione: rende molto piu' leggibile il codice, evita di perdersi nei meandri del tag e piu' facile apportar modifiche
un tempo si tendeva a compattare tutto, la formattazione classica di html poi non aiutava a fare maggior chiarezza; la compattazione era fatta per recuperare qualche bit, ma credo che ormai il gioco non valga piu' la candela: molto meglio una pagina pulita e ben indentata, cosi' in qualunque momento saremo in grado di riprendere in mano il nostro lavoro ed apporre modifiche senza perderci ore per racapezzarci!
nota: e' importante - prima di partire - avere ben in mente quale sara' il risultato finale; la nostra pagina infatti si ripetera' uguale nella maggior parte del sito, ad eccezione della parte contenuta nel div "centro", percio' se costruiamo un buon template iniziale con tutti i div che ci serviranno, eviteremo di dover apportare modifiche piu' tardi; a questo proposito e' utilissimo simulare la grafica finale con un programma di fotoritocco (in pratica si apre una videata con un rapporto di 4:3 e si prova a posizionare gli elementi, ottenendo un risultato simile alla seconda immagine che ho postato PRIMA ANCORA DI INIZIARE A SCRIVERE UN SOLO TAG! a quel punto sara' sufficiente decidere quali elementi vanno disegnati e quali possono essere decorati tramite il css (le righe, ad esempio e gli sfondi, mentre logo e decorazione in basso vanno preparati a parte delle dimensioni finali) |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 08 Ott 2005 14:43 Oggetto: |
|
|
ed ora iniziamo con la parte divertente 
| Codice: |
body {
background: #000 url(decobassa.jpg) no-repeat bottom right;
color: #fff;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 80%;
text-align: center;
border: 0px;
margin: 0px;
padding: 0px;
}
|
apro un file di testo e lo salvo come stile_trecolonne.css (il nome non ha importanza, basta che l'estensione sia .css)
inizio ad impostare il body, dando le seguenti indicazioni:
- lo sfondo lo voglio nero e qua dentro indico anche la decorazione che comparira' in fondo alla pagina attraverso url(); dichiaro anche che voglio non sia ripetuta e che deve posizionarsi in basso a destra
- voglio che il testo sia di colore bianco; il colore e' espresso con valore esadecimale, originariamente #ffffff; siccome le due cifre di ogni coppia sono uguali, posso indicarne solo una (#fff; nel caso di un colore #ff0000 la contrazione sarebbe stata #f00)
- scelgo un carattere a bastoncino: verdana come prima scelta, arial come seconda, helvetica come terza (e' il carattere a bastoncino piu' usato nei mac) e comunque pongo anche un'indicazione generica (sans-serif, cioe' senza grazie, che sono i ricciolini ad esempio del times new roman); il carattere a bastoncino e' il piu' leggibile a monitor, esattamente come quello con le grazie (serif) e' il piu' leggibile su carta stampata
- desidero che la font sia l'80% dell'originale; le misure possono essere dichiarate anche in pt e px, ma la misura in percentuale e' compatibile con tutti i browser con l'opzione "ingrandisci carattere"
- dichiaro l'allineamento centrato; questa opzione e' usata soprattutto in caso di layout fisso per centrare il contenuto rispetto alla finestra con internet explorer
- imposto border, margin e padding a zero per evitare inspiegabili interferenze (alcuni browser danno dei valori diversi da zero, facendoci impazzire perche' non capiamo come mai la grafica che vorremmo appiccicata in alto sta invece qualche pixel sotto rovinandoci l'effetto!) |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 08 Ott 2005 14:44 Oggetto: |
|
|
appena sotto body, dichiaro alcuni tag generici:
| Codice: |
hr, h1 {
display: none;
}
h2, h3 {
color: #EC5F56;
}
img {
border: 0px;
}
a {
color: #00C000;
}
a:hover {
color: #D52127;
}
a:visited {
color: #C0E96E;
}
|
TUTTI i tag della pagina saranno impostati in questo modo, salvo disposizioni diverse piu' in basso (l'ultimo comando infatti sovrascrive ogni comando precedente)
hr e h1: ho inserito degli hr qua e la' al solo scopo di dividere visivamente le sezioni nel caso qualcuno navighi senza caricare il css (con un browser testuale, ad esempio); in questo modo sara' piu' semplice distinguere le varie parti rendendo piu' facilmente leggibile e fruibile il tutto; ho anche inserito un titolo contrassegnato dal tag h1 per lo stesso motivo; tali tag pero' non sono necessari e diventano anzi controproducenti nel layout che ho in mente, percio' li rendo invisibili - o per l'esattezza proprio inesistenti - attraverso il comando display: none
h2 e h3: piu' in basso ho usato i tag h2 ed h3 per contrassegnare altre sezioni e desidero che siano di color rosso pallido
img: desidero che di default non ci siano bordi attorno alle immagini; in questo modo evito che compaia il classico bordo attorno ad eventuali immagini linkate
link:
- con a dichiaro le caratteristiche comuni (in questo caso solo il colore che poi andro' a sovrascrivere, ma avrei potuto impostare font-weight bold ad esempio o font-style: italic per il corsivo e sarebbero state mantenute anche nei link hover e visited se non ci fossero disposizioni diverse;
- con visited indico come desidero che compaia un link gia' visitato
- con hover indico come voglio che cambi il link quando ci passo sopra con il mouse
nota: spesso i webdesigner (anch'io, lo confesso!) scelgono di non indicare visited per una questione estetica, ma dal punto di vista funzionale dare indicazioni all'utente su quali sezioni ha gia' visitato e quali no e' molto utile |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 08 Ott 2005 14:45 Oggetto: |
|
|
| Codice: |
#contenitore {
margin-bottom: 10px;
}
#header {
height: 150px;
background: url(logo.jpg) no-repeat top left;
margin-bottom: 20px;
}
|
questa parte e' facile: ho creato il div contenitore per inserirci tutto il resto; ho scelto un layout fluido, percio' le uniche indicazioni che gli do e' di starsene staccato dai quattro bordi di 10px e nient'altro; avessi scelto un layout fisso, avrei impostato ad esempio width: 750px e margin left e right in posizione auto (questo per la centratura con i browsers non-ie)
se non do indicazioni diverse, il div tende ad occupare tutto lo spazio a sua disposizione; attenzione pero' con il comando width 100%: potrebbe provocare la comparsa della barra di scorrimento orizzontale, percio' molto meglio non metter nulla
precedentemente ho creato un'immagine che rappresenta il titolo della pagina; non la inseriro' con il tag img, ma la usero' come sfondo; in questo modo alleggeriro' il caricamento della pagina stessa; l'immagine e' di 150px di altezza ed e' per questo motivo che imposto di tale misura anche l'altezza del div header; dico inoltre che voglio che l'immagine non sia ripetuta e la voglio posizionata in alto a sinistra; imposto anche un margin-bottom di 20 pixel per non avere l'header troppo appiccicato al corpo della pagina
consiglio di studiare layout che non richiedano posizionamenti troppo precisi: sara' cosi' piu' facile che la grafica tenga in un maggior numero di browsers; un oculato uso di spazi e "luce" tra un elemento e l'altro rendera' piu' semplice il nostro lavoro  |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 08 Ott 2005 14:45 Oggetto: |
|
|
| Codice: |
#corpo {
text-align: left;
position: relative;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 0px;
border-left: 1px solid black;
}
|
il servizio del div corpo e' di contenere i div che simuleranno le colonne, in modo da renderne piu' semplice la gestione; inizio con lo scrivere che voglio il testo al suo interno allineato a sinistra
sotto do a questo div il posizionamento relativo: serve per appoggiarci poi i div interni; il posizionamento assoluto infatti fa riferimento al primo posizionamento relativo che trova e se non ne trova alcuno, fa riferimento alla finestra del browser
nota: sono costretta ad impostare un bordino che rendo invisibile facendolo nero a causa di un baco di ie che fa finire la colonna di sinistra sopra a quella centrale; al lato sotto non imposto alcun bordo per evitare di interferire con l'immagine d'angolo in basso
| Codice: |
#sinistra {
width: 15%;
position: absolute;
top: 20px;
left: 0px;
padding: 10px;
}
|
- imposto il div sinistra ad una larghezza del 15%
- lo posiziono in maniera assoluta e do le coordinate su dove posizionarlo rispetto alla finestra di riferimento (in questo caso #corpo)
- gli do un padding di 10 pixel per evitare che il contenuto si appiccichi ai bordi
| Codice: |
#sinistra ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 98%;
}
#sinistra ul li {
margin: 0px 0px 5px 0px;
padding: 0px;
border: 1px solid #000;
}
|
partendo dall'id del div che li contiene, inizio a lavorare per ottenere l'effetto pulsanti nel menu di navigazione principale inserito a sinistra del layout:
dico che non voglio punti elenco e non voglio nemmeno margin o padding e inoltre imposto una larghezza del 98%
imposto anche il tag li: i valori (sempre) vanno letti top-right-bottom-left (alto-destra-basso-sinistra); non voglio padding (il valore unico viene interpretato per i quattro lati); per evitare che ie dia troppo spazio tra un pulsante e l'altro, imposto un bordo di 1 pixel nero per confonderlo con lo sfondo
| Codice: |
#sinistra a {
display: block;
width: 100%;
background: #808080;
color: #fff;
border-top: 1px solid #c0c0c0;
border-right: 1px solid #404040;
border-bottom: 1px solid #404040;
border-left: 1px solid #c0c0c0;
text-decoration: none;
font-weight: bold;
padding-left: 1%;
}
|
imposto i valori generici del tag a:
- display block per ottenere l'effetto pulsante (cioe' io ho il link anche se clicco fuori dalla scritta vera e propria
- larghezza al 100% (con ie non e' sufficiente la dichiarazione di display block da sola)
- sfondo
- colore
- bordo sinistro e alto leggermente piu' chiari dello sfondo del pulsante
- bordo destro e basso leggermente piu' scuri dello sfondo del punsante
- tolgo la classica sottolineatura al link
- imposto il grassetto per una miglior leggibilita'
- do un po' di luce nella parte sinistra
| Codice: |
#sinistra a:hover {
border-top: 1px solid #404040;
border-right: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
border-left: 1px solid #404040;
padding-left: 2%;
}
|
inverto il colore del bordo di sinistra con destra e di alto con basso ed inoltre aumento leggermente il padding di sinistra: in questo modo ottengo l'effetto bottone premuto senza usare alcuna immagine, tecnica usata in passato per ottenere lo stesso risultato
| Codice: |
#centro {
margin: 0% 28% 0% 16%;
padding: 10px;
border-right: 1px solid #fff;
}
#centro img {
width: 311px;
height: 122px;
float: right;
margin: 1%;
}
|
il div #centro non e' posizionato, a differenza dei due laterali; ha pero' un margine sinistro e destro pari alla larghezza dei div sinistro e destro, piu' un po' di luce per evitare che i contenuti interferiscano tra loro
per lo stesso motivo, do anche un padding di 10 pixel
imposto inoltre un bordo destro di 1 pixel, solido e di colore bianco
***
inserisco un'immagine: alle immagini di solito si da un id per impostare larghezza ed altezza essendo spesso diverse fra loro; in questo caso ho un'unica immagine nel div corpo, percio' decido di formattarla usando il percorso #centro img
do larghezza ed altezza e la faccio fluttuare sulla destra; in questo modo il testo che verra' dopo le fluira' attorno: il margin dell'1% serve sempre per dare luce attorno all'immagine
| Codice: |
#destra {
width: 25%;
position: absolute;
top: 0px;
right: 0px;
padding: 10px;
}
#destra ul {
color: #00C000;
}
|
div di destra: nessun accorgimento particolare; imposto la larghezza, do il posizionamento assoluto come per quello di sinistra e lo posiziono in alto a destra anziche' in alto a sinistra; anche a questo do un padding di 10px
per ottenere che il colore del puntino sia uguale al colore del link, imposto in ul il medesimo colore impostato per il link generico (a)
L'ultima modifica di rebelia il 08 Ott 2005 20:07, modificato 4 volte |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 08 Ott 2005 14:45 Oggetto: |
|
|
ed eccoci arrivati in fondo:
| Codice: |
#footer {
margin-bottom: 50px;
text-align: left;
padding-left: 10px;
}
#footer p {
margin-top: 20px;
}
|
allontano il fondo del layout dando un margin bottom di 50px al footer
imposto anche in questo div l'allineamento del testo a sinistra ed imposto pure un po' di padding a sinistra
al paragrafo del footer imposto un margine in alto di 20px per evitare che si attacchi al testo sopra
***
il layout e' solido ed utilizzabile in molti siti; unica attenzione e' di avere sempre nel div centrale piu' contenuto di quello dei div laterali; il posizionamento assoluto infatti toglie gli elementi che ce l'hanno dal flusso del codice, rendendoli inesistenti, quindi gli altri rischiano di finire sotto di essi
nel caso uno dei div laterali sia piu' lungo del div centrale e per evitare che il footer finisca sotto, e' sufficiente dare - eventualmente attraverso una classe creata ad hoc - un padding adeguato al div centrale nelle pagine in cui dovesse essere necessario |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 08 Ott 2005 14:52 Oggetto: |
|
|
disclaimer: per cortesia stendete un velo sulla grafica scelta: c'e' di peggio, ma ben poco 
nota: per comodita' di visualizzazione, ho inserito dei contenuti nel div #corpo; voi create il layout senza quei contenuti, salvatelo come template e poi usate questo template per creare le singole pagine inserendo in #corpo il contenuto adeguato |
|
| Top |
|
|
kkk2003
Dio minore
Registrato: 11/08/05 06:15
Messaggi: 863
Residenza: Mosca - Russia
|
| Inviato: 08 Ott 2005 16:10 Oggetto: |
|
|
| beh... intanto grazie!! |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 08 Ott 2005 16:16 Oggetto: |
|
|
| kkk2003 ha scritto: | | beh... intanto grazie!! |
prego, in un altro momento te ne faccio una con quella cosa particolare del div con la scroll che mi hai chiesto, solo che non mi pareva il caso di infilare troppa carne sul fuoco di un solo thread
tra l'altro malgrado fossi partita col fare una soluzione proprio per te, ho pensato che il tre colonne e' una soluzione molto usata che puo' tornar buona ad altri: arrivati li', mettiamo a punto le cose che preferisci differenti |
|
| Top |
|
|
kkk2003
Dio minore
Registrato: 11/08/05 06:15
Messaggi: 863
Residenza: Mosca - Russia
|
| Inviato: 08 Ott 2005 19:10 Oggetto: |
|
|
Hai pensato proprio bene.
E mi sembra che la tua soluzione abbia gia' risolto quello che non mi tornava nella mia costruzione (cioe' che la parte centrale non era, appunto, centrata!). ora ci studio un po'! |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 08 Ott 2005 19:17 Oggetto: |
|
|
| kkk2003 ha scritto: | Hai pensato proprio bene.
E mi sembra che la tua soluzione abbia gia' risolto quello che non mi tornava nella mia costruzione (cioe' che la parte centrale non era, appunto, centrata!). ora ci studio un po'! |
sai qual'e' il problema con i div ed i css? problema relativo, intendo: che richiedono piu' precisione gia' dalle fondamenta di quanto non ne richiedano le tabelle che possono essere piu' facilmente raffazzonate
piu' precisione dall'inizio quindi, ma anche un risultato di gran lunga migliore alla fine |
|
| Top |
|
|
kkk2003
Dio minore
Registrato: 11/08/05 06:15
Messaggi: 863
Residenza: Mosca - Russia
|
| Inviato: 08 Ott 2005 20:55 Oggetto: |
|
|
Mi sono dato da fare... ho tagliato e incollato un po', ed ho pubblicato la nuova home page...
ma... la vedo bene solo con FF!!
Con opera non vedo l'intestazione, e con IE... vedo solo il logo!!!
Domani provvedo a postare delle immagini!
Buonanotte! |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 08 Ott 2005 23:27 Oggetto: |
|
|
| kkk2003 ha scritto: | Mi sono dato da fare... ho tagliato e incollato un po', ed ho pubblicato la nuova home page...
ma... la vedo bene solo con FF!!
Con opera non vedo l'intestazione, e con IE... vedo solo il logo!!!
Domani provvedo a postare delle immagini!
Buonanotte! |
senza approfondire troppo, posso gia' segnalarti un paio di cose:
| Codice: |
<h1>Home Page di Andrea Bellucci/h1>
|
chiudi il tag h1 aggiungendo <
e poi tutto il codice che c'e' sotto il tag </html> dovresti spostarlo; ad esempio lo script puoi richiamarlo inserendo nell'head il link (sotto il tag </html> non dovrebbe starci nulla)
| Codice: |
<head>
... (contenuto attuale)...
<script language="JavaScript" src="http://bs.yandex.ru/show/163"></script>
</head>
|
mentre non ho capito cosa vadano a chiudere tutti questi tag:
| Codice: |
<!-- ><!-- ">-- '><!-- --></textarea></form>
</title></comment></a>
</div></span></ilayer></layer></iframe></noframes></style></gmail notifier></table></script></applet></font>
|
e dovresti anche eventualmente spostare nell'head il tag style:
| Codice: |
<head>
... (contenuto attuale + tag script)...
<style>
#bn {display:block;}
#bt {display:block;}
</style>
</head>
|
ma prima verifica cosa vanno a formattare, perche' non ho trovato alcun riferimento nella home
con un'opzione di dubbio per lo script, per il resto cosi' a naso, mi sa che puoi tranquillamente buttare tutto quel che sta sotto </html>
prova a correggere queste parti, poi vediamo come va
p.s. grazie per la citazione  |
|
| Top |
|
|
kkk2003
Dio minore
Registrato: 11/08/05 06:15
Messaggi: 863
Residenza: Mosca - Russia
|
| Inviato: 09 Ott 2005 11:13 Oggetto: |
|
|
Mi sono sentito proprio come uno studente che non ha controllato il proprio lavoro!!
ho chiuso il tag, e tutto e' andato a posto.
Ma per l'altra parte di codice, non e' mano mia: viene inserito in automatico da "yandex", il fornitore gratuito del mio spazio web... non c'e' niente da capire...
Adesso... ci studio ancora un po'.. e poi tornero' a chiedere aiuto! Visto che viene cosi' bene.... devo modificare anche le altre pagine, ora!!! |
|
| Top |
|
|
kkk2003
Dio minore
Registrato: 11/08/05 06:15
Messaggi: 863
Residenza: Mosca - Russia
|
| Inviato: 09 Ott 2005 13:04 Oggetto: |
|
|
Eccomi qua!
come anticipato, ho provato ad impostare anche le altre pagine (le principali), secondo il modello realizzato.
Ma... credo di aver unito al sacro, il profano! cioe', nella pagina dei link, ho semplicemente inserito la mia bella tabella!! Non si fa?!?
E quale e' il modi migliore, per ottenere questo allineamento, allora?! |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 09 Ott 2005 19:32 Oggetto: |
|
|
| kkk2003 ha scritto: | | Mi sono sentito proprio come uno studente che non ha controllato il proprio lavoro!! |
ma no, scusami non volevo darti quest'impressione
e' che i div hanno mille e uno pregi, ma richiedono attenzione, altrimenti e' un attimo a sballare tutto
se ti puo' consolare a me succede ad ogni pie' sospinto di far casino con qualche tag
| Citazione: |
Ma per l'altra parte di codice, non e' mano mia: viene inserito in automatico da "yandex", il fornitore gratuito del mio spazio web... non c'e' niente da capire... |
fai una prova: prepara le pagine ben fatte in locale, rimuovi TUTTE le pagine sul server in remoto tranne le immagini e ripiazzaci le pagine "pulite"
quello e' un errore e dev'essere corretto, tanto meglio se non ce l'hai solo tu, percio' se fatto questa manovra persiste il problema, prova a scriver loro, perche' puo' anche essere che c'e' un disguido di cui non si sono accorti o roba del genere
| kkk2003 ha scritto: | | nella pagina dei link, ho semplicemente inserito la mia bella tabella!! Non si fa?!? |
e perche' no?
diciamo che in alternativa potresti fare un elenco:
| Codice: |
<ul>
<li><a href="indirizzo">beppegrillo.it</a>: il blog di beppe grillo</li>
<li>...</li>
</ul>
|
e sarebbe piu' corretto; se preferisci un elenco numerato, non devi far altro che sostituire <ol> a <ul> |
|
| Top |
|
|
kkk2003
Dio minore
Registrato: 11/08/05 06:15
Messaggi: 863
Residenza: Mosca - Russia
|
| Inviato: 11 Ott 2005 20:10 Oggetto: |
|
|
| rebelia ha scritto: | | kkk2003 ha scritto: | | Mi sono sentito proprio come uno studente che non ha controllato il proprio lavoro!! |
ma no, scusami non volevo darti quest'impressione |
sei troppo buona!
posso dire che dalla mia, avevo la scusa che FF mi faceva vedere tutto a posto...
a proposito di FF, come mai, secondo te, mi fa vedere a fondo pagina
??
Adesso...
sto cercando di impostare le pagine principali. Avevo un indice di album fotografici, sempre in una tabella, e ho provato a metterli in elenco, con questo risultato:
link
Ma mi piacerebbe allineare le foto (una sotto l'altra), ed il testo a destra... proprio come nella mia tabella... c'e' un modo per farlo? O forse il modo migliore e' proprio... metterci una tabella???
|
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 08:22
Messaggi: 7987
|
| Inviato: 12 Ott 2005 00:04 Oggetto: |
 |
|
| kkk2003 ha scritto: |
a proposito di FF, come mai, secondo te, mi fa vedere a fondo pagina
|
e' parte del famoso codice da eliminare di cui ti dicevo; nella fattispecie, e' la parte finale di un commento, nel senso: se voglio commentare il codice per scriverci delle spiegazioni che mi possono tornar buone quando andro' a rilavorarci o ci dovranno lavorare gli altri, oppure per qualche motivo voglio momentaneamente nascondere una parte del codice, lo "commento" inserendo all'inizio <!-- e alla fine -->
se li si usa assieme, non ci sono problemi, ma se ne si usa uno solo, si vede; come dicevo, in fondo alla tua pagina ci sono un sacco di chiusure che andrebbero eliminate o da te o da chi ti fornisce lo spazio, perche' non ci dovrebbero proprio essere: a) perche' non ci sono i relativi tag di apertura e b) perche' dopo il tag </html> non ci dovrebbe essere piu' nulla
| Citazione: |
Adesso...
sto cercando di impostare le pagine principali. Avevo un indice di album fotografici, sempre in una tabella, e ho provato a metterli in elenco, con questo risultato:
link
Ma mi piacerebbe allineare le <a href="http://clk.tradedoubler.com/click?p=17837&a=441108&g=172736" target="_blank">foto</a> (una sotto l'altra), ed il testo a destra... proprio come nella mia tabella... c'e' un modo per farlo? O forse il modo migliore e' proprio... metterci una tabella???
|
mmm... ni 
la tabella puo' andar bene per incolonnarle e le controindicazioni possono essere accettabili dal punto di vista di una buona struttura se nella stessa cella ci metti sia la foto che il relativo testo e questo lo puoi fare ad esempio in questo modo:
| Codice: |
<table>
<tr>
<td>
<img src="..." />
<p>descrizione immagine bla bla bla</p>
</td>
</tr>
<tr>
...
</tr>
</table>
|
e nel css scrivi:
| Codice: |
td img {
float: left;
margin-right: 10px;
}
|
in questo modo il testo finisce a fianco all'immagine e ne sta distaccato grazie a quel pizzico di margine che gli dai |
|
| 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
