Poza cu rama alta poza - putin ajutor

#1
colombo2003

Posted 17 March 2015 - 16:27

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Am urmatoarea problema careia nu reusesc sa-I dau de cap.

Am o poza, format .jpg (de fapt mai multe), sub care am un text. Atat poza, cat si textul se refera la o categorie. Atat poza, cat si textul, la click, sa imi deschida pagina cu pozele aferente acelei categorii.

Pozei doresc sa ii pun, ca o rama (sau background) o alta poza, format .png. Cumva ar inseamna ca suprapun, si centrez, pozele, una peste alta.
Si doresc ca la redimensionarea ferestrei, poza (ma rog, pozele) si chenarul sa se redimensioneze si ele in consecinta. Adica sa fie responsiv.

Chenarul si poza (din categoria Serbare) le aveti atasate.

Nimic din ce-am incercat pana acum nu a functionat corespunzator (de functionat ar functiona, cumva, dar, repet, ce-a iesit nu ma multumeste, ca eu vreau sa fie responsiv; ambele). Unde gresesc? Ce imi scapa?

Am sa revin imediat si cu detalii legate de cod. Multumesc

LE.

Am incercat sa fac un div, in care sa am alte 3 div-uri. Ultimul (al treilea), separate, pentru descriere/categorie, iar primele doua, unul intr-altul; cel din mijloc (al doilea) sa aibe doar imaginea, iar background-ul sa il aplic primului div.

M-am jucat si cu position relative si absolute, si cu z-index; am incercat in mai multe feluri...

Cod HTML (asta e varianta in care chenarul (rama) l-am lasat ca si img, si nu background din css):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link title="default" href="/css/test.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="categ">
<div class="preview">
<img src="/images/main_frame.png" />
<div class="preview_photo">
	 ...
	 <img class="b" src="/foto/Foto1.jpg" />...
</div>
</div>

<div class="bottom">
...
...
</div>
</div>
<div class="categ">
<div class="preview">
<img src="/images/main_frame.png" />
<div class="preview_photo">
	 ...
	 <img class="b" src="/foto/Foto1.jpg" />...
</div>
</div>

<div class="bottom">
...
...
</div>
</div>
<div class="categ">
<div class="preview">
<img src="/images/main_frame.png" />
<div class="preview_photo">
	 ...
	 <img class="b" src="/foto/Foto1.jpg" />...
</div>
</div>

<div class="bottom">
...
...
</div>
</div>
<div class="categ">
<div class="preview">
<img src="/images/main_frame.png" />
<div class="preview_photo">
	 ...
	 <img class="b" src="/foto/Foto1.jpg" />...
</div>
</div>

<div class="bottom">
...
...
</div>
</div>
</body>
</html>

Attached Files

Foto1.jpg 27.04K 36 downloads
main_frame.png 5.53K 34 downloads

Edited by colombo2003, 17 March 2015 - 16:35.

Back to top

#2
colombo2003

Posted 17 March 2015 - 17:56

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Revin si cu partea de CSS.

Clasa b de la poza din img nu mai apare in css.
Bordurile le-am pus de test. La fel si marginile si padding-ul, pentru spatiere.

Am incercat si pus diverse procente la width, float left, position si relative si absolute si fara.
Rama (main_frame.png) este luata de pe Internet (deci alta sursa), deci alte dimensiuni fata de poza jpg.

Nu stiu acum ce informatii sa va mai dau si daca s-a inteles bine ceea ce vreau sa fac. Folosesc Mozilla Firebug pentru a ma juca.

.categ {
	float: left;
	border: 1px solid red;
	text-align: center;
	width: auto;
	margin: 5px;
	padding: 10px;
}
.preview {
	border: 1px solid red;
	padding: 4px;
	background: url("/images/main_frame.png");
	width: auto;
}
.preview_photo {
	border: 1px solid blue;
	margin: 10px;
}

Back to top

#3
colombo2003

Posted 24 March 2015 - 11:29

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Dupa lupte secular, in care ma tot invarteam in jurul cozii... Posted Image

am reusit!!!

Un div (care se tot repeat, in functie de cate categorii sunt), care contine imaginile si un div pentru eventualul text.
Width cu procente, cu position relative (nu absolute, nici macar la una) si margini potrivite pentru pozitionare.

PS. Multumesc, rezolvat, se poate inchide!

Back to top

Anunturi

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

Poza cu rama alta poza - putin ajutor

#1 colombo2003 Posted 17 March 2015 - 16:27

Attached Files

#2 colombo2003 Posted 17 March 2015 - 17:56

#3 colombo2003 Posted 24 March 2015 - 11:29

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
colombo2003

Posted 17 March 2015 - 16:27

#2
colombo2003

Posted 17 March 2015 - 17:56

#3
colombo2003

Posted 24 March 2015 - 11:29