Olimpo Informatico :: Leggi argomento - * pagine web photoshop e html

Olimpo Informatico
I Forum di Zeus News
Leggi la newsletter gratuita - Attiva il Menu compatto

FAQ

Cerca

Lista utenti

Gruppi

Registrati

Profilo

Messaggi privati

* pagine web photoshop e html

Indice del forum -> Linguaggi per Internet

Precedente :: Successivo

Autore

Messaggio

rebelia
Dio maturo

Registrato: 17/07/03 09:22
Messaggi: 7987

Inviato: 29 Ago 2006 16:09 Oggetto:

Albatro ha scritto:

per capire ci metto un po'ma alla fine poi realizzo Mr. Green

visto con le colonne?l'ho rifatto parecchie volte poi alla fine wowwww Very Happy

vedrai: piu' prendi mano e piu' diventa divertente Very Happy

Citazione:

per il footer ammeno che' non hai qualcosa tu di particolare da consigliare
per me l'importante e' che posso metterci dei contenuti all'interno

beh, puoi gia' metterci dei contenuti all'interno, e' sufficiente metterli tra l'apertura e la chiusura del div #footer e cioe':

Codice:

<div id="footer">

[contenuto che vuoi inserire]

</div>

normalmente per inserire qualcosa usi il tag <p>, paragrafo, quindi avrai qualcosa del genere:

Codice:

<div id="footer">

<p>Sito realizzato da <a href="mailto:tuonome@provider.ext">tuonome@provider.ext</a>, tutti i diritti riservati</p>

</div>

Citazione:

da quello che mi ha spiegato mi par di capire che ho diverse soluzioni,solo che non ho capito se devo aggiungere del codice a quello che gia' ho.

i primi due files - .html e .css - li stiamo man mano integrando con dei nuovi pezzi di codice, quindi se prima avevi ad esempio un pezzo del css che diceva (ocio che e' un esempio a caso!)

Codice:

#contenuto {
text-align: left;
}

e poi decidiamo di aggiungere altre caratteristiche al div #contenuto, devi SOSTITUIRE il pezzo sopra con quello nuovo che puo' essere ad esempio questo (non ricopiarlo, ti sto solo facendo un esempio!):

Codice:

#contenuto {
text-align: left;
border-bottom: 1px dashed green;
background: #e2e2e2;
color: #000080;
}

o - nel caso non ci sia ancora nulla - lo inserisci piu' o meno dove dovrebbe stare, quindi parlando del codice per formattare l'elenco di link che vuoi inserire nel div #uno, lo inserirai *dopo* la formattazione di #contenuto e *prima* della formattazione di #footer

se aggiungiamo anche un minimo di formattazione per il footer, il tuo css sara' cosi':

Codice:

#contenuto {
text-align: left;
}

#uno ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#uno ul li {
margin: 0px;
padding: 0px;
}

#uno ul li a {
text-decoration: none;
}

#uno ul li a:hover {
text-decoration: underline;
}

#footer {
background: #999;
border-top: 3px solid #000;

non e' possibile usare per l'elenco del div#uno la stessa formattazione che uso per il div#menu, perche' nel div#menu ho una lista di link *in orrizontale*, mentre nel div#uno ho una lista di link *in verticale, percio' andro' a dire al browser che la lista (ul) del div#uno me la deve formattare in una maniera diversa

devi considerare il codice come un percorso del tris, dove passi da un livello all'altro passando per i nodi: ecco, io inizio dal nodo principale che e' l'id del div (ad esempio #uno) poi vado al tag appena all'interno che e' la lista (<ul>) poi raggiungo quello ancora piu' interno che e' il punto elenco (<li>) e poi ancora il link che sta all'interno (l'<a>), quindi il percorso sara' rispettivamente

#uno
#uno ul
#uno ul li
#uno ul li a

spero di essere stata un poco piu' chiara, casomai dillo che ci riproviamo Smile

L'ultima modifica di rebelia il 29 Ago 2006 22:22, modificato 2 volte

Top

Albatro
Eroe in grazia degli dei

Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma

Inviato: 29 Ago 2006 21:32 Oggetto:

rebelia ha scritto:

Albatro ha scritto:

per capire ci metto un po'ma alla fine poi realizzo Mr. Green

visto con le colonne?l'ho rifatto parecchie volte poi alla fine wowwww Very Happy

vedrai: piu' prendi mano e piu' diventa divertente Very Happy

Citazione:

per il footer ammeno che' non hai qualcosa tu di particolare da consigliare
per me l'importante e' che posso metterci dei contenuti all'interno

beh, puoi gia' metterci dei contenuti all'interno, e' sufficiente metterli tra l'apertura e la chiusura del div #footer e cioe':

Codice:

<div id="footer">

[contenuto che vuoi inserire]

</div>

normalmente per inserire qualcosa usi il tag <p>, paragrafo, quindi avrai qualcosa del genere:

Codice:

<div id="footer">

<p>Sito realizzato da <a href="mailto:tuonome@provider.ext">tuonome@provider.ext</a>, tutti i diritti riservati</p>

</div>

Citazione:

da quello che mi ha spiegato mi par di capire che ho diverse soluzioni,solo che non ho capito se devo aggiungere del codice a quello che gia' ho.

i primi due files - .html e .css - li stiamo man mano integrando con dei nuovi pezzi di codice, quindi se prima avevi ad esempio un pezzo del css che diceva (ocio che e' un esempio a caso!)

Codice:

#contenuto {
text-align: left;
}

Codice:

#contenuto {
text-align: left;
border-bottom: 1px dashed green;
background: #e2e2e2;
color: #000080;
}

Codice:

come vedi dal layout la sottolineatura fissa sotto ai link si e' tolta.per il footer credevo venisse la classica barra che delimitasse le due colonne dal centrale.

[img] http://img74.imageshack.us/my.php?image=layouttj5.jpg [/img]

in quanto ai link se dovessi metterli anche sulla colonna di destra,come devo fare? Very Happy

Codice:

Ultima domanda e poi vado a nanna ch so cotto,non credo che dovro mettere la porzione di codice qui sopra riportata,per ogni colonna vero
sostituendo #uno con #due #tre?

dimmi di no Mr. Green

bye grazie

edit by reb: ti ho corretto un quote - sbagliato da me sopra - che sballava tutto

Top

rebelia
Dio maturo

Registrato: 17/07/03 09:22
Messaggi: 7987

Inviato: 29 Ago 2006 22:29 Oggetto:

il footer non e' altro che la parte bassa della pagina e come le altre va normalmente inserita in un div che per comodita' abbiamo chiamato appunto footer, ma avremmo potuto chiamarlo benissimo pippo o qualsiasi altra cosa

come ogni div va riempito e formattato ed e' quello che ho fatto inserendo nel codice il paragrafo fittizio e dando dei parametri di formattazione nel css; se non l'avessi fatto, semplicemente il div sarebbe risultato invisibile Smile

copia il codice che ti ho postato e vedi l'effetto; in base a quello modifichi oppure mi dici come ti piacerebbe e vediamo di ottenere il risultato desiderato

Albatro ha scritto:

in quanto ai link se dovessi metterli anche sulla colonna di destra,come devo fare? Very Happy

Ultima domanda e poi vado a nanna ch so cotto,non credo che dovro mettere la porzione di codice qui sopra riportata,per ogni colonna vero
sostituendo #uno con #due #tre?

nella pagina template.html TOGLI il testo a caso che avevamo inserito all'inizio e sostituiscilo con quello che vuoi inserirci tu (elenco di link, testi, foto etc) e nel css devi fare proprio quello: riprodurre per ogni div la sequenza di formattazione, sostituendo a #uno l'id del div che vuoi formattare (quindi #tre, ad esempio)

e' un lavoro molto meno arduo di quel che possa apparire: copi e incolli e sostituisci tre a uno, tanto immagino che nella colonna interna tu intenda inserire del testo e non una lista di link, giusto? Smile

Top

Albatro
Eroe in grazia degli dei

Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma

Inviato: 30 Ago 2006 14:22 Oggetto:

rebelia ha scritto:

copia il codice che ti ho postato e vedi l'effetto; in base a quello modifichi oppure mi dici come ti piacerebbe e vediamo di ottenere il risultato desiderato

Albatro ha scritto:

in quanto ai link se dovessi metterli anche sulla colonna di destra,come devo fare? Very Happy

Ultima domanda e poi vado a nanna ch so cotto,non credo che dovro mettere la porzione di codice qui sopra riportata,per ogni colonna vero
sostituendo #uno con #due #tre?

Codice:

io solitamente per farmi capire,chiamo sempre le cose col suo nome
se ti avessi chiesto: come devo mettere pippo o antonio non credo che mi avresti capito Mr. Green

Codice:

[#tre {
width: 25%;
float: right;
background: #ffffff;
padding: 1%;
}

#tre ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#tre ul li {
margin: 0px;
padding: 0px;
}

#tre ul li a {
text-decoration: none;
}

#tre ul li a:hover {
text-decoration: underline;
} /code]

cosi facendo infatti i link so passati anche sulla colonna di destra

sulla colonna centrale che poi sarebbe la #due dovro' in seguito metterci
qualche immagine linkata.
Invece per il footer non l'ho capito dove va posizionato ho provato sul

template dopo: [code<div id="footer">

ho aggiunto:

Codice:

#footer {
background: #999;
border-top: 3px solid #000;

ma non fa altro che cambiare solamente il background della colonna centrale in grigio

dove sto sbagliando? Rolling Eyes

Top

rebelia
Dio maturo

Registrato: 17/07/03 09:22
Messaggi: 7987

Inviato: 30 Ago 2006 18:35 Oggetto:

quando scrivo "html" ed ha <nometag> e' codice che devi aggiungere/sostituire nel file template.html, mentre quando scrivo "css" ed ha #nomeid {...} e' codice che devi aggiungere/sostituire nel file stile.css siccome ho perso il filo del discorso, per cortesia postami TUTTO il codice di template.html e TUTTO il codice di stile.css (divisi, ovviamente) che do un'occhiata, correggo quel che c'e' da correggere e ripartiamo da li' o rischiamo di girare attorno io non capendo quel che mi chiedi tu e tu non capendo dove voglio farti andare ad agire io

Top

Albatro
Eroe in grazia degli dei

Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma

Inviato: 30 Ago 2006 22:21 Oggetto:

.css

Codice:

body {
background: #fff;
color: black;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 80%;
border: 0px;
margin: 0px;
padding: 0px;
}

hr, h1 {
display: none;
}

img {
border: 0px;
}

#contenitore {
}

#alto {
background: #999999;
border-bottom: 3px solid #000;
padding-bottom: 7px;
}

#header {
height: 120px;
background: #999999 url(logo sito/logosito.gif) no-repeat top left;
text-align: right;

padding-right: 10px;
padding-top: 45px;
}

#header img {
margin-right: 10px;
margin-bottom: 50px;
}

#menu {
padding: 10px;
border-bottom: 3px solid #000;
background: #6699FF};
}

#menu ul {
list style: none;
margin: 0px;
padding: 0px;
}

#menu ul li {
display: inline;
margin: 0px;
padding: 0px;
}

#menu ul li a {
text-decoration: none;
padding: 5px 10px 5px 10px;
color: #000;
}

#menu ul li a:hover {
color: #00FFCC;
}

#contenuto {
text-align: left;
}

#uno {
width: 25%;
float: left;
background: #ffffff;
padding: 1%;
}
#uno ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#uno ul li {
margin: 0px;
padding: 0px;
}

#uno ul li a {
text-decoration: none;
}

#uno ul li a:hover {
text-decoration: underline;
}

#due {
width: 40%;
float: left;
margin-left: 2%;
padding: 1%;
}

#tre {
width: 25%;
float: right;
background: #ffffff;
padding: 1%;
}

