Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ramka w html
Forum PHP.pl > Forum > Po stronie przeglądarki
mlawnik
25.04.2010, 13:11:56
Witam,
chciałbym stworzyć efekt taki jak na tym zdjęciu:


i tym:


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
pedro84
25.04.2010, 13:37:24
No ale może byś powiedział chociaż z czym masz problem? Pokazał kod?
krzysztof_kf
25.04.2010, 13:49:44
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
mlawnik
25.04.2010, 15:50:10
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>
krzysztof_kf
25.04.2010, 16:25:18
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
darophp
25.04.2010, 19:01:53
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 ?".
mlawnik
26.04.2010, 14:48:12
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
26.04.2010, 15:12:39
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.
krzysztof_kf
26.04.2010, 17:19:52
Możesz podać link do strony wrzuć coś żeby można było coś pomóc na tą chwilę sam css nie wystarczy .
mlawnik
26.04.2010, 18: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.
krzysztof_kf
26.04.2010, 18:37:44
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ć ?
pedro84
26.04.2010, 18:49:34
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...
mlawnik
27.04.2010, 14:40:42
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) 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.
pedro84
27.04.2010, 14:59:33
Widocznie 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 smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.