Απορίες πάνω σε template

[gtklocker]

Αυτές τις μέρες ασχολούμαι με ένα template που ξεκίνησα from the scratch. Έχω φτιάξει κάτι σαν "posts" που έχουν bg και border αλλά κολλάω παρατηρώ ένα μικρό πρόβλημα που δεν ξέρω πώς λύνεται.

Όπως θα παρατηρήσετε στo scrot, υπάρχει μια μεγάλη απόσταση από τον τίτλο στον border. Έχω δοκιμάσει τα πάντα, αλλά no luck.



Επίσης, δίνω το css και το αντίστοιχο κομμάτι στο html για όποιον θέλει να τα κοιτάξει.

.css

Spoiler:

/* Tryout css */

body {
    width: 85%;
    margin: auto;
    font-family: Verdana, Arial, "DejaVu Sans", sans, sans-serif;
    background: #000000;
    color: #FFFFFF;
}

.header h1 {
    font-weight: bold;
    color: #544a4a;
}

.post {
    width: 65%;
    background: #171414;
    border: 1px solid #292424;
    margin-bottom: 0.2em;
    padding: 0.3em;
}

.post-content {
    color: #8f7e7e;
}

.post-title {
    color: #544a4a;
    font-weight: bold;
}

Απόσπασμα του html:

Spoiler:

<div class=post>
<div class=post-title><h1>Test</h1></div>
<div class=post-content><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat nibh non nibh rhoncus consequat in sit amet eros. Cras dignissim ante id quam suscipit vitae sodales purus vulputate. Curabitur suscipit mauris a eros varius id ultrices ante consectetur. Curabitur quam lorem, ultrices sodales ornare id, accumsan a nulla. Vivamus ultrices, augue ac mattis vestibulum, leo leo volutpat lectus, in facilisis dui eros vel sem. Integer et purus non velit tincidunt dignissim vel eget dui. In malesuada orci non purus scelerisque viverra. Praesent pharetra lectus ipsum. Proin id leo id sapien eleifend auctor quis et lorem. Suspendisse sit amet molestie enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p></div>
</div>

[xp1988]

Είναι επειδή τα <h1> και <p> έχουν margin πανω και κάτω από μόνα τους (by default). Σου συστήνω το Firebug το οποίο είναι add-on του Firefox με το οποίο μπορείς να δεις το html και τα margin/padding κτλ και να καταλάβεις καλύτερα τι γίνεται στην ιστοσελίδα σου.

[tsigarid]

Είναι επειδή τα <h1> και <p> έχουν margin πανω και κάτω από μόνα τους (by default). Σου συστήνω το Firebug το οποίο είναι add-on του Firefox με το οποίο μπορείς να δεις το html και τα margin/padding κτλ και να καταλάβεις καλύτερα τι γίνεται στην ιστοσελίδα σου.

Εξαιρετικό!

[gtklocker]

Άλλαξα το .post-title και το έκανα έτσι:

.post-title h1{
	color: #544a4a;
	font-weight: bold;
	margin: 0px;
}

Και τώρα δουλεύει σωστά. Αλλά, πώς μπορώ να ορίσω το μέγεθος της γραμματοσειράς του;

[xp1988]

.post-title h1{
    font-size: 25px;
}

Βάζεις όσα px θέλεις.

[glazarou]

Παντως τοση ιστορια για λιγο κενο?Δεν θα μπαινα στον κοπο προσωπικα....καλη συνεχεια με το template...

[parantox]

Μια παρατήρηση μόνο, μια καλή τεχνική είναι να θέτεις τα margin και padding στον πρώτο κανόνα του css αρχείου που αφορά στο body, στην τιμή 0 (λέγεται reset). Στη συνέχεια συντάσσοντας κανόνες για κάθε στοιχείο βάζεις τις τιμές που θες στις συγκεκριμένες ιδιότητες.

Με τον παραπάνω τρόπο αποφεύγεις τις ιδιαιτερότητες του κάθε browser όταν αφήνεται ελεύθερος να αποφασίσει για κάποια τιμή περιθωρίου, ενώ κάνεις και πιο εύκολο debugging (σε περιπτώσεις με δεκάδες ή και παραπάνω κανόνες θα είναι χρήσιμο).

[kosnik]

Εχει δικιο ο parantox, παντα δινουμε στη css ενα

* {margin:0; padding:0}

γτ απο default αλλα δινει ο ΙΕ αλλα ο Firefox κλπ.