Cu acest cod puteti pune textul intr-un chenar elegant.

Incepem prin a pune urmatorul cod in foaia de stil CSS:

Code:

.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
width:600px;
min-height:40px;
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}

.uparrowdiv:after{
content:'';
display:block;
position:absolute;
top:-20px;
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent;
border-style: solid;
border-width: 10px;

}

.downarrowdiv:after{
content:'';
display:block;
position:absolute;
top:100%;
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent;
border-style: solid;
border-width: 10px;
}

.leftarrowdiv:after{
content:'';
display:block;
position:absolute;
top:10px;
left:-20px;
width:0;
height:0;
border-color: transparent black transparent transparent;
border-style: solid;
border-width: 10px;
}

.rightarrowdiv:after{
content:'';
display:block;
position:absolute;
top:10px;
left:100%;
width:0;
height:0;
border-color: transparent transparent transparent black;
border-style: solid;
border-width: 10px;
}

In pagina HTML vom marca casetele cu atributul xarrowdiv,unde x este directia sagetii,putem folosi up,down,left sau right.

Code:

<div class="uparrowdiv">
Ma cheama Gigel si am sageata sus
</div>

<div class="downarrowdiv">
Ma cheama Gigel si am sageata jos
</div>

<div class="leftarrowdiv">
Ma cheama Gigel si am sageata in stanga
</div>

<div class="rightarrowdiv">
Ma cheama Gigel si am sageata in dreapta
</div>

DEMO: [You must be registered and logged in to see this link.]

Informatie: nu sunt facute de mine !

Chiar daca nu sunt făcute de tine pune o sursă măcar pentru ca poate să-ţi facă cineva o Semnalare de abuz pentru Violarea dreptului de autor si iţi poate şterge forumul.

PS: Eu doar am zis ca aşa ar fi mai bine... tu faci ce vrei.

Are dreptate George..

Si e bun scriptul Bravo

Poate dacă fundalul era unul mai atragător gen cel de la aceste mesaje era mai frumos.

cum pot adauga o imagine ?forumul meu este alb complet si nu pot sa pun fundalul acesta negru intelegi?

[code]Eroare

Eroare detectata
Am calculat un numar diferit de "{" si de "}". Aceasta inseamna ca CSS-ul risca sa nu fie valabil si nu va fi afisat corect pe forumul dvs.

Va recomandam sa recititi codul.[code]


[code] .uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
width:600px;
min-height:40px;
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}

.uparrowdiv:after{
content:'';
display:block;
position:absolute;
top:-20px;
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent;
border-style: solid;
border-width: 10px;

}

.downarrowdiv:after{
content:'';
display:block;
position:absolute;
top:100%;
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent;
border-style: solid;
border-width: 10px;
}

.leftarrowdiv:after{
content:'';
display:block;
position:absolute;
top:10px;
left:-20px;
width:0;
height:0;
border-color: transparent black transparent transparent;
border-style: solid;
border-width: 10px;
}

.rightarrowdiv:after{
content:'';
display:block;
position:absolute;
top:10px;
left:100%;
width:0;
height:0;
border-color: transparent transparent transparent black;
border-style: solid;
border-width: 10px;
}[/code]

a pus de asemenea "{" inaintea codului dar tot la fel.imi detecteaza aceasi eroare.poate ca e de la mine din CSS-ul temei

uitati si css-ul

Spoiler: