• B
    User Attivo •

    Come posizionare i div

    Salve, sto iniziando ad imparare il css sto seguendo una una guida online, sono riuscito a capire i concetti basi pero quello che non sono riuscito a capire e come fare per posizione dove si vuole i div, in poche parole se io creo 4 div con questo codice:
    [php]<div id="1">Test 1</div>
    <div id="2">Test 2</div>
    <div id="3">Test 3</div>
    <div id="4">Test 4</div>[/php]

    Verranno creati 4 div in cascata cosi?i:

    h t t p://img34.imageshack.us/img34/2666/78235286.jpg
    Giusto?

    Mentre io invece vorrei posizionarli in questo modo:

    h t t p://img132.imageshack.us/img132/6140/46681923.jpg

    Qualcuno riuscirebbe a spiegarmelo nel modo più semplice possibile?

    grazie mille

    0
  • C
    User Attivo •

    Ciao,
    prova a creare un div contenitore della larghezza di test1+test2, dando a tutti il 'float:left'.

    0
  • G
    User Attivo •

    Ciao si i div inizialmente vengono posizionati in cascata appunto perchè non hai specificato nulla nel foglio css quindi il brovser usa la posizione di default.

    Per posizionare i div come vuoi tu il codice è il seguente:

    
<head>
<title>Esempio Div</title>
<style type="text/css">
#up{
heigth:40px;
width:40px;
border:5px solid red;
float:left;
}
#lf{
heigth:40px;
width:40px;
border:5px solid black;
float:left;
}
#rg{
heigth:40px;
width:40px;
border:5px solid blue;
clear:both; // Interrompe il float left precedente permettendo al blocco test 3 di andare a capo
float:left;
}
#dw{
heigth:40px;
width:40px;
border:5px solid orange;
float:left;
}
</style>
</head>
<body>
<div id="up">Test 1</div>
<div id="lf">Test 2</div>
<div id="rg">Test 3</div>
<div id="dw">Test 4</div>
</body>
</html>
    0
  • B
    User Attivo •

    Ok grazie adesso mi studio il codice postato.Faccio un altra domanda, se io vorrei creare un layout di un sito devo creare un div contenitore e poi in esso creare gli altri div tipo quello del menu logo ecc... giusto? Le misure per posizione i vari div devo farli considerando il div contenitore giusto?

    Sapete consigliarmi dove scaricare un semplicissimo template di un sito dove posso studiarmi il codice e fare prove?

    Grazie per la disponibilità

    0
  • G
    User Attivo •

    Diciamo che creare un div contenitore non è una cosa obbligatoria ma è comunque una cosa positiva così parti almeno con delle basi per le dimensioni degli altri elementi e poi con un contenitore ti risulta più facile centrare la pagina del sito nella finestra del browser,
    qundi si io ti consiglio di creare un div contenitore e poi il resto del layout della pagina.

    Dovresti trovare template in css su siti come freetemplate o prova a cercare con google.

    0
  • B
    User Attivo •

    Grazie per avermi risposto, il dubbio che mi rimane e con quale criterio imposto le posizione dei div, nel senso se io scrivo questo codice:
    [php]#DIV-1{
    heigth:40px;
    width:40px;
    border:5px solid orange;
    float:left;
    [/php]

    Come faccio a dire div1 posizionati qui div2 la, cioè che punto di riferimetno ho?tipo nel codice postato da te 40px da dove la preso? Hai fatto a caso oppure in base a qualche logica?

    Scusami se non sono stato chiaro spero di essermi fatto almeno capire :arrabbiato:

    0
  • G
    User Attivo • 
    
#DIV-1{
heigth:40px;//valore dell'altezza casuale solo per es
width:40px; //larghezza solo come esempio
border:5px solid orange;
float:left;//dice al div uno di allinearsi ( float )a  left

    Ti ho commentato il codice praticamente ci sono diverse strade per posizionare un div nella pagina html o usi position con i relativi
    valori che può assumere o il float dipende da cosa devi ottenere.

    **Posizionamento assoluto **

    Un elemento posizionato in maniera assoluta non avrò nessuno spazio nell documento. Questo significa che non lascia nessuno spazio dopo che è stato posizionato.
    Per posizionare un elemento in maniera assoluta la proprietà position deve avere valore absolute. In seguito puoi usare proprietà left, right, top, e bottom per sistemare i box.
    Come esempio di posizionamento assoluto abbiamo scelto di sistemare 4 box in ciascun angolo del documento:

    
 
 
