Arhive blog

Resurse web editia octombrie 2015 !


Cateva resurse super smechere pentru web-developeri si consultanti seo!

Pentru inceput:

  1. taburi cu ajutorul jQuery EasyTabs Plugin pe care il gasiti aici http://os.alfajango.com/easytabs/#tabs1-css
  2. super toolbar-uri foarte personalizate : http://paulkinzett.github.io/toolbar/

Iar spre final:

  1. Audit Seo gratuit cu ajutorul baietilor si fetelor de la silkweb: http://www.silkweb.ro/servicii-seo.html unde va introduceti datele si primiti pe mail in cateva minute audit-ul!
  2. Seo Keyword Tool de la Seo Monitor : http://seomonitor.com/seo-keyword-tool/ cu ajutorul caruia puteti afla dupa anumite cuvinte cheie pe ce loc sunteti in cautarile de pe Google si nu numai.

Cum sa elimini spatiile implicite dintr-o lista


Uneori cand vrem sa facem un meniu, folosim liste si le dam proprietatea de a sta una langa alta si nu una sub alta cu:

 

float:left;

 

Ei bine, in acest caz, implicit apar spatii intre liste si s-ar putea sa nu doriti aceste spatii.

 

Le puteti scoate folosind urmatorul cod css:

 

li { margin: -4px; }

 

De asmenea, trebuie sa stergeti spatiile existente intre li, ma refer la urmatorul caz(zonele subliniate):

 

 

<li> Primul item           </li> <li>Al doilea item</li>

A perfect desktop image for CSS developers

A perfect desktop image for CSS developers (Photo credit: Wikipedia)

 

 

 

Cum sa modifici primul element dintr-o lista de elemente (First-child)


La un proiect am avut de modificat paddingul la primul element si la ultimul element dintr-o lista.

Ei bine, codul css pentru a „apela” primul sau ultimul element dintr-o lista fie ordonata sau nu, este acelasi cu cel pentru a modifica orice prim element fie el dintr-o lista, tabel, div sau orice altceva.

Deci, primul paragraf(p), prima celula(td) sau rand(tr) sau element din lista(li) se va apela folosind first-child, iar pentru ultimul last-child. Acestea sunt pseudo-elemente.

Prin urmare, pentru paragraf avem:

p:first-child{

color: black;}

p:last-child{

color: red;}

 

Inlocuind p cu elementul dorit sa fie modificat puteti folosi codul pentru td, tr, a, img, h1 si asa mai departe.

Puteti folosii chiar si clase sau iduri in combinatie cu aceste „apelari”:

Deci primul paragraf care se afla in clasa text va avea culoarea verde.

Resurse(2)


open to interpretation

open to interpretation (Photo credit: massdistraction)

  • Scripturi

 5 Simple and Practical CSS List Styles You Can Copy and Paste – 5 meniuri create cu ajutorul listelor in CSS sau 5 stiluri de liste simple si practice. Eu recomand lista 4, lista pe care am si folosit-o si e mai usor de realizat decat daca te-ai pune singur sa o faci.

Codepen –  un site cu o groaza de scripturi foarte interesante si utile pentru siteul vostru.

  • Rezolvari la erori

CSS: how to stop text from taking up more than 1 line? – cum sa rezolvi bugul cu textul care se imparte pe mai multe linii. Ei bine, despre asta am scris si eu aici:  bug-1-text-pe-mai-multe-linii-white-space .

  • Video Tutorial

Slice and Dice that PSD – cum sa tai elemente dintr-un psd si sa il faci in html si css. O mica introducere in web design/photoshop.

  • Proiecte web pe banii

elance.com , guru.com, freelancer.com – siteuri pentru freelanceri cu proiecte web.

 

 

Bug (1): Text pe mai multe linii- white-space


In urma unui proiect pentru cei de la key27, am dat, la final, de un bug/eroare total aiurea si anume:  aveam un text care trebuia sa se incadreze intr-o singura linie, insa acesta se impartea in 4-5 linii. Textul nu era prea lung ca sa nu intre intr-o linie si totusi nu intra pe o singura linie.

bug

Ca sa rezolvati aceasta eroare folositi urmatorul cod html:

<div id=”copyright”>

Copyright © 2013 ALL WALLS STUCCO. All rights reserved. |
<a href=”#”>
<span> Privacy Policy</span>
</a>
| Designed and maintained by
<a href=”#”>
<span>KEY27 visual internet marketing.</span>
</a>
</div>
Apoi folositi codul css:
#copyright {
    color: #9E9B99;
    font-size: 9pt;
    left: -690px;
    padding-bottom: 40px;
    position: relative;
    top: 500px;
   white-space: nowrap;
Deci:    white-space: nowrap; este bucatica salvatoare care aseaza textul pe o singura linie .
solved
%d blogeri au apreciat asta: