Ramka w html, Tak dokładnie to nie ramka, ale nie ma lepszego słowa Opcje

[mlawnik]

Witam,
chciałbym stworzyć efekt taki jak na tym zdjęciu:

(IMG:http://s3.envato.com/files/259140/4_SuccessMessage.jpg)
i tym:
(IMG:http://s3.envato.com/files/259140/2_AdvancedErrorHandling.jpg)

ikonkę z pierwszego screenshota mam. (należy do zestawu silk icons z famfamfam.com tu)

Czy ktoś pomógłby mi w tym?

P.S. Ma to być część mojego pierwszego większego projektu który jest tu

Pozdrawiam i z góry dziękuję,
mlawnik

Ten post edytował mlawnik 25.04.2010, 13:19:59

[mlawnik]

Witam,

@darophp, nie chodzi mi o sprawdzenie formularza tylko tą konkretną
ramkę u góry.

Znalazłem stronę skryptu, z którego pochodzi ten screenshot:
http://codecanyon.net/item/awesome-contact...n_preview/83358
Tu kod jego css:

CODE

body {
font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
font-size: 0.8em;
margin-top: 40px;
margin-bottom: 60px;
}

h1 {
text-align: center;
margin-bottom: 10px;
}

.box {
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
width: 50%;
margin: auto;
padding: 10px 20px;
border: 1px solid #3399cc;
}

fieldset {
border: none;
padding-left: 0px;
padding-bottom: 20px;
margin-bottom: 20px;
margin-left: 0px;
border-bottom: 1px solid #cccccc;
}

legend {
font-size: 14px;
font-weight: bold;
margin-left: 0px;
margin-bottom: -10px;
padding-left: 0px;
color: #3392cf;
}

fieldset p {
clear: both;
padding-top: 10px;
width: 400px;
}

fieldset p.first {
padding-top: 0;
}

fieldset label {
float: left;
width: 120px;
padding-top: 3px;
}

fieldset p span {
float: right;
width: 260px;
}

fieldset label span {
float: none;
width: auto;
color: red;
font-weight: bold;
padding-left: 5px;
}


fieldset input, fieldset textarea, fieldset select {
background: #f5f5f5;
border: 1px solid #cccccc;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
resize: none;
}
fieldset input:focus, fieldset textarea:focus, fieldset select:focus {
background: #ffffff;
border: 1px solid #3399cc;
outline: none;
}
fieldset input:hover, fieldset textarea:hover, fieldset select:hover {
border: 1px solid #3399cc;
}

fieldset.captcha {
width: auto;
}
fieldset.captcha p {
width: 240px;
}
fieldset p.message { width: auto; }
fieldset.captcha input { margin-top: 5px; }

input.button {
border: 1px solid #222;
background: #333;
padding: 5px;
width: 180px;
border-radius: 5px;
font-size: 18px;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
color: #fff;
cursor: pointer;
}
input.button:hover {
background: #444;
}

.error {
background: #cc9999;
border: 1px solid #a9343d;
border-radius: 5px;
font-size: 11px;
}
.error p {
font-weight: bold;
color: #6c1218;
text-indent: 20px;
}

.success {
background: #99ff99 url('accept.png') no-repeat 11px 10px;
border: 1px solid #336600;
border-radius: 5px;
font-size: 11px;
}
.success p {
font-weight: bold;
color: #336600;
text-indent: 35px;
}

div tej ramki to success a tej drugiej error.
jednak używając tego arkusza stylów za nic nie mogę dojść z tym do ładu.
Fakt że nie znam CSS, ale coś jest nie tak.

[pedro84]

div tej ramki to success a tej drugiej error.
jednak używając tego arkusza stylów za nic nie mogę dojść z tym do ładu.
Fakt że nie znam CSS, ale coś jest nie tak.

No to poczytaj i się naucz, przecież to nic trudnego. Musisz tylko do odpowiedniego diva dostosować odpowiednią klasę. Jak jest bład, to klasę error, jak jest wiadomość wysłana, to klasę success.