Home > Progettare per due stylesheets

Progettare per due stylesheets

Documento originale di propietà del Sito web http://www.edgeofmyseat.com .

Traduzione a cura di Zeli Marco.

Progettare per due stylesheets

Questo metodo è conveniente utilizzarlo quando si ha un sito che utilizza il posizionamento con i CSS in contrasto con le tabelle , e dove il contenuto è probabile visualizzato male nei più vecchi browsers.

Progettando con attenzione il vostro layout si puó creare uno stylesheet alternativo che si visualizzerà correttamente nei più vecchi browsers e potrà dare una disposizione avanzata con i CSS sui recenti browser.

Per questo esempio e stato scelta una semplice layout a 2 colonne con disposizione liquida usando per il posizionamento solamente i CSS, come il layout che desidero utilizzare nei più nuovi browsers.

Questo è lo stylesheet:

body, p { margin: 10px 0px 0px 0px; padding:0px; background-color:#ffffff; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: Black; font-size: 11px; } #content { margin-top: 60px; margin-left: 0px; margin-right:199px; padding-left: 40px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; } #rightcontent { position: absolute; right:10px; top:70px; width:180px; } h1 { background-color: White; font-size:14px; color: #996699; padding-top:10px; } a, a:link, a:visited, a:active. a:hover{ background-color: White; color: #996699; text-decoration: none; }

Questo è la pagina HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Example Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="content"> <h1>Main Content Area</h1> <p>This is the main content of the page <div id="content"></p> <p>  The following text consists of a mock Latin which has been based upon the average frequency of characters and word lengths of the English language in order to reproduce a reasonably accurate overall visual impression. Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</p> <p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend. Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe eveniet ut er repudiand sint et molestia non este recusand.  </p> </div> <div id="rightcontent"> <h1>Navigation</h1> <p><a href="linkylink.htm">navigation one</a> <br><a href="linkylink.htm">navigation two</a> <br><a href="linkylink.htm">navigation three</a> <br><a href="linkylink.htm">navigation four</a> </p> </div> </body> </html>

... e questo è che cosa si visualizza in IE5.1

Screenshot visualizzato con IE5.1

Continua >>

Ultima modifica :3/01/08 alle ore 14:31

Menu

Progettare per due stylesheets

Progettare per due stylesheets

Continua >>