Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> 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
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
rav1989
post 1.06.2012, 20:49:18
Post #3





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

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

Dziękuję, działa świetnie smile.gif

Zrobiłem jeszcze aby ta "wypukłość" z tytułem była na dole (analogicznie): 
[HTML] pobierz, plaintext 
  1.  .menu{
  2.     width:100%;
  3.     height:40px;
  4.     border-top:1px solid #000;
  5.     }
  6.  
  7. .menu h1{
  8.     display:inline-block;
  9.     margin:0 0 0 20px;
  10.     height:100%;
  11.     border: 1px solid #000;
  12.     border-radius: 0 0 15px 15px;
  13.     padding:0 6px;
  14.     background:#fff;
  15.     border-top:none;
  16.     }
[HTML] pobierz, plaintext

Tylko coś nie do końca zadziałało... mianowicie tam gdzie ma być przerwa nadal jest linia (coś chyba trzeba dać 1px w górę lub dół).

Pozdrawiam
Go to the top of the page
+Quote Post
« 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: 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 Wersja Lo-Fi Aktualny czas: 26.06.2025 - 14:15
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn