Salve a tutti. Nella realizzazione del mio sito ho allineato tutto a sinistra con un layout di 760 pixel di larghezza. Ho un unica pagina da cui richiamo i CSS. E' possibile inserire una stringa che faccia allineare tutto al centro (diminuendo le dimensioni dei margini dx e sx in funzione della risoluzione dei monitor)? Spero d'essermi spiegato bene:tongue:! Attendo fiducioso!
Quello che non ho capito, è se tu vuoi una pagina centrata, o le scritte della pagina centrata.
Comunque se il tuo problema è relativo al primo caso, ecco una soluzione:
Lo stile ed il colore del testo lo applico direttamente al tag <body> così che risulterà sempre lo stesso, a meno di variazioni in corso d'operaCostruire il foglio di stile
body {
text-align: center;
margin: 0;
background-color: white;
color: black;
font-family: Verdana, Tahoma, Sans-serif;
font-size: small;
width: 100%;
}
#corpo {
text-align: left;
padding: 2px 2px 2px 2px;
border: 1px solid black;
width: 95%;
}
Il foglio di stile lo applichi come vuoi: foglio esterno o nell''intestazione del file html, come ti piace di più insomma, considera che se devi fare più pagine tutte uguali è senzaltro meglio usare un foglio esterno.
Ora il template per una generica pagina html:
Ecco questo è un generico foglio di stile, che adatta una generica pagina html, per qualsiasi risoluzione schermo.Caso per un foglio di stile esterno e incluso
<html><head>
<title>Che titolo avra? </title>
<head>
<style type="text/css" media="screen">
@import url(foglio.css);
</style>
</head>
<body>
<div id="corpo">
.... Qui va tutta la pagina, che risulterà centrata rispetto alla finestra, tieni conto che se inserisci altri elementi, con position: absolute, questa sarà relativa a questo layer e quindi saranno decentrati rispetto al bordo del layer di due pixel, corrispondenti al padding, il layer resterà centrato ed essendo largo solo il 95% della finestra, risulterà comunque con i bordi staccati. ....
</div>
</body>
</html>
Se vuoi qualcosa di più specifico, allora devi iniziare ad usare javascript per verificare la risoluzione schermo dell'utente, e poi includere dinamicamente fogli di stile non generici, ma realizzati appositamente.
E' na soluzione che preferisco non adottare perchè l'utente potrebbe anche aver disinserito dal suo browser le funzionalità del javascript, quindi nel suo caso non funzionerebbe.
Spero ti sia utile, in ogni caso dai un'occhiata a questo sito: con stile
ti ringrazio molto per la tua disponibilità, tra l'altro sto prendendo in seria considerazione l'eventualità di realizzare quello che dicevi in un altro 3d cioè avvisare gli utenti con browser "datati". Ora proverò a fare qunato hai descritto. In altri termini devo centrare la parte di sito (quello che hai già gentilmente visionato www.nonsolofitness.it) che contiene il testo in modo che, chi ha una risoluzione video maggiore agli 800x600 veda al centro il contenuto anzicchè sulla sinistra! ti farò sapere. Grazie ancora
non ci siamoho fatto tutte le prove possibili. Tra l'altro non so se quel che voglio possa essere realizzato!
dunque... questo è attualmente in codice
che viene richiamato in ogni pagina del sito. Agendo su questo devo centrare la zona "bianca" che puoi vedere su www.nonsolofitness.it lasciando i margini azzurri alla destra e sinistra del contenuto. I margini saranno tanto più ampi quanto maggiore la risoluzione del monitor. Allo stato attuale invece aumenta solo il bordo destro, avendo allineato di default tutto a sx!codice:body { color: #000000; font-family: Verdana; text-decoration: none; font-size: 11px; text-align: justify; line-height: 100%; background-image: url('http://www.nonsolofitness.it/images/sfondopiero.gif'); margin: 0px; padding-left: 2; padding-top: 2 } .corpo { font-family: Verdana; font-size: 11px; text-align: justify; line-height: 150% } .corp_nn_formattato { font-family: Verdana; font-size: 11px; line-height: 100% } h2 { font-family: Verdana; font-size: 11px; font-weight: bold } .testo_in_evidenza { font-family: Verdana; font-size: 14px; text-align: justify; line-height: 150% } body { font-family: Verdana; font-size: 11px; text-align: justify; line-height: 100% } .arial { font-family: Arial; font-size: 10px; text-align: justify } .arial_nn_format { font-family: Arial; font-size: 11px; } .testo_in_ev_a_sx { font-family: Verdana; font-size: 14px } h1 { font-family: Verdana; font-size: 14px; color: #000080; font-weight: bold } a {TEXT-DECORATION: none} a:link { color: #0000FF } a:visited { color: #0000FF } A:hover {COLOR: #cc0033; TEXT-DECORATION: underline}
ripeto non so se sono ancora in tempo per sistemare la cosa!
Permessi di invio
Rispondi quotando