Forum PHP.pl > szerokość nagłówka

Pomoc - Szukaj - Użytkownicy - Kalendarz

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

AxZx

5.11.2008, 11:26:54

witam

chcę nagłówki h3 ustawić tło. co zrobić, żeby tło było tylko pod tekstem? czyli żeby cały nagłówek miał szerokość tekstu.

vokiel

5.11.2008, 11:46:08

Ustawić line-height, ew padding.

bregovic

5.11.2008, 11:50:40

Aby miał szerokość tekstu? Jedyne co przychodzi mi na myśl to zamknięcie tekstu w span'ie i danie mu tła, ale to dość brzydkie.

Pilsener

5.11.2008, 13:31:25

Uzależnić szerokość nagłówka od rozmiaru tekstu - nadać mu wyświetlanie liniowe, a nie blokowe - dipslay:inline

AxZx

5.11.2008, 13:44:50

a jak z tłem?
przydałoby się zrobić, żeby ten nagłówek miał wysokość 18px - bo taką wysokość ma obrazek tła.

bregovic

5.11.2008, 15:57:16

Ale jak dasz display: inline, to nie ustawisz wysokości. No chyba że dzięki line-height: 18px? Poza tym IMO nagłówki to elementy blokowe. Ja bym to zrobił tak:

[HTML] pobierz, plaintext 
h1 {
	font: 16px/18px Verdana, sans-serif;
}
span {
	background: url(my-background-image);
}
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
<h1><span>This is a test</span></h1>
[HTML] pobierz, plaintext

AxZx

5.11.2008, 16:11:35

jak span jest elementem liniowym to też nie ustawie mu wysokości 18px. a nie chce czcionki ustawiać na 18px tylko 12px.

widocznie nie da się tego zrobić. trudno.

ale i tak dzięki za dobre chęci.

bregovic

5.11.2008, 16:28:50

Ale jak ustawisz line-height, to efekt będzie ten sam.

AxZx

6.11.2008, 02:12:42

nie. span nie zmienia swojej wysokości.

bregovic

6.11.2008, 02:46:54

Oh well, faktycznie. Jeśli zawsze za nagłówkiem masz jakiś element możesz to rozwiązać tak:

[HTML] pobierz, plaintext 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>Header test</title>
		<style type="text/css">
			h1 {
				font: 20px/60px Verdana, sans-serif;
				color: red;
				height: 60px;
				display: block;
				background: maroon;
				float: left;
			}
			p {
				clear: both;
			}
		</style>
	</head>
	<body>
		<h1>This is a test</h1>
		<p>Some text.</p>
	</body>
</html>
[HTML] pobierz, plaintext

AxZx

6.11.2008, 10:09:17

okej. dzięki.
czyli tak jak mówiłem nie da się normalnie tego zrobić. trochę bezsensu.

Pilsener

7.11.2008, 09:01:31

Jak się nie da? Przecież możesz użyć paddingu, żeby powiększyć element liniowy. A jak zastosujesz wewnątrz span to nadaj mu wyświetlanie blokowe - wtedy możesz ustawić bez problemu jego rozmiar. Poza tym line-height to NIE JEST wysokość wiersza a odstęp między liniami...

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.