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

Περιθώριο ανάμεσα σε border και κείμενο css


oraiustepe

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

Δημοσ. (επεξεργασμένο)

Καλησπέρα στην ομάδα, 

Κάνω σε wordpress ένα eshop και θέλω στις επιπρόσθετες πληροφορίες μέσα στο προϊόν να εμφανίσω κάποια custom πεδία που δημιούργησα με ένα plugin. Έτσι μέσα στο functions.php έγραψα τον κώδικα που βλέπετε στην πρώτη εικόνα, ο οποίος εν συντομία εμφανίζει τα πεδία. Έπειτα έγραψα τον css κώδικα που βλέπετε στη δεύτερη εικόνα με διάφορες προσαρμογές σε κινητά και σε landscape mode. Όλα καλά ως εδώ αλλά όπως βλέπετε στην εικόνα στην τρίτη εικόνα το border είναι κολλητά με τα γράμματα και εγώ θέλω να αφήσω κενό ανάμεσα (θα προτιμούσα επιλογή σε px). Υπάρχει κάποιος τρόπος να γίνει αυτό; Σύμφωνα με μια έρευνα που έκανα θα πρέπει να μπει στη css το after και το before, αλλά δεν κατάλαβα πως ακριβώς θα το εντάξω στον κώδικα μου. Επίσης υπάρχει τρόπος να μετακινήσω τον αριθμό από το μεγάλο κιβώτιο δεξιά (τρίτη εικόνα), γιατί το κείμενο έρχεται από html ενώ ο αριθμός από php και προσπάθησα να το κουνήσω με left right top bottom μέσα στο style του span αλλά τίποτα. 

Ευχαριστώ

Screenshot_8.png

Screenshot_9.png

Screenshot_10.png

Επεξ/σία από oraiustepe
Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

1 hour ago, oraiustepe said:

Καλησπέρα στην ομάδα, 

Κάνω σε wordpress ένα eshop και θέλω στις επιπρόσθετες πληροφορίες μέσα στο προϊόν να εμφανίσω κάποια custom πεδία που δημιούργησα με ένα plugin. Έτσι μέσα στο functions.php έγραψα τον κώδικα που βλέπετε στην πρώτη εικόνα, ο οποίος εν συντομία εμφανίζει τα πεδία. Έπειτα έγραψα τον css κώδικα που βλέπετε στη δεύτερη εικόνα με διάφορες προσαρμογές σε κινητά και σε landscape mode. Όλα καλά ως εδώ αλλά όπως βλέπετε στην εικόνα στην τρίτη εικόνα το border είναι κολλητά με τα γράμματα και εγώ θέλω να αφήσω κενό ανάμεσα (θα προτιμούσα επιλογή σε px). Υπάρχει κάποιος τρόπος να γίνει αυτό; Σύμφωνα με μια έρευνα που έκανα θα πρέπει να μπει στη css το after και το before, αλλά δεν κατάλαβα πως ακριβώς θα το εντάξω στον κώδικα μου. Επίσης υπάρχει τρόπος να μετακινήσω τον αριθμό από το μεγάλο κιβώτιο δεξιά (τρίτη εικόνα), γιατί το κείμενο έρχεται από html ενώ ο αριθμός από php και προσπάθησα να το κουνήσω με left right top bottom μέσα στο style του span αλλά τίποτα. 

Ευχαριστώ

Screenshot_8.png

Screenshot_9.png

Screenshot_10.png

Αρχικά μπορείς να βάλεις ένα <br> πριν τον κώδικα (το bold δηλαδή) που εμφανίζει το μεγάλο κουτί και θα σου αλλάξει σειρά πριν τη λέξη.

Αν θες να το κάνεις με css αυτό που ψάχνεις λέγεται padding και θεωρητικά δεν χρειάζεται να καλέσεις before ή after κλάσεις αρκεί να βρεις τη σωστή κλάση του κειμένου. 

Αν χρειαστείς before γράφεται έτσι:

div.product .cg-author::before{

}

Ή έτσι:

div.product .cg-author:before{

}

Για να "κουνηθεί" με left και right πρέπει να αλλάξεις το position.

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

17 λεπτά πριν, vngls7 είπε

Αρχικά μπορείς να βάλεις ένα <br> πριν τον κώδικα (το bold δηλαδή) που εμφανίζει το μεγάλο κουτί και θα σου αλλάξει σειρά πριν τη λέξη.

Αν θες να το κάνεις με css αυτό που ψάχνεις λέγεται padding και θεωρητικά δεν χρειάζεται να καλέσεις before ή after κλάσεις αρκεί να βρεις τη σωστή κλάση του κειμένου. 

Αν χρειαστείς before γράφεται έτσι:

div.product .cg-author::before{

}

Ή έτσι:

div.product .cg-author:before{

}

Για να "κουνηθεί" με left και right πρέπει να αλλάξεις το position.

Ευχαριστώ για την απάντηση. Απλά επειδή θέλω στο κινητό να μην υπάρχει αυτό το κενό δε γίνεται να το κάνω global με το br και γίνεται μόνο με css. Μπορείς να γίνεις λίγο πιο συγκεκριμένος τι βάζω στο before και τι στο after, γιατι ουσιαστικά αυτό δε ξέρω. η σύνταξη είναι εύκολη. 

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

24 minutes ago, oraiustepe said:

Ευχαριστώ για την απάντηση. Απλά επειδή θέλω στο κινητό να μην υπάρχει αυτό το κενό δε γίνεται να το κάνω global με το br και γίνεται μόνο με css. Μπορείς να γίνεις λίγο πιο συγκεκριμένος τι βάζω στο before και τι στο after, γιατι ουσιαστικά αυτό δε ξέρω. η σύνταξη είναι εύκολη. 

Προσωπικά δεν νομίζω ότι χρειάζεται το before ή το after, λογικά αυτό σου φτάνει

div.product .cg-author::before{

padding-top:15px;

}

Αν δεν κάνει κάτι μπορείς να το βάλεις έτσι

padding-top:15px!important;

Και σε κλάσεις :before ή after αυτό σου χρειάζεται. Αν είναι live το site βάλε το link ή στείλε το σε μήνυμα για να σου πω ακριβώς τι χρειάζεται.

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

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

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

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

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

Σύνδεση

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

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