Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

Salariu prea mare - ordin de mini...

Servodirectie Massey Ferguson 35x...

Izolare pod casa
 Masina buget 5000 euro

Reparare lustra led

Essilor vs. Hoya

Acces blocat / Website T5
 Medieval (2022)

Secolul XXI suna (1964)

Software pentru calculat suprafet...

Program copiere date Samsung J5 l...
 Contestatie amenda anulata in ins...

Folosire filezilla

Alegere panouri fotovoltaice

Intrare gratuita la Antipa daca a...
 

Poza cu rama alta poza - putin ajutor

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

#1
colombo2003

colombo2003

    Senior Member

  • Grup: Senior Members
  • Posts: 6,310
  • Î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... :D :(

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


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


#2
colombo2003

colombo2003

    Senior Member

  • Grup: Senior Members
  • Posts: 6,310
  • Î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;
}



#3
colombo2003

colombo2003

    Senior Member

  • Grup: Senior Members
  • Posts: 6,310
  • Î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!

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