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

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

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