Joomla.it Forum
Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => I Template di Joomla 1.6/1.7/2.5 => : mickeymouseone 23 Feb 2012, 14:39:44
-
buongiorno,
sto realizzando un sito e mi sono imbattuto in un problema che potrà essere semplice ma mi ta facendo perdere un sacco di tempo
devo realizzare un sito che sia compatibile con molti browser e con uno sfondo parecchio sfumato così pensavo di realizzare 3 box a cui assegnare 3 colori all'interno dei quali inserire i moduli. Unico problema che i box non escono come dovrebbero, mi appare un bordo tra lo schermo della pagina e il box stesso.
facendo l'esempio pratico:
ho creato 3 contenitori ai quali assegnerò i tre sfondi: alto, centro, basso;
HTML
<div id="alto">
<div id="menu">
<jdoc:include type="modules" name="menu" />
<>
<>
<div id="centro">
<div id="content">
<jdoc:include type="modules" name="content" />
<>
<>
<div id="basso">
<div id="footer">
<jdoc:include type="modules" name="footer" />
<>
<>
vorrei che i moduli del sito, ovvero il menu, i contenuti e il footer fossero larghi 950 px mentre il box che li contiene fosse a tutto schermo così ho inserito nel css:
CSS
#alto {
background-color: white;
background-position: center center;
width: 100%;
}
#centro {
background-color: red;
background-position: center center;
width: 100%;
}
#basso {
background-color: yellow;
background-position: center center;
width: 100%;
}
#menu, content, footer {
background-color: white;
background-position: center center;
width: 950px;
}
teoricamente dovrebbero uscire tre sfondi con in centro alla pagina i moduli che ho creato ma in pratica:1) gli sfondi hanno un margine dallo schermo di circa 1 cm a destra e 1 a sinistra nonostante abbia indicato 100% e quindi dovrebbero appoggiarsi ai margini della pagina;2) i moduli centrali anzichè essere al centro sono appoggiati ai lati oppure in tutt'altro posto;come posso risolvere il problema, dov'è l'errore che mi sfugge e non riesco a vedere???aiutoooo!!! grazie :)
-
Il codice è incompletto (non si capisce dove finiscono i div), se il sito non è in remoto devi fornire tutto il codice per poter provare ad aiutarti.
-
Grazie mille, ho modificato l'html sintetizzandolo per fare capire il mio problema che in parte ho già risolto.
- il primo problema che avevo era centrare i blocchi modulo nello schermo ma ho risolto aggiungendo:
margin-left: auto;
margin-right: auto;
cosa che al momento mi sfuggiva.....
- il secondo problema che pero' non ho risolto solo i bordi bianchi che mi escono tra il mio sfondo e lo schermo. Ho testato con google crome e non si vedono, su ie si vedono e non capisco come risolverli.
ti incollo il codice HTML:
</head>
<body>
<div id="alto">
<div id="header">
<jdoc:include type="modules" name="header" />
<>
<>
<div id="centro">
<div id="content">
<jdoc:include type="modules" name="content" />
<>
<>
<div id="basso">
<div id="footer">
<jdoc:include type="modules" name="footer" />
<>
<>
</body>
e il codice CSS
/* CSS */
body {
background-color: white;
background-attachment: scroll;
font-size: 11px;
font-family: Verdana;
margin-bottom: 0px;
}
#alto {
background-color: blue;
margin-top: -8px;
margin-bottom: 0px;
margin-left: -8px;
margin-right: -8px;
}
#centro {
background-color: yellow;
margin-top: 0px;
margin-bottom: 0px;
margin-left: -8px;
margin-right: -8px;
}
#basso {
background-color: red;
margin-top: 0px;
margin-bottom: -8px;
margin-left: -8px;
margin-right: -8px;
}
#header {
background-color: pink;
background-position: center center;
width: 950px;
height: 200px;
margin-right: auto;
margin-left: auto;
}
#content {
background-color: brown;
background-position: center center;
width: 950px;
height: 600px;
margin-right: auto;
margin-left: auto;
}
#footer {
background-color: black;
background-position: center center;
width: 950px;
height: 200px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
}
ho messo la bozza del sito al link: http://www.prova147.altervista.org (http://www.prova147.altervista.org)
dove puoi vedere il mio problema. ho dato colori diversi ai blocchi sfondo e ai moduli.
fammi sapere... grazie
-
io non vedo alcun bordo bianco. ne con IE ne con Chrome o FF.
-
con Google Chrome, Mozilla Firefox e IE non si vedono i bordi bianchi e funziona tutto perfettamente, pero' con IE 6.0 si vedono!!!
Per farli sparire nei primi browser ho inserito nel CSS:
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;
è la procedura esatta o c'è qualche altra regola css che a me sfugge che con un semplice comando mi appoggi i margini degli sfondi a quelli dello schermo? regola che magari funziona anche su IE 6.0?
Grazie!
-
Ho risolto aggiungendo:
margin: 0 !important;
sia nel body che nei tag contenitori-sfondo e adesso funziona bene anche su IE 6.0
Grazie mille dell'aiuto, a presto!!!