PDA

View Full Version : [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

| 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:

#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. :D
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" :p


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
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" :p


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 :asd:
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?

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

A destra?

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

A sinistra?

|_______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:

|__DIV__|__DIV__|__DIV__|__XXX__|__DIV__|
oppure
|__DIV__|__DIV__|__XXX__|__DIV__|

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

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

oppure

|__DIV__|__DIV__|__XXX__|__DIV__|
|_______|_______|__XXX__|_______|
|_______|_______|__XXX__|_______|
|_______|_______|__XXX__|_______|
kwb
03-04-2013, 16:01
Tipo così? :stordita:

<!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
Tipo così? :stordita:

<!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 :fagiano: :fagiano: :fagiano:

grazie ancora