Probleme in CSS
Autor admin • Apr 13th, 2007 • Categorie: Tutoriale CSS • Comentarii « Nici un comentariu »Sunt cateva chestii - trucuri si ponturi - pe care ar trebui sa le aveti in vedere atunci cand lucrati cu CSS.Â
 1. Marime text fara a folosi pixels
p { font-size: 1.2em; line-height: 1.5em; }Â
2. Codul usor de citi !
- O structura CSS trebuie sa aiba in principiu urmatoarele elemente
- #header
- #logo
- #search
- #content
- #breadcrumbs (ramasite…bucatele)
- #content-ads
- #sidebar
- #navigation
- #sidebar-ads
- #earthweblinks
- #footer
Bineinteles fiecare isi personalizeaza structura in functie de design-ul dorit. Insa in principiu ar fi bine ca aceste elemente sa nu fie omise.
-
Pastrati regulile pentru fiecare sector impreuna si in aceeasi ordine.
De exemplu:
<div id=”examplu”>
<h2>Heading</h2>
<p>Lorem.</p>
<ul>
<li>…</li>
</ul>
<p>Ipsum.</p>
</div>
In sectorul CSS ordinea ar trebui sa fie de genul:
- #examplu
- #examplu h2
- #examplu p
- #examplu ul
- #examplu ul li
Sau alt exemplu:
h1 {}
   h1#logo { font-size: 3em; color: #FFF; }
h2 {}
   h2.title { font-size: 1.7em; font-weight: normal; }
- Separati codul in blocuri.
De genul:
/* Structure */ - structura site-ului
/* Typography */ - paragrafe, headings si alte fonturi
/* Links */
/* Lists, images, etc. */ - liste, imagini si altele …
Fiecare isi face separarea CSS-ului in blocuri dupa cum doreste. Ideea este ca trebuie sa va usureze munca cat mai usor, la modul ca puteti vedea si modifica usor unde sunt anumite elemente din CSS.
3. Width minim pentru pagina
O comanda buna pentru CSS este  min-width,se poate specifica oriunde (ptr orice element) se doreste un minimum width. Din pacate IE nu recunoaste aceasta comanda prin urmare ca trebui sa gasim o cale prin care aceasta comanda sa fie functionabila. In primul rand, vom inserta un <div>sub tag-ul <body>.
<body>
<div id="container">
Dupa care, facem propria noastra comanda CSS, si setam minimum width de 600px:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
Prima comanda este cea mai des folosita iar cea de-a doua e o comanda JavaScript pe care doar IE o intelege. Totusi aceasta comanda ar putea face documentul CSS invalid prin urmare cred ca ati prefera sa insertati comanda in HEAD-ul fiecarui docment HTML.
Ati putea de asemenea sa setati si maximum width:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
4. Elementele in pagina sunt inguste in Internet Explorer
Fiecare element HTML este element este esentialmente o cutie (box), width (latimea) este totalul marginilor, border-elor, padding si zona contextului. Imaginati-va urmatoarea regula CSS:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em
}
Asta inseamna ca fiecare div este de 50em lat (wide) pe total. Acest total este suma din 30em wide content area, si 4em padding, 1em border si 5em (invizibil) margine pe partile dreapta si stanga.
Totusi in IE, border si padding sunt incluse in width al contentului. Prin urmare, in IE, width contextului este doar de 20em (30em minus 5em padding si border pe ambele parti), si totalul width a div-ului este doar de 40em.
Aceasta problema a box-ului din CSS apare la IE5.x, si posibil si IE6, depinde de cum faceti declararea ISO in codul HTML.
Solutii:
Doar pentru IE5.x, se scrie comanda:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width/**/:/**/ 40em;
width: 30em
}
Pentru a repara orice versiune IE, se foloseste urmatoarea comanda:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 40em
}
html>body div {
width: 30em
}
5. Textul iese din propriul container in non-IE browsere
Internet Explorer, spre deosebire de alte browsere, va mari borders si background colours in asa fel incat textul sa nu iasa din elementele sale.
Prin urmare va trebui sa setam urmatoarea regula:
html>body .box
{
width: auto;
min-width: 40px
}
IE va ignora comanda asta pentru ca regula are in fata html>body.
Nu stiu in cata masura m-am facut inteleasa pentru ca eu CSS-ul la-m invatat in engleza si prin urmare imi este oarecum greu sa fac o “traducere perfecta”.
Articole asemanatoare:
admin is Ana Design. V-a placut tot ce v-am recomandat in tutorial? Atunci nu uitati sa faceti un link catre articol si bookmark it!
Email this author | Toate articolele scrise de admin
