Sign In
Create Account
Back to top
 |
Chirurgia spinală minim invazivă
Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical. Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale. www.neurohope.ro |
Pasi in CSS
Last Updated: Aug 18 2023 09:53, Started by
n_priceputu
, Jul 05 2023 08:42
·
3
3
#19
Posted 10 July 2023 - 05:55
|
Pot să îți mai dau și eu câteva sfaturi daca vrei sa tii cont de ele:
- renunță la numerele magice, cum ar fi acel 18px 29px care par a fi puse din burta. Aceste numere o să pară ok pe display-ul tau, dar pe altele mai mici sau mai mari pot fi problematice - mai bine cred că te poți folosi de unitățile em pentru padding unde ai text, de ex: padding: 1.25em 1.75em. Astfel padding va fi relativ cu dimensiunea textului din tag-ul <a>. Daca tu cresti padding cu 4px la un text ce are font size 16px se vede altfel fata de un text căruia îi crești padding tot cu 4px dar are font size 50px, efectul vizual nu mai este la fel - poți renunța la a:link și să pui doar a simplu, pentru că este același lucru în mare parte. Sau mai bine pui o clasă elementului. - unde folosești element:hover încearcă să folosești și element:focus pentru a obține același efect și când navighezi pe linkul respectiv cu tasta tab (te ajuta la accesibilitate). Sau varianta mai prescurtată dar valabilă în browsere mai noi: element:is(:hover, :focus) - daca schimbi la hover de exemplu fundalul sau culoarea, poți folosi mai simplu hsl. Astfel poți păstra aceeași tonalitate de culori și este mai ușor de modificat. Ex; element { color: hsl(50 50% 70%); } element:hover { color: hsl(50 50% 50%); } In ex de mai sus păstrezi aceeași culoare hue 50, saturation 50%, dar te joci cu luminozitatea. De la 70% default, la 50% la hover (practic întuneci puțin textul păstrând aceeași gamă de culori). Poate pentru cineva la început pare complicat, dar cred că este bine sa te obișnuiești cu variante de genul asta de la inceput și să îți intre în practică că sa fie mai ușor pe viitor. |
#20
Posted 13 July 2023 - 11:11
|
@G1q
Multumesc pentru timpul si atentia acordate Sfatul care vine de la cineva cu experienta este foarte pretios Pe vremuri, invatai dupa o carte scrisa de unul care se pricepea si te facea sa intelegi Acuma sunt mai mult traduceri ale unor persoane cu mai putin contact cu fenomenul Eu am pornit de la un tutorial online din multele care exista Acesta este asa de prost tradus incat reusesc sa inteleg Incet-incet sper sa ajung la un nivel de pricepere/intelegere Vointa ar fi, numai timpul sa fie si el de partea mea |
#21
Posted 13 July 2023 - 14:36
|
Daca mai ai întrebări legate de HTML/CSS pot sa te mai ajut cu sfaturi.
|
#23
Posted 16 July 2023 - 14:48
|
Am ajuns pe la selectori descendenti, ascendenti, etc
E din ce in ce mai greu Sa vedem ce inteleg, daca inteleg Selectorul de mai jos div * p reprezinta un nepot p al lui div, in sensul ca p este inclus in div prin intermediul oricarui element Acest element de tranzitie poate fi em, h1 sau orice altceva, din care cauza este marcat anonim cu * Banuiesc ca elementul "*" poate fi chiar si un p sau un alt div Selectorul de mai jos div p *[href] defineste orice element care are atributul [href] - adica *[href] fara spatiul care ar putea fi combinatorul descendent - ca fiind nepotul lui div daca este continut de acesta prin intermediul lui p Acuma, teoria ca teoria, practica ne omoara Tare m-as bucura de un exemplu ca sa inteleg mai bine Multumesc pentru atentie |
#24
Posted 16 July 2023 - 15:33
|
Pana la urma mi-am luat inima in dinti si am incropit un exemplu pentru div * p
Cred ca mi-a iesit Pentru cazul celalalt, inca n-am curaj
<!DOCTYPE html>
<html>
<head>
<style>
div * p {
background-color: yellow;
/* toate p incluse intr-un dif prin alt element au fundal galben */
}
</style>
</head>
<body>
<h1>Mai intai 3 p inclusi in div care satisfac conditia</h1>
<div>
<h1> h1 intermediar
<p>Paragraph 1 este inclus in div prin h1</p>
<h2> h2 intermediar
<p>Paragraph 2 este inclus in div prin h2</p>
</h2></div>
<div>
<em> em este intermediar
<p>Paragraph 3 este inclus in div prin em</p>
</em></div>
<p>Paragraph 4 este de sine statator neinclus in div</p>
<div>
<p>Paragraph 5 este inclus in div dar fara intermediar</p>
</div>
</body>
</html>
|
#25
Posted 16 July 2023 - 16:03
|
div p selecteaza toate p din div
div > p selectea toate p direct descendents, adica un nivel mai jos div * p selectea toate p indirect descendents, adica nicidata de pe primul nivel ar fi mai usor daca ai studia in engleza. https://www.w3school...s_selectors.php Edited by Mizu, 16 July 2023 - 16:04. |
#26
Posted 16 July 2023 - 16:21
|
Selectorul de mai jos div p *[href] defineste orice element care are atributul [href] - adica *[href] fara spatiul care ar putea fi combinatorul descendent - ca fiind nepotul lui div daca este continut de acesta prin intermediul lui p |
#27
Posted 17 July 2023 - 15:49
|
Vezi ca elementele de tip heading (h1, h2, ... h6) pot avea la interior ca si copii doar elemente inline (a, em, span, etc) nu si elemente paragraf (care sunt de tip block). Acelasi lucru se aplica si la tagul em. Nu poti pune un paragraf intre tagurile em, dar poti pune tagul em intre tagurile unui paragraf.
Deci pentru cazul 1 unde ai div * p, poti verifica prin urmatorul exemplu: <div> <p>Cu selectorul de mai sus nu vei modifica acest paragraf</p> <div> <p>Acest paragraf il vei modifica cu selectorul de mai sus</p> </div> </div> Pentru cazul numarul 2 unde ai selectorul div p *[href]. Asta inseamna ca vei tinti toate elementele cu atributul href dintr-un paragraf aflat in interiorul unui div. Avand in vedere ca nu prea exista alt element care sa aiba atributul href (in afara de <link>, dar acesta nu este vizibil in pagina oricum), selectorul de mai sus se poate considera ca tinteste toate linkurile dintr-un paragraf aflat intr-un div (se poate scrie si sub forma: div p a). Exemplu <div> <a href="#">Acest link nu va fi tintit de selector pentru ca nu este intr-un paragraf</a> <p> <a>Acest link nu va fi tintit de selector pentru ca nu are atributul href</a> <a href="#"> Acest link va fi tintit de selector </a> <span> <a href="#">Acest link la fel va fi tintit de selector pentru ca selectorul nu specifica sa fie element direct descendent al paragrafului, ci toate elementele cu atribut href dintr-un paragraf </a> </span> </p> </div> O utilitate concreta nu ii vad, decat daca vrei cel mai probabil sa vezi care taguri <a> nu au un atribut de tip href (adica linkuri care nu duc nicaieri, si nici in aceeasi pagina cum e cazul href="#"). |
#28
Posted 18 July 2023 - 12:04
|
Intalnesc doua feluri de exprimari/descrieri
1. ascendent - descendent, cu ascendent la ascendent sau descendent la descendent 2. parinte - copil, cu bunic=parintele parintelui si nepot=copilul copilului Sunt echivalente? Adica unul si acelasi lucru? |
|
#29
Posted 18 July 2023 - 17:07
|
Element ascendent poate fi orice element care încapsulează elementul la care faci referire direct sau indirect până la tagul <html>. Iar descendent este orice element cuprins între tagurile elementului la care faci referire.
In principal par același lucru ce ai spus mai sus, dar informatica tradusă în română nu prea este ok, pentru că în lumea reală nu o să folosești traducerile alea nicăieri. |
#30
Posted 21 July 2023 - 10:23
|
Codul de mai jos a fost inspirat de un exemplu
Pentru a intelege mai bine cum influenteaza lucrurile fiecare valoare am inceput sa jonglez cu ele si sa vad ce rezulta Asa am inteles multe lucruri Totusi, la .dropdown-content nu am sesizat diferenta intre position: absolute; si position: relative; La mintea mea, ar trebui sa fie o pozitionare diferita a continutului dropdown dar nu mi se pare a fi vreo diferenta
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
color: red;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba (0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Efect Dropdown</h2>
<p>Plimba mouseul peste text pentru a deschide continutul dropdown </p>
<div class="dropdown">
<span><b>Hei</b>, ia plimba mouse-ul peste acest text</span>
<div class="dropdown-content">
<p>Gata, aici eram, m-ai deconspirat</p>
</div>
</div>
</body>
</html>
Edited by n_priceputu, 21 July 2023 - 10:24. |
#31
Posted 21 July 2023 - 15:03
|
Exista mai multe feluri de position:
1. Static, este valoarea default a oricarui element html 2. Relative: functioneaza la fel ca si static, diferenta este ca ii poti seta top, left, right, bottom. 3. Absolute: un element care are pozitia absolute, se raporteaza la primul parinte care are pozitia diferita de static. In cazul tau .dropdown-content are pozitia absolute, iar .dropdown are pozitia relative (diferita de static). Default, un element cu pozitia absolute, are left: 0 si top: 0 (este pozitionat in coltul stanga sus al parintelui cu pozitia relative). Folosind pozitia absolute pe un element, il scoti din flow-ul normal al paginii si creezi un stack deasupra celorlalte elemente. Ca sa testezi diferentele intre relative si absolute pe exemplul tau, adauga un element dupa div-ul cu dropdown-ul. De exemplu pune un paragraf si adauga un text, apoi schimba pozitia elementului .dropdown-content in absolute si relative si treci cu mouse-ul peste text si vezi ce se intampla. Ce ar trebui sa vezi: - pozitia absolute: elementul este scos din flow si creeaza un nou layer peste celelalte elemente. Mai exact, la mouse over peste text, dropdown va aparea peste paragraful adaugat. - pozitia relative: elementul face in continuare parte din flow, dar avand display none, nu i se pastreaza loc pentru afisare. La mouse over peste text, dropdown va impinge parafraful adaugat mai jos ca sa isi faca loc elementul 4. Fixed: va crea un stack nou. Se pot seta valorile top, left, right, bottom elementului, acestea raportandu-se la dimensiunea ecranului unde va fi afisat elementul cu pozitia fixed. Ca sa testezi lucrul asta, ai nevoie de mult continut pe pagina, ca sa poti da scroll. Exemplu: daca am un element si ii setez position: fixed si top: 10px, left: 10px. Cand dai scroll pe pagina, elementul setat va fi mereu la 10px distanta de topul paginii si de laterala din stanga. Elementele care se scrolleaza, vor trece pe sub acest element fixed. 5. Sticky: functioneaza aproape la fel ca fixed, diferenta este ca elementul va ramane fixed doar cand indeplineste o anumita conditie. De exemplu: setam elementului position: sticky, si top: 20px; Elementul poate fi undeva in josul paginii, iar la scroll, cand partea de sus a elementului ajunge la o distanta de 20px fata de topul paginii, acesta ramane blocat acolo. |
#32
Posted 22 July 2023 - 18:34
|
Mergem inainte
Multe le inteleg, dar din pacate sunt si unele care raman neintelese Cum este exemplul de mai jos Vreau sa creez o lista de navigare folosind o colectie de imagini (sprite) cu numele "img_navsprites.gif" Acest sprite este de dimensiune 134px x 44px si contine 3 imagini (o casa, o sageata stanga, o sageata dreapta) numite sugestiv home, prev si, respectiv, next. Cele trei imagini sunt de dimensiune 44px x 44px. Latimea de 134px a img_navsprites.gif rezulta din latimea celor trei imagini plus 2 pixeli despartitori, adica 44 + 1 + 44 + 1 + 44 = 134 numerotati de la 0 la 133. Deci intre 0-43px este pozitionat "home", px nr 44 e spatiu despartitor, intre 45 - 88px este pozitionat "prev", px 89 este spatiu despartitor si intre 90 - 133px este pozitionat "next" Codul, un exercitiu dintr-un tutorial, este:
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.html"></a></li>
<li id="prev"><a href="css_intro.html"></a></li>
<li id="next"><a href="css_syntax.html"></a></li>
</ul>
</body>
</html>
Si acuma, ce nu inteleg
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
De ce latimea este 46? Imaginea home este patrat 44x44 Mai punem pixelul despartitor Deci latimea de 46 incaleca imaginea a doua "prev" cu un pixel
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
Aici Left: 63 ma duce prea departe, iar width: 43 este sub dimensiunea reala a "prev" Nu inteleg nici calculul in cazul next Posibil ca ce nu inteleg eu sa fie o pozitionare pe ecran, iar parcurgerea img_navsprites.gif sa fie facuta cu proprietatea background? Asa ar parea! Poate ca cineva are amabilitatea sa-mi explice. Multumirile mele anticipate Edited by n_priceputu, 22 July 2023 - 18:40. |
#33
Posted 23 July 2023 - 09:01
|
Nu stiu ce am gresit in postarea anterioara, imi cer scuze
O refac in cele ce urmeaza pentru a putea fi citita. Mergem inainte Multe le inteleg, dar din pacate sunt si unele care raman neintelese Cum este exemplul de mai jos Vreau sa creez o lista de navigare folosind o colectie de imagini (sprite) cu numele "img_navsprites.gif" Acest sprite este de dimensiune 134px x 44px si contine 3 imagini (o casa, o sageata stanga, o sageata dreapta) numite sugestiv home, prev si, respectiv, next. Cele trei imagini sunt de dimensiune 44px x 44px. Latimea de 134px a img_navsprites.gif rezulta din latimea celor trei imagini plus 2 pixeli despartitori, adica 44 + 1 + 44 + 1 + 44 = 134 numerotati de la 0 la 133. Deci intre 0-43px este pozitionat "home", px nr 44 e spatiu despartitor, intre 45 - 88px este pozitionat "prev", px 89 este spatiu despartitor si intre 90 - 133px este pozitionat "next" Codul, un exercitiu dintr-un tutorial, este:
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.html"></a></li>
<li id="prev"><a href="css_intro.html"></a></li>
<li id="next"><a href="css_syntax.html"></a></li>
</ul>
</body>
</html>
Si acuma, ce nu inteleg
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
De ce latimea este 46? Imaginea home este patrat 44x44 Mai punem pixelul despartitorDeci latimea de 46 incaleca imaginea a doua "prev" cu un pixel
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
Aici Left: 63 ma duce prea departe, iar width: 43 este sub dimensiunea reala a "prev"Nu inteleg nici calculul in cazul next Posibil ca ce nu inteleg eu sa fie o pozitionare pe ecran, iar parcurgerea img_navsprites.gif sa fie facuta cu proprietatea background? Asa ar parea! Poate ca cineva are amabilitatea sa-mi explice. Multumirile mele anticipate |
|
#34
Posted 23 July 2023 - 12:28
|
@G1q Multe multumiri pentru explicatia detaliata
Am urmat sfatul si am testat mai multe variante Cand vezi care sunt diferentele, intelegi mai bine Inca o data, multumiri |
#35
Posted 23 July 2023 - 21:56
|
Părerea mea e sa nu te complici cu asta pentru că în navbar vei folosi cel mai probabil iconițe nu sprites. In zilele noastre sprites se folosesc in general in canvas-uri, unde de exemplu vrei sa recreezi mișcarea unui personaj animat. Creezi un sprites care conține toate mișcările posibile ale unui personaj, iar în funcție de ce taste apesi setezi și poziția acelui sprite.
Pentru navbar descarcă 3 iconițe in format .svg și le pui in interiorul tagurilor a, sau direct in li înainte de ancoră. Sau integrezi in header o librărie de iconițe și te folosești direct de tag-uri sa le integrezi. |
#36
Posted 26 July 2023 - 16:25
|
Multumesc pentru sfat. Eu am luat tutorialul pas cu pas incercand sa deslusesc fiecare exemplu
Nu intotdeauna am reusit. Inca nu am o parere bine formata privind directiile in care sa accentuez Si e normal, sunt abia la inceput Sigur ca experienta stie sa faca diferenta intre spectaculos si normalitate. Din felul in care spui ca pot fi folosite sprites, cred ca pot fi trecute pe un plan secundat Inca o data multumiri |
Anunturi
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
-
- Change Theme
- English
- Mark Community Read
- Termene & conditii
- Confidentialitate
- Consimtamant
- Cookies
- Help
© 2001-2024 Softpedia. All rights reserved. Softpedia® and the Softpedia logo are registered trademarks of SoftNews Net SRL.
Ora implicita a Forumului Softpedia este ora standard a Romaniei (GMT+2). Mai multe informatii →
⚠ Postarile afisate pe Forumul Softpedia reprezinta o opinie subiectiva a membrilor care le-au publicat si nu a SoftNews Net SRL.