Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Ostylowanie nagłówka
rav1989
post 30.05.2012, 20:05:13
Post #1





Grupa: Zarejestrowani
Postów: 66
Pomógł: 0
Dołączył: 5.07.2007

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

Witam,

Potrzebuję ostylować nagłówki h1-h6 w konkretny sposób.
Mniej więcej tak:
Tylko w samym CSS.

Czy mógłby mi ktoś napisać jak to zrobić ew. jeszcze lepiej pokazał (nie znam się za bardzo na CSS).

Wymyśliłem coś takiego ale dalej utknąłem: http://jsbin.com/ekexid/5/edit#source

Pozdrawiam

Ten post edytował rav1989 30.05.2012, 21:10:31
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
hubson87
post 1.06.2012, 13:32:54
Post #2





Grupa: Zarejestrowani
Postów: 83
Pomógł: 8
Dołączył: 9.02.2011
Skąd: Wrocław

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

Trochę zakombinowałeś z css'ami:D

Spróbuj tak:

[HTML] pobierz, plaintext 
  1. <title>Horizontal Line Behind a Heading with CSS</title>
  2. <!--[if IE]>
  3.   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  4. <![endif]-->
  5. <style>
  6. .menu{
  7. 	width:100%;
  8. 	height:40px;
  9. 	border-bottom:1px solid #000;
  10. }
  11. .menu h1{
  12.  
  13. 	display:inline-block;
  14. 	margin:0 0 0 20px;
  15.         height:100%;
  16. 	border: 1px solid #000;
  17. 	border-radius: 15px 15px 0 0;
  18. 	padding:0 6px;
  19. 	background:#fff;
  20. 	border-bottom:none;
  21. }
  22.  
  23. </style>
  24. </head>
  25. <body>  
  26.   <div>
  27.    <div class="menu">
  28. 	<h1>Heading Number Four</h1>
  29.   </div>
  30.   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  31.  
  32.   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  33.  
  34.   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  35.  
  36.   </div>
  37.  
  38.  </body>
  39. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post

Posty w temacie
- rav1989   Ostylowanie nagłówka   30.05.2012, 20:05:13
- - hubson87   Trochę zakombinowałeś z css'ami:D Spróbuj ta...   1.06.2012, 13:32:54
- - rav1989   Dziękuję, działa świetnie Zrobiłem jeszcze aby t...   1.06.2012, 20:49:18

« Następny starszy · CSS · Następny nowszy »
 

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

 

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

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

RSS Wersja Lo-Fi Aktualny czas: 28.06.2025 - 23:41
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn