Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Jante noi shitbox

Trinitas TV 4K

Dacia 1316 cu 6 usi ...

Frecventa modificata radio
 Un nou pericol pt batrani

Ar trebuii sa vindem imobiliarele...

Dupa renuntarea la aparat dentar

pelerinaj in Balcik
 Noul format Jpegli iși propu...

Dade, dade

Probleme accesare nr test telefon

Parola la lock screen
 Deparazitare externa pisici fara ...

Seriale turcesti/coreene online H...

Merita un Termostat Smart pentru ...

Sfat achizitie MTB Devron Riddle
 

Cum pot integra în paginile html 2 stiluri CSS diferite pentru 2 imagini diferite, ambele fiind separate vertical printr-un spațiu?

- - - - -
  • Please log in to reply
9 replies to this topic

#1
me_suzy

me_suzy

    Member

  • Grup: Members
  • Posts: 747
  • Înscris: 29.04.2007
salut prieteni. Cum pot integra într-o pagina html 2 stiluri CSS diferite pentru 2 imagini diferite, ambele fiind separate printr-un spațiu vertical (una sub alta) ?

Uitati-va la tablourile de mai jos. Au dimensiuni diferite, stiluri diferite. Asta nu stiu cum sa fac in css.

Attached Files



#2
miki07

miki07

    Simplu și banal

  • Grup: Senior Members
  • Posts: 16,984
  • Înscris: 18.09.2008
ID-uri diferite in CSS?

#3
GaBogdan

GaBogdan

    Member

  • Grup: Members
  • Posts: 625
  • Înscris: 02.09.2020
Daca am inteles bine intrebarea.   Prin Id sau clasa diferita
<img id="firstImg" scr="" alt="" />
<img id="secondImg" scr="" alt="" />

Si in css:
#firstImg{
width: 500px;
}

#secondImg{
width: 200px;
}

Edited by GaBogdan, 10 February 2022 - 11:26.


#4
me_suzy

me_suzy

    Member

  • Grup: Members
  • Posts: 747
  • Înscris: 29.04.2007

 GaBogdan, on 10 februarie 2022 - 11:24, said:

Daca am inteles bine intrebarea.   Prin Id sau clasa diferita

nu stiu css, acum invat. Dar ID sau CLASS, imi poate arata cineva in cod cum se fac ambele variante ?

#5
GaBogdan

GaBogdan

    Member

  • Grup: Members
  • Posts: 625
  • Înscris: 02.09.2020

 me_suzy, on 10 februarie 2022 - 11:25, said:


nu stiu css, acum invat. Dar ID sau CLASS, imi poate arata cineva in cod cum se fac ambele variante ?
Dada, da-mi te rog 5 minute si iti trimit link pentru adaugare css in html, id, clasa

#6
miki07

miki07

    Simplu și banal

  • Grup: Senior Members
  • Posts: 16,984
  • Înscris: 18.09.2008
https://codepen.io/miki07/pen/JjONWaQ

Asa ceva?

#7
Bogdan__26

Bogdan__26

    Junior Member

  • Grup: Junior Members
  • Posts: 39
  • Înscris: 26.01.2016
Uite exemplu acesta: https://jsfiddle.net/Ln3y0bz7/
Dacă vrei dimensiuni diferite imaginile trebuie să fie de dimensiuni diferite iar dacă vrei stiluri diferite le poți pune într-un div și le poți targeta folosind :first-child, :last-child, :nth-child() sau cum a spus colegul mai sus prin clase sau id-uri diferite.

#8
GaBogdan

GaBogdan

    Member

  • Grup: Members
  • Posts: 625
  • Înscris: 02.09.2020
Ai indexul html, langa el mai creezi un fisier numit style.css de exemplu unde o sa tii tot css-ul. E mult mai ok decat css inline.
Pentru a "lega" fisierul style.css cu index.html, in head, scrii <link rel="stylesheet" href="style.css">  ( daca pui style.css in alt folder trebuie sa ai grija la path, exact ca si la imagini. ) https://www.w3school...s/css_howto.asp
Pentru a stiliza o imagine, un div, un p etc etc. Folosesti atributuri precum "id" sau "class"  https://www.w3school...tml_classes.asp
Pentru a folosi class: <img class="myClassDeExemplu" scr="" alt="" />
iar in css clasa se targheteaza asa:
.myClassDeExemplu{
// ce stil vrei tu sa aplici aici
width: 300px;
}

Pentru a folosi id: <img id="myID" scr="" alt="" />
iar in css clasa se targheteaza asa:
#myID{
// ce stil vrei tu sa aplici aici
width: 600px;
}

Am incercat sa fac un scurt si utli rezumat, sper sa ajute.

Edited by GaBogdan, 10 February 2022 - 11:43.


#9
me_suzy

me_suzy

    Member

  • Grup: Members
  • Posts: 747
  • Înscris: 29.04.2007
multumesc GaBogdan si Miki07

da, asa ceva. Testez si vad cum merg amandoua variantele. Thanks !!

.picture, .leftPicture, .rightPicture {
	border: 2px dotted gray;
	width: 200px;
}
.leftPicture {
	float:left;
}
.rightPicture {
	float:right;
}


mai ulte raspunsuri se pot gasi aici: https://stackoverflo...ges-differently

#10
GaBogdan

GaBogdan

    Member

  • Grup: Members
  • Posts: 625
  • Înscris: 02.09.2020
Iti sugerez sa te mai uiti peste https://www.w3school...ls.com/  html si css
Pentru inceput, acopera destul de multe chestii.
Daca te mai pot ajuta cu ceva, nu ezita sa lasi un pm.
Succes!

Anunturi

Neurochirurgie minim invazivă Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate