• Home
  • Forum
  • Fare Web
  • HTML e CSS

Distanziamento automatico div

  • Creatore Discussione Creatore Discussione pippo8888
  • Data di inizio Data di inizio 12 Ott 2013
P

pippo8888

Nuovo Utente
1 Ott 2013
4
0
0
  • 12 Ott 2013
  • #1
Salve a tutti. Sto facendo una cosa con css. Il risultato finale è quasi come lo volevo io: ho un div principale e 5 aree di div del 20% di lunghezza ognuna e 100% di altezza. In queste 5 aree volevo metterci n quadrati.
Per farlo correttamente ho creato 25 div, 5 per area e li ho messi con 20% di altezza in modo che venisse una cosa simile:

A F K P U
B G L Q V
C H M R W
D I N S X
E J O T Y

Con il php ho messo la viariabile $div che varia da "immagine" a "vuoto".
Quindi se c'è l'immagine il div si vede altrimenti non si vede. (spero di essere stato chiaro).
Tutto questo casino l'ho fatto perchè non sono riuscito ad adattare le fasce in modo che si autodistanziassero tra di loro. Se per esempio toglievo il div C adesso succede questa cosa:

A
B

D
E

è brutto che non abbiano la stessa distanza tra di loro. Però se io non facevo dei div di altezza 20% ma li facevo più piccoli veniva una cosa così

A
B
D
E
(vuoto)

Sperando che mi sia spiegato (postare il codice sarebbe inutile visto che è troppo ampio per essere leggibile), qualcuno può consigliarmi?

Vorrei in pratica fare in modo che se ci sono 5 div su 5 in una fascia rimangano disposti equidistanti dai bordi e tra di loro; se ce ne sono 4 si allargano un po' di più; 3 ancora di più... fino a 1 che si mette esattamente al centro anche se fosse solo il div A.

Grazie per la risposta e soprattutto per la pazienza nel leggere tutto.
 

MarcoGrazia

Utente Attivo
15 Dic 2009
853
21
28
63
Udine
www.stilisticamente.com
  • 17 Ott 2013
  • #2
