div che non si sovrappongono

sto construendo un layout con i div... guardate questo semplice codice (dovete metterlo in una pagina web

Codice HTML:

---

<style>

div {
  border: solid 1px #000;
  padding: 0px,
}
#div1 {
  width: 900px;
  height: 675px;
  border: solid 1px #f00;
}
#div21 {
  width: 900px;
  height: 150px;
}
#div22 {
  width: 900px;
  height: 75px;
}
#div23 {
  width: 900px;
  height: 450px;
}

</style>



<div id="div1">
  <div id="div21">
HEAD
  </div>
  <div id="div22">
NECK
  </div>
  <div id="div23">
BODY
  </div>
</div>

---

c'è un gran quadrato (rosso), che ne contiene tre(neri), ma come potete notare, i bordi di quelli neri non si accavallano, creando così dei pixels in più che alla fine escono... come posso far accavallare fra loro i div, ottenendo così che non ci siano pixels in più?? grazie mille :D

i px occupano spazio, quindi basta diminuire le dimensioni (width) in base al bordo, altrimenti prova ad utilizzare la proprietà position: relative; :wink:

allora, non voglio diminuire la posizione dei pixels di uno perchè mi creerebbe problemi con gli em, mentre il position relative non sembra funzionare.... come posso risolvere? dai guru vi sono capitati problemi di layout, giusto? grazie

Credo di essermi sbagliato, hai provato con position: absolute;?

si, ma così i tre div si accavallano, partendo dal primo punto, e quello esterno rimane comunque con un pixel di distacco....

Dai una lettura a Position :wink:

il box-model non te lo puoi inventare tu (questo è un comportamento che si può permettere soltanto microsoft :))
esiste già e ti devi attenere a quello
per il tuo effetto potresti usare delle immagini

Cosa intendi?

Sei tu che decidi dove posizionare gli elementi, basta saper usare il CSS...

@biccheddu il mio messaggio precedente non era per te :)

scusate ragazzi, ma se non esiste un sistema per non creare abbondanza di pixels, faccio molto prima ad usare le tabelle.... una sola cosa: posso usare gli em anche per le tabelle, gst? ciao!

puoi usare quello che vuoi, dovresti usare quello che sai,
ma il blocconotes è nulla senza controllo

riassumendo: la soluzione c'è se conosci il box-model e position e un po' di aritmetica
se non li conosci li dovresti studiare (e capire) o incaricare qualcuno o trovare un'alternativa

1px(border)+900px(width)+1px(border)=902px

Dopo quanto detto da acsomel non ho capito il tuo problema degli em, dato che sono dei tag come span che trasformano una stringa di testa in Italic.

Codice HTML:

---

<style>

div {
  border: solid 1px #000;
  padding: 0px,
}
#div1 {
  width: 900px;
  height: 675px;
  border: solid 1px #f00;
}
#div21 {
  width: 898px;
  height: 148px;
}
#div22 {
  width: 898px;
  height: 73px;
}
#div23 {
  width: 898px;
  height: 448px;
}

</style>



<div id="div1">
  <div id="div21">
HEAD
  </div>
  <div id="div22">
NECK
  </div>
  <div id="div23">
BODY
  </div>
</div>

---

Magari non ho capito un tubo di quello che vuoi fare... ma...
Questa soluzione non è accettabile?

ragazzi, vi ho detto che non posso calcolare i singoli px, perchè quando dopo mi ritroverò a convertirli in em (in questo caso per un layout liquido, e non per le scritture), non posso calcolare il singolo px... grazie

Cosa vuol dire convertirli in em per un layout liquido? :shock:

Citazione:

---

Un layout liquido (o fluido) è un layout in cui la grandezza della pagina è variabile e asseconda la finestra del browser. A differenza del layout fisso, un layout liquido è adatto a tutte le risoluzioni.

---

Perchè in em e non in percentuale?

beh, non tutti gli schermi sono grandi alla stessa maniera... :D