tag:blogger.com,1999:blog-7779009110054388892024-02-08T07:57:02.124+02:00CSS, HTML, JavaScript BlogBlogul unui pseudompseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.comBlogger42125tag:blogger.com,1999:blog-777900911005438889.post-32031463455045063372010-11-16T11:00:00.004+02:002010-11-19T19:13:20.696+02:0010 HTML erori pe care nu trebuie sa le comitemAcest articol este dedicat erorilor HTML pe care deseori incepatorii le admit la crearea <i style="color: #0b5394;"><b>template-uri HTML</b></i>. Recunosc si eu deseori am admis asemenea erori care nu sunt binevenite pentru semancitatea si validitatea codului HTML.<br />
<span style="color: #0b5394; font-size: large;">1. HTML eroare. Plasarea Block Elements in cadrul Inline Elements</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlApy9K0RZNNHe-czMOG8riGM-O3SoGClFqE0sIWnl__mZMlDEbr1zFd8kAyywYmpgRu0k9fjIUJvRgeebJ5PwB-C9rF91nRZmwXSc2ql-TV7Na7lQsTSqzgJ4LP8Q03vpIqNhZCUBtlIr/s1600/inline-element.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlApy9K0RZNNHe-czMOG8riGM-O3SoGClFqE0sIWnl__mZMlDEbr1zFd8kAyywYmpgRu0k9fjIUJvRgeebJ5PwB-C9rF91nRZmwXSc2ql-TV7Na7lQsTSqzgJ4LP8Q03vpIqNhZCUBtlIr/s400/inline-element.PNG" width="400" /></a></div><br />
<br />
HTML elementele pot fi vizualizate in doua moduri: <i>block</i> sau <i>inline</i>. Fiecare tag implicit este de natura: block sau inline. <i>Block elements</i> includ in ele div sau paragraf, cu ajutorul lor putem face structura template-ului. <i>Inline elements</i>, pe de alta parte, trebuie sa fie pozitionate in interiorul elementelor bloc si sa urmeze amplasarea acestora in HTML document. Inline elementele trebuie tot timpul sa fie amplasate in blocuri, si niciodata invers!<br />
<span style="color: #0b5394; font-size: large;">2. HTML eroare. Nu includem atributul ALT pentru imagini</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtkYimLPn8RmsMklEyVFCcuQvdMo2X2Xvun-zH_6dwcOpbPNQa9ahgyleB96fX8XCudeWgiGPMLJjJ_uxo_DXDEXLxolP-Q1phOkblZJLYfttqrZQ975u64UT0UW8QGuYoUeBu29WP8PYn/s1600/html-alt-attribute.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtkYimLPn8RmsMklEyVFCcuQvdMo2X2Xvun-zH_6dwcOpbPNQa9ahgyleB96fX8XCudeWgiGPMLJjJ_uxo_DXDEXLxolP-Q1phOkblZJLYfttqrZQ975u64UT0UW8QGuYoUeBu29WP8PYn/s320/html-alt-attribute.PNG" width="320" /></a></div><i>Atributul ALT</i> este necesar pentru toate imaginile vizualizate in HTML template. El ajuta utilizatorul sa inteleaga ce imagine este atunci cind conexiunea este lenta sau imagine nu s-a incarcat in pagina din anumite cauze. Atributul ALT trebuie sa descrie cit mai bine imaginea, iar descrierile de tipul ...alt="imagine" nu este binevenita, daca imagine este folosita in pagina HTML, doar pentru scopuri pur decorative atunci putem sa includem atributul alt fara nici o informatie: <i>alt=""</i>.<br />
<span style="color: #0b5394; font-size: large;">3. HTML eroare. Nu folosim listele UL si OL atunci cind e necesar.</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4c77kX6hcnjOUPN3p4flQNC31k70O6yd-FO_3673wiwNq9Y2K8bBYzYRgSO_MdChSe4olTktnMUxkosZJoWLxMpilu2CDTawXN7VIOr4dw5iPL8f-F0UeKTSLoU_mxw6Pt4AyKA5JmqOc/s1600/html-list.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4c77kX6hcnjOUPN3p4flQNC31k70O6yd-FO_3673wiwNq9Y2K8bBYzYRgSO_MdChSe4olTktnMUxkosZJoWLxMpilu2CDTawXN7VIOr4dw5iPL8f-F0UeKTSLoU_mxw6Pt4AyKA5JmqOc/s320/html-list.PNG" width="320" /></a></div>Tagul UL (si OL) are un set de intrebuintari destul de larg si este extrem de versatil pentru afisarea tuturor tipurilor de componente ale paginii. Deci, daca cu ajutorul tagului pentru liste neordonate UL putem afisa foarte usor o lista de informatie in documentul HTML, atunci de ce sa nu il folosim? :)<br />
<span style="color: #0b5394; font-size: large;">4. HTML eroare. Folosirea <b> si <i> pentru a sublinia importanta unui cuvint in HTML template</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBqMRfL_ljVpAJDW8xSDl6ahytpVui2U_buV6g1yXRLFa6dl0ZInqL-VoekLY5AwwyohILvfr_cTPZfwtTksPImssRm9L5iV5ykwn6r1_SnJ56rveLfPTfS0fkzPIQWNaRNTryfRndVYKk/s1600/html-strong.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBqMRfL_ljVpAJDW8xSDl6ahytpVui2U_buV6g1yXRLFa6dl0ZInqL-VoekLY5AwwyohILvfr_cTPZfwtTksPImssRm9L5iV5ykwn6r1_SnJ56rveLfPTfS0fkzPIQWNaRNTryfRndVYKk/s320/html-strong.PNG" width="320" /></a></div><br />
Tag-urile <i><b></i> si <i><i></i> fac ca textul din document sa apara <b>bold</b> si respectiv <i>italic</i>, dar din punct de vedere semantic ele sunt clasate ca tag-uri de prezentare. Prin urmare aceste efect se poate usor de facut cu ajutorul CSS proprietatilor <i>font-weight</i> si <i>font-style</i>. Daca fragmentul de text dorim sa-l sugeram ca important atunci cel mai bine e sa folosim tag-urile <i><strong></i> si <i><em> </i>care<i> </i>indeplinesc acelasi lucru in plus ofera importanta nu doar vizual dar si la nivel de cod HTML.<br />
<span style="color: #0b5394; font-size: large;">5. HTML eroare. Utilizarea excesiva de <br/> </span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzpENUuDNl01ZkluJysx3DPzKj7wV88iLDfD9180Dc3noCxA1chnJ5jWapxgEM7kCIEXf-EP_hB8M5JWDTL036F6eq9hvkW6KZ0AyIeoqviQBH3XQTxdGwWer2S4zTVcfp7bsWzDx2FliV/s1600/html-break.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzpENUuDNl01ZkluJysx3DPzKj7wV88iLDfD9180Dc3noCxA1chnJ5jWapxgEM7kCIEXf-EP_hB8M5JWDTL036F6eq9hvkW6KZ0AyIeoqviQBH3XQTxdGwWer2S4zTVcfp7bsWzDx2FliV/s320/html-break.PNG" width="320" /></a></div><i>Tagul <br/></i> se foloseste pentru a intrerupe un fragment de text pentru un rind mai jos intr-un paragraf, nu trebuie de folosit pentru a crea un spatiu mai mare intre rinduri, pentru asta se poate de taiat fragmentul de text in mai multe paragrafe., sau sa ajustam spatiile dintre rinduri prin intermediul CSS.<br />
<span style="color: #0b5394; font-size: large;">6. HTML eroare. Uilizarea tagurilor gresite de taiere a cuvintului</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdT7oi6aMel8JX1CS_XCW80-IpcU3BMPWu08JX7JH4u0Z38EqkhSYXhjMZVFI0mJy0nE9qqjcmdwVbJULrOos4BqtyNmPmnsyZf8v_bMIh86Zw4ezkT6srsn0E9j68mwCoA4AthQo4pDxu/s1600/css-del-ins.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="84" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdT7oi6aMel8JX1CS_XCW80-IpcU3BMPWu08JX7JH4u0Z38EqkhSYXhjMZVFI0mJy0nE9qqjcmdwVbJULrOos4BqtyNmPmnsyZf8v_bMIh86Zw4ezkT6srsn0E9j68mwCoA4AthQo4pDxu/s320/css-del-ins.PNG" width="320" /></a></div>Cindva, demult <s> si <strike> erau folosite pentru a reda vizual un text taiat, acuma aceste doua taguri se considera invechite, inca lucreaza destul de bine (pentru regimul Transitional), dar la moment sunt alte HTML tag-uri pentru acest lucru, si anume: <del> si <ins>. Ele se folosesc impreuna pentru a reda un text taiat si ulterior introdus in HTML template. <br />
<span style="color: #0b5394; font-size: large;">7. HTML eroare. Folosirea stilurilor in HTML taguri</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoc4UoNjRdAfVuoyjUq7vCQUaruWnB85MC_nJCAnwDLIm74ddbTtNR8Mz4VFVoGOBPLJQuY-xhTy03D01MECqjIj7kDZb__2CiCjCBx4ZtwQ7WS6_PjUjzx2YEDGgUAornhCJBjjsB43j5/s1600/html-inline-styling.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="83" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoc4UoNjRdAfVuoyjUq7vCQUaruWnB85MC_nJCAnwDLIm74ddbTtNR8Mz4VFVoGOBPLJQuY-xhTy03D01MECqjIj7kDZb__2CiCjCBx4ZtwQ7WS6_PjUjzx2YEDGgUAornhCJBjjsB43j5/s320/html-inline-styling.PNG" width="320" /></a></div>Cred ca ati auzit asta de mii de ori :) Nu bagati stiluri in tag, sau <i style="color: #990000;"><b>Do not use inline styling</b></i>. cel mai important lucru pentru un HTML semantic si CSS este de a separa structura documentului de stiluri, deci nu are sens sa punem stiluril direct in HTML elemente. Tine-ti mereu structura template-ului despartita de stiluri.<br />
<span style="color: #0b5394; font-size: large;">8. HTML eroare. Adaugarea sau stergerea border-elor in HTML</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIVbsp0y03HQqkF_KVwcuanG24rxQ3qHLhQMJMHnZyZL0z6L0UqNl2rxKBe6EZuXl_IbuVPc2N1vxVVzGZfOTKF6knrLR3C2fTiVJgaoCwaZhPBIQaW9cMecroUIVp5bGffszB52kQi5eI/s1600/html-border.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIVbsp0y03HQqkF_KVwcuanG24rxQ3qHLhQMJMHnZyZL0z6L0UqNl2rxKBe6EZuXl_IbuVPc2N1vxVVzGZfOTKF6knrLR3C2fTiVJgaoCwaZhPBIQaW9cMecroUIVp5bGffszB52kQi5eI/s320/html-border.PNG" width="320" /></a></div>Atributul border este si el prezentational si deci e posibil de adaugat in CSS, chiar daca are o valoare implicita, e posibil cu ajutorul stilurilor sa-l stergem.<br />
<br />
<br />
<br />
<span style="color: #0b5394; font-size: large;">9. HTML eroare. Neutilizarea tag-ului <h> header</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0hwVcpQzaF96L-WWA1-PyrTPnyOrxSFxp5JrIyfrFyH3RdXvWWWbALyzm4nuQyB81-KUuuemlVU2_HHPkIrDiN4h5nPbK2aasO-rVA0F7yRf9BXwoukAslyGsaB0Hc8R_wcBou_NH7QTS/s1600/html-heading.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="79" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0hwVcpQzaF96L-WWA1-PyrTPnyOrxSFxp5JrIyfrFyH3RdXvWWWbALyzm4nuQyB81-KUuuemlVU2_HHPkIrDiN4h5nPbK2aasO-rVA0F7yRf9BXwoukAslyGsaB0Hc8R_wcBou_NH7QTS/s320/html-heading.PNG" width="320" /></a></div>Tag-urile <i>heading</i> sunt de la <i><h1></i> la <i><h6></i> pentru a reprezenta titlurile dintr-un document HTML. Daca doriti sa afisati o propozitie sau un fragment de text ca pe un titlu nu ezitati sa folositi aceste tag-uri.<br />
<br />
<span style="color: #0b5394; font-size: large;">10. HTML eroare. Utilizare celor mai "urite" tag-uri <blink> si <marquee></span><br />
In afara de lucrul ceia ca nu sunt tag-uri oficiale aprobate de W3C mai au o trasatura, sunt cele mai urite tag-uri HTML, sunt sigur ca puteti sa atrageti mai bineatentia unui utilizator cu o functie JavaScript sau un Flash, decit folosind aceste doua tag-uri.<br />
<a href="http://line25.com/articles/10-html-tag-crimes-you-really-shouldnt-commit"><b style="color: #38761d;">Articolul original</b></a>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com5tag:blogger.com,1999:blog-777900911005438889.post-33418337110220697662010-11-09T14:13:00.001+02:002010-11-19T19:09:50.233+02:0030 CSS Selectors pentru o viata mai usoara. Partea II<span style="color: #0b5394; font-size: large;">16. CSS Selector [foo~="bar"]</span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">a[data-info~="external"] { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> color: red; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">} </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">a[data-info~="image"] { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> border: 1px solid black; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">} </span></span><br />
Acest selector este unul mai special, care cu siguranta o sa va impresioneze prietenii :). Nu prea multi web developeri stiu de acest truc. Tilda (~) ne permite sa vizam un atribut care are o lista de valori separata prin spatiu. Daca ne vom conduce dupa <a href="http://pseudomus.blogspot.com/2010/11/30-css-selectors-pentru-o-viata-mai.html">selectorul</a> 15 descris in articolul <a href="http://pseudomus.blogspot.com/2010/11/30-css-selectors-pentru-o-viata-mai.html">precedent</a>., putem crea un atribut personal, <i>data-info</i> de exemplu, care ne poate avea valori separate prin spatiu. In acest caz vom face un set de link-uri externe catre imagini, doar pentru exemplu.<br />
<div style="background-color: #eeeeee; color: #0b5394; font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;"><span class="tag"><</span><span class="tag-name">a</span> <span class="attribute">href</span>=<span class="attribute-value">"path/to/image.jpg"</span> <span class="attribute">data-info</span>=<span class="attribute-value">"external image"</span><span class="tag">></span> Click Me, Imagine <span class="tag"></</span><span class="tag-name">a</span><span class="tag">></span></span></div>Avind acest cod HTML, putem sa vizam orice tag care are oricare dintre aceste valori, utilizind (~).<br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">a[data-info~="external"] { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> color: red; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">} </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">a[data-info~="image"] { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> border: 1px solid black; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">} </span></span><br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 9+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="background-color: white; color: #0b5394; font-size: large;">17. CSS Selector checked </span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">input[type=radio]:checked { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> border: 1px solid black; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">} </span></span><br />
Aceasta <i>pseudo-clasa</i> va formata un element din interfata utilizatorului care a fost <i>checked</i> (activat), cum ar fi un <i>HTML radio button</i> sau <i>HTML checkbox</i>. Destul de simplu.<br />
<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 9+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">18. CSS Selector after</span> <br />
Pseudo elementele <i>before</i> si <i>after</i> sunt destul de stranii. In fiecare zi, web developerii gasesc noi modalitati de intrebuintare efectiva a acestor selectore. Ele simplu genereaza content in jurul elementului selectat. Multe au fost introduse spre aceste clase cind au intilnit <i>clear-fix</i> hack.<br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">.clearfix:after { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> content: ""; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> display: block; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> clear: both; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> visibility: hidden; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> font-size: 0; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> height: 0; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">} </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">.clearfix { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> *display: inline-block; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> _height: 1%; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">} </span></span><br />
Acest <i>hack</i> foloseste <i>:after</i> pentru a aduaga un spatiu dupa element, iar apoi pentru al sterge. Este un truc bun in cazul cind metoda<i> overflow:hidden</i> nu este posibil de aplicat.<br />
<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 8+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">19. CSS Selector hover</span> <br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">div:hover { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> background: #e3e3e3; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span><br />
Cu siguranta stiati de el. Termenul oficial este: <i>user action pseudo class</i>. Suna cam confuz, dar in realitate este destul de simplu. Daca doriti sa aplicati un stil CSS atunci cind utilizatorul duce mouse pe un HTML element, cu hover puteti sa faceti acest lucru. De exemplu pentru a aplica un un <i>border-bottom</i> unei <i>HTML ancore</i> atunci cind userul duce mouse deasupra, e suficient de a scrie urmatorul cod:<br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">a:hover { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> border-bottom: 1px solid black; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span><br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 6+(in IE6 :hover trebuie sa fie folosit doar pentru HTML ancore!)</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><div style="color: #0b5394;"><span style="font-size: large;">20. CSS Selector not (negatie) </span></div><div style="color: #0b5394;"><span style="font-size: large;"></span></div><div style="background-color: #eeeeee; color: #0b5394; font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;">div:not(#container) { <br />
color: blue; <br />
} </span></div><i>Pseudo clasa</i> negatie este foarte ajutatoare in cazuri particulare. Sa spunem ca e nevoie de a selecta toate <i>div</i>-urile dintr-un <b><i>HTML template</i></b> in afara de div-ul care are ID="container". Fragmentul de cod de mai sus ne ajuta sa facem acest lucru.<br />
<br />
Sau, dorim sa selectionam toate elementele unice din <i><b>HTML template</b></i>, in afara de tag-urile <p>:<br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">*:not(p) { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> color: green; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span><br />
<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 9+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">21. CSS Selector ::pseudoElement</span> <br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">p::first-line { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> font-weight: bold; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> font-size: 1.2em; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span><br />
Putem utiliza <i>pseudo elemente</i> (::) pentru a stiliza fragmente a unui element din pagina, cum ar fi prima linie dintr-un paragraf. <br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 6+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">22. CSS Selector nth-child(n) </span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">li:nth-child(3) { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> color: red; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span><br />
Va mai aduceti aminte zilele cind ne intrebam cum de selectat un element intr-o lista? Ei bine, selectorul <i>nth-child</i> rezolva aceasta problema. De notat ca <i>nth-child</i> accepta ca parametru un numar de tip integer. Pentru a selecta al doilea element din lista folosim <i>li:nth-child(2)</i>.<br />
Se poate de utilizat in modul in care sa selectam un numar variabil de elemente dintr-o lista :). Pentru a alege fiecare al 4-lea element e nevoie de scris <i>li:nth-child(4n)</i>. <br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 9+</li>
<li>Firefox 3.5+</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">23. CSS Selector nth-last-child(n) </span><br />
<div style="background-color: #eeeeee; color: #0b5394; font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;">li:nth-last-child(3) { <br />
color: olive; <br />
}</span></div>Pentru cazurile cind avem o lista enorma de elemente intr-un <i>ul</i> iar noi avem nevoie sa alegem al treilea element de la urma ne vine in ajutor <i>nth-last-child</i>. In loc sa scriem <i>li:nth-child(397)</i>, putem sa scrim <i>li:nth-last-child(3) </i>(lista noastra are 400 elemente). <br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 9+</li>
<li>Firefox 3.5+<br />
</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">24. CSS Selector nth-of-type(n) </span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">ul:nth-of-type(3) { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> border: 1px solid black; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span><br />
Sunt momente cind selectorii de mai sus nu putem sa-i folosim. De exemplu avem un <i>template HTML</i> in care se contin 5 liste neordonate <i>ul</i> iar noi dorim sa formatam al 3-lea ul.In CSS exemplul de mai sus e demonstrat cum de adaugat <i>CSS border</i> pentru al treilea <i>HTML ul</i> din template.<br />
<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 9+</li>
<li>Firefox 3.5+<br />
</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">25. CSS Selector nth-last-of-type(n) </span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">ul:nth-last-of-type(3) { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> border: 1px solid black; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span> <br />
Si pentru a adauga un selector care functioneaza invers celui precedent, avem <i>nth-last-of-type</i>.<br />
<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 9+</li>
<li>Firefox 3.5+<br />
</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">26. CSS Selector first-child</span> <br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">ul li:first-child { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> border-top: none; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span><br />
Aceasta <i>pseudo clasa</i> structurala ne permite sa vizam numai primul copil al elementului dorit. In CSS exemplul scris in antet, am aratat cum de sters <i>border-top</i> pentru primul item din lista.<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 9+</li>
<li>Firefox 3.5+<br />
</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">27. CSS Selector last-child</span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-family: "Courier New",Courier,monospace; font-size: x-small;">ul > li:last-child { <br />
color: green; <br />
}</span><br />
Spre deosebire de <i>first-child</i>, <i>last-child</i> va viza doar ultimul element al elementului parinte.<br />
<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 9+</li>
<li>Firefox </li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">28. CSS Selector only-child</span> <br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">div p:only-child { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> color: red; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span><br />
Sincer, nu cred ca prea multi dintre noi o sa gaseasca intrebuintare acestei pseudo clase. Cu toate acestea o descriu, poate cuiva o sa ii fie de ajutor.<br />
Deci, <i>only-child</i>, permite sa selectam elementele care sunt UNICUL copil al printelui sau. In cazul nostru, va stiliza doar paragrafele p, care sunt unicii copii ai elementului div din HTML template. <br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 9+</li>
<li>Firefox </li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;"> 29. CSS Selector only-of-type</span><br />
<div style="background-color: #eeeeee; color: #0b5394; font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;">li:only-of-type { <br />
font-weight: bold; <br />
}</span> </div>Aceasta pseudo clasa CSS poate fi folosita in citeva moduri. Va viza elementele care nu au "frati" in containerul parinte. Spre exemplu, sa selectam toate listele <i>ul</i> care au doar un singur item.<br />
Mai intii trebuie sa ne intrebam, cum se poate de realizat acest task. Se poate de folosit <i>ul li</i> dar atunci se vor selecta toate elementele. Unica iesire din situatie este <i>only-of-type</i><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">ul > li:only-of-type { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> font-weight: bold; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span><br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<br />
<ul><li>IE 9+</li>
<li>Firefox 3.5+</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera </li>
</ul><b><a href="http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/">Articol preluat si tradus de aici</a></b> <br />
<ul></ul>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-69720696565988174342010-11-08T16:12:00.005+02:002010-11-19T19:10:23.052+02:0030 CSS Selectors pentru o viata mai usoara. Partea ILa fel ca si majoritatea incepatorilor in domeniul crearii <b style="color: #0b5394;">CSS layouturilor</b>, la inceput stiam de <i>class</i>, <i>id</i> si <i>descendants selectors</i> pe care ii foloseam toata ziua :) <br />
Dar cu timpul am inteles ca sunt o sumedenie de selectori CSS pentru a face viata mai usoara creatorilor de layouturi, si markup-uri. Acesti selectori ofera un grad inalt de flxeibilitate si sunt suportate de majoritate browserelor moderne.<br />
Mai jos o sa descriu 30 din acesti selectori, sper cuiva sa fei de ajutor, eu personal ii folosesc la putere maximala.<br />
<br />
<b><span style="color: #0b5394; font-size: large;">1. Selectorul * </span></b><br />
<div style="color: #0b5394; font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;"><span style="background-color: #eeeeee;">* { </span><br style="background-color: #eeeeee;" /><span style="background-color: #eeeeee;"> margin: 0; </span><br style="background-color: #eeeeee;" /><span style="background-color: #eeeeee;"> padding: 0; </span><br style="background-color: #eeeeee;" /><span style="background-color: #eeeeee;">} </span></span></div><div style="color: #0b5394; font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;"><span style="background-color: #eeeeee;"> </span></span></div>Sa incepem cu un selector mai simplu, pentru inceput. Simbolul * se foloseste pentru a viza orice element unic din pagina. Multi web developeri folosesc acest selector pentru a face nule toate <i>margin</i> si <i>padding</i> care au valori implicite ce difera de la browser la browser. Cu toate ca acest lucru este cu siguranta bun pentru a face careva teste rapide, totusi nu este de dorit de a folosi acest truc in productie, deoarece incarca mult browserul. Se mai poate de utilizat si impreuna cu child selectors:<br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">#container * { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> border: 1px solid black; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span><br />
In exemplul de mai sus, se va viza toti copiii <i style="color: #0b5394;"><b>HTML elementului</b></i> cu ID-ul "container".<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 6+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">2. Selectorul <code>#(ID)</code></span><code><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> #container { </span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> width: 960px; </span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> margin: auto; </span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> } </span><br />
</code><br />
Simbolul # in CSS ne permite de accesa un element HTML dupa <i>ID</i>. Este foarte folosit pentru crearea layouturilor, dar, <i>ID selectors</i> sunt destul de rigide si nu permit reutilizarea pentru alt element, deoarece ID-ul intr-un HTML document trebuie sa fie unic. Folositi pe cit posibil un tag, sau unul dintre elementele HTML5, sau o <i>pseudo clasa CSS</i>, pentru a evita selectorul ID.<br />
<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 6+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><br />
<span style="color: #0b5394; font-size: large;">3. Selectorul .(CLASS)</span><br />
<code><br />
<span style="color: #0b5394;">.eroare { </span><br style="color: #0b5394;" /><span style="color: #0b5394;"> color: red; </span><br style="color: #0b5394;" /><span style="color: #0b5394;"> }</span><br />
</code>Acest este <i>selectorul class</i>. Diferenta dintre id si class este: cu class putem viza mai multe elemente intro pagina HTML. Folositi class atunci cind aveti de stilizaat in acelasi mod un grup de elemente HTML. <br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 6+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">4. Selectorul (descendants) </span><br />
<code><span style="background-color: #eeeeee; color: #0b5394;"> li a { </span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> text-decoration: none; </span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> }</span></code><br />
<code>Selectorul <i>descendants</i> se foloseste atunci cind dorim sa specificam mai precis ce element dorim sa stilizam. De exemplul, fie ca e nevoie sa stilizam doar ancorele dintr-o lista neordonata, atunci folosim descendants, la fel ca in exemplul de mai sus.</code><br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 6+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><div style="color: #0b5394;"><span style="font-size: large;">5. Selectorul (type)</span></div><div style="background-color: #eeeeee; color: #0b5394; font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;">a { color: red; } <br />
ul { margin-left: 0; }</span></div>Atunci cind avem de stilizat toate elementele de un anumit tip intr-o pagina, folosim selectorul de tip. Daca dorim ca toate elementele din pagina de tip <a> sa aiba textul de culoare rosie, atunci folosim selectorul type.<br />
<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 6+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;"> 6. Selectorul X:visited si X:link</span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-family: "Courier New",Courier,monospace; font-size: x-small;">a:link { color: red; } <br />
a:visted { color: purple; }</span> <br />
Utilizam <i>pseuodo-class :link</i> atunci cind vrem sa decoram ancorele care trebuie sa fie apasate.<br />
Alternativ, mai avem si pseudo-clasa <i>:visited </i>pentru a stiliza ancorele sau linkurile care au fost apasate, vizitate.<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 7+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">7. Selectorul (+)</span> <br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">ul + p { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> color: red; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">} </span></span><br />
Se refera la slesctorul de adiacenta. Cu ajutorul sau se selecteaza DOAR primul element vecin de elementul de referinta. In cazul nostru numai primul paragraf <p>dupa fiece <ul> va avea culoare rosie.<br />
<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 7+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">8. CSS Selectorul (>) </span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-family: "Courier New",Courier,monospace; font-size: x-small;">div#container > ul { <br />
border: 1px solid red; <br />
}</span><br />
Diferenta dintre > si descendants este: cu ajutorul ">" se pot selecta doar copii directi. de exemplu avem urmatorul fragment de markup:<br />
<span style="background-color: #0b5394; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"><span style="background-color: #eeeeee;"></span><span style="background-color: #eeeeee;"><div id="container"> </span></span><br style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;"> <ul> </span><br style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;"> <li> Item </span><br style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;"> <ul> </span><br style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;"> <li> Child </li> </span><br style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;"> </ul> </span><br style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;"> </li> </span><br style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;"> <li> Item </li> </span><br style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;"> <li> Item </li> </span><br style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;"> <li> Item </li> </span><br style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;"> </ul> </span><br style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;"></div> </span></span><br />
Selectorul <i><code>#container > ul </code></i><code>va viza </code><code>doar <i>ul</i>urile care sunt copii directi ai <i>div</i>ului cu <i>id</i>ul "container".</code><br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 7+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">9. CSS Selecotorul ~</span> <br />
<span style="font-family: "Courier New",Courier,monospace; font-size: x-small;">l ~ p { <br />
color: red; <br />
}</span><br />
Acest <i>sibling selector</i> este similar selectorului + dar mai putin strict. In timp ce cu + se poate de selectat doar elementul imediat dupa itemul de baza, acesta din urma este unul mult mai general. Cu ajutorul sau se selecteaza toate elementele ce urmeaza dupa elementul de baza in toata pagina HTML. <br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 7+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">10. CSS Selector [title] </span><br />
<span style="color: #0b5394; font-size: x-small;"><span style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;">a[title] { </span><br style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;"> color: green; </span><br style="background-color: #eeeeee; font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"><span style="background-color: #eeeeee;">}</span> </span></span><br />
Face referinta la un <i>attribute selector</i>, adica, vor fi selectate toate elementele care au un anumit atribut, in cazul nostru atribut <i>title</i>. <br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 7+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">11. CSS Selector [href="foo"] </span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">a[href="http://google.com"] { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> color: olive;</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">} </span></span><br />
In fragmentul descris de mai sus e demonstrat cum de stilizat o ancora care face referinta spre un anumit site.<br />
Acest tip de selectare este destul de rigida, dar uneori se poate de folosit. <br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 7+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">12. CSS Selector [href*="foo"] </span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">a[href*="google"] { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> color: olive; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span><br />
Este asemanator cu selectorul precedent, doar ca, va formata toate elementele pentru care exista in atribut numele descris. In exemplul nostru, va formata toate ancorele in care va gasi pentru atributul <i>href</i> numele "google". De notat ca este o astfel de selectare trebuie folosita cu atentie, deoarece se poate intimpla ca un link de exemplu, sa nu fie: mySubdomain.google.com ci de tipul http://mysite.com/google-page/ si in asa caz el la fel va fi stilizat, deoarece selectorul nostru este general si lui nui pasa unde gaseste cuvintul cheie in link.<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 7+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">13. CSS Selector [href^="http"] </span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">a[href^="http"] { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> background: url(path/to/external/icon.png) no-repeat; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> padding-left: 15px; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span><br />
V-ati intrebat vreodata cum unele site-uri sunt capabile sa afiseze o pictograma mica de linga link-urile externe? Sunt sigur ca ati vazut, aceste pictograme sunt un indiciu excelent ca link-ul dat ne va directiona spre un alt site. Cu ajutorul slectorului [href^="http"] acest lucru este o floare la ureche :). Este cel mai frecvent utilizat pentru a desemna inceputul unui sir. Daca dorim sa vizam toate ancorele HTML care au un atribut href, al carui valoare se incepe cu <i>http</i>, atunci e posibil de realizat in exemplul de mai sus.<br />
<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 7+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">14. CSS Selector [href$=".jpg"] </span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">a[href$=".jpg"] { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> color: red; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span> <br />
Acum, si daca dorim sa selectam sfirsitul unui sir(lucru foarte util atunci cind dorim sa stilizam imaginile de pe o pagina)? Ei bine pentru acest caz avem la dispozitie selectorul $ care ne face referinta la sfirsitul sirului dintr-un atribut. In exemplu se vor formata toate ancorele care sunt legate la o imagine <i>.jpg</i>.<br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 7+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><span style="color: #0b5394; font-size: large;">15. CSS Selectors [data-*="foo"] </span><br />
<span style="background-color: #eeeeee; color: #0b5394;">a[data-filetype="image"] { </span><br />
<span style="background-color: #eeeeee; color: #0b5394;"> color: red; </span><br />
<span style="background-color: #eeeeee; color: #0b5394;">}</span><br />
Dar daca dorim sa selectam toate tipurile de imagini? Am putea sa folosim selctorul din punctul 14:<br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">a[href$=".jpg"], </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">a[href$=".jpeg"], </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">a[href$=".png"], </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">a[href$=".gif"] { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> color: red; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span> <br />
Insa nu este foarte comod acest tip de selectare, si ne complica destul de mult codul CSS. O solutie mai convenabila ar fi sa folosim atribute personalizate, cum ar fi sa adaugam atributul nostru <i>data-filetype</i> pentru fiecare ancora care ne indica un link catre o imagine<br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"><a href="path/to/myImage.jpg" data-filetype="image"> Image Link </a> </span></span><br />
Apoi, avind acest atribut, putem sa folosim o regula care sa vizeze doar acele ancore<br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">a[data-filetype="image"] { </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> color: red; </span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span><br />
<i style="color: #990000;"><b>Browser Compatibility</b></i><br />
<ul><li>IE 7+</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Opera</li>
</ul><div style="color: #38761d;"><b><a href="http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/">Articol preluat si tradus de aici</a></b></div><code> </code>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com2tag:blogger.com,1999:blog-777900911005438889.post-18841514885391256062010-10-29T16:31:00.001+03:002010-11-02T18:22:02.864+02:00Divitis. Ce semnifica si cum de evitat.Atunci cind au inceput sa creeze layouturi cu ajutorul CSS, multi web-designeri au cazut in aceiasi capcana. In loc sa puna tabele peste tot in pagina, au incput sa puna div-uri peste tot :). Deci practicile care stateau la baza crearii layouturilor mai devreme, si care nu erau tocmai bune, au ramas neschimbate, iar imbunatatirile pe care trebuia sa le aduca div-ul shi <i><b>CSS Box Model </b></i>nu au fost intelese cum trebuie de multe persoane din acest domeniu. Acest articol va explica problema acestor obiceiuri, si va propune unele solutii practice.<br />
<span style="color: #0b5394; font-size: large;">Ce este un Div?</span><br />
<i><b>DIV</b></i> este un <b>HTML</b> tag utilizat pentru a contine in el diferite parti a unui HTML document care sunt legate impreuna. Div de fapt raspunde pentru divizarea componentelor unei pagini HTML in blocuri. Cu ajutorul sau putem imparti layoutul in header, footer, sidebar, content sectiuni etc. El nu doar grupeaza elemenele din punct de vedere semantic, dar si permite sa definim reprezentareavizuala utilizind CSS.<br />
<span style="color: #0b5394; font-size: large;">Ce este Divitis?</span><br />
Divitis se refera la utlizarea excesiva a tagului div in pagina, pentru alte scopuri decit divizarea layoutului in sectiuni semnificative.<br />
Din aceste utilizari excesive fac parte:<br />
<ul><li>Inserarea fiecarui HTML obiect din pagina intr-un div, indiferent daca este sau nu nevoie.</li>
<li>Manipulare cu structura paginii pentru a atinge obiectivele vizuale dorite</li>
<li>Folosirea tag-ului DIV pentru marcarea elementelor, care par sa nu corespunda la nici un alt component HTML.<br />
</li>
</ul>Rezultatul final va fi un HTML pagina plina de div-uri care nu va fi cu nimic mai presus decit o pagina creata cu vechea metoda a tabelelor imbricate.<br />
Acst obicei provine de la proasta intelegere a scopului predestinarii tagului div. Multi web designeri sunt tentati sa creada ca div-ul este un tag multi-scop si il utilizeaza pentru rezolvarea problemelor vizuale shi a obiectivelor propuse de multe ori din cauza lipsei de intelegere a HTML si CSS selectors. Uneori si din cauza ideilor gresite despre ce reprezinta <i><b>CSS layout</b></i>ul in realitate dar si din cauza unor abordari de lucru cu CSS creind similaritate cu <i><b>HTML tabel</b></i>e(pur si simplu se schimba celulele din tabel cu div-uri :) ) ceea ce este <br />
total gresit. <br />
<div style="color: #0b5394;"><span style="font-size: large;">De ce Divitis este rau?</span></div>Sunt citeva motive:<br />
<ul><li>Este partial eliminat unul dintre motivele cheie pentru care se trece la layouturile bazate pe CSS si anume: separarea partii vizuale de structura in sine. Aceasta structura nu mai este curata din punct de vedere semantic. Iar divurile care au fost adaugate ulterior nu servesc la nimic</li>
<li>Codul devine foarte complex si mult mai dificil de stilizat cu ajutorul CSS.</li>
<li>Codul devine mult mai dificil de citit iar erorile se infilitreaza mai usor.</li>
</ul><span style="color: #0b5394; font-size: large;">Cum de evitat efectul Divitis?</span> <br />
Exista un numar de strategii pentru a scapa de extradivuri si anume:<br />
1. <b>Folosirea intregului arsenal de taguri HTML</b>. Inainte de a incepe crearea layoutului trebuie sa ne gindim la semanticitatea codului si la ce reprezinta componentele viitorului layout de fapt. Ce este un navigation menu? Este de fapt o list de itemuri. Ce este aceasta propozitie? Nu este chiar un HTML paragraf, dar este tagul HTML cel mai apropiat prin care putem o reprezenta, si cu siguranta nu este un div HTML!<br />
2. <b>Decideti daca DIV este intradevar necesar.</b> Uneori adaugam div-urile din obisnuinta sau din falsa presupunere ca este necesar pentru a accesa continutul din interiorul sau. De exemplu avem un navigation menu care arata cam asa: <br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"><div id="nav"></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <ul></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <li>list item 1</li></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <li>list item 2</li></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <li>list item 3</li></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> ... etc ...</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> </ul></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"></div></span></span>Cu toate acestea div in aces caz nu e necesar, putem simplu sa reprezentam navigation menu in modul urmator:<br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"><ul id="nav"></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <li>list item 1</li></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <li>list item 2</li></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <li>list item 3</li></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> ... etc ...</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"></ul></span></span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"> </span></span><br />
Acest menu se poate de accesat in CSS scriind ul#nav in loc de div#nav ul.<br />
3. <b>Folosirea la putere maxima a CSS selectors.</b> Nu tot timpul e necesar un div container cu o clasa sau ID specif pentru a formata elementele din interior. O recapitulare asupra modului de lucru CSS ne va face sa stilizam direct elementele fara sa le incadram in containere div.<br />
4. <b>Reconsiderarea standartelor pe care le suporta un browser.</b> Nu tot timpul e necesar ca renderingul sa fie 100% egal in toate browserele, mai alescind vine vorba de IE6, uneori e foarte greu sa facem ca un component sa arate exact in toate browserele.<br />
5. <b>Reconsiderarea preferintelor designului.</b> Suna cam dur dar, uneori merita de gindit asupra acestei optiuni. Cind vine vorba de rounded corners scalabile, sunt imposibile de transmis layoutului fara inserarea unor div-uri si span-uri adaugatoare, si atunci apare intrebarea, pe cit timp o sa fie stabil layoutul pentru care am folosit diferite trucuri pentru a reda componente de genul colturilor rotunjite? pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com2tag:blogger.com,1999:blog-777900911005438889.post-16329797825355029612010-10-27T19:02:00.003+03:002010-10-29T13:20:13.174+03:00CSS Faux ColumnsUna dintre intrebarile frecvente pe care si-o pun multe persoane incepetori in domeniul <i><b><span style="color: #0b5394;">WEB Design</span> </b></i>este:<br />
Cum de facut coloane extensibile cu ajutorul<abbr title="Cascading Style Sheets"> <i style="color: #0b5394;"><b>CSS</b></i> </abbr>astfel incit sa aiba o inaltime fixata dar sa se duca in jos odata cu marirea continutului. Este un concept destul de simplu, cu care multi dintre cititori sunt deja familiarizati, dar, pentru cei care inca nu stiu, acest truc se poate dovedi foarte util.<br />
<br />
<a name='more'></a><br />
<br />
<span style="color: #0b5394; font-size: large;"><span style="font-family: inherit;">Vertical stretch - Intindere pe verticala.</span></span><br />
Unul dintre cele mai frustrante proprietati ale <i style="color: #0b5394;"><b><abbr title="Cascading Style Sheets">CSS </abbr></b></i> este faptul ca elementele <i style="color: #0b5394;"><b>HTML</b></i> se intind doar pe verticala pe cit ar trebui in realitate. Adica, daca o imagine cu inaltimea de 200px care se contine intr-un <i style="color: #0b5394;"><b>HTML div,</b></i> atunci div-ul se va intinde in jos cu 200px.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq66iOXV5Le6w1DxoxdDz0fpm6owqvz5pzrYzhyY5irJixHfYwRWy0bRhTqCYYK3EwUNQ1jVVFWhRGtZuOZ85iReDyCi1lfB7YxFjQeTTBfuZ6mVGUtc2S3CVeGdSVvsdFiuLUIjiFQO2K/s1600/css-faux-columns.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq66iOXV5Le6w1DxoxdDz0fpm6owqvz5pzrYzhyY5irJixHfYwRWy0bRhTqCYYK3EwUNQ1jVVFWhRGtZuOZ85iReDyCi1lfB7YxFjQeTTBfuZ6mVGUtc2S3CVeGdSVvsdFiuLUIjiFQO2K/s1600/css-faux-columns.gif" /></a></div>Acest fapt devine o dilema interesanta atunci cind utilizam div-urile pentru a imparti pe sectiuni <i style="color: #0b5394;"><b>Markup</b></i>-ul iar apoi sa utilizam CSS pentru a crea un layout bazat pe coloane. O coloana poate fi mai inalta decit cealalta, asa cum se vede in imaginea din stinga.<br />
In dependenta de volumul continutului din fiecare coloana devine problematic de a mentine aceiasi inaltime pentru ambele coloane atunci cind dorim ca backgroundul sa fie divers pentru ambele blocuri(Fig. din stinga). <br />
<i style="color: #990000;"><b>UPDATED </b></i><br />
Exista citeva modalitati de a face coloanele sa apara cu lungimi egale indiferent de continutul pe care il au. O sa va descriu doar una dintre ele (care trebuie de utilizat cu absolute positioned layout), care sunt destul de simple. Acest mic truc este destul de des folosit pina acum.<br />
<div class="separator" style="clear: both; text-align: left;">Secretul este in a crea si a folosi o imagine care este repetata pe verticala pentru a crea iluziade coloane cu background diferite. Iata un exemplu de imagine: </div><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNix61AoZX7RZc3Kv3F9hRAk3AL2ewZDSSh58Beb_VCD_UYlc0Jqlyn3EcZJB5cwMrPv5c-T_xugKdMuNYsqD4PH1vCv9uD2g0ddAoLE6ZQnXMRQvYfjJvBoUbAMqSJ4nZHY4KAM0GGq6x/s1600/css-column.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNix61AoZX7RZc3Kv3F9hRAk3AL2ewZDSSh58Beb_VCD_UYlc0Jqlyn3EcZJB5cwMrPv5c-T_xugKdMuNYsqD4PH1vCv9uD2g0ddAoLE6ZQnXMRQvYfjJvBoUbAMqSJ4nZHY4KAM0GGq6x/s320/css-column.gif" width="320" /></a></div><div class="separator" style="clear: both; text-align: left;">Cu ajutorul <span style="color: #0b5394;">CSS</span> repetam imagine pe verticala cu ajutorul <i style="color: #0b5394;"><b>background-repeat</b></i>. De exemplu:</div><div class="separator" style="background-color: #eeeeee; clear: both; color: #0b5394; font-family: "Courier New",Courier,monospace; text-align: left;"><code>background: #ccc url(../images/myImage.gif) repeat-y 50% 0; </code></div>La sfirsit vom obtine:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglR67xBUd8J0jIdBme-sQJPPD5bnJgA-61_VtaRtrNbrZEZmNh09IXqul2iIIvkddefBmFCUUJ0vv-S3ELhiAq6JNzAfRXciK9X2P_1ZH2V_bLarLXpdsuBHEuLIhsPAgxt2FkNpBQNrjN/s1600/css-background.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="121" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglR67xBUd8J0jIdBme-sQJPPD5bnJgA-61_VtaRtrNbrZEZmNh09IXqul2iIIvkddefBmFCUUJ0vv-S3ELhiAq6JNzAfRXciK9X2P_1ZH2V_bLarLXpdsuBHEuLIhsPAgxt2FkNpBQNrjN/s320/css-background.gif" width="320" /></a></div>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-50324568737713028172010-10-07T11:03:00.000+03:002010-10-07T11:03:53.928+03:00Internet Explorer si CSS box modelUna dintre diferentele dintre <i style="color: #660000;"><b>Internet Explorer</b></i> si standartele de conformare a Web browserelor ce creeaza o serie de probleme incepatorilor CSS este <i style="color: #660000;"><b>CSS Box Model</b></i>. Deoarece CSS box model este modul cum browserele calculeaza asezarea in pagina si lungime, inaltimea un HTML element in pagina, este un pic mai usor de inteles de ce diferite browsere afiseaza diferit acelasi element ceea ce creaza frustrari si confuzii.<br />
Cum functioneaza principiul CSS Box Model am explicat intr-o postare anterioara, dar totusi simt nevoia sa descriu su care sunt principiile dupa care Internet Explorer calculeaza afisarea in pagina.<br />
<span style="color: #0b5394; font-size: large;">Diagrama CSS Box Model</span><br />
Mai jos este o simpla diagrama care demonstreaza cum dimensiunile unui element sunt interpretate in CSS:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7QXS7ytTDlWQoQMRIC4v60z6CDEyfdolYc0_X3OEAd1-zaUcSfE0gbLg1WVNk5ENluJqGlX5js1UD05a5IjyEJKrBsaC1uSCwsRUroj8YCc0fwZkMfEWmGjoCW1sVGOhhnKEQzG1RV2oP/s1600/css-box-model.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7QXS7ytTDlWQoQMRIC4v60z6CDEyfdolYc0_X3OEAd1-zaUcSfE0gbLg1WVNk5ENluJqGlX5js1UD05a5IjyEJKrBsaC1uSCwsRUroj8YCc0fwZkMfEWmGjoCW1sVGOhhnKEQzG1RV2oP/s320/css-box-model.PNG" width="240" /></a></div><br />
Pentru a simplifica problemele accesate in aceasta postare vom considera ca proprietatea <i>margin</i> este interpretata de toate browserele in acelasi mod, si ne vom axa mai mult pe proprietatile <i>padding</i> si <i>border.</i><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Dupa criteriile <i style="color: #660000;"><b>W3C</b></i>, CSS box model la nivel: <i>block level</i> lungimea totala a unui HTML element in pagina se calculeaza dupa formula:<br />
<div style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right </div>Acelasi concept de calculare se foloseste si pentru inaltime dar, de dragul pastrarii simplitatii nu ma voi opri la el.<br />
<span style="color: #0b5394; font-size: large;">IE Box Model</span><br />
Modul de calculare la <i style="color: #660000;"><b>IE Box Model</b></i> este similar cu cel de la W3C dar exista o importanta diferenta: <i>padding</i> si <i>border</i> nu sunt incluse in formula de calcul.<br />
<div style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">total width = margin-left + width + margin-right</div>Acest lucru semnifica ca daca elementelul HTML are si <i>padding</i> orizontal si/sau <i>border</i>-e suprafata se va micsora pentru a face loc acestor padding-uri si border-e.<br />
<span style="font-size: large;"><span style="color: #0b5394;"><b>Cum de rezolvat problema?</b></span></span><br />
<span style="font-size: small;"><i style="color: #0b5394;"><b>1. Evitarea situatiilor care cauzeaza problema</b></i></span><br />
Acesta este modul meu preferat pentru rezolvarea problemei. Simplu, evit sa specific ambele proprietati <i>width</i> si <i>padding</i> sau <i>border</i> pentru acelasi HTML element. Acest lucru ne asigura ca toate browserele vor utiliza aceiasi lungime totala indiferent de box modelul pe care il folosesc.<br />
Iata un exemplu al rezolvarii problemei prin metoda descrisa mai sus:<br />
<i style="color: #660000;"><b>HTML Exemplu</b></i><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"><div id="news"></span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> <h2>News</h2></span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> <ul></span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> <li></span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> <h3>Articol numarul 1</h3></span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> <p>Lorem ipsum dolor sit amet</p></span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> </li></span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> <li></span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> <h3>Articol numarul 2</h3></span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> <p>Lorem ipsum dolor sit amet</p></span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> </li></span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> </ul></span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"></div></span><br />
Pentru a face ca <i>HTML lista </i>aiba 250px width, border 1px, padding 10px, e nevoie de urmatorul cod CSS:<br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">#news {</span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> padding:10px;</span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> border:1px solid;</span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> width:228px;</span><br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">} </span><br />
In browserele standarte, <i>width</i> total va fi 250px (1px border stinga, + 10px padding stinga + width + 10px padding dreapta + 1px border dreapta). In <i style="color: #660000;"><b>IE 5.5</b></i> si versiunile mai vechi lungimea totala a blocului va fi doar 228px deoarece nu se adauga <i>paddings</i> si <i>borders</i>.<br />
Deci cum se poate de evitat acest lucru? Se poate de pus <i style="color: #660000;"><b>div</b></i>-ul cu id-ul news in alt container, in exemplul nostru sub forma de bloc lateral:<br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"><div id="sidebar"></span><br style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> <div id="news"></span><br style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> ...</span><br style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> </div></span><br style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"></div></span><br style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;" />In asa mod se poate de dat width la blocul sidebar:<br />
<span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">#sidebar {width:250px}</span><br style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">#news {</span><br style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> padding:10px;</span><br style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;"> border:1px solid;</span><br style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;" /><span style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">}</span><br style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;" />Deoarece #news este un element de tip block level, automat se va intinde pe intreaga latime a elementului parinte, in cazul nostru #sidebar.pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-84320113052206557782010-10-05T14:58:00.004+03:002010-10-05T15:02:03.235+03:00CSS Tip Nr. 2. CSS Postioning in citiva pasi.In acest post, voi descrie diferite proprietati ale layout existente in <i style="color: #660000;"><b>CSS</b></i>: <i>position:static</i>, <i>position:relative</i>, <i>position:absolute</i>, si <i style="color: #660000;"><b>CSS float</b></i>.<br />
<br />
<span style="color: #0b5394; font-size: large;">1. position:static</span><br />
Pozitionarea implicita a tuturor elementelor <span style="color: #660000; font-size: small;"><i><b>HTML</b></i></span> este <i>position:static</i>, ceia ce inseamna ca elementul in realitate nu este pozitionat si apar in documentul HTML unde vor, sau sunt impinse.<br />
In mod normal n-am dori sa specificam aceasta regula CSS, numai cu exceptia cind dorim sa suprascriem regula unei pozitionari care a fost stabilita anterior.<br />
<i style="color: #660000;"><b>CSS Exemplu</b></i>:<br />
<pre style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">#container {
position:static;
} </pre><br />
<span style="color: #0b5394; font-size: large;">2. position:relative</span><br />
Daca specificam <i>position:relative</i>, atunci putem folosi: <i>top</i>, <i>bottom</i> si <i>left</i>, <i>right</i> pentru a muta elementul HTML unde normal am dori sa apara.<br />
Urmatorul exemplu va demonstra cum putem muta un HTML element in jos cu 20px, si la stinga cu 40px.<br />
<i style="color: #660000;"><b>CSS Exemplu</b></i>:<br />
<pre style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">#container {
position:relative;
top:20px;
left:-40px;
} </pre><br />
<a name='more'></a>De notat, spatiul unde blocul nostru ar fi fost daca nu l-am fi mutat, acum este un spatiu gol. Urmatorul element nu se va muta atunci cind mutam elementul curent.<br />
La prima vedere se pare ca <i>position:relative</i> nu este foarte util, dar nu este asa, o sa ne convingem mai tirziu.<br />
<br />
<span style="color: #0b5394; font-size: large;">3. position:absolute</span><br />
Cind setam <i>position:absolute</i> atunci elementul este scos de pe pozitia unde se afla si este postat acolo unde noi il directionam.<br />
Daca dorim sa mutam un HTML element in poartea: sus dreapta a paginii HTML atunci e nevoie sa scriem ceva de genul ce e scris in urmatorul exemplu:<br />
<b style="color: #660000;"><i>CSS Exemplu</i></b><br />
<pre style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">#container {
position:absolute;
top:0;
right:0;
width:200px;
}
</pre>De notat ca in browserul IE este un bug: daca specificam o lungime relativa (cum ar fi <i>width:50%</i>) atunci lungimea lungimea va lua ca reper elementul parinte, in loc de pozitionarea elementului.<br />
<br />
<span style="font-size: large;"><span style="color: #0b5394;">4. posion:relative + position:absolute</span></span><br />
Daca setam pentru un <b>div</b> element (il numim container1) <i>position relative</i>, orice alt element care se contine in acest div container1 va fi pozitionat relativ fata de el. Atunci daca setam <i>absolute positioning</i> div-ului copil(subcontainer1) putem sa-l mutam <i>top</i>, <i>right</i> fata de container1.<br />
<div style="color: #660000;"><i><b>Exemplul CSS</b></i></div><pre style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">#container1 {
position:relative;
}
#subcontainer1 {
position:absolute;
top:0;
right:0;
width:200px;
}
</pre><span style="color: #0b5394; font-size: large;">5. Doua coloane position:absolute</span><br />
Dupa cele citite mai sus putem crea un layout cu doua coloane folosind <i>relative </i>si <i>absolute positioning</i>.<br />
<br />
<pre style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
</pre>Un avantaj al absolute positioning este ca putem pozitiona elementele in orice ordine<br />
in pagina indiferent de ordinea in care apar in HTML document.<br />
<pre> </pre><span style="color: #0b5394; font-size: large;">6. Cum pozitionam doua coloane position:absolute?</span><br />
O solutie este sa setam inaltime fixata elementelor. <br />
Insa acest lucrul nu este o solutie viabila pentru majoritatea designelor pentru ca nu se stie<br />
volumul textului care va fi in blocuri sau marimea fontului care va fi utilizata.<br />
<br />
<pre style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">#container {
position:relative;
height:250px;
}
#subcontainer1 {
position:absolute;
top:0;
right:0;
width:200px;
}
#subcontainer2 {
position:absolute;
top:0;
left:0;
width:200px;
}
</pre><br />
<span style="color: #0b5394; font-size: large;">7. CSS Float</span><br />
Pentru coloanele cu inaltimea variabila, <i>absolute positioning</i> nu functioneaza, deci trebuie sa gasim alta solutie.<br />
Putem sa folosim <i style="color: #660000;"><b>float</b></i> pentru a-l putea impinge cit mai departe la stinga sau la dreapta si sa lasam textul din blocul parinte sa-l "inconjoare". De obicei este folosit pentru imagini, dar poate la nevoie fi folosit si pentru blocuri textuale de inaltimi diferite. <br />
<i style="color: #660000;"><b>CSS Exemplu</b></i><br />
<br />
<pre style="background-color: #cccccc; color: #0b5394; font-family: "Courier New",Courier,monospace;">#container {
position:relative;
height:250px;
}
#subcontainer1 {
float:left;
width:200px;}
#subcontainer2 {
position:absolute;
top:0;
left:0;
width:200px;
}
</pre><br />
<span style="color: #0b5394; font-size: large;">8. Aranjarea a doua coloane cu ajutorul CSS float</span><br />
Daca vom seta pentru doua elemente HTML <i>float:left</i> atunci ele se vor "impinge" ambele spre partea stinga a paginii HTML.pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-11782244804890238492010-10-04T16:24:00.000+03:002010-10-04T16:24:26.502+03:00CSS Tip Nr. 1. Resetarea stilurilor cu CSS ResetAceasta este prima parte din seria de articole mentionate in postarea precedenta, in care voi vorbi despre sfaturi si practici in CSS care va vor ajuta la optimizarea lucrului.<br />
Astazi, o sa ating tema resetarii stilurilor CSS. Resetarea stilurilor CSS, denumit in mod obisnuit <b style="color: #660000;"><i>CSS Reset</i></b><span style="color: #660000;"><i><span style="color: black;"> sau</span></i></span><span style="color: #660000;"><i> <b>Reset CSS </b></i><span style="color: black;">este procesul de resetare, sau mai bine zis de setare a stilurilor elementelor la o valoare initiala astfel incit sa evitam valorile implicite care le pun browserele HTML elementelor.</span></span><br />
<span style="color: #660000;"><span style="color: black;"><span style="color: #0b5394; font-size: large;">CSS Reset evita neconcordantele dintre browsere </span></span></span><br />
De exemplu, folosim o ancora <a> in HTML document. De obicei browserele cum ar fi Firefox sau Internet Explorer afiseaza aceste ancore cu culoare albastra si subliniate. Dar, in urma cu citiva ani cineva crease un browser,nu le-a placut modul traditional de afisare a linkurilor asa ca au fcut ca ancorele sa fie de culoare rosie si fontul: bold. Daca vom folosi tehnica <i style="color: #660000;"><b>CSS Reset </b></i>si vom alege noi valorile initiale a elementelor vom evita in asa mod surprizele neplacute pe care ni le ofera browserele prin afisarea unor linkuri de culoare rosie si fontul bold :)<br />
<b>Un simplu exemplu:</b><br />
Cum sunt afisate paragrafele: <p><b> </b>in browsere. Am plasat intr-un container <i style="color: #660000;"><b>div</b></i> trei pargrafe carora nu le-am setat nici un stil CSS, doar containerului iam setat <i>backgroung</i> si <i>border</i> astfel ca sa fie evidentiat mai bine diferentele, priviti in imagine neconcordantele dintre 2 browsere:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwT4hesVZ8DYHthTkDXYQ1PIKXbWFpSosmamkTov8K8H7jKOz0qbJdmTJd113-FUSS5m5GvkvECc3f_eQIrI3C8S9frNFz0n_72uLUnwLkK-XYW5y0ulneMR1Jg0xljFdGNwTuSZ__gaku/s1600/CSS-reset.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwT4hesVZ8DYHthTkDXYQ1PIKXbWFpSosmamkTov8K8H7jKOz0qbJdmTJd113-FUSS5m5GvkvECc3f_eQIrI3C8S9frNFz0n_72uLUnwLkK-XYW5y0ulneMR1Jg0xljFdGNwTuSZ__gaku/s320/CSS-reset.png" width="320" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Implicit, in <i style="color: #660000;"><b>Firefox</b></i> este setat un spatiu intre primul rind al paragrafului si container. In <i style="color: #660000;"><b>Internet Explorer</b></i> acest spatiu lipseste!<br />
Deci, apare intrebarea: care browser afiseaza mai corect? Raspunsul: <b>NU</b> Conteaza! Conteaza doar faptul ca in dependenta de browser, daca nu folosim CSS Reset, pagina se va afisa in mod diferit si astfel nu mai avem cross browsing pentru pagina data. Normal, ca exemplul cu paragrafele este unul trivial, in realitate astfel de cazuri sunt mult mai multe, <i>padding</i>, <i>margin</i>, <i>line-height</i> si alte atribute sunt cauza pentru care pagina arata diferit de la browser la browser.<br />
<br />
<span style="color: #0b5394; font-size: large;">CSS reset, de unde a inceput...</span><br />
Conceptul de CSS Reset a fost prima data pomenit cu mult timp in urma(pe cind inca dinozaurii traiau in Internet) de catre <i style="color: #660000;"><b>Andrew Krespanis</b></i> intr-un articol de-al sau in care sugera de a utiliza un CSS selector universal la inceputul fisierului de stiluri pentru a selecta toate elementele si de a le atribui margin, padding: 0.<br />
Cam asa ceva:<br />
<br />
<pre style="background-color: #cccccc; font-family: "Courier New",Courier,monospace;">* {
margin: 0;
padding: 0;
} </pre>Selectorul universal (*) actioneaza ca un model, ca o expresie regulata in programare.<br />
Astfel incit * nu este precedat de alt selector, toate margin si padding le sunt atribuite valoarea 0. Aplicind acest selector cu valorile salede mai pentru exemplul cu paragraful, o sa obtinem lichidarea spatiului dintre conatiner si paragraf.<br />
Odata ce am scapat de spatiile neconsistente, putem sa trecem la stilizarea paragrafelor(ca sa nu ne departam de exemplu) asa cum dorim:<br />
<br />
<pre style="background-color: #cccccc; font-family: "Courier New",Courier,monospace;">* { margin:0; padding:0; }
p { margin:5px 0 10px 0; } </pre><span style="color: #0b5394; font-size: large;"></span><br />
<span style="color: #0b5394; font-size: large;"><br />
</span><br />
La scurt timp dupa <i><b><span style="color: #660000;">Andrew Krespanis</span>, </b></i>un alt guru CSS, <i style="color: #660000;"><b>Eric Meyer</b></i> a continuat dezvoltarea conceptului de CSS Reset pentru <i>margins</i> si <i>paddings</i>, pentru ca mai apoi sa cuprinda si <i>line-height</i>, <i>font styles</i> si <i>list styles</i><br />
<span style="color: #0b5394; font-size: large;">Sfaturi pentru aplicarea CSS Reset</span><br />
1. Incepeti prin a va decide cum, si stilurile caror elemente anume au nevoie de a fi resetate.<br />
2. CSS Reset trebuie sa fie primul lucru pe care browserul trebuie "sa-l vada".<br />
3. Creati un fisier CSS aparte pentru CSS Reset.<br />
4. Evitati pe cit posibil utilizarea selectorului universal<br />
5. Evitati redundanta stilurilor din CSS Reset si celelalte stiluri.pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-4098051558626291132010-10-02T13:03:00.000+03:002010-10-02T13:03:01.681+03:00CSS 15 Articole - de stiut pentru incepatori. IntorducereUrmatoarele postari pe blog vor fi 15 articole care eu am considerat ca trebuie citite si stiute de orice incepator <i style="color: #660000;"><b>CSS</b></i>. O sa ma stradui sa le expun in decursul saptaminii viitoare. Dupa aceasta o sa ma redirectionez deja spre <i style="background-color: white; color: #660000;"><b>JavaScript</b></i> si <i style="color: #660000;"><b>JQuery</b></i>. Totusi nu o sa uit de CSS si HTML, iar daca cineva are intrebari la aceste tehnologii si nu numai, scrieti-le in comentarii, imi va face mare placere sa va ajut.<br />
Cu timpul o sa ma stradui sa-mi sistematizez materialele postate pe blog, poate o sa trec la un domen comercial, dar aceasta cu timpul :) Pina atunci, lectura placuta, si astepta intrebarile voastre.pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com1tag:blogger.com,1999:blog-777900911005438889.post-37192144414582147752010-09-29T20:35:00.001+03:002010-10-01T17:52:15.248+03:00CSS Relative position<i style="color: #0b5394;"><b>CSS Relative positioning </b></i>este relativ, usor de inteles :) . Daca pozitionam, relativ, un <i style="color: #0b5394;"><b>HTML element</b></i> el va sta exact acolo unde-l punem. Putem atunci sa impingem relativ elementul setind punctului de start pozitia pe vertical si pe orizontal. Daca o sa setam<b> <i style="color: #0b5394;">top</i></b> pozitia sa fie de 20px, atunci HTML Elementul se va pozitiona cu 20px sub pozitia initiala, setind pozitia <i style="color: #0b5394;"><b>left</b></i> cu 20px, atunci elementul se va muta ai la dreapta creind un spatiu de 20px fata de pozitia de inceput. Iata si <b style="color: #0b5394;">CSS exemplul</b>:<br />
<b style="background-color: #eeeeee; color: #0b5394;"><span style="font-family: "Courier New",Courier,monospace; font-size: x-small;">#myBox { <br />
position: relative; <br />
left: 20px; <br />
top: 20px; <br />
}</span></b><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRjCZIsPO9jrCEo3TdqcmcVlpJNc2Qwae-6GG53zRxvZEsqZQlS_VQMozn8ytACk6KzK0zb5O4wKDPYsZWZjvNuZYwxfdHycdV_L5Dkwu7k8RTpKDq7ibHqYSKrxn3abfRVoey_BdANUYf/s1600/css-position.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRjCZIsPO9jrCEo3TdqcmcVlpJNc2Qwae-6GG53zRxvZEsqZQlS_VQMozn8ytACk6KzK0zb5O4wKDPYsZWZjvNuZYwxfdHycdV_L5Dkwu7k8RTpKDq7ibHqYSKrxn3abfRVoey_BdANUYf/s320/css-position.PNG" width="320" /></a></div>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-63677959813837261222010-09-28T13:53:00.001+03:002010-09-28T13:53:39.899+03:00CSS Box model<b style="color: #0b5394;">Box model</b> este o piatra de temelie a tehnologiei <b style="color: #0b5394;">CSS</b> si dicteaza cum trebuie sa fie dispuse elementele, si, intr-o anumita masura cum trebuie sa interactioneze aceste elemente intre ele. Fiecare element in pagina este considerat ca o cutie dreptunghiulara formata din continutul elementului,<i style="color: #0b5394;"><b> padding</b></i>, <i><b><span style="color: #0b5394;">border</span></b></i>, si <i style="color: #0b5394;"><b>margin</b></i>.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpqsPN7RQ9EkjdKvB7kScdw8z9pIWV_2EyduD8vFo5lt6RWRXtb-SKkXazuxaJ_q0obPc_rBRi3gNNEXqtjeWfHvhn-HVRbtPPCiPNIyeu0aXYnm4a1X71eMXg_YGrJnVa-2hcVFNMi6z6/s1600/box-model.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpqsPN7RQ9EkjdKvB7kScdw8z9pIWV_2EyduD8vFo5lt6RWRXtb-SKkXazuxaJ_q0obPc_rBRi3gNNEXqtjeWfHvhn-HVRbtPPCiPNIyeu0aXYnm4a1X71eMXg_YGrJnVa-2hcVFNMi6z6/s320/box-model.PNG" width="320" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<i style="color: #0b5394;"><b>Padding</b></i> este aplicat in jurul suprafetei cu continut. Daca adaugam un <i style="color: #0b5394;"><b>background</b></i> unui element atunci backgroundul va fi aplicat suprafetei compusa din continut si <i style="color: #0b5394;"><b>padding</b></i>. In acest mod, padding este folosit deseori pentru a crea un cadru in jurul continutului. Adaugind <i style="color: #0b5394;"><b>border</b></i> unui element inseamna a aplica o linie in afara suprafetei cu cintinut si padding. Aceste linie sunt de diferite stiluri: <i style="color: #0b5394;"><b>solid</b></i>, <i style="color: #0b5394;"><b>dotted</b></i>, <i style="color: #0b5394;"><b>dashed</b></i>.<br />
In afara border se afla suprafata creata de <i style="color: #0b5394;"><b>margin</b></i>. Margin sunt transparente si nu pot fi vazute, in general sunt folosite pentru a manipula spatiile dintre elemente.pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com1tag:blogger.com,1999:blog-777900911005438889.post-50957998037947969402010-09-28T12:39:00.000+03:002010-09-28T12:39:10.748+03:00CSS Visual formatting model.Trei dintre cele mai importante concepte <i style="color: #0b5394;"><b>CSS</b></i> pentru a intelege aceasta tehnologie sunt: <i style="color: #0b5394;"><b>floating</b></i>, <i style="color: #0b5394;"><b>positioning</b></i> si <i style="color: #0b5394;"><b>box model</b></i>. Aceste concepte controleaza modul in care sunt vizualizate elementele pe o pagina, formind baza <i style="color: #0b5394;"><b>CSS layout</b></i>. Daca sunteti familiarizati sa controlati CSS layoutul paginilor cu ajutorul <i style="color: #0b5394;"><b>HTML table</b></i> o sa vi se para stranii la inceput. De fapt, majoritatea celor care activeaza in domeniul <i style="color: #0b5394;"><b>WEB</b></i> au incercat sa dezvolte site-uri folosind CSS inainte ca sa inteleaga pe deplin complexitatea <i style="color: #0b5394;">box model</i>, diferenta intre <b><i style="color: #0b5394;">absolute</i></b> si<i style="color: #0b5394;"><b> relative posiotioning</b></i>, si cum in realitate functioneaza <span style="color: #0b5394;">float</span> si <i style="color: #0b5394;"><b>clear</b></i> in CSS. Odata ce o sa intelegeti cit de cit aceste concepte, dezvoltarea layouturilor cu ajutorul CSS o sa fie mult mai usoara.pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-85446030896984119262010-09-25T13:34:00.000+03:002010-09-25T13:34:37.384+03:00Top 10 HTML tag-uri neutilizate. HTML BlockquoteTagul <i style="color: #0b5394;"><b>BLOCKQUOTE</b></i> este destinat pentru evidentierea citatelor lungi. Textul continut in acest tag de obicei se afiseaza ca un bloc cu margins din stinga si dreapta de aproimativ 40 px.<i><b>Blockquote</b></i> se poate folosi impreuna cu tagul <i><b>CITE</b></i>. Exemplu <i style="color: #0b5394;"><b>HTML</b></i> Blockquote:<br />
<br />
<span style="background-color: #eeeeee; color: #0b5394; font-family: "Courier New",Courier,monospace; font-size: x-small;"><blockquote><br />
Acesta este un exemplu de citata lunga. Asa citate trebuie introduse in tagul blockquote.<br />
</blockquote></span>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-29529679751692101992010-09-25T12:39:00.000+03:002010-09-25T12:39:32.344+03:00Top 10 HTML tag-uri neutilizate. HTML cite<span style="color: #0b5394;"><span style="color: black;">Tagul</span></span><i style="color: #0b5394;"><b> CITE</b></i> se foloseste pentru marca o citata sau o referinta catre alt material informativ. In general cuvintele continute in cite sunt stilizate de browser ca italic, iar la tinerea cursorului deasupra cuvintelor citate se va afisa un <i>tooltip</i> cu continutul textual care a fost scris in atributul <i style="color: #0b5394;">title</i> a acestui tag. Mai jos traditional gasiti un exemplu HTML care arata cum se poate de folosit CITE:<br />
<br />
<span style="background-color: #eeeeee; color: #0b5394; font-family: "Courier New",Courier,monospace; font-size: x-small;">Urmatoarele cuvinte <cite title="Afirmatie facuta de pseudomus! 25 Septembrie 2010">sunt folosite</cite> pentru a demonstra ca cite exista!</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj60aPY9-0MOn89FK5RvpinBtZJ3ab4quyHcDUgVKF9wHS65qag2HxDjc8BSDZTaoG5Yo6qBvFTBTyOiThxuNrJGZpjON_QyX7OzTp6DIQuSq8JLWoTpNZRDMIA_IyQODI-BE5o7nk-rEO3/s1600/cite.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="63" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj60aPY9-0MOn89FK5RvpinBtZJ3ab4quyHcDUgVKF9wHS65qag2HxDjc8BSDZTaoG5Yo6qBvFTBTyOiThxuNrJGZpjON_QyX7OzTp6DIQuSq8JLWoTpNZRDMIA_IyQODI-BE5o7nk-rEO3/s400/cite.PNG" width="400" /></a></div>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-74096285824284501542010-09-23T19:58:00.001+03:002010-09-23T19:58:41.215+03:00Top 10 HTML tag-uri neutilizate. HTML dlTagul <i style="color: #0b5394;"><b>DL</b></i> defineste o lista de definitii. Practic, <i style="color: #0b5394;"><b>dl</b></i> se foloseste impreuna cu <i style="color: #0b5394;"><b>dt</b></i> care defineste un element in lista si cu <i style="color: #0b5394;"><b>dd</b></i> care descrie elementul definit in lista. Acest lucru face tagul <i style="color: #0b5394;"><b>dl</b></i> foarte util pentru foarte multe probleme cum ar fi: dictionare stilizate sub forma de liste, detalii de contacte etc. <br />
Exemplu HTML <i style="color: #0b5394;"><b>dl</b></i>:<br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"><dl></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <dt>Email</dt></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <dd>email@test.com</dd></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <dt>Location</dt></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <dd>Here</dd></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <dt>Phone</dt></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <dd>+0123123123</dd></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <dt>Skype</dt></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <dd>myname</dd></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"></dl></span></span><br />
<br />
Este o forma de prezentare a datelor de contact.pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com5tag:blogger.com,1999:blog-777900911005438889.post-2564873170276564092010-09-23T19:37:00.000+03:002010-09-23T19:37:41.637+03:00Top 10 HTML tag-uri neutilizate. OptgroupTag-ul <i style="color: #0b5394;"><b>OPTGROUP</b></i> se foloseste pentru a grupa elementele <i style="background-color: white; color: #0b5394;"><b>option</b></i> dintr-un <i style="background-color: white; color: #0b5394;"><b>select</b></i> (lista dropdown). Acesta element permite crearea unor liste lungi de optiuni pentru utilizatori, usureaza navigare prin optiuni si manipularea cu aceste optiuni.<br />
Exemplu HTML <i style="color: #0b5394;"><b>optgroup</b></i> :<br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"><select></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <optgroup label="Masini suedeze"></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <option value="volvo">Volvo</option></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <option value="saab">Saab</option></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> </optgroup></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <optgroup label="Masini germane"></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <option value="mercedes">Mercedes</option></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> <option value="audi">Audi</option></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> </optgroup></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"></select></span></span><br />
Un pic de formatare <b>CSS</b> si avem un simpatic dropdown list.pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-44643539876452343502010-09-23T16:09:00.000+03:002010-09-23T16:09:42.155+03:00Top 10 HTML tag-uri neutilizate. Fieldset & LegendTagul <i style="color: #0b5394;"><b>FIELDSET</b></i> este utilizat pentru a grupa impreun, din punct de vedere logic, elementele intr-o forma. Cu alte cuvinte,<span style="background-color: white; color: #0b5394;"> </span><i style="background-color: white; color: #0b5394;"><b>fieldset</b></i> este ca o cutie care separa elementele ce sunt incluse in el, de alte elemente sau fieldset-uri ale formei.<br />
Tagul <i style="color: #0b5394;"><b>LEGEND</b></i> este utilizat pentru putea intr-un fel da titluri sau caption fieldest-ului caruia apartine.<br />
Atit tagul <b style="color: #0b5394;">fieldset</b> cit si <b style="color: #0b5394;">legend</b> pot, si trebuie sa fie utilizate in forme. In acest mod aceste componente de permit sa descriem si sa divizam o forma in sectiuni relevante.<br />
Iata un exemplu de utilizare a acestor doua taguri:<br />
<span style="background-color: #eeeeee; color: #0b5394; font-family: "Courier New",Courier,monospace; font-size: x-small;"><form><br />
<fieldset><br />
<legend>Personal Details</legend><br />
<label for="firstname">First Name</label><br />
<input type="text" id="firstname" /><br />
<label for="lastname">Last Name</label><br />
<input type="text" id="lastname" /><br />
</fieldset><br />
</form></span>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-33271420332666370672010-09-21T16:43:00.001+03:002010-09-21T16:43:46.584+03:00Top 10 HTML tag-uri neutilizate. 1 HTML label tagTagul <i style="color: #0b5394;"><b><LABEL></b></i> defineste o eticheta, o legatura, pentru un element de tipul <i style="color: #0b5394;"><b>input</b></i> intr-o forma. Aceasta lecatura este necesara pentru a schimba valorile formei atunci cind activam cursorul mouseului pe text. Apasind pe un cimp textual activam in acelasi timp si labelul care este legat de acest cimp. Acest lucru este valabil si pentru <i style="color: #0b5394;">checkbox</i> si <i style="color: #0b5394;">radio buttons</i>.<br />
<i style="color: #0b5394;"><b>Label </b></i> trebuie pus in cod linga controalele relevante ale formei. Unica cerinta reala este pentru tagul <b style="color: #0b5394;"><label></b> este atributul "<b style="color: #0b5394;">for</b>" valoarea caruia trebuie sa fie egala cu valoarea id-ului ale controlului pe care dorim sa-l legam de label. Acest lucru permite imbunatatirea uzabilitatii pentru browsere.<br />
Iata un exemplu:<br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"><label for="name">Your name</label></span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"><input type="text" id="name"/></span></span>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-41356793078211471882010-09-21T10:29:00.000+03:002010-09-21T10:29:15.890+03:00Top 10 HTML tag-uri neutilizate. Avancronica.<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoCA39EaZ7PGXEzdXgdKzKpu6Wap8MdWi_kZxx0hUG-mVemwUxZWItakFXA-_BooOFJ0N2D8l6tjEaRTsw8syukGbkO5dBFcghtPNur9EoIHWX9AcXxQ6qEFJiPMK-Y1NWif-CsElCv9rS/s1600/html.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoCA39EaZ7PGXEzdXgdKzKpu6Wap8MdWi_kZxx0hUG-mVemwUxZWItakFXA-_BooOFJ0N2D8l6tjEaRTsw8syukGbkO5dBFcghtPNur9EoIHWX9AcXxQ6qEFJiPMK-Y1NWif-CsElCv9rS/s200/html.png" width="200" /></a></div>Toata lumea discuta din domeniul <i style="color: #0b5394;"><b>Web Programming & Design</b></i> este preocupata la moment cu implementarea <b style="color: #0b5394;">HTML 5</b> si <b style="color: #0b5394;">CSS 3</b><span style="color: #0b5394;"><span style="color: black;"> in </span></span>in web aplicatiile lor. Dar multi dintre acestia, printre care si eu pina nu demult, nu foloseau nici macar tot arsenalul pus la dispozitie de <b style="color: #0b5394;">W3C</b>, adica, exista o serie de taguri HTML care au un rol destul de important in crearea layoutului unei web aplicatii, dar care intr-un fel sunt "subesctimate" de developer. In postarile urmatoare o sa scriu despre 10 tag-uri care nu sunt folosite la potentialul maxim, care intradevar ar face mai corect codul HTML din punct de vedere semantic, situl mai utilizabil, si in general ar face totul mai usor atit pentru developeri cit si pentru utilizatorul final.pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com2tag:blogger.com,1999:blog-777900911005438889.post-47285291552231102672010-09-20T13:59:00.001+03:002010-09-20T14:01:10.439+03:00CSS. Cross browser inline blockIn exemplul de azi o sa va arat cum de facut un bloc de imagini, cu ajutorul <b>CSS</b>. Acest exemplu este <i><b>cross browser</b></i>, si este foarte folositor pentru cele mai diferite domenii, incepind cu afisarea unei galerii foto si terminind cu afisarea produselor dintr-un e-magazin. Ca sa fie mai pe inteles am atasat un screenshot la exemplu.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4xcQ2tJbCsm5EJxfCADdokbYkxnoIh7DDuS9hpGCyxoe8MaHkn-RNMIQPYiX7Mf46Y_f77UQHwAwFmQjupayBkrjXGXsIWErMPe6bODUmbXVHPYJGLgfsmR85LEFLGaPoCi39kTyupKwY/s1600/css-inline-block.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4xcQ2tJbCsm5EJxfCADdokbYkxnoIh7DDuS9hpGCyxoe8MaHkn-RNMIQPYiX7Mf46Y_f77UQHwAwFmQjupayBkrjXGXsIWErMPe6bODUmbXVHPYJGLgfsmR85LEFLGaPoCi39kTyupKwY/s320/css-inline-block.PNG" width="320" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><i><b>Cod HTML</b></i><br />
<span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="background-color: #eeeeee; color: #0b5394;"> <ul></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <h4>Image N.1</h4></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <img src="images/teren.png"/></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <h4>Image N.2</h4></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <img src="images/xp1.png"/></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <h4>Image N.3</h4></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <img src="images/tv.png"/></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <h4>Image N.4</h4></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <img src="images/foto.png"/></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <h4>Image N.5</h4></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <img src="images/wc.png"/></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <h4>Image N.6</h4></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <img src="images/healt.png"/></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <h4>Image N.7</h4></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <img src="images/cmd.png"/></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <h4>Image N.8</h4></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <img src="images/notepad.png"/></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </li></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </ul></span></span><br />
<br />
<i><b>Cascade Style Sheets</b></i><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: Arial,Helvetica,sans-serif;">ul{</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> width:500px;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> background-color:#eaeaea;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">} </span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">h4{</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> padding:0;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> margin:0;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> background-color:white;</span></span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">}</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">div{</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> padding:4px;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">}</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">img{</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> width:100px;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> height:100px;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> background-color:white;</span></span><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: Arial,Helvetica,sans-serif;"> color:olive; </span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">}</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> li {</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> border:solid 1px silver;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> display: -moz-inline-stack;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> display: inline-block;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> margin: 5px;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> zoom: 1;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> *display: inline;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> _height: 250px;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> }</span></span>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-48804139480820607692010-09-17T15:33:00.004+03:002010-09-17T15:35:14.311+03:00Top 10 CSS FrameworksPentru cei care nu stiu ce semnifica un <i style="color: #0b5394;"><b>CSS Framework</b></i> iata o scurta definitie:<br />
<blockquote>Un <i>CSS Framework</i> este o librarie care permite o mai usoara, mai standartizata stilizare a unei pagini web utilizint <i>Cascading Style Sheets</i>, adica <i>CSS</i>. Ca si frameworkurile pentru obisnuitele limbaje de programare, frameworkurile <i>CSS</i> contin un anumit numar de optiuni gata modelate pentru stilizarea si proiectarea web paginilor.</blockquote><i><b> Avantajele CSS Frameworks</b></i><br />
<ul><li>Problemele legate de crossbrowsing sunt reduse.</li>
<li>Este foarte util pentru incepatori.</li>
<li>Ne scapade erorile comune(positionare, floating), marind prin asta productivitatea designului.</li>
</ul><i><b>Dezavantaje CSS Frameworks</b></i> <br />
<ul><li>Pot exista anumite bug-uri in librarie.</li>
<li>Pentru a intelege principiile unui anumit framework va fi nevoie de timp</li>
<li>CSS-ul nu va fi putut oformat din punct de vedere semantic</li>
</ul><div style="color: #0b5394;"><i><b>Iata cele mai raspindite 10 CSS Frameworkuri:</b></i><br />
<a name='more'></a><i><b></b></i></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig57wi09A5Y1Kyf-ylVYDUsEk1QJpgWGCVeYo2M41bz4rt6tr8TT_RN5d2_M7Q7S7bujAk_BocuqNLjdNDOr10KI6iHVjBNj-pTQCRKRmiTiKLoi-9lFocOUO0_ksu9bALRz9I1PzUh9kp/s1600/blueprint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br />
</a></div><i style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><b><span style="font-size: large;">1.</span></b></i> <a href="http://www.blueprintcss.org/"><b style="color: #38761d;"><i><span style="font-family: Georgia,"Times New Roman",serif; font-size: large;">Blueprint </span></i></b></a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig57wi09A5Y1Kyf-ylVYDUsEk1QJpgWGCVeYo2M41bz4rt6tr8TT_RN5d2_M7Q7S7bujAk_BocuqNLjdNDOr10KI6iHVjBNj-pTQCRKRmiTiKLoi-9lFocOUO0_ksu9bALRz9I1PzUh9kp/s1600/blueprint.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig57wi09A5Y1Kyf-ylVYDUsEk1QJpgWGCVeYo2M41bz4rt6tr8TT_RN5d2_M7Q7S7bujAk_BocuqNLjdNDOr10KI6iHVjBNj-pTQCRKRmiTiKLoi-9lFocOUO0_ksu9bALRz9I1PzUh9kp/s200/blueprint.png" width="200" /></a></div><br />
<br />
<br />
<br />
<br />
<i style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><b><span style="font-size: large;">2.</span></b></i> <a href="http://developer.yahoo.com/yui/grids/"><span style="color: #38761d; font-family: Georgia,"Times New Roman",serif; font-size: large;"><i><b>YUI Grids</b></i></span></a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHHDBm-i5wnlsb6u_OeStrmzoU6rjDnLwMKt7-MpvPUCuFU1Ss23XIlV15tSCnrtR_GKOUiCRHuAJSt96g3OZ3Uav87J73N42zGVhuQ7FsUYDNpkEN3AGZIpmmOOYCFKdbba56Ctwqnca/s1600/yui+grids.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHHDBm-i5wnlsb6u_OeStrmzoU6rjDnLwMKt7-MpvPUCuFU1Ss23XIlV15tSCnrtR_GKOUiCRHuAJSt96g3OZ3Uav87J73N42zGVhuQ7FsUYDNpkEN3AGZIpmmOOYCFKdbba56Ctwqnca/s200/yui+grids.gif" width="200" /></a></div><br />
<br />
<br />
<br />
<i style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><b><span style="font-size: large;">3.</span></b></i> <a href="http://www.yaml.de/en/"><span style="color: #38761d; font-family: Georgia,"Times New Roman",serif; font-size: large;"><i><b>Yaml</b></i></span></a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk_WO5yA2q44xGC6Na6w1r4Bbs5sGN82Zo362QkXX0jMH0OoQLuo0UrpcYNUhzagKodLHj8a_DzNDPOzn8zuFzqkt_FYMob7FWSudNK2Ndwpi4L1g5HmEnwRRP12nEPMnMKaep2zrQXn0v/s1600/yaml-css-framework.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk_WO5yA2q44xGC6Na6w1r4Bbs5sGN82Zo362QkXX0jMH0OoQLuo0UrpcYNUhzagKodLHj8a_DzNDPOzn8zuFzqkt_FYMob7FWSudNK2Ndwpi4L1g5HmEnwRRP12nEPMnMKaep2zrQXn0v/s1600/yaml-css-framework.jpg" /></a></div><br />
<br />
<br />
<br />
<br />
<span style="color: #38761d; font-family: Georgia,"Times New Roman",serif; font-size: large;"><i><b>4. <a href="http://www.blogger.com/goog_2062907976" style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"></a></b></i></span><a href="http://elasticss.com/"><span style="font-family: Georgia,"Times New Roman",serif; font-size: large;"><i style="color: #38761d;"><b>Elastic CSS</b></i></span></a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXhLDQlO7aDYWq6cT8Ggqs5jA8a1nyweWy5IHWY39k0K1i73RCimu49hC3AckOKaXGjvw27jYI3kFXZTdzS9wc2XZC3pbl5WenwgJSQr7OhT_7daQNk7kriLJ2TiHhXshO9wt25XEvw46V/s1600/elastic-css-framework.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXhLDQlO7aDYWq6cT8Ggqs5jA8a1nyweWy5IHWY39k0K1i73RCimu49hC3AckOKaXGjvw27jYI3kFXZTdzS9wc2XZC3pbl5WenwgJSQr7OhT_7daQNk7kriLJ2TiHhXshO9wt25XEvw46V/s200/elastic-css-framework.png" width="200" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<span style="color: #38761d; font-family: Georgia,"Times New Roman",serif; font-size: large;"><i><b>5. <a href="http://960.gs/" style="color: #38761d;">960 Grid system</a></b></i></span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq73kYU7crUYjAGUyq1nLZrLDKldEzTPXEOeHIkmoT2DHxC7KAmPCQFX2nUyxRzaqOVAABKbePv39L9t8wG6M5CD249uiBBRvhyphenhyphen1eudGa2CIJawSWeVWmbcI9AR33wStSd6TKHSMxB-Jv5/s1600/960-grid-system-css-framework.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq73kYU7crUYjAGUyq1nLZrLDKldEzTPXEOeHIkmoT2DHxC7KAmPCQFX2nUyxRzaqOVAABKbePv39L9t8wG6M5CD249uiBBRvhyphenhyphen1eudGa2CIJawSWeVWmbcI9AR33wStSd6TKHSMxB-Jv5/s200/960-grid-system-css-framework.jpg" width="200" /></a></div><br />
<b><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"></span></span></span></span></span><i><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"><br />
</span></span></span></span></span></i></b><br />
<b><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"></span></span></span></span></span><i><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"><br />
</span></span></span></span></span></i></b><br />
<b><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"></span></span></span></span></span><i><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"><br />
</span></span></span></span></span></i></b><br />
<b><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"></span></span></span></span></span><i><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"><br />
</span></span></span></span></span></i></b><br />
<b><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"></span></span></span></span></span><i><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"></span></span></span></span></span></i></b><br />
<br />
<span style="color: #38761d; font-family: Georgia,"Times New Roman",serif; font-size: large;"><i><b>6. </b></i></span><a href="http://code.google.com/p/emastic"><span style="color: #38761d; font-family: Georgia,"Times New Roman",serif; font-size: large;"><i><b>Emastic</b></i></span></a><b><i><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"></span></span></span></span></span></i></b><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwfyxm8LftmaJWkTv1Q-SF6vuglc-wk-hCuBxC-6E6wfI8T222HrKKGthZcBeEup5vpF2D7cdrWqV1YoHhNy_BrpzvDU_H1TyOK4UP23Kw2UNcDZLKADWvSPOmu115Acdyen9zd_Jkiu1/s1600/emastic-css-framework.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="52" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwfyxm8LftmaJWkTv1Q-SF6vuglc-wk-hCuBxC-6E6wfI8T222HrKKGthZcBeEup5vpF2D7cdrWqV1YoHhNy_BrpzvDU_H1TyOK4UP23Kw2UNcDZLKADWvSPOmu115Acdyen9zd_Jkiu1/s200/emastic-css-framework.jpg" width="200" /></a></div><b><i><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"><br />
</span></span></span></span></span></i></b><br />
<b><i><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"><br />
</span></span></span></span></span></i></b><br />
<b><i><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"><br />
</span></span></span></span></span></i></b><br />
<span style="color: #38761d; font-size: large;"><i style="font-family: Georgia,"Times New Roman",serif;"><b>7. </b></i></span><a href="http://wedoui.com/"><span style="color: #38761d; font-family: Georgia,"Times New Roman",serif; font-size: large;"><i><b>Snowdust</b></i></span></a><b><i><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"></span></span></span></span></span></i></b><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0k1tE2UkGiTPEsncLwByFmlXmHZWOaPTLth-GijP_HpDR6udJcbsDwUi3NyMXXniTyA_l5ffqD_88WCZNKmS0zdP7Vk17NWNFUykUdzbs_1ZJ4DU2YLmZ2UYLhCOMW2k59xtv99tTkYY/s1600/snowdust-css-framwork.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0k1tE2UkGiTPEsncLwByFmlXmHZWOaPTLth-GijP_HpDR6udJcbsDwUi3NyMXXniTyA_l5ffqD_88WCZNKmS0zdP7Vk17NWNFUykUdzbs_1ZJ4DU2YLmZ2UYLhCOMW2k59xtv99tTkYY/s200/snowdust-css-framwork.gif" width="200" /></a></div><b><i><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"><br />
</span></span></span></span></span></i></b><br />
<b><i><span style="font-size: large;"><span style="color: purple; font-family: Georgia,"Times New Roman",serif;"><span style="color: black;"><span style="font-weight: normal;"><span style="color: black;"><br />
</span></span></span></span></span></i></b><br />
<br />
<br />
<div style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: large;"><i><b>8. <a href="http://github.com/anthonyshort/csscaffold" style="color: #38761d;">Scaffold</a></b></i></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF9lwHx0qY1PYKK66kBkK5Mx7P16eRVf_PgN85tat_Q_A_VL0tjnriLZ188WdozsFP6rpt6FZNalNFCn_LyUpd6vpxVPSnHnQFdekF5d6XDFxovMfnh8AehpTcLd6ddZNBAZzqo3cP9_qQ/s1600/scaffold-css-framework.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF9lwHx0qY1PYKK66kBkK5Mx7P16eRVf_PgN85tat_Q_A_VL0tjnriLZ188WdozsFP6rpt6FZNalNFCn_LyUpd6vpxVPSnHnQFdekF5d6XDFxovMfnh8AehpTcLd6ddZNBAZzqo3cP9_qQ/s200/scaffold-css-framework.png" width="200" /></a></div><div style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><br />
</div><div style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><br />
</div><div style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><br />
</div><div style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><br />
</div><div style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><br />
<br />
<span style="font-size: large;"><span style="color: #38761d; font-size: large;"><i style="font-family: Georgia,"Times New Roman",serif;"><b>9. <a href="http://compass-style.org/">Compass</a></b></i></span></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz323Mj-iSlkk2aXogGtc5Y1juujgqIkUJuCSPtV4rzPVMCwz31E8TGV3pwyCnQRpjybS8Va5M07viMZFQ6qYOXt7apn1bL_0TakwJAiWGTkxiq1KfmP6VLQUK2wwRr0jj3dkHWuJJBCm2/s1600/compass-css-framework.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="47" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz323Mj-iSlkk2aXogGtc5Y1juujgqIkUJuCSPtV4rzPVMCwz31E8TGV3pwyCnQRpjybS8Va5M07viMZFQ6qYOXt7apn1bL_0TakwJAiWGTkxiq1KfmP6VLQUK2wwRr0jj3dkHWuJJBCm2/s200/compass-css-framework.jpg" width="200" /></a></div><div style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: large;"><i><b><br />
</b></i></span></div><div style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: large;"><i><b><br />
</b></i></span></div><div style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: large;"><i><b><br />
</b></i></span></div><div style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: large;"><i><b><br />
</b></i></span></div><div style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: large;"><i><b>10. <a href="http://elements.projectdesigns.org/">Elements CSS Framework</a></b></i></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-paKCExOTlREDZfcid_bYUuUlS1_rD-JGmMruJcrmRLk1qaBoy_hLKZ5fiepKEG3u8HToMuUxbUG13rb6xdJhOEU62Ro9g_YDi_LsOyxU4SO6UyPPbR0LfWxweX-MXVQW3YP5kePz9Vdv/s1600/elements-css-framework.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-paKCExOTlREDZfcid_bYUuUlS1_rD-JGmMruJcrmRLk1qaBoy_hLKZ5fiepKEG3u8HToMuUxbUG13rb6xdJhOEU62Ro9g_YDi_LsOyxU4SO6UyPPbR0LfWxweX-MXVQW3YP5kePz9Vdv/s1600/elements-css-framework.png" /></a></div><div style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"></div><h2 style="color: #38761d; font-family: Georgia,"Times New Roman",serif;"><b><span style="font-size: large;"><i><span style="font-weight: normal;"></span></i></span></b></h2>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-79621129077809615662010-09-17T12:25:00.001+03:002010-09-17T12:27:23.484+03:00CSS horizontal menu.Cum de creat un meniu orizontal utlizind <b style="background-color: white; color: #0b5394;">CSS</b> si <b style="background-color: white; color: #0b5394;">HTML</b> liste? Nimic mai simplu, in exemplul ce urmeaza am creat un meniu orizontal destul de simpatic. Nu este nevoie de imagini pentru background sau pentru bordere. Am folosit si <i style="color: #0b5394;"><b>text-shadow</b></i> pentru a stiliza textul meniului, din pacate <b style="color: #0b5394;"><i>IE</i></b> se incapatineaza sa-l interpreteze, <i style="color: #0b5394;"><b>Firefox </b></i>si <i><b><span style="color: #0b5394;">Google Chrome</span></b></i> il interpreteaza destul de bine. Enjoy :)<br />
<br />
<a name='more'></a><i><b>Code example</b></i><br />
<br />
<b>HTML</b><br />
<span style="background-color: #eeeeee; color: #0b5394; font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><div id="nav"><br />
<ul><br />
<li><a href="#">Home</a></li><br />
<li><a href="#">Products</a></li><br />
<li><a href="#">Articles</a></li><br />
<li><a href="#">About Us</a></li><br />
<li><a href="#">Contacts</a></li><br />
</ul><br />
</div></span><br />
<br />
<b>CSS</b><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: Arial,Helvetica,sans-serif;">#nav{</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> font-size:0.9em;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">}</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">#nav ul{</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> list-style:none;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> padding:0;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> margin:0;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> padding-top:1em;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">}</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">#nav li{</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> display:inline;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">}</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">#nav a:link, #nav a:visited{</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> padding:0.4em 1em 0.4em 1em;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> color:#333;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> font-weight:bold;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> background-color:#d0d9e2;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> text-decoration:none;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> text-shadow: 1px 1px 1px white;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> border-top:solid 1px #e0e0e1;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> border-right:solid 1px #9f9fa1;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> border-bottom:solid 1px #acacad;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> border-left:solid 1px #dfdfe0;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">}</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">#nav a:hover, #nav a:active, #nav a:focus{</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> background-color:#6d8ab7;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> color:white;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;"> text-shadow: 1px 1px 1px #22456b;</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial,Helvetica,sans-serif;">}</span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ptRQatp180QpIqploi6bfWnTPYu_L8DdNR7TNfDueNqhb1H0qLxxCbjvG-u3XeiJB4qY2yVAJG1vD1hJq9Gc08qLhc4YgJbQPFcadYeOtqEG-lqKKL0roSFoHDx1R9UW3QKmv2G8oYdC/s1600/horizontal_menu.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ptRQatp180QpIqploi6bfWnTPYu_L8DdNR7TNfDueNqhb1H0qLxxCbjvG-u3XeiJB4qY2yVAJG1vD1hJq9Gc08qLhc4YgJbQPFcadYeOtqEG-lqKKL0roSFoHDx1R9UW3QKmv2G8oYdC/s400/horizontal_menu.PNG" width="400" /></a></div>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com0tag:blogger.com,1999:blog-777900911005438889.post-46609557882534888052010-09-16T15:30:00.001+03:002010-09-16T15:31:13.767+03:00CSS SpritesNu stiu daca ati auzit de <b>CSS Sprites</b>, dar mie mi-a placut ideea asta. Sa va explic, sprite-urile in sine reprezinta niste imagini in care sunt bagate toate elementele grafice(ori majoritatea) ale unui web-site. Iata un exemplu trivial de sprite.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielhyphenhyphennyRJ5yQnPrSqKZTG6REq6q8MLd_VQVbRwtcx-IYITpnje7TAZ_aC2-0ASvaThsM2VhL2o4ihSc_hLFfp-EywgkRor5ePSUkxvVevdt00VNbsv-uizURuUPJKTLWDbgfI6gIongIdf/s1600/mySprite.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielhyphenhyphennyRJ5yQnPrSqKZTG6REq6q8MLd_VQVbRwtcx-IYITpnje7TAZ_aC2-0ASvaThsM2VhL2o4ihSc_hLFfp-EywgkRor5ePSUkxvVevdt00VNbsv-uizURuUPJKTLWDbgfI6gIongIdf/s320/mySprite.png" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
La ce sunt bune spriteurile? Atunci cind aveti o multime de elemente grafice, probe de background, iconite, bare, separatoare etc. este nevoie de cite un request la server pentru fiecare din aceste componente, si uneori poate sa puna in dificultate serverul datorita numarului mare de requeste-uri. Daca toate elementele grafice sunt puse intr-un singur fisier grafic, atunci se face doar o singura interpelare la server, si nu cite una pentru fiecare "particica".<br />
Mai jos am scris un exemplu de utilizare a spriteurilor.<br />
<br />
<a name='more'></a><br />
<i><b>Codul HTML</b></i><br />
<div style="font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;"><span style="background-color: #eeeeee; color: #0b5394;"><div id="wrapper"></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <div id="left"></div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <div id="center"></div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> <div id="right"></div></span><br style="background-color: #eeeeee; color: #0b5394;" /><span style="background-color: #eeeeee; color: #0b5394;"> </div></span></span></div><br />
<i><b>Codul CSS</b></i><br />
<span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;">#left, #center, #right{</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> float:left;</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> margin-left:25px;</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> background:url('images/mySprite.png');</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">#left{</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> width:60px;</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> height:60px;</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> background-position:-2px -134px;</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">#center{</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> width:52px;</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> height:60px;</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> background-position:-176px -133px;</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">#right{</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> width:72px;</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> height:60px;</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;"> background-position:-230px -133px;</span><br style="font-family: "Courier New",Courier,monospace;" /><span style="font-family: "Courier New",Courier,monospace;">}</span></span> <br />
<br />
Si la final, ca de obicei rezultatul exemplului. Priviti atenti la exemplul spriteului de mai sus, si pe urma la exemplul de mai jos, am creat 3 div-uri si ca background am pus aleator 3 "bucati" din acel sprite.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDl5fZPgFIQKAJkEGBuUHDuDOZy0l4R4pCggunFuHCGSQTWhQbo-LXX0zu4V8wSfOP4BRv4I5YGCamX4BLQnUOWB013l8CZFbJghA2uMrlujgfeMSrgiZSaaKUD0KdAdX7JBbvrq9GTM3E/s1600/sprite.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDl5fZPgFIQKAJkEGBuUHDuDOZy0l4R4pCggunFuHCGSQTWhQbo-LXX0zu4V8wSfOP4BRv4I5YGCamX4BLQnUOWB013l8CZFbJghA2uMrlujgfeMSrgiZSaaKUD0KdAdX7JBbvrq9GTM3E/s320/sprite.PNG" /></a></div>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com1tag:blogger.com,1999:blog-777900911005438889.post-45194331805277452672010-09-15T20:45:00.011+03:002010-09-15T22:29:42.260+03:00CSS HTML. Vertical Menu cu Submenu<div class="separator" style="clear: both; text-align: center;"></div>Exemplul ce urmeaza este destinat celor care au nevoie sa creeze un meniu <b>HTML</b> cu submeniuri, formatarea <b>CSS </b>este destul de simpla iar meniul in sine este de fapt o lista de linkuri cu subliste.<br />
<a name='more'></a><br />
Iata exemplul:<br />
<b><i>Codul HTML</i></b><br />
<br />
<div style="font-family: Verdana,sans-serif;"><span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;"><div id="nav"><br />
<ul><br />
<li><a href="#">Home</a></li><br />
<li><a href="#">Products</a><br />
<ul><br />
<li><a href="#">Apple</a></li><br />
<li><a href="#">Orange</a></li><br />
<li><a href="#">Banana</a></li><br />
<li><a href="#">Grape</a></li><br />
</ul><br />
</li><br />
<li><a href="#">Contact Us</a></li><br />
<li><a href="#">Photos</a></li><br />
</ul><br />
</div></span></div><br />
<b><i>Codul CSS</i></b><br />
<div style="font-family: Verdana,sans-serif;"><span style="background-color: #eeeeee; color: #0b5394; font-size: x-small;">#nav{<br />
width:200px;<br />
background-color:#337ACF;<br />
}<br />
#nav ul{<br />
list-style:none;<br />
margin:0;<br />
padding:0;<br />
}<br />
#nav li{<br />
border-bottom:solid 1px #9FCBFF;<br />
}<br />
#nav li a:link, #nav li a:visited{<br />
font-size:0.9em;<br />
display:block;<br />
padding:0.4em 0 0.4em 0.5em;<br />
background-color:#4F9FFF;<br />
border-left: solid 12px #337ACF;<br />
border-right:solid 1px #337ACF;<br />
color:white;<br />
text-decoration:none;<br />
}<br />
#nav li a:hover{<br />
background-color:#337ACF;<br />
color:white;<br />
}<br />
#nav ul ul{<br />
margin-left:12px;<br />
}<br />
#nav ul ul li{<br />
border-bottom:#337ACF;<br />
border:0;<br />
margin:0;<br />
}<br />
#nav ul ul a:link, #nav ul ul a:visited{<br />
background-color:#6FB1FF;<br />
color:#337ACF;<br />
}<br />
#nav ul ul a:hover{<br />
background-color:#337ACF;<br />
color:white;<br />
}</span></div>In imagine este reprezentarea grafica a meniului care l-am creat.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjbPejmO5ReO1z474huFFjblO0Qy0zNRAB09FkM5-DFLAVKwKZZ5xtHo7WGQkADsXEbO2U4G2LTSsSkypiHPfNk0muueSZ9TUhTybGazLFDflXrfON3c3nokXEAsq1rXSefYb95-HWrqHw/s1600/submenu.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjbPejmO5ReO1z474huFFjblO0Qy0zNRAB09FkM5-DFLAVKwKZZ5xtHo7WGQkADsXEbO2U4G2LTSsSkypiHPfNk0muueSZ9TUhTybGazLFDflXrfON3c3nokXEAsq1rXSefYb95-HWrqHw/s1600/submenu.PNG" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: #0b5394; font-size: x-small;"><i><b><br />
</b></i></span>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com2tag:blogger.com,1999:blog-777900911005438889.post-45205459721666285492010-09-14T15:05:00.000+03:002010-09-14T15:05:40.980+03:00CSS. Unitati de masura.<b>CSS</b> ne pune la dispozitie un set de unitati de masura care aproape in totalitate satisface necesitatile web-designerului.<br />
<table style="border: 1px solid rgb(204, 204, 204); text-align: justify; text-indent: 0.5cm;"><thead style="background: none repeat scroll 0% 0% olive;"> <th>Unitate</th> <th>Descriere</th> </thead> <tbody style="background: none repeat scroll 0% 0% rgb(234, 234, 234);">
<tr> <td>%</td> <td>Procentual</td> </tr>
<tr> <td>in</td> <td>inch</td> </tr>
<tr> <td>cm</td> <td>centimetru</td> </tr>
<tr> <td>mm</td> <td>milimetru</td> </tr>
<tr> <td>em</td> <td>1em este egal cu marimea fontului. <br />
De exemplu daca marimea fontului egal cu 16pt atunci 2em = 16x2pt=32pt</td> </tr>
<tr> <td>ex</td> <td>1 ex este egal cu inaltimea x-height a unui font (x-height este egala de obicei cu 1/2 din font-size)</td> </tr>
<tr> <td>pt</td> <td>Point. 1 pt este egala cu 1/72 inch</td> </tr>
<tr> <td>pc</td> <td>Pica. 1 pc este egal cu 12pt</td> </tr>
<tr> <td>px</td> <td>Pixel. 1px egal cu un punct de pe ecran</td> </tr>
</tbody> </table>pseudomushttp://www.blogger.com/profile/08276485489036289467noreply@blogger.com2