#tre ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#tre ul li {
margin: 0px;
padding: 0px;
}

#tre ul li a {
text-decoration: none;
}

#tre ul li a:hover {
text-decoration: underline;
}

UNICA immagine usata:

.html

Codice:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="it">

<head>
<title>Chatline</title>
<meta name="keywords" content="Chat,Webchat,Computer " />
<meta name="description" content="I migliori Link per Mirc Irc Webchat Computer " />
<link href="stile.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="contenitore">

<div id="alto">
<div id="header">
<h1></h1>
<a href="#" title="banners"><img src="banners/bannersito.gif"/></a>

</div>

<hr />

<div id="menu">
<ul>
<li><a href="#">Entra in chat</a></li>
<li><a href="#">Il tuo sito</a></li>
<li><a href="#">Chi sono</a></li>
<li><a href="#">E-mail</a></li>
<li><a href="#">I banners</a></li>
<li><a href="#">Gli amici</a></li>
</ul>
</div>
</div>

<hr />

<div id="contenuto">

<div id="uno">
<p>
<ul>

<li><a href="http://">Link Uno</a></li>
<li><a href="http://">Link Due</a></li>
<li><a href="http://">Link Tre</a></li>
<li><a href="http://">Link Quattro</a></li>
<li><a href="http://">Link Cinque</a></li>
<li><a href="http://">Mappa del sito</a></li>
</ul>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
accumsan tellus sed metus. In vehicula. Cras eleifend adipiscing
justo. Proin posuere, purus eget placerat rutrum, lorem augue
iaculis tortor, nec aliquam erat quam eget mi. Vivamus convallis
euismod augue. Sed euismod mauris nec urna. Nullam nonummy.
Sed sollicitudin ipsum ut magna suscipit pretium. Proin nec tortor.
Mauris nibh tellus, volutpat sit amet, scelerisque vitae, convallis
ornare, arcu. Ut justo turpis, tempor id, convallis eget, lacinia
posuere, justo. Curabitur porta, ligula imperdiet consectetuer
adipiscing, nisi dui convallis velit, eget sagittis erat lorem id nisl.
Morbi sapien leo, suscipit eu, convallis id, gravida eget, felis.
Aliquam volutpat eros et quam. Nunc quis sem congue mi semper
interdum. Integer pellentesque lorem. Vivamus purus dui, suscipit
eu, fringilla eu, dapibus id, tortor. Pellentesque venenatis, diam quis
accumsan varius, velit odio aliquam purus, eu nonummy sem nulla
sed leo.
</p>
</div>

<hr />

<div id="due">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
accumsan tellus sed metus. In vehicula. Cras eleifend adipiscing
justo. Proin posuere, purus eget placerat rutrum, lorem augue
iaculis tortor, nec aliquam erat quam eget mi. Vivamus convallis
euismod augue. Sed euismod mauris nec urna. Nullam nonummy.
Sed sollicitudin ipsum ut magna suscipit pretium. Proin nec tortor.
Mauris nibh tellus, volutpat sit amet, scelerisque vitae, convallis
ornare, arcu. Ut justo turpis, tempor id, convallis eget, lacinia
posuere, justo. Curabitur porta, ligula imperdiet consectetuer
adipiscing, nisi dui convallis velit, eget sagittis erat lorem id nisl.
Morbi sapien leo, suscipit eu, convallis id, gravida eget, felis.
Aliquam volutpat eros et quam. Nunc quis sem congue mi semper
interdum. Integer pellentesque lorem. Vivamus purus dui, suscipit
eu, fringilla eu, dapibus id, tortor. Pellentesque venenatis, diam quis
accumsan varius, velit odio aliquam purus, eu nonummy sem nulla
sed leo.
</p>
</div>

<hr />

<div id="tre">
<p>
<ul>

<li><a href="http://">Link Uno</a></li>
<li><a href="http://">Link Due</a></li>
<li><a href="http://">Link Tre</a></li>
<li><a href="http://">Link Quattro</a></li>
<li><a href="http://">Link Cinque</a></li>
<li><a href="http://">Mappa del sito</a></li>

