Questo sito utilizza cookies, anche di terze parti, per mostrare pubblicità e servizi in linea con il tuo account. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML / CSS - Problema css
Forum - HTML / CSS - Problema css

Avatar
Pammachio (Normal User)
Rookie


Messaggi: 56
Iscritto: 16/04/2008

Segnala al moderatore
Postato alle 9:47
Domenica, 25/01/2015
Ciao a tutti,
chiedo un aiutino per la formattazione css di un sito web. Se andate qui http://goo.gl/yn8pxy dovreste vedere 8 cerchietti affiancati. Io voglio inserire sotto ciascuno di loro una scritta, una didascalia e lasciare il resto invariato, e responsive. Le ho provate tutte o quasi, testo nel p, nello span, e jquery per prelevare l'alt, ma mi si scombina sempre il layout e non riesco più ad aggiustare. Qualcuno ha idea di come fare, prima che mi arrenda inserendo il testo nell'immagine?
Grazie mille

__________________
Serivizi di rifacimento bagno? http://www.masterpaint.it

PM Quote
Avatar
dnha (Member)
Pro


Messaggi: 137
Iscritto: 24/07/2014

Segnala al moderatore
Postato alle 18:25
Domenica, 25/01/2015
Ciao,
ecco qui:
Codice sorgente - presumibilmente HTML / CSS

  1. <style>
  2. div#images{
  3. display:table;
  4. }
  5. div.icon{
  6. display:table-row;
  7. width:22%;
  8. display:inlinetable;
  9. }
  10. img.iconimg{
  11. width:100% !important;
  12. margin:0 !important;
  13. }
  14. p.desc{
  15. margin:0;
  16. text-align:none;
  17. }
  18. </style>
  19.         <div id="images">        
  20.                 <a href="#"><div class="icon"><img class="iconimg" src="img/01.png" alt="componenti attivi / componenti passivi"><p class="desc">Componenti</p></div></a>
  21.             <a href="#"><div class="icon"><img class="iconimg" src="img/02.png" alt="relé golden"><p class="desc">Relé</p></div></a>
  22.             <a href="#"><div class="icon"><img class="iconimg" src="img/03.png" alt="avvolti / trasformatori"><p class="desc">Trasformatori</p></div></a>
  23.             <a href="#"><div class="icon"><img class="iconimg" src="img/04.png" alt="batterie cerro power"><p class="desc">Batterie</p></div></a>
  24.             <a href="#"><div class="icon"><img class="iconimg" src="img/05.png" alt="inverter emheater"><p class="desc">Inverter</p></div></a>
  25.             <a href="#"><div class="icon"><img class="iconimg" src="img/06.png" alt="pcb / circuiti stampati"><p class="desc">PCB</p></div></a>
  26.             <a href="#"><div class="icon"><img class="iconimg" src="img/07.png" alt="stampi e manufatti in plastica"><p class="desc">Stampi</p></div></a>
  27.             <a href="#"><div class="icon"><img class="iconimg" src="img/08.png" alt="prodotti cbe elettronica"><p class="desc">CBE Elettronica</p></div></a>
  28.         </div>


Questa è l'idea di base... Poi regolati tu con la spaziatura...

P.S Ho visto che nel tuo sito hai chiuso il tag img ( </img> ). Non sarebbe propriamente corretto... Usa invece <img src="" alt=""> e basta :) ( nell' XHTML <img src="" alt="" /> )
http://www.w3schools.com/tags/tag_img.asp

Ultima modifica effettuata da dnha il 25/01/2015 alle 18:26


“La principale differenza tra una cosa che potrebbe rompersi e una cosa che non può in alcun modo rompersi è che quando una cosa che non può in alcun modo rompere si rompe, di solito risulta impossibile da riparare.” [Douglas Adams, Praticamente innocuo]
PM Quote
Avatar
Pammachio (Normal User)
Rookie


Messaggi: 56
Iscritto: 16/04/2008

Segnala al moderatore
Postato alle 10:41
Lunedì, 26/01/2015
ciao, e intanto grazie per la risposta
Solo che c'è qualche problema... per capirci meglio ho postato la tua soluzione qui:
http://goo.gl/aviNXf

ho cambiato un po lo stile del testo e messo uno sfondo colorato, per capire meglio come gestire le spaziature. Il problema infatti sta principalmente li, che nonostante aumenti le percentuali e i px di icon, gli spazi non cambiano... idem se provo ad aumentare le spaziature verticali di p, mi pare dopo i 10px.

Poi vedo una notevole differenza quando usi la visuale stretta in mobile... se porti il monitor a 300px vedi come si allargano bene le immagini nella prima soluzione http://goo.gl/yn8pxy ed invece son più piccole nella seconda http://goo.gl/aviNXf

Infatti il casino è fare sta piccola modifica senza scombinare il tutto: un casino!
Hai idea di come fare?
Grazie ancora
ciao

PM Quote
Avatar
dnha (Member)
Pro


Messaggi: 137
Iscritto: 24/07/2014

Segnala al moderatore
Postato alle 20:25
Martedì, 27/01/2015
Ma... Il CSS è inserito nel sito?
Perchè non lo vedo nel Codice Sorgente e non lo trovo analizzando le regole applicate ai vari elementi...
Fammi sapere,
Ciao :)


“La principale differenza tra una cosa che potrebbe rompersi e una cosa che non può in alcun modo rompersi è che quando una cosa che non può in alcun modo rompere si rompe, di solito risulta impossibile da riparare.” [Douglas Adams, Praticamente innocuo]
PM Quote
Avatar
Pammachio (Normal User)
Rookie


Messaggi: 56
Iscritto: 16/04/2008

Segnala al moderatore
Postato alle 10:52
Mercoledì, 28/01/2015
Ciao,
si ce ne sono tre (di cui uno vuoto, il mobile.css, attualmente inutilizzato)

/css/all.css http://goo.gl/GZgGkW
/css/mobile.css
/css/desktop.css http://goo.gl/ueRkxw

grazie

PM Quote
Avatar
Pammachio (Normal User)
Rookie


Messaggi: 56
Iscritto: 16/04/2008

Segnala al moderatore
Postato alle 17:41
Mercoledì, 28/01/2015
Risolto... così http://goo.gl/X4yUP4
Che ne dici? Intanto grazie, e alla prossima ;-)
Ciao

PM Quote
Avatar
dnha (Member)
Pro


Messaggi: 137
Iscritto: 24/07/2014

Segnala al moderatore
Postato alle 17:58
Mercoledì, 28/01/2015
Bravo, bel lavoro :)


“La principale differenza tra una cosa che potrebbe rompersi e una cosa che non può in alcun modo rompersi è che quando una cosa che non può in alcun modo rompere si rompe, di solito risulta impossibile da riparare.” [Douglas Adams, Praticamente innocuo]
PM Quote
Avatar
Pammachio (Normal User)
Rookie


Messaggi: 56
Iscritto: 16/04/2008

Segnala al moderatore
Postato alle 9:02
Giovedì, 12/02/2015
Grazie,
però ho ancora un ultimo problema di cui non capisco la causa: se metto il display a 768, larghezza tablet, noto che mentre la section1 e section2  son dimensionate bene, la section3 e la section4 vengono più strette, lasciando un margine laterale troppo grande.
Non riesco a capire da cosa dipenda... riesci a darmi un'altra dritta?
Grazie

PM Quote
Avatar
dnha (Member)
Pro


Messaggi: 137
Iscritto: 24/07/2014

Segnala al moderatore
Postato alle 20:41
Venerdì, 13/02/2015
In desktop.css hai delle dicharazioni che "sovrascrivono" quelle di all.css


“La principale differenza tra una cosa che potrebbe rompersi e una cosa che non può in alcun modo rompersi è che quando una cosa che non può in alcun modo rompere si rompe, di solito risulta impossibile da riparare.” [Douglas Adams, Praticamente innocuo]
PM Quote