Ti sei spiegato abbastanza ma francamente trovo un po' incasinata la faccenda.
La cosa migliore era creare una tabella, non impelagarti con i div su dati tabellari come una serie di immagini, al limite una serie di liste andava comunque bene.
Ad ogni modo per distanziare un elemento in html, e quindi anche un div, basta dargli un po' di margine con i css, ad esempio div {margin: 3px;} per averlo distanziato di 3 pixel tutto intorno.
Ma c'è un problema la collisione dei margini top e bottom (alto e basso), ovvero il margine bottom di un div che si trova sopra ad un altro si sottrae al margine top di quello che sta sotto. Così se il margine è 3 pixel per ogni div, al fianco di ognuno avrai 6 pixel (3 per uno + 3 di quello successivo) mentre sopra e sotto solo 3 pixel, incasinando un po' il layout. Bisogna insomma giocare con i margini.
Il div vuoto lo metti vuoto con sfondo trasparente al limite e dimensioni date (width: ed height ovviamente queste sono arbitrarie, se ho capito bene le immagini non hanno tutte la stessa dimensione, ma qui non c'è molto da fare, se non usare altre tecniche CSS3, vedi Flickr ad esempio.
Oppure usare una tabella e le sue celle con cui giocare con border-collapse e borde-spacing http://www.diodati.org/w3c/css2/tables.html#propdef-border-collapse insomma vedi tu quale via ti conviene usare.
 
P

pippo8888

Nuovo Utente
1 Ott 2013
4
0
0
  • 21 Ott 2013
  • #3
A me servirebbe una cosa automatica. Se uso le tabelle non posso far sparire una tabella perchè resterebbe ma vuota. Oltretutto se uso le IMG non so come fare a scriverci sopra. C'è modo di scrivere sopra l'immagine esattamente come sopra una div con sfondo?
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

A
Amministratore automatico gruppo Facebook
  • acudazzo
  • 16 Mar 2022
  • Social Media Marketing
Risposte
0
Visite
5K
Social Media Marketing 16 Mar 2022
acudazzo
A
Z
Slideshow automatico
  • z.cristiano
  • 25 Nov 2021
  • HTML e CSS
Risposte
0
Visite
912
HTML e CSS 25 Nov 2021
z.cristiano
Z
S
Download di un file in automatico dopo la sua creazione
  • samurai.sette
  • 2 Mar 2021
  • PHP
Risposte
2
Visite
1K
PHP 3 Mar 2021
samurai.sette
S
S
Come funziona un estrattore di emails automatico?
  • StOrM
  • 9 Nov 2020
  • Posta Elettronica
Risposte
1
Visite
2K
Posta Elettronica 10 Dic 2020
Francesco Monighi
F
C
Aggiornamento automatico da un sito ad un’altro
  • Cpu03
  • 18 Set 2020
  • WordPress
Risposte
0
Visite
2K
WordPress 18 Set 2020
Cpu03
C
Eliminare in automatico i caratteri spuri all'inizio e alla fine di una stringa
  • MarcoGrazia
  • 24 Lug 2020
  • Snippet PHP
Risposte
0
Visite
5K
Snippet PHP 24 Lug 2020
MarcoGrazia
W
verificare credenziali in automatico con PHP
  • wasdunity
  • 17 Apr 2020
  • PHP
Risposte
1
Visite
1K
PHP 17 Apr 2020
macus_adi
I
javascript come caricare una pagina sopra quella corrente in automatico
  • io.ste
  • 9 Dic 2019
  • Javascript
Risposte
2
Visite
2K
Javascript 11 Dic 2019
io.ste
I
L
includere file inc.*.php in automatico
  • luigi777
  • 15 Ott 2019
  • PHP
Risposte
1
Visite
2K
PHP 16 Ott 2019
marino51
A
[PHP] Invio automatico dati da form
  • Alex@1983
  • 11 Mag 2019
  • PHP
Risposte
6
Visite
2K
PHP 13 Mag 2019
Alex@1983
A
[PHP] Script per rinominare in automatico le immagini inviate da ftp
  • romeocharly
  • 11 Apr 2019
  • PHP
Risposte
0
Visite
2K
PHP 11 Apr 2019
romeocharly
L
Presentazione OpenOffice. Avanzamento automatico diapositive?
  • Lux1980
  • 9 Apr 2019
  • Mac e Software
Risposte
0
Visite
1K
Mac e Software 9 Apr 2019
Lux1980
L
B
[PHP] Invio mail automatico dopo compilazione form - db
  • Borghese
  • 3 Feb 2019
  • PHP
  • 2
Risposte
25
Visite
8K
PHP 12 Feb 2019
Borghese
B
R
[Photoshop] funzione colore automatico
  • ric1854
  • 2 Feb 2019
  • Photoshop
Risposte
0
Visite
1K
Photoshop 2 Feb 2019
ric1854
R
G
[PHP] backup manuale(o automatico) tabelle msql
  • giacomo9783
  • 24 Gen 2019
  • PHP
Risposte
6
Visite
2K
PHP 25 Gen 2019
giacomo9783
G
F
Importazione CSV in mySQL automatico
  • Franco1
  • 16 Dic 2018
  • PHP
Risposte
1
Visite
3K
PHP 16 Dic 2018
marino51
M
[PHP] Compilare campi in automatico con dati presi dal DB
  • Max61
  • 20 Nov 2018
  • PHP
  • 2
Risposte
25
Visite
6K
PHP 22 Nov 2018
Max61
M
S
[PHP] form campi a completamento automatico dal DB
  • solari77
  • 9 Apr 2018
  • PHP
Risposte
5
Visite
3K
PHP 17 Giu 2018
solari77
S
S
[VENDO] ecommerce prodotti per CANI - business automatico pronto all'uso!
  • spachez
  • 2 Feb 2018
  • Compravendita siti e domini
Risposte
0
Visite
1K
Compravendita siti e domini 2 Feb 2018
spachez
S
S
[VENDO] pagina facebook "OFFERTE AMAZON" con bot automatico
  • spachez
  • 22 Gen 2018
  • Annunci servizi di Social Media Marketing
Risposte
6
Visite
3K
Annunci servizi di Social Media Marketing 13 Set 2019
mistercall360
Condividi:
Facebook X (Twitter) LinkedIn WhatsApp e-mail Condividi Link
  • Home
  • Forum
  • Fare Web
  • HTML e CSS
  • Italiano
  • Termini e condizioni d'uso del sito
  • Policy Privacy
  • Aiuto
  • Home
Community platform by XenForo® © 2010-2024 XenForo Ltd. | Traduzione a cura di XenForo Italia
Menu
Accedi

Registrati

  • Home
  • Forum
    • Nuovi Messaggi
    • Cerca...
  • Novità
    • Featured content
    • Nuovi Messaggi
    • Ultime Attività
X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?

X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?