Help at CSS/HTML

[alexer13]

Am o clasa comuna pentru panouri in care vreau sa pot introduce linkuri, insa divul este absolut. Cum pot introduce in acest div linkuri ?

.continut-panou-2{
     width: 226px;
	 height: 90px;
	 background-color:#f3f3f3;
	 border-radius: 10px;
	 margin-top: 30px;
	 position:absolute;
     left:209px;
     top:1200px;
     z-index:-1;
	 box-shadow: 0 0 2px #888;
	 }

html..

<div class="continut-panou-2"><br>
<span onmouseout="this.style.opacity=0.3;this.filters.alpha.opacity=30" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=10" style="opacity: 0.3;">
				 <a href="ymsgr:SendIM?idmess" class="continut-panou-2"><img src="resurse/yahoo-soc.png" class="stanga" title="Yahoo" width="40" height="40"/></a>
</span>
</div>

[JohnDoe]

Deci, ai 2 elemente avand clasa .continut-panou-2 cu pozitia absoluta, div-ul cu clasa .continut-panou-2 contine un span care are niste javascript copy-paste iar acel span contine o ancora ( a.k.a. "link" ) care de asemenea are clasa .continut-panou-2 (.continut-panou-2-ception).

Cele doua elemente care au aceeasi clasa sunt pozitionate in exact acelasi loc, cu aceeasi dimensiune (adica una peste cealalta) ... deci ce vrei tu sa faci?

Am vazut ca pui multe intrebari, de mult timp... ai putea sa iti pui mintea la lucru si inveti, pentru niste prostii in html/css tot faci topicuri.

Edited November 20, 2012 by JohnDoe

[alexer13]

so treaba arata asa :

HTML

<div class="panou 1 ">

<h2 class="titlupp">Conducere</h2>

<div class="continut-panou-1">

<Br>

<center><img src="resurse/poza.png" width="100" height="100"/>

<p>

TEXT<br>

<b>TEXT </b><br>

<b>TEXT</b> <br />

<b>Email:</b>

TEXT<br />

</p>

<center><img src="resurse/img.png" width="95" height="125"/></center>

<p>TEXT<br>

<b>TEXT </b><br>

<b>TEXT</b> <br />

<b>TEXT<br />

</p>

</center>

</div>

</div>

<br><br><br><br><br>

<div class="panou 2">

<h2 class="titlupp">Socializare</h2>

<div class="continut-panou-2"><br>

<span onmouseout="this.style.opacity=0.3;this.filters.alpha.opacity=30" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=10" style="opacity: 0.3;">

<a href="ymsgr:SendIM?idmmess" class="continut-panou-2"><img src="resurse/yahoo-soc.png" class="stanga" title="Yahoo" width="40" height="40"/></a>

</span>

</div>

</div>

CSS

.panou{

width:250px;

height: 250px;

background-image:url(resurse/panou.png);

background-repeat: no-repeat;

background-position: top left;

margin-bottom: 150px;

}

.panou h2{

font-size:23px;

color:#fff;

}

.2,.3,.4{

float:left;

width:250px;

height:220px;

}

.titlupp{

padding: 10px;

margin-top: 9px;

margin-left: 60px;

position:absolute;

}

/*PANOU 1 */

.continut-panou-1{

width: 226px;

height: 431px;

background-color:#f3f3f3;

border-radius: 10px;

margin-top: 30px;

position:absolute;

left:209px;

top:725px;

z-index:-1;

box-shadow: 0 0 2px #888;

}

.continut-panou-1 img{

border:5px solid #fff;

box-shadow: 0px 0px 2px #888;

}

.continut-panou-1 p{

padding: 5px;

}

.continut-panou-1 p:first-letter{

margin-left:20px;}

/*PANOU 2 */

.continut-panou-2{

width: 226px;

height: 90px;

background-color:#f3f3f3;

border-radius: 10px;

margin-top: 30px;

position:absolute;

left:209px;

top:1200px;

z-index:-1;

box-shadow: 0 0 2px #888;

}

.continut-panou-2 p{

padding: 5px;

}

.continut-panou-2 p:first-letter{

margin-left:20px;}

Aici am improvizat destul de mult..

Iar eu vreau ca in panou 2 sa pun unele icoane cu linkuri externe.

[Pacalici]

Nu prea am inteles eu ce vrei tu sa faci dar am cateva observatii:

1. Nu ai inchis un tag <b> bine.

2. ai pe undeva filter alpha opacity ... aici ai un spatiu : alp ha

3. Nu recomand absolute deloc. Sigur exista si alte solutii.

Mai bine urci undeva ce ai tu sa vedem cu tot cu imagini.

[fulminator]

Deci, ai 2 elemente avand clasa .continut-panou-2 cu pozitia absoluta, div-ul cu clasa .continut-panou-2 contine un span care are niste javascript copy-paste iar acel span contine o ancora ( a.k.a. "link" ) care de asemenea are clasa .continut-panou-2 (.continut-panou-2-ception).

Parca asta e inceputul unui banc din ala repetitiv.

alexer13 : eu o sa te ajut daca urci totul pe jsfiddle.net si imi dai linkul. In loc de poze foloseste background de o culoare ciudata. Apropos... tu ai auzit de firebug? Daca nu, e important sa ne spui. Nu o sa rada nimeni de tine, ba chiar o sa te ajute lumea cum sa il folosesti.

edit: acum observ ca pui intrebari fara sa gandesti.

1. nu este NICIO legatura intre positia absoluta a div-ului si adaugarea de linkuri

2. nu e cod de calitate ala ce tine de dinamicitate. Ori folosesti CSS pseudo-classes, ceva de genul: .continut-panou-2:hover, ori folosesti javascript si jquey, ultimul dintre cele 2 e mai usor, mai profi, mai practic. In niciun caz nu folosesti span sa ii adaugi dinamicitate.

3. iarasi nu e cod de calitate: sa folosesti cat mai putin position absolute, si sa nu folosesti aproape deloc pozitie absoluta IN CLASE. clasele modifica mai multi selectori, nu unul singur, e posibil sa pierzi numarul si nu stii de ce elementele ti se suprapun. position absolute se foloseste IN ID. La ce folosesti tu nu ai nevoie de position absolute deloc.

4. .2,.3,.4 {} - ce inseamna asta? cod slab. da nume clare la clase. Iar daca toate au aceleasi atribute, la ce mai folosesti MAI MULTE CLASE CARE FAC ACELASI LUCRU, in loc de una singura? sunt clase, nu id-uri!

5. margin-left: 60px;

position:absolute;

Nu merge asa. La position:absolute nu ai margin-left, ca ai left. nu ai margin-top, ca ai top. nu exista margini la position:absolute.

6. evita sa folosesti padding, decat numai la containere care au lucruri de acelasi tip, parerea mea. parerile sunt impartite, insa padding iti strica width-ul la div-uri si te pierzi.

7. nu inteleg ce face z-index:-1; si la ce il folosesti, dar in fine...

8. Linkurile le adaugi in cod HTML. Parerea mea e ca e mai bine sa le adaugi cu jquery. codul este ceva de genul: $("#panou-2").append("<a href='#'>Link</a>");

Edited December 22, 2012 by fulminator