FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

<hr> stilosi con i CSS

   Frihost Forum Index -> Webmaster and Internet -> Design Tips
 


oneoo
Introduzione
Anche se qualche volta ?raccomandato sostituire l'elemento <hr> con i bordi orizzontali di altri elementi, a me piace usarlo come divisore tra sezioni diverse. Queste rende i documento pi?leggibili, anche se i browser pi?vecchi interpretano solo il codice Html, senza digerire la formattazione con i Css.

D'altro canto, <hr> senza un foglio di stile associato, non ?molto bello a vedersi nei documenti in cui si fa buon uso dei Css. Sono abituato a nascondere i Css ai browser fino alla quarta versione, cos?i navigatori su cui faccio riferimento sono MsIE 5 e successivi, Opera 5 e successivi e Mozilla/Ns6.

Quali propriet?usare
Sono diverse le propriet?che possiamo applicare a <hr>:

Tutti e tre i browser che ho nominato prima permettono il settaggio della larghezza (width) e dell'altezza (height) del tag <hr>.
La propriet?del bordo invece pu?essere usata solo su MsIE e Mozilla. Non funziona su Opera (vedi gli esempi che seguono).
Gli utenti di MsIE possono vedere il colore (color) cambiato sull'elemento <hr>.
Opera e Mozilla consentono comunque il background-color per il marcatore <hr>.
Tutti e tre i browser consentono l'utilizzo di background-image su <hr>. Comunque, ci?da qualche problemino su MsIE e Opera (spiegher?in che senso pi?avanti nell'articolo).
Esempi
Ora, vediamo un paio di esempi. Il foglio di stile che andiamo ad applicare al documento sar?

hr {
border: 0;
width: 80%;
}

Cos?tutte le righe saranno all'80% della larghezza possibile e non avranno alcun bordo iniziale. Questa riga sembrer?identica a quelle di default in MsIE e Opera, comunque K-Meleon (un browser basato su Mozilla) non mostrer?nulla, questo perch?usa i bordi per visualizzare l'elemento <hr>. Nel browser vedrai questo risultato:


--------------------------------------------------------------------------------

Aggiungiamo i colori
Se volessimo mostrare una linea continua e rossa, useremo il seguente codice:

color: #f00;
background-color: #f00;
height: 5px;
dionet
I´ve traducted this with google and the result is:

Quote:
Introduction Even if some?raccomandato time to replace the element < hr > with the horizontal edges of other elements, to me appeal to to use it like divisor between various sections. These render the document pi?leggibili, even if the browser pi?vecchi they interpret alone code HTML, without to digest the formattazione with the Css. Of other song, < hr > without a sheet of associated style?molto beautiful not to look at itself in the documents in which it is made good use of the Css. is accustomed to hide the Css to the browser until the quarter version, cos?i navigators on which I make reference are MsIE 5 and happened to you, Work 5 and succeeded and Mozilla/Ns6 to you. Which propriet?usare They are various the propriet?che we can apply to < hr >: All and the three browser that I have name before allow the settaggio of the width (width) and the height (height) of the tag < hr >. Propriet?del the edge instead to pu?essere only used on MsIE and Mozilla. It does not work on Work (you see the examples that they follow). The customers of MsIE can see the color (color) changed on the element < hr >. Opera and Mozilla concur however the background-color for the marker < hr >. All and the three browser concur use it of background-image on < hr >. However, ci?da some problemino on MsIE and Opera (spiegher?in that sense pi?avanti in the article).
Examples
Hour, we see a pair of examples. The style sheet that we go to apply to the document sar?

hr
{ border: 0;
width: 80%;
}


Cos?tutte the lines will be to 80% of the possible width and they will not have some edge begins them. This sembrer?identica line to those of default in MsIE and Opera, however K-Meleon (a browser based on Mozilla) not mostrer?nulla, this perch?usa the edges in order to visualize the element < hr >. In the browser you will see this result: We add the colors If we wanted to show a continuous and red line, we will use the following code:

color: #f00;
background-color: #f00;
height: 5px;


Isn´t very good but we can read Confused
misterdimiz
I've just post here http://frihost.com/forums/viewtopic.php?t=193 .write in english
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.