Newsgroup: it.comp.www.html
Titolo: Posizionamento div con CSS

Ciao a tutti
sto imparando i CSS ma forse non ho capito ancora bene il funzionamento
ho un problema con il posizionamento di alcune div.
Mi spiego ho una div contenitore all'interno ho altre due div che vorrei
fossero una vicino all'altra ma mi succede che si mettono una sopra l'altra.
<div class="provaPadre">
      <div class="prova1">Prova1 </div>
      <div class="prova2">Prova2 </div>
</div>
Il codice che ho messo nelle varie classi č:
..provaPadre
 {
 height: 35px;
 width: 350px;
 margin: 0px 0px 0px 0px;
 padding: 2px 1px 1px 5px;
 font-weight: bold;
 font-size: 10px;
 font-family: Verdana, Helvetica, Arial;
 color: black;
 vertical-align:middle;
 text-align:left;
 border: 1px solid black;
 }
 .prova1
 {
 width: 150px;
 margin: 0px 0px 0px 0px;
 padding: 2px 1px 1px 5px;
 border: 1px solid black;
  }
 .boxprova
 {
 width: 150px;
 padding: 1px 1px 1px 1px;
 margin: 0px 0px 0px 0px;
 text-align:left;
 color: black;
 border: 1px solid black;
 }
Grazie a tutti

Pippo ha scritto nel messaggio:
| Ciao a tutti
| sto imparando i CSS ma forse non ho capito ancora bene il funzionamento
| ho un problema con il posizionamento di alcune div.
| Mi spiego ho una div contenitore all'interno ho altre due div che vorrei
| fossero una vicino all'altra ma mi succede che si mettono una sopra l'altra.
Ciao Pippo,
    i div sono block-level element. Se in una pagina html metti un div senza
specificarne le dimensioni con i css, vedrai che ti occupa tutta la larghezza dello
schermo (o del suo contenitore). A differenza dei tag <a>, <span> e <img> che
sono elementi inline. Anche specificando le dimensioni, senza usare float né
posizionamenti e' impossibile affiancare qualcosa ad un div.
Due possibili soluzioni, anzi tre:
- come figli del div padre usi due span
- forzi i div come elementi in-line usando una regola tipo:
div#padre div{
    display: inline;
    width: 50% /*eccetera*/
    }
- usi il posizionamento assoluto.. in questo caso:
div#padre{
    position: relative;
    /*ecc...*/
    }
div#padre div#figliosinistro{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%  /*ecc...*/
    }
div#padre div#figliodestro{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 100%
    }
Per i css, ecco alcuni buoni siti:
www.w3schools.com
www.brainjar.com
www.mako4css.com
http://codepunk.hardwar.org.uk/
Ciao!
    SantaKlauss.

 </div>
Nel css a .prova1 e .prova2 imposta un float: left;
Dovrebbe andare.
Se poi ti dovesse creare problemi con i blocchi successivi, allora imposta
clear: left per gli altri blocchi (quelli successivi, appunto).
Deep

     }
Grazie davvero per le indicazioni sul posizionamento, la terza che hai 
indicato mi è risultata utile. Siccome sto imparando da non molto i CSS 
potresti dirmi cosa significa:
div#padre div#figliosinistro
non sarebbe bastato:
div#figliosinistro
Grazie, un saluto, ciao ciao.

Paolo G. ha scritto:
| Grazie davvero per le indicazioni sul posizionamento, la terza che hai
| indicato mi è risultata utile. Siccome sto imparando da non molto i CSS
| potresti dirmi cosa significa:
|
| div#padre div#figliosinistro
|
| non sarebbe bastato:
|
| div#figliosinistro
Ciao Paolo,
    le regole sui css basate sugli id stanno ad indicare che l' elemento con quell' id
nell' html sarà unico. Per questo preferisco specificare quale tag html sarà
proprietario dell' id definito tramite css.
Basterebbe anche specificare:
#padre
e nell' html si potrebbe avere uno dei seguenti ad esempio:
<p id="padre">
<div id="padre">
Ma per leggibilità e data l' unicità dell' id preferisco sempre specificare il
tag proprietario della regola css nell' html.Come quando, per esempio,
hai una classe che sai che applicherai solo a un dato tag.
In merito alla tua domanda: e' vero sarebbe bastato nel css scrivere
div#figliosinistro (o anche solo: #figliosinistro)
Tanto l' id "figliosinistro" è comunque unico.
E' una questione di abitudine e soprattutto logica
I fogli di stile a cascata permetto di definire gli stili dei tag
contenuti in classi o id. Per esemplificare la cosa:
div#menu{
    /*ecc*/
    }
div#menu a{
    /*tutte le ancore inserite nell' html all' interno
     del div con id="menu" verranno presentate con lo stile definito qui*/
    }
volendo fare un altro passo per chiarire meglio...se nel css definisco:
div#main p.news{
    /*ecc..*/
    }
solo i paragrafi con classe="news" all' interno del div con id="main"
vengono presentati grazie alla regola sopra, cioè:
<div id="main">
    <p>Questo paragrafo prenderà la presentazione della regola "p" del css se ce n'e' una,
           altrimenti verrà presentato senza attributi...
    </p>
    <p class="news">
        Ecco: qui prendo la presentazione della regola css scritta sopra
    </p>
</div>
    <p class="news">
        Qui la regola css scritta sopra non ha alcun effetto.Questo paragrafo
        prenderà la presentazione della regola "p" del css  e/o di p.news (senza essere preceduto
        da un div però nel css) se ce ne sono, altrimenti verrà presentato senza attributi...
        </p>
Tornando alla tua domanda, in questo caso scrivere:
div#padre div#figliosinistro
non ti permette di presentare attraverso gli attributi definiti nella regola
css un <div id="figliosinistro"> al di fuori da un <div id="padre">.
Oltretutto il css risulta così molto più leggibile: quando scriverai file .css
di 500 righe e più se leggerai nel css:
div#padre div#figliosinistro{
    /*ecc...*/
    }
capirai subito che div#figliosinistro si riferisce a un div che per forza
deve essere contenuto nel div "padre".
Spero di essere stato chiaro, se hai altri dubbi non esitare a chiedere.
Saluti,
    SantaKlauss

     SantaKlauss
Sei stato chiarissimo SantaKlauss, grazie mille per le preziose 
indicazioni! Un saluto, grazie, ciao ciao.

     SantaKlauss
Ciao.

| Ottimo! Sto iniziando ad usare questo metodo che mi hai suggerito:
| consente di scrivere codice più pulito, grazie.
Figurati! A proposito di codice pulito, questo è un' estratto di un mio post
di qualche tempo fa sul ng che magari non hai letto.
Ciao,
    SantaKlauss
"Un consiglio, perchè ci sto passando anch' io ora che uso molto i css, non credo
che nessun tutorial lo dica ma viene utile:
stabilisciti un ordine degli attributi nella definizione di uno stile, e cerca di seguirli
per tutti gli stili nei css. Il mio ordine di dichiarazione a cui cerco di attenermi e'
questo:
1 - posizionamento, float
2 - dimensioni, display e overflow
3 - margin e padding
4 - bordi
5 - background e color
6 - font-family
7 - font-size
8 - altri attributi sul testo
Cosi ti verrà più semplice leggerli e modificarli."

 2 - dimensioni, display e overflow
...
Hai ragione, ottimo! Infatti pensavo appunto ad una sequenza prefissata 
di attributi, questa mi sembra ottima, me la segno, grazie Santa, ciao ciao.
-- 
Paolo Guagliumi - ICQ 46580228
_______________________________________
Casale Monferrato - Alessandria - Italy
mailto:
pguagliumi@no_spam_please_libero.it
http://web.tiscali.it/saw

| Hai ragione, ottimo! Infatti pensavo appunto ad una sequenza prefissata
| di attributi, questa mi sembra ottima, me la segno, grazie Santa, ciao ciao.
Figurati! Ciao,
    SantaKlauss