HTML / CSS - Problema css

Forum - HTML / CSS - Problema css

Pammachio (Normal User)
Rookie

Messaggi: 56
Iscritto: 16/04/2008

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

dnha (Member)
Pro

Messaggi: 137
Iscritto: 24/07/2014

Postato alle 18:25
Domenica, 25/01/2015

Ciao,
ecco qui:

Codice sorgente - presumibilmente HTML / CSS

<style>
div#images{
display:table;
}
div.icon{
display:table-row;
width:22%;
display:inlinetable;
}
img.iconimg{
width:100% !important;
margin:0 !important;
}
p.desc{
margin:0;
text-align:none;
}
</style>
        <div id="images">        
                <a href="#"><div class="icon"><img class="iconimg" src="img/01.png" alt="componenti attivi / componenti passivi"><p class="desc">Componenti</p></div></a>
            <a href="#"><div class="icon"><img class="iconimg" src="img/02.png" alt="relé golden"><p class="desc">Relé</p></div></a>
            <a href="#"><div class="icon"><img class="iconimg" src="img/03.png" alt="avvolti / trasformatori"><p class="desc">Trasformatori</p></div></a>
            <a href="#"><div class="icon"><img class="iconimg" src="img/04.png" alt="batterie cerro power"><p class="desc">Batterie</p></div></a>
            <a href="#"><div class="icon"><img class="iconimg" src="img/05.png" alt="inverter emheater"><p class="desc">Inverter</p></div></a>
            <a href="#"><div class="icon"><img class="iconimg" src="img/06.png" alt="pcb / circuiti stampati"><p class="desc">PCB</p></div></a>
            <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>
            <a href="#"><div class="icon"><img class="iconimg" src="img/08.png" alt="prodotti cbe elettronica"><p class="desc">CBE Elettronica</p></div></a>
        </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

Pammachio (Normal User)
Rookie

Messaggi: 56
Iscritto: 16/04/2008

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

dnha (Member)
Pro

Messaggi: 137
Iscritto: 24/07/2014

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

Pammachio (Normal User)
Rookie

Messaggi: 56
Iscritto: 16/04/2008

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

Pammachio (Normal User)
Rookie

Messaggi: 56
Iscritto: 16/04/2008

Postato alle 17:41
Mercoledì, 28/01/2015

Risolto... così http://goo.gl/X4yUP4
Che ne dici? Intanto grazie, e alla prossima ;-)
Ciao

dnha (Member)
Pro

Messaggi: 137
Iscritto: 24/07/2014

Postato alle 17:58
Mercoledì, 28/01/2015

Bravo, bel lavoro

Pammachio (Normal User)
Rookie

Messaggi: 56
Iscritto: 16/04/2008

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

dnha (Member)
Pro

Messaggi: 137
Iscritto: 24/07/2014

Postato alle 20:41
Venerdì, 13/02/2015

In desktop.css hai delle dicharazioni che "sovrascrivono" quelle di all.css