Back to top

Autore Topic: [RISOLTO] problemi box css  (Letto 1929 volte)

Offline mickeymouseone

  • Esploratore
  • **
  • Post: 158
    • Mostra profilo
[RISOLTO] problemi box css
« il: 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;


Citazione

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:


Citazione



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 :)
« Ultima modifica: 26 Feb 2012, 14:08:16 da mickeymouseone »

Offline xplosion

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4047
  • Sesso: Maschio
    • Mostra profilo
Re:problemi box css
« Risposta #1 il: 24 Feb 2012, 14:37:13 »
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.

Offline mickeymouseone

  • Esploratore
  • **
  • Post: 158
    • Mostra profilo
Re:problemi box css
« Risposta #2 il: 25 Feb 2012, 23:16:35 »
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>
Citazione

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;
}


Citazione


ho messo la bozza del sito al link: http://www.prova147.altervista.org
dove puoi vedere il mio problema. ho dato colori diversi ai blocchi sfondo e ai moduli.

fammi sapere... grazie

Offline xplosion

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4047
  • Sesso: Maschio
    • Mostra profilo
Re:problemi box css
« Risposta #3 il: 26 Feb 2012, 00:49:51 »
io non vedo alcun bordo bianco. ne con IE ne con Chrome o FF.

Offline mickeymouseone

  • Esploratore
  • **
  • Post: 158
    • Mostra profilo
Re:problemi box css
« Risposta #4 il: 26 Feb 2012, 13:41:11 »
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:

Citazione

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!

Offline mickeymouseone

  • Esploratore
  • **
  • Post: 158
    • Mostra profilo
Re:[RISOLTO] problemi box css
« Risposta #5 il: 26 Feb 2012, 14:09:24 »
Ho risolto aggiungendo:


Citazione
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!!!

 



Web Design Bolzano Kreatif