#box1 {    position:absolute;    top: 50px;    left: 50px;}
#box2 {    position:absolute;    top: 50px;    right: 50px;}
#box3 {    position:absolute;    bottom: 50px;    right: 50px;}
#box4 {    position:absolute;    bottom: 50px;    left: 50px;}
</style>

    **Posizionamento relativo **

    Per posizioanre un elemento in maniera relativa la proprietà position deve avere valore relative. La differenza tra il posizionamento assoluto e quello relativo è su come viene calcolata la posizione.
    La posizione di un elemento posizionato in maniera relativa viene calcolato dalla sua posizione originale nel documento. Questo significa che sposti l'elemento a destra, a sinistra, in alto o in basso. In questo un elemento avrà sempre uno spazio nel documento dopo il suo posizionamento.
    Come esempio di posizionamento relativo cerchiamo di posizionare tre immagini in relazione alla loro posizione originaria nella pagina.
    le immagini lasciano dello spazio vuoto nella loro posizione originaria all'interno del documento:

    
#dog1 {
   position:relative;
   left: 350px;
   bottom: 150px;
}
#dog2 {
   position:relative;
   left: 150px;
   bottom: 500px;
}
 
#dog3 {
   position:relative;
   left: 50px;
   bottom: 700px;
}

    Io normalme tendo ad usare il float per la posizione dei div e position relative o absolute o fixed per il posizionamento delle immagini o dei div che le contengono.

    0
  • B
    User Attivo •

    Ciao, mi scuso se non ho postato prima, avrete pensato che che fossi sparito,:x ma purtroppo sono stato un po impegnato...ritornando al topic ieri mi sono esercitato a ricreare un layout ho scaricato un immagine di un sito poi l'ho ritagliata e ho provato a ricrearla da capo in html+css...diciamo come prima prova mi ritengo soddisfatto, ma ho ancora moltissimo da imparare :sbav:
    Una difficoltà e che ho incontrato per il momento sono 2

    1. Non sono riuscito ad affiancare due div o meglio ho dovuto fare molte provo e non so se il risultato sia il migliore, stasera quando rientro posto il codice

    2. tipo se voglio fare in modo che il sito risulti centrale alla pagina come posso fare?

    0
  • P
    User Attivo •

    Ciao Bivio, 🙂

    per affiancare due div devi mettere a entrambi il float:left e per mandare "a capo" il resto del codice inserisci

    <div style="clear:both"></div>
```Se non li vedi, io solitamente gli do una dimenzione e un bordo in modo da identificarli bene nella pagina.

Per centrare il sito puoi, o mettere tutto dentro un div con align:center
oppure mettere tutto dentro un div, a cui assegni:

    width:larghezza massima del contenuti
    position:relative
    margin-left:auto
    margin-right:auto

    0
  • B
    User Attivo •

    @pgmedia said:

    [***]

    Grazie pgmedia per avermi risposto, adesso faccio qualche prova con i tuoi suggerimenti...nel frattempo come avevo gia scritto per esercitarmi ho scaricato una foto di un sito poi l'ho ritaglia e ho cercato di ricomporla...ecco il risultato:
    w w w .spaziotest.altervista.org/css.html

    Non fare caso ai nomi che ho assegnato ai div era solo per ricordarmeli meglio... vorrei se sono sua una buona strada oppure devo rivedere tutto...accetto qualsiasi consiglio

    Grazie ancora ciao

    0
  • P
    User Attivo •

    Bè direi che ci siamo!! 😄

    0
  • B
    User Attivo •

    @pgmedia said:

    [***]

    Ok 😄 ma la strada e ancora molto lunga :sbav: stasera quando torno a casa posto altri paio di dubbi che ho 🙂

    Grazie ciao

    0
Effettua l'accesso per rispondere