Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 12
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2011
    Messaggi
    420

    div interni ad altri div

    Ciao a tutti;
    Una situazione frequente in cui mi trovo molto spesso è quella di dover posizionare dei div contenuti a loro volta in altri div ma non ho mai capito qual'è il metodo corretto (o il più corretto);
    Ad esempio, in un div contenitore di 100px di altezza per 500px di larghezza, il primo div che inserisco si posiziona ovviamente in alto a sinistra nel contenitore e il secondo div va a posizionarsi sotto al primo.
    Se invece volessi che il secondo div si posizionasse a fianco al primo div, il secondo div dev'essere float:left? dev'esserlo il primo? entrambi? O deve esserlo il contenitore? O il contenitore deve essere display:inline?
    Provo tutti questi metodi senza mai ottenere l'effetto voluto e alla fine dichiaro il secondo div position:relative e me lo sistemo giocando su top e left ma mi sembra una specie di scorciatoia sporca...
    Qual'è la soluzione più pulita?
    Grazie a tutti

  2. #2
    Utente di HTML.it L'avatar di marty89
    Registrato dal
    Apr 2011
    Messaggi
    107
    Ciao, una soluzione che mi viene in mente è mettere i 2 div che stanno dentro al div contenitore con display: inline. In questo caso andranno ad allinearsi a fianco. Esempio:
    codice:
    <div style="height:100px; width:500px; background-color:blue;">
        <div style="background-color:red; display:inline;">Primo div</div>
        <div style="background-color:yellow; display:inline;">Secondo div</div>
    </div>
    Una seconda soluzione è impostare o solo il primo div o tutti e due i div interni con float:left.
    La differenza tra i due casi si può capire solo se i 2 div interni non hanno una width fissa. Infatti dando solo float left al primo div, questo occuperà una certa larghezza, il secondo, invece, andrà ad occupare tutta la restante parte del div contenitore. Esempio:
    codice:
    <div style="height:100px; width:500px; background-color:blue;">
        <div style="background-color:red; float:left;">Primo div</div>
        <div style="background-color:yellow;">Secondo div</div>
    </div>
    Dando a entrambe float left tutti i due occuperanno il minimo spazio possibile. Esempio:
    codice:
    <div style="height:100px; width:500px; background-color:blue;">
        <div style="background-color:red; float:left;">Primo div</div>
        <div style="background-color:yellow; float:left;">Secondo div</div>
    </div>
    Ovviamente se i div hanno una larghezza fissa puoi impostare float anche solo al primo, ma attenzione che se sono più di due, non basta attribuire float solo al primo.
    Spero di essermi spiegata e di essere stata chiara

  3. #3
    Utente di HTML.it L'avatar di cassano
    Registrato dal
    Aug 2004
    Messaggi
    3,002
    Infatti dando solo float left al primo div, questo occuperà una certa larghezza, il secondo, invece, andrà ad occupare tutta la restante parte del div contenitore. Esempio:
    Una certa larghezza, ovvero quanto e in base a cosa ?

  4. #4
    Utente di HTML.it L'avatar di marty89
    Registrato dal
    Apr 2011
    Messaggi
    107
    In pratica se nessuno dei due ha una larghezza fissa, il div con float andrà a prendere la larghezza del testo contenuto, dell'immagine o di quello che c'è dentro.
    Nell'esempio i due div sono larghi come il testo contenuto, ovvero una larghezza sufficiente a far contenere la scritta "Primo div" e la scritta "Secondo div". Se, invece, imposti te una larghezza fissa, andranno a disporsi sulla stessa riga a condizione che il div contenitore sia grande a sufficienza per far stare i due div interni.

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2011
    Messaggi
    420
    Ciao!
    Grazie per la risposta prima di tutto; seguendo le tue indicazioni e considerando tutti i div con lunghezza fissa, ho fatto alcune prove ottenendo questi risultati...
    - Impostando entrambi i div interni come "inline" ottengo più o meno l'effetto desiderato, ma se volessi spostare uno dei due div più in basso rispetto all'altro, come potrei fare?
    Ad esempio, se il primo dei due div contenesse il logo e il secondo una frase, il secondo div vorrei che si posizionasse sul bordo inferione del div contenitore e non su quello superiore come il primo div...

    - Impostando solo il primo div float:left, ottengo lo stesso effetto, ma i 2 div interni mi si compenetrano ossia si sviluppano entrambi dall'angolo superiore sinistro

    - Impostandoli entrambi float:left mi sembra di ottenere la visualizzazione più pulita, ma anche in questi ultimi due casi non saprei come fare se volessi spostare il secondo più in basso rispetto al primo... suggerimenti?

  6. #6
    Utente di HTML.it L'avatar di marty89
    Registrato dal
    Apr 2011
    Messaggi
    107
    Se vuoi spostare un div più in basso puoi provare a dare margin-top al secondo div. In questo caso si sposta tutto il div più in basso in base al numero di pixel che hai dato al margin.
    In alternativa puoi usare padding-top; in quest'altro caso si sposta ugualmente in basso il testo, però il div aumenta la sua altezza del numero di pixel che hai dato al padding.
    Spero di essermi spiegata

  7. #7
    Utente di HTML.it
    Registrato dal
    Sep 2011
    Messaggi
    420
    Perfetto...
    credo che indicare tutti i div interni come float left e giocare sul padding sia la soluzione più pulita!
    Grazie 10000000

  8. #8
    Utente di HTML.it
    Registrato dal
    Jan 2012
    Messaggi
    12
    Ciao a tutti,

    ho un problema un po' simile: ho un div "content" nel quale ci sono 3 div corrispondenti a 3 colonne ("concerti", "collaborazioni" e "raccolta_fondi"). La prima colonna è suddivisa in 2 box (leggi div). Schema un po' complesso ma che fa' al caso mio per questa pagina del sito che sto realizzando.
    Il primo problema è che le 3 colonne si comportano come se non fossero dentro il div "content". Inoltre, il body sfora, diciamo così, la larghezza dello schermo, cosa che non succede nelle altre pagine del sito (niente barra di scroll orizzontale della pagina).

    Che cosa ho sbagliato?...

    di seguito posto il CSS:

    codice:
    @charset "utf-8";
    /* CSS Document */
    
    @font-face {
        font-family: 'joshshand';
        src: url('../font/josh-h.eot');
        src: url('../font/josh-h.eot?#iefix') format('embedded-opentype'),
             url('../font/josh-h.woff') format('woff'),
             url('../font/josh-h.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'myriad';
        src: url('../font/myriad.eot');
        src: url('../font/myriad.eot?#iefix') format('embedded-opentype'),
             url('../font/myriad.woff') format('woff'),
             url('../font/myriad.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    body {
    	width: 100%;
    	margin: 0 auto;
    	padding: 0;
    	font-family: 'myriad';
    	font-size: 14px
    }
    h2 {
    	margin: 0 auto 10px;
    	padding: 0;
    	text-align: center;
    	color: #CF87BA;
    	font-family: 'joshshand';
    }
    h3 {
    	margin: 5px auto 15px;
    	padding: 0 5px;
    	color: crimson;
    	font-size: 16px
    }
    h4 {
    	margin: 0;
    	padding: 5px;
    	text-align: right;
    	font-weight: 600;
    	font-size: 12px
    }
    h4:first-line {
        font-family: 'joshshand';
    	font-size: 14px
    }
    p {
    	margin: 0;
    	padding: 5px;
    }
    ol {
    	list-style-type: disc
    }
    a {
    	text-decoration: none
    }
    a:link {color:#000;}    /* unvisited link */
    a:visited {color:crimson;} /* visited link */
    a:hover {color:crimson;}   /* mouse over link */
    a:active {color:#CF87BA;}  /* selected link */
    a:hover img {
    	box-shadow: 5px 4px 5px #CC6699
    }
    .header {
    	padding-bottom: 10px
    }
    .header img {
    	box-shadow: none;
    }
    .content {
    	margin: 0;
    	padding: 0 10px;
    	border: 1px solid #000;
    }
    .concerti {
    	width: 32%;
    	margin-right: 10px;
    	float: left
    }
    .concerti p {
    	padding: 5px 0;
    }
    #info {
    	height: 168px;
    	margin-bottom: 10px;
    	padding: 5px;
    	background-color: #FFD9FF;
    	border-radius: 15px;
    	box-shadow: 4px 5px 5px #FFCCFF;
    }
    #archivio {
    	height: 400px;
    	padding: 5px;
    	background-color: #FFD9FF;
    	border-radius: 15px;
    	box-shadow: 4px 5px 5px #FFCCFF;
    	overflow: auto;
    }
    #archivio p {
    	padding: 5px;
    	overflow: auto;
    }
    .collaborazioni {
    	width: 32%;
    	height: inherit;
    	margin-right: 10px;
    	background-color: #FFD9FF;
    	border-radius: 15px;
    	box-shadow: 4px 5px 5px #FFCCFF;
    	overflow: auto;
    	float: left
    }
    .collaborazioni p {
    	padding: 5px;
    	overflow: auto
    }
    .raccolta_fondi {
    	width: 32%;
    	background-color: #FFD9FF;
    	border-radius: 15px;
    	box-shadow: 4px 5px 5px #FFCCFF;
    	float: left
    }
    .footer {
    	margin-top: 20px;
    	padding: 10px;
    	font-size: 11px;
    	color: #fff;
    	background-color: #C3C /* #E52B50 */;
    	clear: both;
    }
    .footer p {
    	margin: 0;
    	padding: 0;
    	text-align: center
    }
    .footer span {
    	padding: 0 20px
    }

  9. #9
    Utente di HTML.it
    Registrato dal
    Jan 2012
    Messaggi
    12
    e l'HTML:

    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <link rel="shortcut icon" href="img/favicon1.png" type="image/png">
    <link rel="icon" href="img/favicon1.png" type="image/png">
    <link rel="stylesheet" type="text/css" href="css/stile_3colonne.css" />
    <link rel="stylesheet" type="text/css" href="css/menu.css" />
    
    <script>
    // Javascript originally by Patrick Griffiths and Dan Webb.
    // http://htmldog.com/articles/suckerfish/dropdowns/
    sfHover = function() {
       var sfEls = document.getElementById("navbar").getElementsByTagName("li");
       for (var i=0; i<sfEls.length; i++) {
          sfEls[i].onmouseover=function() {
             this.className+=" hover";
          }
          sfEls[i].onmouseout=function() {
             this.className=this.className.replace(new RegExp(" hover\\b"), "");
          }
       }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    
    <title>ALBA Onlus - Collaborazioni</title>
    </head>
    
    <body>
    	<div class="header">
          [img]img/LgAlbaONLUS.png[/img]
          [img]img/logo.png[/img]
        </div>
    	<div class="menu">
            <ul>[*]Home[*]Chi siamo
                  <ul>[*]Mission[*]Collaborazioni[*]Loredana Battaglia[/list]
              [*]Progetti
                  <ul>[*]Per i bambini[*]Borse di studio[*]Biblioteca[/list]
              [*]Eventi[*]Sostienici
                  <ul>[*]Cesti solidali[*]Collabora con noi[*]Regala libri e vestiti[*]Fa' una donazione[/list]
               [*]Gallery
                  <ul>[*]Foto[*]Video[/list]
               [*]Contatti[/list]
        </div>
        <div class="content">
        	<div class="concerti">
            	<div id="info">
                    <h3>I concerti di ALBA</h3>
                    
    
    
                    Concerto per Loredana è il titolo dato a tutti gli appuntamenti musicali che l’associazione organizza per raccogliere fondi da destinare ai progetti annuali. I concerti sono la principale fonte di fund raising. L’appuntamento principale si svolge generalmente in autunno a Roma, ma altri eventi si organizzano a Serra San Bruno (VV) e a Cassino(FR).
                    </p>
                </div>
                <div id="archivio">
                    <h3>2011</h3>
                    
    
    
                    	Christian Cecere, virtuoso pianista romano, si è esibito per la prima volta a Cassino per il concerto di beneficenza dedicato a Loredana nell'Aula Pacis dell'Università di Cassino (FR), domenica 15 maggio alle ore 19. In programma musiche di Chopin e Liszt.
                        
    
                        Il concerto si è aperto con le celebri composizioni del grande compositore polacco Fryderyk Chopin di cui Cecere ha eseguito tre brani molto noti: la Fantasia Improvviso op. 66, la Polacca op. 53 “Eroica” e l’ Andante spianato e Grande Polacca brillante op. 22.
                        
    
                        Franz Liszt è stato uno dei più grandi pianisti di tutti i tempi e tra i più prolifici compositori degli ultimi tre secoli con 1400 numeri d’opera. Del compositore ungherese, il pianista romano ha eseguito nella seconda parte del concerto 2 Studi da concerto: “Il lamento” e “Un sospiro”, la famosa trascrizione La Morte di Isotta dal Tristano e Isotta di R. Wagner e la Parafrasi da concerto dal “Rigoletto” di G. Verdi.
                    </p>
                    
    
    
                    	Domenica 15 maggio 2011 - ore 19
                        
    
                        Aula Pacis - Università degli Studi di Cassino
                        
    
                        Via Marconi, 10 - Cassino (FR)
                        
    
                        ingresso ad offerta libera
                    </p>
                    
    
    
                    	Chopin
                        
    1. Fantasia Improvviso op. 66
    2. Polacca op. 53 “Eroica”
    3. Andante spianato e Grande Polacca brillante op. 22
    Liszt
    1. 2 Studi da concerto: “Il lamento” e “Un sospiro”
    2. Isolde’s Liebestod dal “Tristano e Isotta” di R. Wagner
    3. Parafrasi da concerto dal “Rigoletto” di G. Verdi
    </p> Sonia Bergamasco e Roberto Prosseda protagonisti della serata di beneficenza organizzata dall’Associazione ALBA nella Sala Petrassi dell’Auditorium Parco della Musica di Roma, giovedì 17 novembre 2011 alle ore 21.00, dal titolo Una storia un po’ magica - racconto con musica da Anna Maria Ortese. Un concerto tra musica e parole dove a brani di Chopin (Notturno op. 62 n. 1, Ballata op. 52) Schumann (Fantasia op. 17, Kinderszenen op. 15 ) e Schubert (Impromptu op. 90 n. 1) si alterneranno le magiche pagine del Mistero Doloroso di Anna Maria Ortese, che sullo sfondo della Napoli di fine ‘700 narra dello sconfinato amore di Florida, fanciulla dalla bellezza lunare e irreale, per il pallido e assorto Principe Cirillo. Il ricavato della serata è stato devoluto ai bambini ricoverati nel reparto di Oncoematologia Pediatrica del Policlinico Umberto I di Roma. Con l’incasso di questo concerto, ALBA (Associazione Loredana Battaglia) vuole garantire per tutto il 2012 la terapia assistita dagli animali nel reparto del Policlinico romano e nello specifico il “Progetto Filippo, un cavallo per amico”. </p> Auditorium Parco della Musica – Sala Petrassi 17 novembre 2011 – ore 21.00 Roberto Prosseda pianoforte Sonia Bergamasco voce narrante
    1. Una storia un po’ magica, racconto con musica Testi tratti dal racconto Mistero Doloroso di Anna Maria Ortese
    2. Chopin Notturno op. 62 n. 1
    3. Schumann Fantasia op. 17 (primo movimento)
    4. Schubert Impromptu op. 90 n. 1
    5. Schumann Kinderszenen op. 15
    6. Chopin Ballata op. 52
    </p> </div> </div> <div class="collaborazioni"> <h3>Collaborazioni</h3> La prima collaborazione di ALBA con l’Università di Iasi (www.uaic.ro) risale al 2008. Da allora riusciamo a portare avanti il progetto delle borse di studio dando un aiuto concreto agli studenti più meritevoli e bisognosi. L’associazione ALBA collabora dal 2010 con la ONLUS Mary Poppins www.assomarypoppins.it. Insieme cerchiamo di curare piccoli ma significativi progetti destinati ai bambini ricoverati nel Reparto di Oncoematologia Pediatrica del Policlinico Umberto I di Roma. ALBA collabora anche con l’Accademia di Romania in Roma (www.accadromania.it). L’Accademia ospita i borsisti di ALBA durante il loro periodo di studio a Roma. Si ringrazia anche l’Università di Roma “La Sapienza” per aver dato accesso ai borsisti di ALBA, che hanno così potuto partecipare alla Summer School per lo studio della lingua italiana (www.uniroma1.it/summerschoolsapienza) </p> ALBA ringrazia tutti gli artisti che ogni anno si offrono gratuitamente per realizzare le serate di beneficenza. Un grazie particolare alla Professoressa Mirela Aioane (Università di Iasi) e alla Professoressa Carmen Ioviero che sin dalla prima edizione si sono dedicate con grande passione alle borse di studio e a tutte le iniziative in ricordo di Loredana. Si ringraziano, inoltre, il Rettore dell’Università di Iasi, PhD Prof. Vasile Işan, i Vice Rettori Prof.dr. Henri Luchian e la Prof.dr. Carmen CREŢU, i docenti del Dipartimento di Italianistica. Si ringrazia anche l’Università di Roma “La Sapienza” per aver dato accesso ai borsisti di ALBA, che hanno così potuto partecipare alla Summer School per lo studio della lingua italiana (www.uniroma1.it/summerschoolsapienza). Dall'autunno 2012 Alba sostiene la Casa di Peter Pan, struttura di accoglienza nata per volontà dell'Associazione Peter Pan Onlus e destinata alle famiglie non residenti a Roma che vengono nella capitale per curare i propri figli affetti da tumore. Grazie a tutti gli amici che aiutano l’associazione mettendo a disposizione il proprio tempo libero: Francesca Altobelli, Laura Bognetti, Ilda De Ritis, Susanna Giannachi, Ivan Marinelli, Luca Sprecacenere, Barbara Vinci, Maria Vinci. </p> </div> </div> <div class="raccolta_fondi"> <h3>Gli altri eventi</h3> L’evento principale per la raccolta fondi è l’organizzazione di concerti e reading letterari. Un grazie di cuore va a tutti gli artisti che si sono offerti gratuitamente per i nostri eventi: i Professori d’Orchestra dell’Accademia Nazionale di Santa Cecilia, Enrico Pieranunzi, Christian Cecere, Chiara Vinci, Vincenzo Macrì. </p> Quest’anno grazie alla collaborazione del pianista Roberto Prosseda e dell’attrice Sonia Bergamasco realizzeremo un “racconto in musica” il 17 novembre p.v. all’Auditorium Parco della Musica di Roma con musiche di Chopin, Schumann e Schubert su testi di Anna Maria Ortese. </p> Un altro appuntamento che ci contraddistingue è la realizzazione di cestini di prodotti tipici e genuini per le festività natalizie e pasquali. Grazie alla fitte rete di sostenitori su cui possiamo contare per la distribuzione, i nostri cestini vengono spediti e fatti recapitare in tutta Italia! </p> Nel prossimo futuro abbiamo deciso di promuovere l’impegno di ALBA anche attraverso l’organizzazione di serate dedicate a mostre d’arte. </p> </div> </div> <div class="footer"> Associazione Alba <span>|</span> Via delle Robinie, 27 - 00172 Roma <span>|</span> Codice Fiscale: 97628360584 </p> </div> </body> </html>

  10. #10
    Prova qualcosa del genere, sistemandolo secondo le tue necessità.

    A presto

    codice:
    <!DOCTYPE html>
    <html lang="it">
    	<head>
        <meta charset="UTF-8" />
    		<style>
    			body {
    				margin:0;
    				padding: 0;
    				background-color:#ccc;
    			}
    			.content {
    				overflow:hidden;
    				background-color:#ffffff;
    			}
    			.colonna {
    				float:left;
    				width:30%;
    				margin-right:5%;
    			}
    			.no_margin {
    				margin-right:0;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="content">
    		
    			<div class="colonna" style="background-color:#FF0;">
    				<h3>Concerti</h3>
    				<div id="info">
    					Lorem ipsum
    				</div>
    				<div id="archivio">
    					Dolor sit amet
    				</div>
    			</div>
    			
    			<div class="colonna" style="background-color:#CC0;">
    				<h3>Collaborazioni</h3>
    			</div>
    			
    			<div class="colonna no_margin" style="background-color:#9C0;">
    				<h3>Raccolta fondi</h3>
    			</div>
    			
    		</div>
    	</body>
    </html>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.