-
Ciao ho un problemone con il mio sito:
Ho notato che con visuali superiori a 800*600 il sito rimane schiacciato sulla destra senza centrarsi, in pratica rimane uno spazio sgradevole a destra non utlizzato (non è l'effetto che mi ero prefissato di raggiungere.
Vorrei sapere qual'è la proprietà che mi permette di centrare il sito nel browser. Posto qui di seguito il CSS usato sperando in un vostro aiuto.
[code:1:36666e09f5]h1.logo {
display:none;
}
#logo {
width:759px;
height:409px;
position:relative;
background:url('grafica/logoiniziale.PNG') no-repeat midle;
}
#lavori {
width:759px;
height:409px;
position:relative;
background:url('grafica/lavoriincorso.PNG') no-repeat midle;
}
#testa {
width:759px;
height:133px;
padding-left:0;
padding-right:0;
padding-top:1em;
padding-bottom:1em;
background:url('grafica/logo1.PNG') no-repeat;
}
hr {
display:none
}
.bordotab {
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #53a9ff
}
.classetd {
BORDER-RIGHT: #000000 0px solid;
BORDER-TOP: #ffffff 1px solid;
FONT-SIZE: 12px;
BORDER-LEFT: #000000 0px solid;
COLOR: #000000;
BORDER-BOTTOM: #000000 0px solid;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #aad5ff
}
.classetd A {
DISPLAY: block;
PADDING-LEFT: 6px;
PADDING-BOTTOM: 2px;
COLOR: #005BB7;
PADDING-TOP: 2px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
POSITION: relative;
TEXT-DECORATION: none;
text-align: center;
}
.classetd A:hover {
FONT-SIZE: 12px;
COLOR: #0076ec;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #d2e9ff;
TEXT-DECORATION: none
text-align: center;
}
#menu {
width:759px;
background: #aad5ff;
position:relative;
}
#corpo {
width:759px;
background: #aad5ff;
position:relative;
}
#footer {
width:759px;
height:133px;
background:url('grafica/footer1.PNG') no-repeat;
position:relative;
}
.contenitore {
width: 100%;
color: #000;
background-color: #53a9ff;
}
.topleft { background: url(grafica/top_left.PNG) no-repeat top left }
.topright { background: url(grafica/top_right.PNG) no-repeat top right }
.bottomleft { background: url(grafica/bottom_left.PNG) no-repeat bottom left }
.bottomright { background: url(grafica/bottom_right.PNG) no-repeat bottom right }
.contenuto { padding: 10px }
BODY {
scrollbar-3dlight-color : #53a9ff;
scrollbar-arrow-color : #005bb7;
scrollbar-base-color : #aad5ff;
BACKGROUND-COLOR: #ffffff;
}
H1 {
PADDING-LEFT: 5px;
FONT-WEIGHT: bold;
FONT-SIZE: 2em;
MARGIN: 0px;
COLOR: #005bb7;
FONT-FAMILY: Georgia, "Times New Roman", Times, serif
}
H2 {
PADDING-LEFT: 5px;
FONT-WEIGHT: bold;
FONT-SIZE: 1.5em;
MARGIN: 10px;
COLOR: #005bb7;
FONT-FAMILY: Georgia, "Times New Roman", Times, serif
}
H3 {
PADDING-LEFT: 0px;
FONT-WEIGHT: bold;
FONT-SIZE: 1.2em;
MARGIN: 10px;
COLOR: #aad5ff;
FONT-FAMILY: verdana, helvetica, sans-serif
}
H4 {
PADDING-LEFT: 0px;
FONT-WEIGHT: bold;
FONT-SIZE: 1em;
MARGIN: 10px;
COLOR: #aad5ff;
FONT-STYLE: italic;
FONT-FAMILY: verdana, helvetica, sans-serif;
}
FONT {
FONT-SIZE: 10px;
FONT-FAMILY: verdana, helvetica, sans-serif;
}
P {
FONT-SIZE: 12px;
COLOR: #004080;
FONT-FAMILY: verdana, helvetica, sans-serif;
}
P.footer {
FONT-SIZE: 14px;
COLOR: #005ba0;
FONT-WEIGHT: bold;
}
P.intro {
FONT-SIZE: 12px;
COLOR: #005ba0;
MARGIN-BOTTOM: 10px;
MARGIN-LEFT: 70px;
MARGIN-TOP: 325px;
}
P.not_found {
FONT-SIZE: 12px;
COLOR: #005ba0;
MARGIN-BOTTOM: 10px;
MARGIN-LEFT: 15px;
MARGIN-TOP: 120px;
}
TD {
FONT-SIZE: 10pt;
FONT-FAMILY: Arial, Helvetica, sans-serif;
}
TR {
FONT-SIZE: 10pt;
FONT-FAMILY: Arial, Helvetica, sans-serif;
}
HR {
COLOR: #ff33ff;
HEIGHT: 1px
}
HR.light {
COLOR: #ff99ff; HEIGHT: 1px
}
A.normal:link {
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
COLOR: #004080
TEXT-DECORATION: none
}
A.normal:visited {
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
COLOR: #0059B3;
TEXT-DECORATION: none
}
A.normal:hover {
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
COLOR: #006FDD;
TEXT-DECORATION: none
}
A.tornasu:link {
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
COLOR: #004080
TEXT-DECORATION: none
}
A.tornasu:visited {
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
COLOR: #004080;
TEXT-DECORATION: none
}
A.tornasu:hover {
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
COLOR: #005ba0;
TEXT-DECORATION: none
}
DT {
FONT-WEIGHT: bold;
FONT-SIZE: 14px;
MARGIN-BOTTOM: 5px;
COLOR: #005ba0;
FONT-FAMILY: verdana, helvetica, sans-serif;
}
DD {
FONT-SIZE: 12px;
MARGIN-BOTTOM: 10px;
MARGIN-LEFT: 15px;
COLOR: #004080;
FONT-FAMILY: verdana, helvetica, sans-serif;
}
LI {
FONT-SIZE: 12px;
COLOR: #004080;
FONT-FAMILY: verdana, helvetica, sans-serif;
}
CODE {
FONT-SIZE: 12px;
}
#autore {
BORDER-RIGHT: #aad5ff 1px;
PADDING-RIGHT: 50px;
BORDER-TOP: #aad5ff 1px solid;
FONT-SIZE: 12px;
MARGIN: 2px 0px;
BORDER-LEFT: #aad5ff 1px;
COLOR: #aad5ff;
BORDER-BOTTOM: #aad5ff 1px solid;
BACKGROUND-COLOR: #005bb7;
TEXT-ALIGN: right;
}
blockquote {
COLOR: #004080;
BACKGROUND-COLOR: #aad5ff;
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
FONT-SIZE: 12px;
BORDER: 1px #004080 dotted;
PADDING: 3px;
}
form.upload {
margin: 25px 0px 0px 0px;
padding: 0px;
}
div#upNum { /* il menu dove si può scegliere il numero di file da caricare */
font-family: Verdana, sans-serif;
font-size: 11px;
font-weight: bolder;
color: #004080;
background: #aad5ff;
padding: 2px;
width: 320px;
height: 20px;
border: 2px dashed #004080;
}
select.upload {
font-family: Verdana, sans-serif;
font-size: 11px;
font-weight: 400;
color: #004080;
background: #aad5ff;
width: 68px;
margin: 0px 8px;
}
textarea.upload {
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bold;
color: #004080;
background: #aad5ff;
text-align: center;
height: 80px;
margin: 5px 0px;
padding: 2px 0px 2px 5px;
border: 2px groove #004080;
}
input#data { /* i file-field */
font-family: Verdana, sans-serif;
font-size: 12px;
color: #004080;
background: #aad5ff;
border: 2px groove #004080;
}
input#send { /* il pulsante Carica... */
font-family: Verdana, sans-serif;
font-size: 10px;
font-weight: bold;
color: #004080;
background: #aad5ff;
margin: 7px 0px 0px 0px;
border: 2px ridge #004080;
}
[/code:1:36666e09f5]
Per vedere invece il sito il link è http://rpgworld.altervista.org
Fiducioso di una vostra risposta vi porgo i miei più cordiali saluti.
-
Prova ad aggiungere nel css del body la riga:
text-align:center;
-
Non son sicuro che basti come dice aeclanum; se non basta oltre a ciò aggiungi un <div> che contiene tutto, come fosse un secondo <body>, e gli apllichi questo:
margin: 0 auto;
così dovrebbe essere ok.
-
Grazie per i consigli vado subito a metterli in pratica vi farò sapere se l'impresa avrà esito positivo.
Grazie ancora ciao
-----Edit--------
Ho seguito i vostri consigli e già inserendo la proprietà BODY text-align:center; il sito viene centrato in tutte le risoluzioni.
Si presenta ora un problema ben più grave. Tutta la formattazione del testo mi viene ignorata e ora tutti i contenuti del sito (le scritte) vengono centrare.
Cè un modo per risolvere il problema di centrare il sito senza poi risentirne nella formattazione del testo ?
Devo aggiungere qualcosa al CSS nei DIV riservati al testo?
----------------
-
Già, ciò che ti succede dipende dal fatto che tutti i tag contenuti entro un determinato tag, se non diversamente specificato, eriditano le proprietà del loro contenitore.
Quindi, come dici tu, dovresti assegnare a tutti i <div> contenenti testo:
text-align: left;
in alternativa puoi fare un <div> tipo quello che ti dicevo nel mio post precedente con settato il text-align come appena detto.
