Πειραματισμος σε ιστοσελιδα

[pokitos]

Καλησπερα πειραματιζομαι στη δημιουργια μιας ιστοσελιδας με Joomla 3.x. με δικο μου template (ηταν blank Και το εχω χτισει σιγα σιγα στο .php )

Εχω βαλει λοιπον costum modules(κειμενα και φωτο) και θελω οταν κανo resize τον browser (responsive) να μικραινουν και οι φωτο. Μπορει καποιος να μου πει τι πρεπει να πειραξω στο .css?

[Haldol]

Το Bootstrap χρησιμοποιεί αυτό τον κώδικα για responsive images:

max-width:100%;
display:block;
height:auto;

Παρ' όλα αυτά, τώρα έχεις το πρόβλημα ότι φορτώνεις μια (πιθανώς μεγάλη) εικόνα και την κάνεις resize στον browser. Όχι και πολύ καλό αν ο αναγνώστης σου είναι στο δρόμο με το κινητό και EDGE σήμα. Ίσως να έστεκε περισσότερο να "μάθεις" πρώτα το μέγεθος του viewport κι αναλόγως να φορτώσεις τη σωστή εικόνα. Δηλαδή... JavaScript to the rescue!

 

Όλα αυτά μέχρι να υποστηριχθεί σωστά το νέο <picture> tag της HTML5.

[pokitos]

Oχι αντιθετως (370x135pixel) ειναι η εικονα απλα οταν μπαινω απο κινητο δεν "μαζευεται" οπως το slider που εχω παραπανω . 

Στις μεγαλες εικονες εχω βαλει μεσα στο Module στο toggle editor του costum "image width 100%" και εγινε responsive. Αν κανω το ιδιο για τις μικρες εικονες μεγαλωνουν πραγμα το οποιο δεν θελω. Υπαρχει καποιο κολπο?

[OHMYGAWD]

Το Bootstrap χρησιμοποιεί αυτό τον κώδικα για responsive images:

max-width:100%;
display:block;
height:auto;

Παρ' όλα αυτά, τώρα έχεις το πρόβλημα ότι φορτώνεις μια (πιθανώς μεγάλη) εικόνα και την κάνεις resize στον browser. Όχι και πολύ καλό αν ο αναγνώστης σου είναι στο δρόμο με το κινητό και EDGE σήμα. Ίσως να έστεκε περισσότερο να "μάθεις" πρώτα το μέγεθος του viewport κι αναλόγως να φορτώσεις τη σωστή εικόνα. Δηλαδή... JavaScript to the rescue!

 

Όλα αυτά μέχρι να υποστηριχθεί σωστά το νέο <picture> tag της HTML5.

ποσο παιζει να με ψαρωσε αυτη η αραχνη που εχεις βαλλει.

[Haldol]

Δοκίμασες τον κώδικα που δημοσίευσα;

 

Είναι λογικό με το width: 100% να μεγαλώνουν οι μικρές εικόνες, καθώς στην ουσία λες στην εικόνα "πιάσε όλο το χώρο του στοιχείου που είσαι μέσα". Αν το parent element είναι μεγάλο (π.χ. πιάνει όλη τη σελίδα) φυσιολογικά, η εικόνα θα ξεχειλώσει!

 

Αντιθέτως το max-width: 100% λέει στην εικόνα "το μέγιστο που μπορείς να πιάσεις, είναι 100%". Οπότε μια εικόνα που είναι μικρότερη από τόσο, δε θα κάνει τίποτα.

[pokitos]

Σου στελνω ενα πμ με λινκ.

[pokitos]

καποιος μικρη βοηθεια;

[lionheart82]

Καλησπέρα, στείλε μου pm ένα link να το δούμε.

Θα συμφωνήσω πως για να γίνει σωστα θα πρέπει ναι παιξεις με το άλλες τεχνικές όπως το picture element ή javascript.

[pokitos]

div.middle .moduletable .custom p img{max-width:100%;} 

 

ειναι ο κωδικος  οπου "middle" η κλαση οπου βρισκεται το costum αρθρο με την φωτογραφια !

 

all credits to lionheart82! θεος !   

[pokitos]

Καλημερα παιδια μια καινουργια απορια... Στην ιστοσελιδα μου που πειραματιζομαι για καποιο λογο εχεi παρει "κενο "

σε ολη την δεξια μερια 2-3 λευκα pixels. τι μπορει να φταει ? δεν εχω καποιο margin-pading right.... :/

 

ΥΓ. βαζω φωτο 

 

[Tiphonas]

Δώσε μας το url για να σου πουμε δεν μπορούμε να βοηθήσουμε έτσι.

 

Λόγικά έχεις καποιο padding στο body ή εβγαλες έξω απο τα όρια του body κάποιο element.

[pokitos]

Δώσε μας το url για να σου πουμε δεν μπορούμε να βοηθήσουμε έτσι.

 

Λόγικά έχεις καποιο padding στο body ή εβγαλες έξω απο τα όρια του body κάποιο element.

Επειδη κανω πρακτικη σε καποια εταιρεια κ δεν θελω να την διαφημησω κλπ και να εχω προβλημα στελνω σε pm το λινκ σε οσους ενδιαφερονται και μπορουν να βοηθησουν.. Τσεκαρε μηνυματα.Ευχαριστω

[lionheart82]

Ισχύει αυτο που σου είχα στείλει για το overflow του body κάποιο element έχει margin ή extra width και υπάρχει αυτο το πρόβλημα...