PDA

Pogčedajte punu verziju : Kako napraviti ovaj element u CSS ili HTML?


marijano
13. 01. 2010., 21:52
Pomagajte ako znate:

Nov sam u dizajniranju pa sam dosao do problema sa jednim elementom koji treba da ugradim u sajt. Dostavljen mi je izgled uradjen u fotosopu, al ja ne umem da ga napravim u CSS ili HTML-u. Pokusao sam da objasnim da je dovoljno dobro napraviti i pun okvir, ali insistiraju da izgleda bas ovako. :1019:
Primer je u attachmentu.
Konkretno problem mi je da postavim tekst na obod okvira i da da isecem okvir na tom mestu

martinluter
13. 01. 2010., 22:06
Evo resenja:


<fieldset style='width:400px; height:200px; border:2px solid red; color:red;'>
<legend style='padding:0px 4px 0px 4px;'>Test</legend>
</fieldset>


Ove style-ove mozes da izvuces i smestis u CSS

[nq]
13. 01. 2010., 22:51
yap, ali samo ako je u pitanju forma, inace uzmi lepo DIV lupi mu border, a gore zalepi absolutnim pozicioniranje neki p, span, sta vec hoces i samo mu zalepi pozadinu da sakrije border.

ivanhoe
13. 01. 2010., 23:51
a mozes recimo i ovako:

.tvojBox { border:1px solid #f00; }
.tvojTitle {
padding: 0 10px;
margin-top: -30px; /* ili koliko vec treba zavisno od velicine fonta */
background-color:#fff;
}

marijano
15. 01. 2010., 11:58
Extra. Hvala.

Samo imam jos jedan problemcic - ivice treba da budu zaobljene (coskovi kvadrata).

Mladjo
15. 01. 2010., 17:13
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px

I stavis koliki radius hoces. Ovo ne radi u nijednom IE.

japan
15. 01. 2010., 18:04
http://malsup.com/jquery/corner/

Krsto
26. 01. 2010., 17:52
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px

I stavis koliki radius hoces. Ovo ne radi u nijednom IE.

Meni često i u raznim Operama pravilo frku ... :mad:

WebDizajniranje
02. 04. 2010., 22:49
japan,

Ovaj jQuery corner sa tvoga linka mi izgleda fantastičan, proučiću ga detalnije da vidim kako funkcioniše. Ja sam do sada zaobljene ivice radio na primitivan način, obmotavanjem nekolkiko div-ova oko sadržaja. Hvala na linku.