Problema con css

[Ildebrando]

Ciao a tutti,
chiedo un aiutino per la formattazione css di un sito web. Se andate qui http://goo.gl/yn8pxy" onclick="window.open(this.href);return false; 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 modena e reggio

[fragrua]

[faxus]

Hai provato con una media query?

[Ildebrando]

eh si, è il responsive che crea casino infatti... altrimenti era una passeggiata
grazie intanto
ciao

[Why]

Ma intendi qualcosa del genere?


Se è così lo puoi ottenere abbastanza semplicemente:

• Togli il display: table da #images
• Metti un div con il testo all'interno del a (a cui consiglio di aggiungere una classe)
• Imposti per i link width: XX% e float: left. Il width dev'essere in relazione a quanti elementi vuoi su una riga
• Per fare tutto responsivo ci metti un media-query che porta il width del link al 100%

[Ildebrando]

ciao Why,
e grazie, perchè la tua mi sembra un'ottima strada.
Solo che mentre va bene da mobile, da dektop presenta ancora qualche problemuccio, visibile qui http://goo.gl/X4yUP4" onclick="window.open(this.href);return false;
A differenza da quanto da te indicato, ho poi portato

width: 100%;
per
#section2 div img {

e poi la tua ultima riga non l'ho capita quindi non l'ho applicata.
ora vedo che le immagini non sono cenrate col container, e lo sfondo colorato finisce più su.
Hai qualche altra dritta per aggiustare il tutto?
Grazie mille
Ciao

[Why]

Hai qualche altra dritta per aggiustare il tutto?

Ci sono dei workaround per ottenere il risultato voluto (penso ad esempio a fissare un height per #section2), ma io li eviterei. Sono soluzioni che risolvono nel breve termine, ma poi quando cerchi di costruirci sopra, come ad esempio rendere il sito responsivo, ti ritrovi un sito web che si sgretola fra le mani.

Volevo chiederti: hai poca esperienza con l'utilizzo di HTML e CSS? Non voglio certo offenderti, ma vedendo il codice ho visto tanti piccoli errori tipici di quando si è alle prime armi. Se fosse così non te ne faccio una colpa: tutti iniziamo da zero, quindi è normale correggersi con l'esperienza ed evitare di incappare negli stessi sbagli .
Fare un sito web ben strutturato non è facile: è un vero e proprio lavoro e bisogna investirci tempo.

Io ti consiglierei di iniziare migliorando il codice: renderlo più pulito, leggibile e flessibile. Usa meglio classi e id, e ricorda che un sito con un design pulito è meno soggetto a problemi ed è più facile da modificare.

Ad esempio, pensa ad oggetti piuttosto che a selettori: invece di scrivere

Codice: Seleziona tutto

<div id="images">        
  <a href="#">
    <img ...>
  </a>
  ...
</div>

e poi

Codice: Seleziona tutto

#images a { ... }

è più semplice, pulito e gestibile:

Codice: Seleziona tutto

<div class="services">
  <a href="#" class="services__service">
    <img class="services__service__img" ...>
  </a>
  ...
</div>

e quindi

Codice: Seleziona tutto

.services               { /* codice per il div */}
.services__service      { /* codice per il link */ }
.services__service__img { /* codice per l'immagine del servizio */}

Se vuoi imparare come domare il codice css, prova a leggere di OOCSS, SMACSS e BEM.

Inoltre, dato che i vari browser hanno degli stili base differenti, ti consiglio di uniformarli con un normalize.css o un reset.css

PS: per spaziare le immagini puoi fare così:

Codice: Seleziona tutto

#images a {
  padding: .5rem;
}

Al posto di rem puoi usare altre unita di misura, soprattutto in base ai browser che devi supportare.

[faxus]

Why, non è che sei amante del vino rosso?

È confortante leggerti.
Con il fatto che Gattinara è molto impegnata non sapevamo a chi chiedere per trovare un errore in una riga di codice che non va...

[Ildebrando]

Hai ragione why, non mi reputo certo un asso dei css :-)
Comunque grazie ai tuoi consigli ho risolto: vedi un po? http://goo.gl/X4yUP4" onclick="window.open(this.href);return false;
In pratica ho rimesso il table, ma applicato solo al desktop, e così lo sfondo viene completo.
Per i margini, ho applicato una percentuale, ma applicato solo ai link e non a img come prima.

Per il resto, reset ecc, vedrò di implementarlo alla fine.

Che ne dici?
Grazie ancora
Ciao

[Why]

Mi spiace ma sono un po' preso questi giorni, quindi non riesco a rispondere molto.
Se hai risolto i problemi che avevi, bene . Tieni comunque sempre presente che la vera difficoltà è nel mantenere il codice gestibile durante tutta la crescita del sito ed è sensato investirci tempo.

Riguardo al reset.css o normalize.css: non è difficile "implementarli" perché sono un semplice copia e incolla all'inizio del tuo file di stile. In genere non si aggiungono alla fine perché si rischia di fare un lavoro doppio.

Why, non è che sei amante del vino rosso?

È confortante leggerti.
Con il fatto che Gattinara è molto impegnata non sapevamo a chi chiedere per trovare un errore in una riga di codice che non va...

Sono un semi-astemio . Mi piace sperimentare vini nuovi e anche pregiati, ma in genere mi capita solo durante celebrazioni, feste e ritrovi.
Grazie comunque .

[Ildebrando]

Mi spiace ma sono un po' preso questi giorni, quindi non riesco a rispondere molto.
Se hai risolto i problemi che avevi, bene :).

...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 mille

[Why]

Codice: Seleziona tutto

#section1 #section2, #section3, #section4 {
	box-sizing: border-box;
	padding: 10px 20% 80px 20%;
}

Riduci il padding laterale.

[Ildebrando]

hai ragione, sta percentuale mi sfuggiva e mi ha fatto non poco marcire.
grazie
ciao