Διαστάσεις CSS

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Διαστάσεις CSS

Δημοσίευση από dpa » 21 Ιούλ 2010 20:39

Παιδιά οι διαστάσεις στα css που πρέπει να βάζουμε αλλάζουν από browser σε browser έτσι ??


Δηλαδή αν έχουμε ένα Box αφαιρούμε το padding από το πλάτος για τον chrome και τον mozilla

#Box { width: 480px; padding: 10px; }

Στον ΙΕ δεν πρέπει να το αφαιρούμε ????


γιατί πολλές φορές δεν παίζουν σωστά.

Τι πρέπει να προσέχουμε ????

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Διαστάσεις CSS

Δημοσίευση από dimsis » 22 Ιούλ 2010 00:01


dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Διαστάσεις CSS

Δημοσίευση από dpa » 22 Ιούλ 2010 09:46

Σε ευχαριστώ πολύ ???

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

και πιο απ' όλα να χρησιμοποιήσω ??

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Διαστάσεις CSS

Δημοσίευση από dimsis » 22 Ιούλ 2010 10:35

http://www.giotas.eu/web_design/reset-css.html
Βάζεις πριν από οποιοδήποτε css σου να φορτώνονται οι css εντολές που κάνουν το reset ώστε έπειτα να μην έχεις προβλήματα με το πως διαχειρίζεται τα paddings / margins o κάθε browser. Το πιο διαδεδομένο και μάλλον και η αρχή της χρήσης της τεχνικής αυτής είναι του Eric Meyer http://meyerweb.com/eric/thoughts/2008/ ... ing-again/

Πολλοί έχουν το αγαπημένοι τους reset.css σε ξεχωριστό αρχείο και το χρησιμοποιούν με @import σε κάθε project - πάντα πριν φορτώσεις τα δικά σου css files. Αν θέλεις λιγότερα requests μπορείς όμως να το κάνεις ένα copy paste στην κορυφή του δικού σου css file.
Διαλέγεις και παίρνεις.

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Διαστάσεις CSS

Δημοσίευση από dpa » 22 Ιούλ 2010 10:48

Να σου πω λίγο.

Μπορώ να κάνω φορτώσω το αρχείο του Meyer και μετά να ξαναδηλώσω το body μόνος μου ?? και την κάθε ετικέτα.


πχ. ο Meyer exei ayto

Κώδικας: Επιλογή όλων

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}



Εγώ μετά μπορώ να ξαναδηλώσω το body με τα δικά μου στοιχεία από κάτω από τον κώδικά του ???

πχ body { background-color: #000; font-size: 15px; }




Κάπως έτσι ???

Κώδικας: Επιλογή όλων

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* [b]Δικό μου[/b] */
body { 
        background-color: #000; 
        font-size: 15px; 
}


Ευχαριστώ

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

Διαστάσεις CSS

Δημοσίευση από greekbytes » 22 Ιούλ 2010 14:49

Ναί, μπορείς ;)

εδώ πχ το h1 καταλήγει να έχει margin:0; color:green; font-size:16px;

Κώδικας: Επιλογή όλων

h1 { margin:0; color:red; }
/* άλλα css rules εδώ */
h1 { color:green; font-size:16px }
Δηλαδή ξαναγράφοντας τον ίδιο selector μπορούμε να του συμπληρώσουμε ή να κάνουμε overwrite προηγούμενες δηλώσεις.

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Διαστάσεις CSS

Δημοσίευση από dpa » 22 Ιούλ 2010 14:52

ΟΚ κατάλαβα

Ευχαριστώ πολύ παιδιά

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες