Forum PHP.pl > Ostylowanie nagłówka

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

rav1989

30.05.2012, 20:05:13

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

hubson87

1.06.2012, 13:32:54

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

Spróbuj tak:

[HTML] pobierz, plaintext 
<title>Horizontal Line Behind a Heading with CSS</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
.menu{
	width:100%;
	height:40px;
	border-bottom:1px solid #000;
}
.menu h1{
 
	display:inline-block;
	margin:0 0 0 20px;
        height:100%;
	border: 1px solid #000;
	border-radius: 15px 15px 0 0;
	padding:0 6px;
	background:#fff;
	border-bottom:none;
}
 
</style>
</head>
<body>  
  <div>
   <div class="menu">
	<h1>Heading Number Four</h1>
  </div>
  <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>
 
  <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>
 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 
  </div>
 
 </body>
</html>
[HTML] pobierz, plaintext

rav1989

1.06.2012, 20:49:18

Dziękuję, działa świetnie

Zrobiłem jeszcze aby ta "wypukłość" z tytułem była na dole (analogicznie):

[HTML] pobierz, plaintext 
 .menu{
    width:100%;
    height:40px;
    border-top:1px solid #000;
    }
 
.menu h1{
    display:inline-block;
    margin:0 0 0 20px;
    height:100%;
    border: 1px solid #000;
    border-radius: 0 0 15px 15px;
    padding:0 6px;
    background:#fff;
    border-top:none;
    }
[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

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.