[HTML] Allineare div in base alla posizione del contenitore

franksisca · 27-03-2013, 12:41

ho questo problema, praticamente devo allinare dei div in base alla posizione del div superiore

Codice:

| div | div | div | XXX | div | div |
|     |     |     | XXX |     |     |
|     |     |     | XXX |     |     |
|     |     |     | XXX |     |     |

il risultato deve essere qullo che ho provato ad illustrare...ovviamente le XXX devono essere allineate.

in pratica il classico menù a tendinda (anche se non è quello)

mt94 · 01-04-2013, 18:45

Ciao, scritto così non è molto chiara la tua richiesta

Da quello che ho capito te hai un DIV TOP (cioè quello superiore) e poi sotto altri DIV.

CSS:

Codice:

#superiore
{
     left: spazio dal margine sinistro;
     right: spazio dal margine destro;
     top: spazio dal margine superiore;
     height: altezza;
     position: absolute;
}

.altri_div
{
     display: inline-block;
     width: larghezza;
     height: altezza;
     top: spazio dal margine superiore ([#superiore.top] + X);
     position: relative o fixed;
     margin: margine di spaziatura del contenitore;
}

Questo codice non l'ho provato, però ad occhio dovrebbe andare, magari è da dargli solo un aggiustata

kwb · 01-04-2013, 22:54

Si c'è da dire che la richiesta è tutto fuorchè chiara.

franksisca · 03-04-2013, 08:51

LOL

perchè???

cioè dalla risposta mi sembra di capire che tu l'abbia capita.

comunque il problema non l'ho ancora risolto perchè l'ho "scaricato"

ma osno sicuro che mi ricapiterà tra le mani tra qualche giorno...quindi poi provo ad applicare quella soluzione.

Grazie comunque

kwb · 03-04-2013, 09:10

Quote:

Originariamente inviato da franksisca

LOL

perchè???

cioè dalla risposta mi sembra di capire che tu l'abbia capita.

comunque il problema non l'ho ancora risolto perchè l'ho "scaricato"

ma osno sicuro che mi ricapiterà tra le mani tra qualche giorno...quindi poi provo ad applicare quella soluzione.

Grazie comunque

Se ancora ti interessa, prova a rispiegare ciò che vuoi fare. Devo dire che il disegno testuale che hai fatto era molto poco chiaro

franksisca · 03-04-2013, 09:48

lol

menù a tendina, il problema "focale" è che non sò a prescindere che "left-margin" ho!!!

le opzioni a sinistra del mio <div> sono varie e possono anche essere visibili o invisibili, quindi potrei avere 300px a sinistra o 150px (per esempio).

kwb · 03-04-2013, 10:16

Se c'è un div superiore e gli altri sotto devono essere allineati, come?
Centrali?

Codice:

|_______Div superiore_______|
      |Div 1|Div 2|Div 3|

A destra?

Codice:

|_______Div superiore_______|
          |Div 1|Div 2|Div 3|

A sinistra?

Codice:

|_______Div superiore_______|
|Div 1|Div 2|Div 3|

Se fosse così basterebbe usare i float per destra e sinistra, oppure usare un margin: 0 auto che allinea automaticamente al centro.

Altrimenti non ho capito...

Però ti dico già che secondo me se tutti i div devono essere larghi quanto il più largo tra i div, mi sa che dovrai usare JS.

franksisca · 03-04-2013, 13:43

praticamente io ho dei div superiori, più di uno, che possono esserci o non esserci:

Codice:

|__DIV__|__DIV__|__DIV__|__XXX__|__DIV__|

oppure

Codice:

|__DIV__|__DIV__|__XXX__|__DIV__|

sotto il div XXX deve aprirsi un menù a tendina che riguarda i div "visibili".

Codice:

|__DIV__|__DIV__|__DIV__|__XXX__|__DIV__|
|_______|_______|_______|__XXX__|_______|
|_______|_______|_______|__XXX__|_______|

oppure

Codice:

|__DIV__|__DIV__|__XXX__|__DIV__|
|_______|_______|__XXX__|_______|
|_______|_______|__XXX__|_______|
|_______|_______|__XXX__|_______|

kwb · 03-04-2013, 16:01

Tipo così?

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" />
<title>Documento senza titolo</title>
<style type="text/css">
.esterno{
	border: 1px solid black;
	float: left;
	display: inline-block;
	margin: 50px 0;
	padding: 20px;
}

.interno{
	display: none;
	margin: 0 auto;
	border: 1px solid red;
}
.esterno:hover .interno{
	display: block;
}
</style>
</head>

<body>
<div class="esterno">
<div class="interno">
asd 2
</div>
<div class="interno">
asd 2
</div>
</div>
<div class="esterno">
<div class="interno">
asd 2
</div>
<div class="interno">
asd 2
</div>
</div><div class="esterno">
<div class="interno">
asd 2
</div>
<div class="interno">
asd 2
</div>
<div class="interno">
asd 2
</div>
</div>
</body>
</html>

Fa conto che per sapere l'esatto numero di elementi da visualizzare o usi php o js. Non c'è modo di farlo in HTML/CSS .
Cmq sto esempio è ispirato a questo: http://www.devinrolsen.com/css-hide-and-display-content

Altro problema: se noti la dimensione si allarga quando ci passi sopra, le soluzioni per evitare questa cosa sono 2:
- usare JS per aggiustare la dimensione automaticamente.
- impostare una larghezza fissa ( che però se il testo è troppo lungo, verrà mandato a capo ).

franksisca · 03-04-2013, 17:49

Quote:

Originariamente inviato da kwb

Tipo così?

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" />
<title>Documento senza titolo</title>
<style type="text/css">
.esterno{
	border: 1px solid black;
	float: left;
	display: inline-block;
	margin: 50px 0;
	padding: 20px;
}

.interno{
	display: none;
	margin: 0 auto;
	border: 1px solid red;
}
.esterno:hover .interno{
	display: block;
}
</style>
</head>

<body>
<div class="esterno">
<div class="interno">
asd 2
</div>
<div class="interno">
asd 2
</div>
</div>
<div class="esterno">
<div class="interno">
asd 2
</div>
<div class="interno">
asd 2
</div>
</div><div class="esterno">
<div class="interno">
asd 2
</div>
<div class="interno">
asd 2
</div>
<div class="interno">
asd 2
</div>
</div>
</body>
</html>

Fa conto che per sapere l'esatto numero di elementi da visualizzare o usi php o js. Non c'è modo di farlo in HTML/CSS .
Cmq sto esempio è ispirato a questo: http://www.devinrolsen.com/css-hide-and-display-content

Altro problema: se noti la dimensione si allarga quando ci passi sopra, le soluzioni per evitare questa cosa sono 2:
- usare JS per aggiustare la dimensione automaticamente.
- impostare una larghezza fissa ( che però se il testo è troppo lungo, verrà mandato a capo ).

giro il suggerimento al malcapitato di turno

grazie ancora

27-03-2013, 12:41	#1
franksisca Senior Member Iscritto dal: May 2005 Città: Roma Messaggi: 7938	[HTML] Allineare div in base alla posizione del contenitore ho questo problema, praticamente devo allinare dei div in base alla posizione del div superiore Codice: \| div \| div \| div \| XXX \| div \| div \| \| \| \| \| XXX \| \| \| \| \| \| \| XXX \| \| \| \| \| \| \| XXX \| \| \| il risultato deve essere qullo che ho provato ad illustrare...ovviamente le XXX devono essere allineate. in pratica il classico menù a tendinda (anche se non è quello) __________________ My gaming placement

01-04-2013, 18:45	#2
mt94 Member Iscritto dal: Mar 2013 Città: Frascati Messaggi: 31	Ciao, scritto così non è molto chiara la tua richiesta Da quello che ho capito te hai un DIV TOP (cioè quello superiore) e poi sotto altri DIV. CSS: Codice: #superiore { left: spazio dal margine sinistro; right: spazio dal margine destro; top: spazio dal margine superiore; height: altezza; position: absolute; } .altri_div { display: inline-block; width: larghezza; height: altezza; top: spazio dal margine superiore ([#superiore.top] + X); position: relative o fixed; margin: margine di spaziatura del contenitore; } Questo codice non l'ho provato, però ad occhio dovrebbe andare, magari è da dargli solo un aggiustata __________________ Cpu: Amd FX 8350 - MOBO: Asrock 970 extreme3 (1.70) - Ram: Corsair DDR3 1600 4gb - Vga: Amd HD4890 1gb Ultima Versione - HDD: Western Digital Caviar Blue 1TB Sata3 + Seagate 360GB Sata2 - S.O: Windows 8 PRO 64bit

01-04-2013, 22:54	#3
kwb Senior Member Iscritto dal: Jul 2003 Città: Alessandria Messaggi: 10167	Si c'è da dire che la richiesta è tutto fuorchè chiara. __________________ Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505

03-04-2013, 08:51	#4
franksisca Senior Member Iscritto dal: May 2005 Città: Roma Messaggi: 7938	LOL perchè??? cioè dalla risposta mi sembra di capire che tu l'abbia capita. comunque il problema non l'ho ancora risolto perchè l'ho "scaricato" ma osno sicuro che mi ricapiterà tra le mani tra qualche giorno...quindi poi provo ad applicare quella soluzione. Grazie comunque __________________ My gaming placement

03-04-2013, 09:48	#6
franksisca Senior Member Iscritto dal: May 2005 Città: Roma Messaggi: 7938	lol menù a tendina, il problema "focale" è che non sò a prescindere che "left-margin" ho!!! le opzioni a sinistra del mio <div> sono varie e possono anche essere visibili o invisibili, quindi potrei avere 300px a sinistra o 150px (per esempio). __________________ My gaming placement

03-04-2013, 10:16	#7
kwb Senior Member Iscritto dal: Jul 2003 Città: Alessandria Messaggi: 10167	Se c'è un div superiore e gli altri sotto devono essere allineati, come? Centrali? Codice: \|_______Div superiore_______\| \|Div 1\|Div 2\|Div 3\| A destra? Codice: \|_______Div superiore_______\| \|Div 1\|Div 2\|Div 3\| A sinistra? Codice: \|_______Div superiore_______\| \|Div 1\|Div 2\|Div 3\| Se fosse così basterebbe usare i float per destra e sinistra, oppure usare un margin: 0 auto che allinea automaticamente al centro. Altrimenti non ho capito... Però ti dico già che secondo me se tutti i div devono essere larghi quanto il più largo tra i div, mi sa che dovrai usare JS. __________________ Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505

03-04-2013, 13:43	#8
franksisca Senior Member Iscritto dal: May 2005 Città: Roma Messaggi: 7938	praticamente io ho dei div superiori, più di uno, che possono esserci o non esserci: Codice: \|__DIV__\|__DIV__\|__DIV__\|__XXX__\|__DIV__\| oppure Codice: \|__DIV__\|__DIV__\|__XXX__\|__DIV__\| sotto il div XXX deve aprirsi un menù a tendina che riguarda i div "visibili". Codice: \|__DIV__\|__DIV__\|__DIV__\|__XXX__\|__DIV__\| \|_______\|_______\|_______\|__XXX__\|_______\| \|_______\|_______\|_______\|__XXX__\|_______\| oppure Codice: \|__DIV__\|__DIV__\|__XXX__\|__DIV__\| \|_______\|_______\|__XXX__\|_______\| \|_______\|_______\|__XXX__\|_______\| \|_______\|_______\|__XXX__\|_______\| __________________ My gaming placement

Strumenti
Mostra una versione stampabile Invia questa pagina per email