Προς το περιεχόμενο
  • 0
Gunix

Προβλημα με δυο εικόνες

Ερώτηση

Γεια σας.

 

Θα ήθελα την βοήθεια σας παρακαλώ.

Φτιάχνω μια δικιά μου ιστοσελίδα layout με το bootstrap. Το πρώτο που έχω φτιάξει είναι ένα navbar. Το δεύτερο που θέλω να φτιάξω είναι ένα animation. Οι δύο εικόνες που έχω είναι ένα ορθογώνιο στατικό και ένα μικρό κύκλο που θα προχωράει. Μέσα στην CSS έχω κάνει αυτό. Αλλά όταν χρησιμοποιώ το responsive design mod ο κύκλος φεύγει από πάνω το ορθογώνιο. Πως μπορώ να το φτιάξω αυτό?

.image1 {
  width: 100%;
  position: relative;
  top: 100px;
  left: 0;
}
.image2 {
  width: 10%;
  position: absolute;
  top: 400px;
  left: 70px;
}

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

2 απαντήσεις σε αυτή την ερώτηση

Προτεινόμενες αναρτήσεις

  • 0

Ειναι πολυ δυσκολο να κανουμε visualize αυτο που φτιαχνεις μονο απο το css. Εχεις καποιο λινκ με τη σελιδα ή τουλαχιστον καποιο codepen? Αν οχι, ετοιμασε ενα codepen ή τουλαχιστον δωσε μας και την html.

  • Like 2

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Επειδή έχεις fixed τιμές στα top και lefty. Μετέτρεψε τα σε ποσοστά. πως θα το κάνεις αυτο;
Χρειάζεσαι ένα σημείο αναφοράς. πχ αν στα 1280 viewport width το .image2 έχει left 70px τοτε σε ποσοστο ειναι 
(70 / 1280) * 100 = 5.46875

αρα  left = 5.46875 %

  • Like 1

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι εύκολο!

Εγγραφείτε για έναν νέο λογαριασμό

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
×
×
  • Δημιουργία νέου...

Χρήσιμες πληροφορίες

Με την περιήγησή σας στο insomnia.gr, αποδέχεστε τη χρήση cookies που ενισχύουν σημαντικά την εμπειρία χρήσης.