Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Ramka w html, Tak dokładnie to nie ramka, ale nie ma lepszego słowa
mlawnik
post
Post #1





Grupa: Zarejestrowani
Postów: 455
Pomógł: 49
Dołączył: 12.04.2010

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
pedro84
post
Post #2





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

No ale może byś powiedział chociaż z czym masz problem? Pokazał kod?
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #3





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

daj jakiegoś diva np 

[CSS] pobierz, plaintext 
  1. <style>
  2.  
  3. #text {
  4. background: #3399ff;
  5. border: 1px solid #000;
  6. -moz-border-radius: 5px;
  7. }
  8.  
  9. #text p {
  10. font-size: 1em;
  11. color: #00ff00;
  12. background: url(ikona.png) no-repeat;
  13. padding-left: 20px;
  14. }
  15. </style>
  16.  
  17. <div id="text">
  18. <p> Jakiś tam tekst Jakiś tam tekst Jakiś tam tekst Jakiś tam tekst</p>
  19. </div>
[CSS] pobierz, plaintext


Ten post edytował krzysztof_kf 25.04.2010, 13:53:31
Go to the top of the page
+Quote Post
mlawnik
post
Post #4





Grupa: Zarejestrowani
Postów: 455
Pomógł: 49
Dołączył: 12.04.2010

Ostrzeżenie: (0%)
-----

Wielkie dzięki,

właśnie o to mi chodziło.
Trochę zmienię kolor i będzie git.
P.S. Czy ktoś zna nazwę tej czcionki na obrazku?
EDIT
Czcionka to Trebuchet MS.
Co jest tu źle?
Kod
<html>
<head>
<style>
#text {
border: 1px solid #336600;
-moz-border-radius: 5px;
}

#text p {
background: #99ff99 url(accept.png) no-repeat 11px 10px;
padding-left: 20px;
display: block;
font-size: 11px;
font-weight: bold;
height: 16px;
margin-bottom: 11px;
margin-left: 0px;
margin-right: 0px;
margin-top: 11px;
text-indent: 35px;
width: 621px;
}
#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;
    font-family: "Trebuchet MS";
    }
</style>
</head>
<body>
<div id="success">
<p> Jaki tam tekst Jaki tam tekst Jaki tam tekst Jaki tam tekst</p>
</div>
</body>
</html>


Ten post edytował mlawnik 25.04.2010, 16:19:36
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #5





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

daj selektor 

[CSS] pobierz, plaintext 
  1.  
  2. <div id="text">
  3. <p>jakiś tam tekst jakiś tam tekstjakiś tam tekstjakiś tam tekstjakiś tam tekstjakiś tam tekst</p>
[CSS] pobierz, plaintext
Go to the top of the page
+Quote Post
darophp
post
Post #6





Grupa: Zarejestrowani
Postów: 309
Pomógł: 20
Dołączył: 13.02.2010
Skąd: Kęty

Ostrzeżenie: (0%)
-----

Pamiętaj, że takie "coś" będzie Ci się wyświetlało z zaokrąglonymi rogami tylko w Firefoxa. To "coś" nazywa się walidacja. Podobny bardzo ładny skrypcik. gdybyś chciał:
Code: http://plugins.jquery.com/project/ufvalidator
Demo: http://www.utopicfarm.com/ufvalidator/

A może napisz co Ci nie działa, a później napisz "co jest źle ?".
Go to the top of the page
+Quote Post
mlawnik
post
Post #7





Grupa: Zarejestrowani
Postów: 455
Pomógł: 49
Dołączył: 12.04.2010

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
pedro84
post
Post #8





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

Cytat(mlawnik @ 26.04.2010, 15:48:12 ) *
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.
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #9





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Możesz podać link do strony wrzuć coś żeby można było coś pomóc na tą chwilę sam css nie wystarczy .
Go to the top of the page
+Quote Post
mlawnik
post
Post #10





Grupa: Zarejestrowani
Postów: 455
Pomógł: 49
Dołączył: 12.04.2010

Ostrzeżenie: (0%)
-----

Link do strony: http://codecanyon.jordanh.net/demo/
Ramka pojawia się po wypełnieniu formularza.
Postidam ten skrypt, służy do wysyłania maili do autorów.
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #11





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Cytat(mlawnik @ 26.04.2010, 19:34:31 ) *
Link do strony: http://codecanyon.jordanh.net/demo/
Ramka pojawia się po wypełnieniu formularza.
Postidam ten skrypt, służy do wysyłania maili do autorów.



No i co nie działa ci mam się domyślić ?
Go to the top of the page
+Quote Post
pedro84
post
Post #12





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

Cytat(mlawnik @ 26.04.2010, 19:34:31 ) *
Postidam ten skrypt, służy do wysyłania maili do autorów.

Skoro "posiadasz" ten skrypt to w nim wszystko działa. W dodatku, to jest skrypt formularza kontaktowego...
Go to the top of the page
+Quote Post
mlawnik
post
Post #13





Grupa: Zarejestrowani
Postów: 455
Pomógł: 49
Dołączył: 12.04.2010

Ostrzeżenie: (0%)
-----

Znalazłem rozwiązanie.
Ale najpierw kilka rzeczy.
--> Dziękuję @krzysztof_kf za kod bazowy i pokazanie mi podejścia.
--> Dziekuję @darophp za dobre chęci
--> @pedro84 nie zrozumieliśny się (źle się wyraziłem) (IMG:style_emoticons/default/sciana.gif)
--> FF i Chrome jest z zaokrąglonymi rogami w IE nie (innych nie sprawdzałem).
--> dokonałem używając Developer Tools w Google Chrome (to nie jest reklama).
--> zaokrąglone rogi odpowiadają atrybuty:
[HTML] pobierz, plaintext 
  1. border-bottom-left-radius: 5px 5px;
  2. border-bottom-right-radius: 5px 5px;
  3. border-top-left-radius: 5px 5px;
  4. border-top-right-radius: 5px 5px;
[HTML] pobierz, plaintext

A teraz rozwiązanie:

CODE

<style>
#text {
background: #99FF99;
border: 1px solid #336600;
-moz-border-radius: 5px;
display: block;
margin-top: 1em;
margin-right: 0px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
height: 38px;
width: 500px;
}

#text p {
font-size: 12px;
color: #336600;
font-family: "Trebuchet MS";
font-weight: bold;
margin-bottom: 11px;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
text-indent: 8px;
height: 16px;
background: url(http://codecanyon.jordanh.net/demo/assets/accept.png) no-repeat;
background-position: 10px;
padding-left: 22px;
}
</style>

<div id="text">
<p>Jaki tam tekst Jaki tam tekst Jaki tam tekst Jaki tam tekst <a href="http://adres strony">opis</a> </p>
</div>


Jescze raz dziękuję za pomoc.
Pomógł dla wszystkich.
Go to the top of the page
+Quote Post
pedro84
post
Post #14





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----

Widocznie (IMG:style_emoticons/default/smile.gif)

Generalnie to możesz dać po prostu:
[CSS] pobierz, plaintext 
  1. border-radius:5px;
[CSS] pobierz, plaintext

a masz mniej kodu = mniej do edycji jak będziesz chciał zmienić = ciutkę mniejszy plik (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 22:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn