CSS e margini

**cicciomed** · 29-09-2009, 18:53

ciao a tutti,
cercherò di essere breve questo è il codice incriminato:

<html>
<body>
<div id="page_bg" class="margini">
</div>
</body>
</html>

html,body{margin: 0px;height: 100%;}

html{background-color: black;}

body{background-color: gray;border: aqua 1px solid;}

.margini{margin: 8px auto 8px auto;}

#page_bg{width: 95%;height: 90%;background-color: red;}

con questo codice visualizzo tutta la pagina gray con il bordo acqua che eccede il 100% di 2 px e compare la barra verticale di scorrimento, al centro staccata dal bordo superiore il riquadro rosso.

se provo a togliere il bordo al body per non vedere la barra verticale sembra che il margine impostato sul div si sposti sul body e vedo il trafiletto di 8px nero poi il riquadro rosso con a fianco il grigio del body che supera il 100% della pagina di 8px e compare la barra verticale.

dove ca...volo sbaglio???

perchè non vedo quello che vedevo prima meno il bordo?? ho eliminato solo quello....

aspettando di far luce sulla questione vi ringrazio anticipatamente.

**cicciomed** · 30-09-2009, 12:23

nessuno conosce il motivo??

come risolvo??

**Mich_** · 30-09-2009, 15:27

Ho fatto un po' di prove (Mozilla 5.0 sotto Linux) ed in effetti la cosa succede come dici.

Ma non e` il margine settato quello che esce, dato che anche cambiando dimension resta sempre un bordo di una ventina di px (forse sono 15, ma sicuramente non 8).

Ecco il codice testato:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    /*<![CDATA[*/
html {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  background-color: black;
  font: 1px;
}
body {
  margin: 0;
  padding: 0;
  height: 98%;
  background-color: gray;
  font: 20px;
  border:0;
  /*border: 1px solid aqua;*/
}
#page_bg {
  position: relative;
  width: 95%;
  min-height: 70%;
  background-color: red;
  margin: 0px auto auto auto;
  padding: 0
  border: 0;
}
    /*]]>*/
    </style>
</head>
 <body>ciao
   <div id="page_bg">
     

prova</p>
   </div>
 </body>
</html>

Nota che se aggiungo qualsiasi carattere dopo il tag <body> e prima del <div>, la pagina si comporta come dovrebbe (vedi la scritta "ciao"). Se invece tolgo la scritta (che, detto tra parentesi, rappresenta un erorre sintattico nella DTD strict), compare quel bordo nero in alto.

**cicciomed** · 30-09-2009, 15:41

se metto dopo il body tutto funge a meno del margine, infatti lo spazio mi aggiunge una riga di x px.
posso poi mettere un margine negativo al box e posizionarlo + in alto.

perchè dici che è un errore sintattico?? che intendi??

grazie.

**Mich_** · 30-09-2009, 16:03

Originariamente inviato da cicciomed
se metto &nbsp; dopo il body tutto funge a meno del margine, infatti lo spazio mi aggiunge una riga di x px.
posso poi mettere un margine negativo al box e posizionarlo + in alto.

perchè dici che è un errore sintattico?? che intendi??

grazie.

Nella DTD strict, non si puo` inserire il testo a caso: va messo dentro i tag appositi (ad esempio

), Inoltre nonsi puo` inserie un

diretamente nel <body>, ma deve essere dentro un <div>

Comunque ci deve essere un errore di interpretazione da qualche parte ...

Mettere un margine negativo non mi piace molto: io lo vedo come aggiungere un errore per correggere un altro errore: se in un browser l'errore iniziale non c'e`, l'effetto sara` l'impossibilita` di leggere la prima riga.

**cicciomed** · 30-09-2009, 16:19

ok!! credevo ci fosse un errore nella versione che avevo fatto io.

cmq nel mio caso è solo una questione di layout, non devo mettere nessun contenuto se non dentro il div con margine negativo, potrebbe andare bene come soluzione, ma come dici tu è mettere una pezza.

la cosa che non mi convince è che sia ie che moz fanno la stessa interpretazione.
la pezza migliore è inserire il bordo dello stesso colore dello sfondo,
ma sono curioso di capire dove sta l'inghippo......
non mi piace fare una cosa è non capire perchè.....

oggi mi va bene e riesco a sistemare e domani???

ps: il bordo è nero perchè il tag HTML ha sfondo nero, il body si sposta in basso, come se venisse dato un margine o fosse posizionato al di sotto di html e così compare lo sfodo di HTML.

**mucu** · 30-09-2009, 17:23

Originariamente inviato da Mich_
non si puo` inserie un

diretamente nel <body>, ma deve essere dentro un <div>

sarà che mi sono appena alzato , ma questa non l'ho capita
usare i

e gli altri tag html dovrebbe essere la soluzione migliore
e quindi lasciare l'uso dei div quando bisogna posizionare un gruppo di tag logici o come si chiamano

Discussione: CSS e margini

Strumenti discussione

Ricerca discussione

Visualizza

CSS e margini

Permessi di invio