Πώς φτιάχνω ένα div με βάση ένα css μου

[Delijohn]

Πώς θα φτιάξω ένα css για το div μου που θέλω;;;;

Υποθέτω πως αυτό θέλει ο @UltraB να μάθει... αφού δεν κάνει όμως θέμα για να καταλάβουμε τι θέλει, εγώ το googlαρα και βρήκα αυτό.

 

Επίσης καλό διάβασμα..

[UltraB]

Πώς θα φτιάξω ένα css για το div μου που θέλω;;;;

Υποθέτω πως αυτό θέλει ο @UltraB να μάθει... αφού δεν κάνει όμως θέμα για να καταλάβουμε τι θέλει, εγώ το googlαρα και βρήκα αυτό.

 

Επίσης καλό διάβασμα..

Δεν θέλω αυτό αλλά τέλος πάντων...

Επίσης προφανώς και έψαξα στο Google πριν γράψω στο ΠΟΘ, όπως επίσης θεωρώ ότι δεν αξίζει να ανοίγουν θέματα για μια - δύο απαντήσεις.

Γι αυτό το λόγο είχα φτιάξει ανάλογο thread το οποίο έφαγε λουκέτο (γιατί μου τι λέτε πάντα εμένα; Θα μπορούσαμε να είχαμε κρατήσει εκείνο το thread ανοιχτό) αλλά αυτό είναι άλλη συζήτηση.

[Delijohn]

Ρε μάνα μου, εξήγησε τι θες στο θέμα λοιπόν μπας και σου βρούμε μια λύση... αφού ΔΕΝ ΚΑΤΑΛΑΒΑΜΕ, πώς να βοηθήσουμε;

Επίσης, μη μου λες ότι τσιγκουνεύεσαι 3 λεπτά να εξηγήσεις σε νέο θέμα, εφόσον θες βοήθεια.

Τέλος, σημασία δεν έχει να βοηθηθείς μόνο, αλλά και να βρει κάποιος στο μέλλον το θέμα σου μέσω της αναζήτησης και να βοηθηθεί κι αυτός. Έχουμε τομείς, θέματα κ ομάδες ενδιαφέροντος. Δε μπορούμε στο ίδιο θέμα να λέμε τα πάντα όλα.. αυτό δεν θα'ναι θέμα.. αλλά κ@λ@χ@νείο.. 

[UltraB]

Έγραψα στο πρώτο μου μήνυμα τι θέλω. Επίσης μπορούν να μου στείλουν απάντηση μέσω PM όπως γράφω συνέχεια (οκ, τώρα το παρέλειψα αλλά δες παλαιότερα μηνύματα) και όχι να συνεχίσουν στο ΠΟΘ. Ούτως ή άλλος αν δεν αν δεν απαντούσατε με τα GIF, θα τέλειωνε εκεί.
 
Δεν το γράφω για να πιάσουμε την συζήτηση αλλά σε περίπτωση που κάποιος γνωρίζει να μου στείλει μήνυμα.
 
Και ξαναλέω ότι είμαι κατά του να ανοίγουν θέματα αν δεν είναι για κάτι σοβαρό με μια - δύο απαντήσεις αλλά αυτό είναι προσωπική άποψη, γι αυτό και είχα ανοίξει το "Σύντομες ερωτήσεις - Γρήγορες απαντήσεις", που όπως θα δεις, είχε μπόλικες "απλές" ερωτήσεις. Συμφωνώ ότι αν παρέμενε ανοιχτό θα γραφόντουσαν ερωτήσεις που έπρεπε να ανοιχτεί νέο θέμα αλλά μπορούσε πολύ απλά κάποιο μέλος της διαχείρισης με δύο κλικ να τις κάνει νέο θέμα. Οκ, θα χρειαζόταν περισσότερη ενασχόληση αν υπήρχαν πολλές τέτοιες ερωτήσεις από την διαχειριστική ομάδα αλλά θεωρώ ότι μια χαρά μπορούσε να "δουλέψει".

Αυτά. Και από εδώ και στο εξής με βλέπω να τρώω ώρες στο Google πριν ανοίξω νέο θέμα ή ρωτήσω κάτι...  
Δε συνεχίζω άλλο, θεωρείται λήξαν από εμένα.

[Delijohn]

To ξέρεις ότι είσαι επίμονος χωρίς λόγο έτσι;;;

Δηλαδή θες οι άλλοι να αλλάξουν τον τρόπο που σκέφτονται και δουλεύουν επειδή εσύ θεωρείς το χ για y κι επειδή διαφωνείς με μια τακτική... 

Προφανώς κι είναι προσωπική σου άποψη αλλά ΓΙΑΤΙ απαιτείς κι από τους άλλους να λειτουργούν όπως θες;

Όλα τα παιδιά γράφουν ένα θέμα και ζητούν βοήθεια.. έτσι είναι τα φόρουμ όλα, όχι μόνο αυτό! Εσύ θες να ρωτάς κάτι σε ένα άκυρο θέμα και να σου απαντάνε σε μήνυμα;; Είναι αυτό σύμφωνο με τους κανόνες του φόρουμ; Τι να πω.. στη σχολή αν έχεις μια απορία τη λες δυνατά ανάμεσα σε μια παρέα που λέει άκυρα στο προαύλιο αλλά απαιτείς να σου πουν τη λύση στο αυτί;; 

Εμ δεν θες να πας με τα νερά του φόρουμ, εμ σε χαλάει που δεν περνά κι η δικιά σου ιδέα με το θέμα μπάχαλο, παρόλο που θα ήθελε έξτρα χρόνο από τους moderators (από τον ελεύθερο χρόνο τους) για να μεταφέρουν όσα θέματα τραβάνε παραπάνω.

 

Εγώ το θέμα δεν το άνοιξα για να σου κάνω φιγούρα πως ξέρω να googlάρω, το άνοιξα για να σου δείξω πόσο εύκολο είναι. ΔΕΝ κατάλαβα τι ήθελες και προφανώς ήθελα περαιτέρω εξήγηση. Αν δεν θες να εξηγήσεις και προτιμάς να ψάχνεις μόνος, κανένα πρόβλημα.. στο google θα βρεις όμως τον κόπο ενός άλλου που δεν σκεφτόταν σαν εσένα και έκατσε κι έγραψε δημόσια κι όχι σε μήνυμα, πώς γίνεται αυτό που θες. 

 

Στο θέμα μας τώρα, τι από τα

margin-left margin-right

padding-left padding-right

border-left-width border-left-right σου κάνει;;;

Δες τα στο w3schools που τα έχει ωραία και δείχνει και πώς συντάσσονται.

[nucleus]

Αν θες το css style να το έχει μόνο ένα συγκεκριμένο div τότε φτιάχνεις ένα νέο style στο css σου

