• R
    User Attivo •

    Posizionamento assoluto "fluido" coi css - GUIDA

    Il **posizionamento assoluto si basa su un principio molto semplice: ?uscire? dal flusso normale dei dati (o elementi). Cosa significa? in parole povere viene usato questo posizionamento quando vogliamo posizionare un elemento qualsiasi (che, per comodita? di trattazione, da ora in poi sara? un div) in una posizione dello schermo particolare o comunque fuori dal flusso normale di codice.
    Se per esempio abbiamo un main-container centrato di dimensione 960px e vogliamo posizionare un     div in alto a destra dello schermo **( e quindi fuori del contenitore principale centrato), dobbiamo per forza usare un posizionamento di tipo assoluto (o fissato, ma questo lo vedremo piu? avanti).
    Se mettessimo il div all?interno del main-container centrato infatti il div non andrebbe in alto a destra del browser, ma si manterrebbe in alto a destra del ?div? genitore.

    Col posizionamento assoluto si comunica al browser la volonta? di **estrarre dal flusso di elementi **il nostro box e metterlo in alto a destra della nostra pagina, indipendentemente da dove sia posizionato il codice del contenitore.

    L?utilizzo del codice che vedrete vi sara? molto utile in molti casi, come ad esempio per posizionare delle news o offerte speciali, magari con un effetto di** page peel** molto professionale e dal notevole impatto grafico.
    Ma piu? in generale imparerete l?importanza di questo fantastico posizionamento.
    Vediamo il codice (commentato) per posizionare il div in alto a destra dello schermo. Il codice si auto-adattera? a tutte le risoluzioni, grazie al** layout ?fluido? **(vedi i commenti per maggiori informazioni).

    CODICE:

    **CSS: **

    body{
margin:0;
padding:0;
text-align:center;
}

#main{
margin:0 auto;
padding:0;
background-color:#FFF;
/*Stile shadow dietro css3*/
-moz-box-shadow: 5px 5px 100px #FFF;
-webkit-box-shadow: 5px 5px 50px;
box-shadow: 10px 10px 5px; 
/*consiglio sempre di specificare le dimensioni del main*/
width:960px;
height:700px;
}


#alto_dx{ 
/*Il posizionamento assoluto esula dal flusso di dati del documento, per questo risulta ultile per piazare div (o altro) in modo dinamico*/
position:absolute;
/*Grazie al posizionamento fluid (ovvero con percentuali) il nostro div si adattera' automaticamente allo schermo di tutte le risoluzioni*/
 right:0%; top:0%; 

 
 /*Dimensioni e background*/
 width:200px; height:200px; background-color:#FFF;

/*Bordi arrotondati css3*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

}

.testo_main{ margin:10px; text-align:justify; font-size:14px; font-family:"Arial", Helvetica, sans-serif; font-weight:300;}
```**HTML:**

    <body>

    <div id="alto_dx">
    <h1>Div in alto a destra</h1>
    <p>Mettici quello che vuoi!</p>
    </div>

    <div id="main">

    <h1>Box a destra ABSOLUTE</h1>
    <p class="testo_main">Se avessimo usato i px al posto delle percentuali il nostro div si sarebbe spostato ad una risoluzione diversa del monitor.</p>
    <p class="testo_main">Col posizionamento assoluto si estromette un div dal normale flusso di dati, e pertanto il div può essere piazzato paradossalmente dove si vuole!</p>

    </div>

    </body>

    0
  • R
    User Attivo •

    Se avete altri metodi, oppure avete delle difficolta' rimango a disposizione 😉

    0
Effettua l'accesso per rispondere