Link e CSS

il.rappo

il mio è uno schifosissimo layout tabellare (quanto vorrei cambiarlo maledizione )

Perchè non cambiarlo allora?

vale76

decidi innanzitutto cosa vuoi avere. Perché nel td c'è l'allineamento a sx?

ti consiglio di usare fogli di stile esterni, altrimenti sai che lavoraccio quando vorrai cambiare layout?

ci sono!
eccone un esempio:


<link rel=stylesheet href="http://www.paroledautore.net/style3.css" type="text/css">

vale76

@ludus said:

pardon... avevo letto male io

allora perché quel td con allineamento a sx?
quale??? mi posti la parte dove vedi un td con allineamento sinistro?

vale76

figurati, non ti devi scusare
Allora, i link solitamente sono sempre al centro; in
[url=http://www.paroledautore.net/links.htm]questa pagina
però volevo provare un'impaginazione diversa per i link testuali

vale76

si lo so, che c'è tanta porcheria tutta fatta da Frontpage prima, quando effettivamente creavo le pagine dal visuale
infatti ora la sto rifacendo a mano
ho fatto qualche prova e pare che questo metodo funzioni:
per ora ho lasciato il td nel css come si trova.
Nella pagina che sto rifacendo, sto facendo così (se non va bene, dimmelo che provo la tua soluzione)


<div style="text-align: left; width&#58; 100%;">
[mio link]()
</div>

per la descrizione del sito linkato, ho fatto una classe con allineamento a sinistra e pare funge..

[url=http://www.paroledautore.net/link2.htm]pagina di prova

che ne pensi?

vale76

@ludus said:

però:
<div style="text-align: left; width&#58; 100%;">
è un css inline. non esterno.
um.. trattandosi di una sistemazione occasionale, probabilmente potrebbe andarmi bene così.. a sapere che in anticipo che riutilizzerò l'idea per altre pagine...

@ludus said:

non è meglio:


<div class="left">?

.left&#123;text-align&#58; left; width&#58; 100%&#125;

per le classi dei testi: ma per i link? come si fa con l'elemento <a>
?

vale76

@ludus said:

il problema del css inline è che, se decidi di cambiare i parametri, hai un lavoro enorme per fare le modifiche a tutti i div che usano quelle carattersitiche.

l'elemento <a> prevede la classe:
[url="link.htm"]link

appunto per questo prima, volevo impostare l'allineamento dei link di quella pagina, in questo caso specifico, appunto, a sinistra, insieme al breve testo descrittivo; riguardo alla descrizione, appunto, è comandato dal CSS esterno:

CSS:


.testo2 &#123;
font-family:    "Book Antiqua","Berling Antiqua",Arial,sans-serif;
          color&#58;      #CCCC99;
    font-size&#58;     12pt;
  text-align&#58;     left;
font-weight&#58;   lighter;
font-style&#58;       normal;
           &#125;

e funziona: l'html dà la priorità a questa classe, piuttosto che all'allineamento del famoso <td> .
Per i link in questione, invece, no e non ho capito perché..
per questo ho dovuto ovviare con il div in linea, altrimenti, l'allineamento dei link rispondeva al <td> anche se nella classe a.
indicavo l'allineamento..

vale76

Ciao a tutti, riesumo questo mio vecchio primo topic di richiesta d'aiuto
spiegando subito che da quando è stato da me inviato tanti mesi fa, molte cose sono per fortuna mia cambiate sul mio sito.
Grazie a una persona strepitosa oggi ho una struttura grafica riveduta e corretta. Mi sono impegnata, vi assicuro, tantissimo, tant'è che in quest'ultimo anno mi sembra di aver vissuto su quel sito invece che a casa
ma qualche risultato s'è visto: oggi ho imparato qualcosina, lavoro sul codice testuale con molta più soddisfazione di una volta, tutte le mie pagine oggi funzionano bene e sono validate al 4.01 Strict.
Cerco di tenermi aggiornata e ragionare sulle minime cose che faccio nelle pagine, anziché farle a pappagallo. Tuttavia, ancora oggi c'è una cosa che continua a farmi dannare l'anima, nonostante tutta la pratica fatta e le pagine delle guide lette, e che mi sta facendo, vi assicuro, sentire davvero cretina

I LINK... sti benedetti LINK!

riesco a fargli fare tutto quello che mi serve, colore, ridimensionamento, carattere, hover, non hover ecc
l'unica cosa che non riesco a fare a sti stramaledetti link sono lo SPOSTAMENTO.
Sposto con il float le immagini, sposto i testi dove mi pare, ma con i link mi sento totalmente idiota.

Veniamo alla pratica.

Ho fatto una paginetta semivuota di prova, [url=http://www.paroledautore.net/poesie/prova2.htm]questa.
Come potete vedere, c'è il link in questione, al centro (testato su IE6-Firefox2-Opera 9.10)

La regola nel BODY del CSS imposta, secondo le mie necessità, l'allineamento al centro. Vi posto la parte di CSS che lo mosta:

[HTML]td#colonna {
text-align : center;
background : url("sfondo_centro.gif") repeat;
}[/HTML]

Nel CSS di prova, di quella pagina di prova, c'è la regola per quell'unico link, che ho impostato così:

[HTML]a.link {color:#cc9; font:1.28em "Trebuchet MS",Verdana,Arial,sans-serif; text-align:left; text-decoration: none;}
a.link:hover {color:#ff9966; text-align:left; text-decoration: none;}[/HTML]

Come vedete, dopo che ho provato, secondo le solite guide, in almeno 3 modi diversi, il link non vuole saperne di spostarsi, e continua a prevalere la regola del body

La pagina è valida, il CSS pure:

[url=http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.paroledautore.net%2Fstyle5.css&warning=1&profile=css21&usermedium=all]CSS validato

Io dico, se fosse stato sbagliato, preferivo, avrei detto, ok, vediamo gli errori che mi riporta e lavoro su quelli, ma così davvero mi sento un'aliena...

Chiedo umilmente aiuto..

ienavr

hai provato a fare così?

a.link {color:#cc9; font:1.28em "Trebuchet MS",Verdana,Arial,sans-serif; text-align:left; text-decoration: none; float:left;}
a.link:hover {color:#ff9966; text-align:left; text-decoration: none; float:left;}

vale76

mmm... float però è per le immagini... cmq ora provo.

vale76

oddiooooooo non ci credo funzionaaaaaaaaaaaa
ienavr ti farei un monumento giuroooooooooo grazieeeeeeee
finalmente!
però voglio capire, se il float è per le immagini, come mai ci voleva anche per i link?

ienavr

il float non è solo per le immagini...

viene utilizzato principalmente per far fluttuare il testo attorno ad un'immagine, ma può essere utilizzato anche con elementi di testo, oppure per dare un'impaginazione a più colonne con le div, eccetera...

vale76

@ienavr said:

il float non è solo per le immagini...

viene utilizzato principalmente per far fluttuare il testo attorno ad un'immagine, ma può essere utilizzato anche con elementi di testo, oppure per dare un'impaginazione a più colonne con le div, eccetera...

si, infatti stavo sperimentando proprio questo. Ho provato ad applicarlo anche su una class di testo e tutto funziona, secondo me, armonicamente su Opera e Firefox, però... IE 6 tanto per cambiare interpreta la cosa tutto a modo suo

guarda:

http://www.paroledautore.net/poesie/prova2.htm

Come potrei risolvere? un commento condizionale per IE 6 ? (non so il 7 ma spero non ci sia il problema anche lì..)

ienavr

forse ho interpretato male quello che volevi fare, ma questo codice dovrebbe funzionare:

.testo {
color:#cc9;
font:1.25em Verdana,"Trebuchet MS", Helvetica, sans-serif;
text-align:justify; clear:both;}

però, ti ripeto, non sono sicuro di aver capito le tue intenzioni nel disporre gli elementi..

vale76

mm allora funziona in parte.. non vorrei aver fatto confusione, poi ho letto prima sulle guide, che la cattiva interpretazione del float è un baco di Internet Explorer.
cmq
ora con il clear sul testo, ha funzionato: link con float a sinistra e testo a sinistra, con la differenza però, che su IE c'è uno spazio di troppo, mentre su Opera e Firefox, no.

Posto il codice, e devo uscire un attimo. Se è il caso, poi posso fare delle shot

[HTML]CSS:

a.link {color:#cc9; font:1.28em "Trebuchet MS",Verdana,Arial,sans-serif; text-align:left; text-decoration: none; float:left; clear:left;}
a.link:hover {color:#ff9966; text-align:left; text-decoration: none; float:left; clear:left;}

.testo {
color:#cc9;
font:1.25em Verdana,"Trebuchet MS", Helvetica, sans-serif;
text-align:justify; clear:both; }[/HTML]

Grazie ancora, comunque, piano piano ci avviciniamo alla soluzione.

ienavr

hai tolto la pagina di prova...non riesco a darti una amno senza vedere la pagina originale...

fusionman

Scusa ma non ho capito perchè il contenitore deve avere il text-align a center e poi all'interno vuoi mettere il testo a sinistra. Forse mi sfugge qualcosa.
Se vuoi metterlo a sinistra è il text-align della colonna che va impostato come left e non center.

ienavr

.testo {
color:#cc9;
font:1.25em Verdana,"Trebuchet MS", Helvetica, sans-serif;
text-align:justify; clear:both;
margin-top:0px;
}

sempre se ho ben capito...

vale76

@ienavr said:

hai tolto la pagina di prova...non riesco a darti una amno senza vedere la pagina originale...

non l'ho tolta, [url=http://www.paroledautore.net/poesie/prova2.htm]è sempre lì

così come la vedi con Firefox e Opera è come vorrei che si vedesse su tutti i browser: ma il solito IE che fa sempre di testa sua ( ) pensa bene di mettere una lina di spazio di troppo tra il link e la sua descrizione.

@ FuSioNmAn

il contenitore è impostato al centro perché tutto il sito lo scrivo al centro, però mi è venuta la necessità di fare una pagina (solo quella) che in quel caso fosse scritta da sinistra a destra, perché credo sarebbe più leggibile.

ienavr

hai provato questo, come ti ho suggerito prima?

.testo {
color:#cc9;
font:1.25em Verdana,"Trebuchet MS", Helvetica, sans-serif;
text-align:justify; clear:both;
margin-top:0px;
}