</ul>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
accumsan tellus sed metus. In vehicula. Cras eleifend adipiscing
justo. Proin posuere, purus eget placerat rutrum, lorem augue
iaculis tortor, nec aliquam erat quam eget mi. Vivamus convallis
euismod augue. Sed euismod mauris nec urna. Nullam nonummy.
Sed sollicitudin ipsum ut magna suscipit pretium. Proin nec tortor.
Mauris nibh tellus, volutpat sit amet, scelerisque vitae, convallis
ornare, arcu. Ut justo turpis, tempor id, convallis eget, lacinia
posuere, justo. Curabitur porta, ligula imperdiet consectetuer
adipiscing, nisi dui convallis velit, eget sagittis erat lorem id nisl.
Morbi sapien leo, suscipit eu, convallis id, gravida eget, felis.
Aliquam volutpat eros et quam. Nunc quis sem congue mi semper
interdum. Integer pellentesque lorem. Vivamus purus dui, suscipit
eu, fringilla eu, dapibus id, tortor. Pellentesque venenatis, diam quis
accumsan varius, velit odio aliquam purus, eu nonummy sem nulla
sed leo.
</p>
</div>
</div>

</div>

<hr />

<div id="footer">

<p>Sito realizzato da <a href="mailto:tuonome@provider.ext">tuonome@provider.ext</a>, tutti i diritti riservati</p>

</div>

</div>

</div>
</body>
</html>

Top

rebelia
Dio maturo

Registrato: 17/07/03 09:22
Messaggi: 7987

Inviato: 31 Ago 2006 10:38 Oggetto:

cancella COMPLETAMENTE il contenuto dei due files e sostituiscilo con questo corretto:

html:

Codice:

presta MOLTA ATTENZIONE agli annidamenti dei tag per evitare di annidarli in modo strano che rischi di danneggiare la visualizzazione

ho tolto di torno i contenuti fittizi inseriti all'inizio: ora che stai cominciando a riempire le colonne con i tuoi stessi contenuti non ti servono piu' Smile

ho aggiunto anche il titolo tra i tag <h1> nell'header

******

e ora il css: apri il file .css, rimuovi il codice di adesso e sostituiscilo con quello sotto; modifiche apportate:

- sostituito "black" col relativo esadecimale (#000)

- contratti gli esadecimali "lunghi" con la versione piu' breve dove possibile (#6699ff e' diventato #69f); lo si puo' fare quando i valori sono uguali a due a due

- tolta una graffa di troppo: presta MOLTA attenzione alla sintassi, perche' se non e' corretta rischi di vanificare tutto il css che viene dopo l'errore; in quel caso faceva pochi danni visto che era piazzata nell'ultima voce del blocco, ma se l'avessi inserita in un altro posto probabilmente avresti avuto errori incomprensibili

- tolti valori inutili: gia' hai lo sfondo bianco, quindi non e' necessario ri-dichiararlo per le colonne

- ho cercato di lasciare dello spazio tra i vari blocchi, cosi' inserendo eventuale nuovo codice non rischi di sovrascrivere/eliminare per errore delle righe che devono esserci Smile

importante! ho modificato il nome della cartella del logo portandola da "logo sito" a "logo_sito": nel web e' opportuno dare nomi SENZA spazi

Codice:

body {
background: #fff;
color: #000;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 80%;
border: 0px;
margin: 0px;
padding: 0px;
}

hr, h1 {
display: none;
}

img {
border: 0px;
}

#contenitore {
}

#alto {
background: #999;
border-bottom: 3px solid #000;
padding-bottom: 7px;
}

#header {
height: 120px;
background: #999 url(logo_sito/logosito.gif) no-repeat top left;
text-align: right;

padding-right: 10px;
padding-top: 45px;
}

#header img {
margin-right: 10px;
margin-bottom: 50px;
}

#menu {
padding: 10px;
border-bottom: 3px solid #000;
background: #69f;
}