.mydivstyle {  //css properties}

και μετά στο html γράφεις

<div class="mydivstyle"></div>

Αν θες το συγκεκριμένο style να ισχύει για όλα τα divs σου τότε το css style σου είναι το εξής

div {  //css properties}

και δεν κάνεις τίποτα άλλο. Ο παραπάνω δεύτερο τρόπος ισχύει για όλα τα html elements. Πχ αν θες να αλλάξεις όλα τα links σου <a> ή όλες τις παραγράφους σου <p> κάνεις το ίδιο,φτιάχνεις styles με [όνομα html element] πχ a ή p.

 

Τέλος υπάρχει και ο κλασσικός τρόπος <div style="css properties">. Απλώς το παραπάνω δεν είναι reusable και δεν είναι εύκολο να κάνεις αλλαγές μετά.

 

Επίσης υπάρχει και το bootstrap ή κάποιο άλλο css framework πχ foundation.

 

http://getbootstrap.com/ Bootstrap

 

http://foundation.zurb.com/ Foundation

 

Αν θες πιο metro like

 

http://metroui.org.ua/  MetroUI

 

https://talkslab.github.io/metro-bootstrap/ Metro bootstrap ή αλλιώς Simple bootstrap from Twitter with Metro style!

[gaaragr]

Σε γενικές γραμμές άμα ασχοληθείς με bootstrap θα κατανοήσεις γρηγορότερα και ευκολότερα το CSS + ότι τα περισσότερα framework πλέον 

είναι βασισμένα στην φιλοσοφία του bootstrap. 

[UltraB]

Καταρχάς σας ευχαριστώ και τους δύο. Αυτό που έψαχνα ήταν πως θα κάνω μέσα στο footer ή σε div τα περιεχόμενα που εμπεριέχονται να απέχουν από αριστερά και δεξιά.

 

Τώρα βέβαια αντιμετωπίζω άλλο πρόβλημα. Ότι έχω δοκιμάσει για να παραμένει το footer στο τέλος της σελίδας ώστε να μην υπάρχει κενό στο κάτω μέρος της (όπου δεν υπάρχει πολύ περιεχόμενο), απέτυχε :/

[nucleus]

HTML:

<div class="footer"></div>

CSS:

.footer { position: absolute; bottom: 0px; width: 100%; height: 60px; background-color: #F5F5F5; display:block;}

Code "borrowed" απο εδώ http://getbootstrap.com/examples/sticky-footer-navbar/

 

60px footer με 100% width (όλη την σελίδα)

 

Διάβασε και πειραματίσουμε για τα margin,padding. To w3schools που λίνκαρε ο @Delijohn, θα βοηθήσει.

[UltraB]

Αυτό έχω τώρα στο CSS για το footer

footer {width: auto;height: 2%;background-color: #484848;color: white;font-family: 'Roboto Condensed', sans-serif;padding-right: 20px;padding-left: 20px;display: block;overflow: auto;}

Αν του βάλω 

  position: absolute ή fixed;  bottom: 0;

βγάζει αυτό

[nucleus]

Αύξησε το height. Τι ακριβώς περιέχει το footer? Εικόνα,άλλα divs?

 

Αν βγάλεις το overflow και αφήσεις το width στο 2% τι κάνει?

 

Αν βγάλεις και το overflow και το width από το footer τι κάνει?

[UltraB]

Αύξησε το height. Τι ακριβώς περιέχει το footer? Εικόνα,άλλα divs?

Μια εικόνα και ένα h1 κείμενακι

 

Το ύψος είναι μια χαρά αν αφαιρέσω το position & το botom. Επίσης να τα βάλω το footer μου κρύβει το περιεχόμενο σε μικρότερες αναλύσεις.

[nucleus]

Δοκίμασε να παίξεις με "στατικό" height πχ height:100px

[UltraB]

Αν το αλλάξω στο παρακάτω λειτουργεί αλλά μου κρύβει τα περιεχόμενα της σελίδας. Έτσι το είχα και πιο πριν.
Το στατικό height δεν βοηθάει στον παραπάνω κώδικα.

footer {  width: calc(100% - 40px);  height: auto;  background-color: #484848;  color: white;  font-family: 'Roboto Condensed', sans-serif;  padding-right: 20px;  padding-left: 20px;  display: block;  overflow: auto;  position: fixed;  bottom: 0;}

[nucleus]

Για άλλαξε μια το position:fixed σε position:absolute

[UltraB]

Το ίδιο πράγμα κάνει. Αν το αφήσω fixed αλλά προσθέσω για παράδειγμα 10 <p>blah blah blah</p> δουλεύει μια χαρά.
Το θέμα είναι όμως ότι δεν θέλω κείμενο κάτω από το div που έχω διότι μεγαλώνει η σελίδα κάθετα με αποτέλεσμα να έχω scroll, πράγμα που δε θέλω.

Λέω να το αφήσω προς το παρόν ως έχει μέχρι να δώσω την τελική μορφή στην αρχική σελίδα όπου εκεί υπάρχει το θέμα με το footer.