Jump to content
alexer13

Help at CSS/HTML

Recommended Posts

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>

Link to comment
Share on other sites

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 by JohnDoe
Link to comment
Share on other sites

so treaba arata asa :

584edb089a.png

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.

Link to comment
Share on other sites

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 by fulminator
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...