#menu ul {
list style: none;
margin: 0px;
padding: 0px;
}

#menu ul li {
display: inline;
margin: 0px;
padding: 0px;
}

#menu ul li a {
text-decoration: none;
padding: 5px 10px 5px 10px;
color: #000;
}

#menu ul li a:hover {
color: #0fc;
}

#contenuto {
text-align: left;
}

#uno {
width: 25%;
float: left;
padding: 1%;
}

#uno ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#uno ul li {
margin: 0px;
padding: 0px;
}

#uno ul li a {
text-decoration: none;
}

#uno ul li a:hover {
text-decoration: underline;
}

#due {
width: 40%;
float: left;
margin-left: 2%;
padding: 1%;
}

#tre {
width: 25%;
float: right;
padding: 1%;
}

#tre ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#tre ul li {
margin: 0px;
padding: 0px;
}

#tre ul li a {
text-decoration: none;
}

#tre ul li a:hover {
text-decoration: underline;
}

#footer {
background: #999;
border-top: 3px solid #000;
}

Top

Albatro
Eroe in grazia degli dei

Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma

Inviato: 31 Ago 2006 14:20 Oggetto:

rebelia ha scritto:

cancella COMPLETAMENTE il contenuto dei due files e sostituiscilo con questo corretto:

html:

Codice:

importante! ho modificato il nome della cartella del logo portandola da "logo sito" a "logo_sito": nel web e' opportuno dare nomi SENZA spazi

Codice:

ciao,io ho messo i contenuti quì tra [ ] provvisoriamente per farti solo vedere poi le tolgo,e anche per il footer la stessa cosa.

Codice:

<div id="due">

[contenuto del corpo]

</div>

il risultato e' (fermo restando se ho fatto tutto giusto) questo:

va bene?

[img] http://img466.imageshack.us/my.php?image=layoutdy5.jpg [/img]

stavo notando che la colonna di destra cioe' la #tre dove stanno i link non ha lo stesso margine di quella di sinistra la #uno
che ne pensi tu capo? Very Happy

saluti

p.s

Codice:

importante! ho modificato il nome della cartella del logo portandola da "logo sito" a "logo_sito": nel web e' opportuno dare nomi SENZA spazi

logo_sito non lo accettava ho dovuto mettere solo ( logo ) Smile

Top

rebelia
Dio maturo

Registrato: 17/07/03 09:22
Messaggi: 7987

Inviato: 31 Ago 2006 14:44 Oggetto:

quando inserisci un'immagine, non lasciare spazi tra [im*g] e l'url, cosi' l'immagine si visualizza correttamente Smile

[im*g]http://www.nomesito.ext/nomeimmagine.ext[/im*g]

(ovviamente senza gli asterischi)

*****

importante!
ho sbagliato a farti inserire un pezzo o meglio: ne ho dimenticato una parte essenziale; sostituisci questa parte qui:

Codice:

<div id="tre">
<ul>
<li><a href="http://">Link Uno</a></li>
<li><a href="http://">Link Due</a></li>
<li><a href="http://">Link Tre</a></li>
<li><a href="http://">Link Quattro</a></li>
<li><a href="http://">Link Cinque</a></li>
<li><a href="http://">Mappa del sito</a></li>
</ul>
</div>
</div>

con questa:

Codice:

e aggiungi in fondo al css - quindi sotto alla dichiarazione di #footer - questa parte qui:

Codice:

.chiudifloat {clear: both;}

serve per ripristinare il flusso del codice sotto ai div flottanti

per le colonne, hanno lo stesso margine, semplicemente il contenuto si allinea a sinistra in entrambe i casi, percio' sembra che da una parte sia appiccicato al bordo e dall'altro molto distante; se colori lo sfondo delle colonne ti accorgi che sono larghe uguali Smile

Top

Albatro
Eroe in grazia degli dei

Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma

Inviato: 31 Ago 2006 15:27 Oggetto:

qundi modificato e' cosi:

Codice:

<div id="tre">
<ul>
<a href="http://www.google.it/" title="immagini"><img src="immagini/google.gif" /></a>
<li><a href="http://">Link Uno</a></li>
<li><a href="http://">Link Due</a></li>
<li><a href="http://">Link Tre</a></li>
<li><a href="http://">Link Quattro</a></li>
<li><a href="http://">Link Cinque</a></li>
<li><a href="http://">Mappa del sito</a></li>
</ul>
</div>

<div class="chiudifloat"></div>

</div>

<hr />

<div id="footer">
.chiudifloat {clear: both;}

domanda: quando devo formattare il testo nella parte centrale,l'accapo delle parole,come posso darglielo,voglio dire con quale paragrafo,per far si che rimanga tutto allineato a mo' di tabella?
se tu vedi il mio sito ora la parte centrale,e'stata formattata inserendoci delle tabelle,anche se per la verita' non so venute come avrei voluto bah!

ok e' ora di andare al lavoro,buon pomeriggio carissima,e sempre grazie per la tua disponibilita' e' pazienza con me Very Happy

Top

rebelia
Dio maturo

Registrato: 17/07/03 09:22
Messaggi: 7987

Inviato: 31 Ago 2006 15:39 Oggetto:

Albatro ha scritto:

qundi modificato e' cosi:

no, modificato non e' affatto cosi' :\

devi fare attenzione alle modifiche che ti chiedo di fare: la prima riguarda il file template.html e la seconda il file stile.css e l'ho scritto piuttosto chiaramente

non devi limitarti a fare copiaeincolla, ma devi anche LEGGERE LE SPIEGAZIONI che ti do, altrimenti andiamo poco distanti

per l'allineamento, immagino tu intenda l'allineamento giustificato del testo, vero?

beh, lo si fa con un comando da inserire in #contenuto e per l'esattezza con text-align: justify;

ti riposto il codice dei due files, per cortesia sostituisci quel che hai cosi' evitiamo casini

template.html:

Codice:

file stile.css:

Codice:

body {
background: #fff;
color: #000;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 80%;
border: 0px;
margin: 0px;
padding: 0px;
}

hr, h1 {
display: none;
}

img {
border: 0px;
}

#contenitore {
}

#alto {
background: #999;
border-bottom: 3px solid #000;
padding-bottom: 7px;
}

#header {
height: 120px;
background: #999 url(logo_sito/logosito.gif) no-repeat top left;
text-align: right;

padding-right: 10px;
padding-top: 45px;
}

#header img {
margin-right: 10px;
margin-bottom: 50px;
}

#menu {
padding: 10px;
border-bottom: 3px solid #000;
background: #69f;
}

#menu ul {
list style: none;
margin: 0px;
padding: 0px;
}

#menu ul li {
display: inline;
margin: 0px;
padding: 0px;
}

#menu ul li a {
text-decoration: none;
padding: 5px 10px 5px 10px;
color: #000;
}

#menu ul li a:hover {
color: #0fc;
}

#contenuto {
text-align: justify;
}

#uno {
width: 25%;
float: left;
padding: 1%;
}

#uno ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#uno ul li {
margin: 0px;
padding: 0px;
}

#uno ul li a {
text-decoration: none;
}

#uno ul li a:hover {
text-decoration: underline;
}

#due {
width: 40%;
float: left;
margin-left: 2%;
padding: 1%;
}

#tre {
width: 25%;
float: right;
padding: 1%;
}

#tre ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#tre ul li {
margin: 0px;
padding: 0px;
}

#tre ul li a {
text-decoration: none;
}

#tre ul li a:hover {
text-decoration: underline;
}

#footer {
background: #999;
border-top: 3px solid #000;
}

.chiudifloat {
clear: both;
}

Top

Albatro
Eroe in grazia degli dei

Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma

Inviato: 31 Ago 2006 21:42 Oggetto:

Codice:

devi fare attenzione alle modifiche che ti chiedo di fare: la prima riguarda il file template.html e la seconda il file stile.css e l'ho scritto piuttosto chiaramente

dai non mi strillare Sad

la curiosita' di vedere come viene il layout,e' piu forte di quella di leggere Very Happy

ho provato a metterci del testo, per separare le due formattazioni dei due blocchi le ho separate cosi: (<p> ) va bene?

ma la cosa che non riesco a capire e' il perche' tra una parola e' l'altra
lascia troppo spazio,io lo spazio che metto e' una normale barra spaziatrice.

Peccato quello spazio sprecato tra la colonna di sinistra #uno e il contenuto centrale,si potrebbe sfruttare di piu non trovi? Smile

[img] http://img351.imageshack.us/img351/8992/formattazionevh2.jpg [/img]

A volte mi capita di linkare delle parole in mezzo al testo,Es: sul secondo blocco dove sta scritto a caratteri grandi,Web chat audio video etc.. come posso fare?

Top

rebelia
Dio maturo

Registrato: 17/07/03 09:22
Messaggi: 7987

Inviato: 31 Ago 2006 21:57 Oggetto:

Albatro ha scritto:

dai non mi strillare Sad

la curiosita' di vedere come viene il layout,e' piu forte di quella di leggere Very Happy

lo capisco, ma finisce che tu mi chiedi cose a cui ti ho gia' risposto oppure fai sbagli che ti ho chiesto di evitare e diventa frustrante anche per me Rolling Eyes

Citazione:

ho provato a metterci del testo, per separare le due formattazioni dei due blocchi le ho separate cosi: (<p> ) va bene?

va benissimo a patto che tu abbia aperto un paragrafo con <p> e l'abbia chiuso con </p> e poi abbia riaperto il secondo con <p> e l'abbia richiuso alla fine con </p>: se l'hai fatto, va ottimamente Mr. Green

Citazione:

ma la cosa che non riesco a capire e' il perche' tra una parola e' l'altra
lascia troppo spazio,io lo spazio che metto e' una normale barra spaziatrice.

e' il normale spazio che ci dev'essere ed e' calcolato automaticamente per una buona lettura: non preoccupartene Smile

Citazione:

Peccato quello spazio sprecato tra la colonna di sinistra #uno e il contenuto centrale,si potrebbe sfruttare di piu non trovi? Smile

ti e' sufficiente diminuire la larghezza (width) impostata nel file stile.css per il div #uno e per il div #tre e aumentarla dello stesso valore "sottratto" ai due al div #due

esempio: se ora la situazione e':
#uno {width: 25%;}
#due {width: 40%;}
#tre {width: 25%;}

puoi modificarla in questo modo:
#uno {width: 15%;}
#due {width: 60%;}
#re {width: 15%;}

cioe' togli rispettivamente il 10% da #uno e il 10% da #tre e aggiungi il 20% (10%+10% tolti agli altri due) a #due

il mio e' un esempio, l'importante e' che quel che togli da una parte tu lo aggiunga UGUALE dall'altra, in questo modo non scombussoli gli equilibri della struttura

[img] http://img351.imageshack.us/img351/8992/formattazionevh2.jpg [/img]

A volte mi capita di linkare delle parole in mezzo al testo,Es: sul secondo blocco dove sta scritto a caratteri grandi,Web chat audio video etc.. come posso fare?[/quote]

Top

Albatro
Eroe in grazia degli dei

Registrato: 22/03/06 06:56
Messaggi: 163
Residenza: Roma

Inviato: 01 Set 2006 04:55 Oggetto:

Codice:

lo capisco, ma finisce che tu mi chiedi cose a cui ti ho gia' risposto oppure fai sbagli che ti ho chiesto di evitare e diventa frustrante anche per me

ehi mica sono un maniaco,non ho mai frustato nessuno sopratutto una donna Mr. Green

Top

Mostra prima i messaggi di:

	Indice del forum -> Linguaggi per Internet	Tutti i fusi orari sono GMT + 2 ore Vai a Precedente 1, 2, 3, 4
Pagina 4 di 4

Vai a:

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