h1, h2 stb. címek szélességének meghatározása

**HAL9000** · 2010-02-14, 08:05

Azt szeretném megoldani css-ben, hogy a címek - mint valami fülek - pont olyan sorszélességet foglaljanak, mint amekkora a beírt szöveg.

Ezt úgy lehetne látni, hogy a címek háttere saját színnel rendelkezik, tehát mintha sorkiemelővel lenne áthúzva, de csak a szöveg tényleges hosszáig, a sor végi üres rész nem.

Köszi a megoldást előre is

-----------

Ui:

primadiscount.de/images/nescafeclassic200web.jpg - tessék figyelni a NEU feliratot! Így szeretném valahogy.

Hasonló témák:

**pez** · 2010-02-14, 10:32

Lehet, hogy félreértelek, de a címek alatti szöveg (mondjuk <p>) meghatározott szélességű?

**sitebuilder** · 2010-02-14, 10:56

Beleteszed egy divbe? Adsz neki pár pixel margót, és a szöveget középre igazítod. Esetleg állítasz betűközt.

Esetleg szétlesel a neten, tuti van olyan, amire gondolsz, és onnan "eltanulod" a megoldást.

**pez** · 2010-02-14, 11:11

Talán még div-be se kell tenni, mert a h1..hx blokkszintű elemek, tehát width tulajdonság megadható + háttérszín + margó + keret meg ami kell.

**sbs** · 2010-02-14, 11:52

remélem erre gondoltál

padding / margin sorrend: fent, jobb, lent, bal
Ha margin bal/jobb = 0 a H1 háttérszínt kihúzza végig
Ha margin bal/jobb <> 0 a H1 háttérszín előtt és után az eredeti háttér lesz

Ha padding bal/jobb = 0 a H1 pont a szélétől kezdődik
Ha margin bal/jobb <> 0 a H1 -nek lesz behúzása

#header h1{
font-family: "Trebuchet MS", "Courier New";
font-size: 24px;
font-weight: normal;

background-color: #0090;
color: #090;

margin: 10px 10px 10px 10px;
padding: 10px 20px 0px 20px;
}

pl: http://www.babyfriendlyapartmentbudapest.com/

itt még háttérkép is van a H1 mögött:

#subcontent1 h2, {
font-family: Helvetica;
font-size: 20px;

color: #edefef;
background-color: #9cc;
background-image: url(elemek/h2background.jpg);
background-repeat: repeat-x;

margin: 5px 0 20px 0;
padding: 10px 0px 10px 70px;
}

**HAL9000** · 2010-02-14, 11:55

És az hogy a leírt szöveg határozza meg a szélességét?

**sbs** · 2010-02-14, 11:56

Ja már értem:

a H1 egy block szintű elem. Ezért át kell állítani nem-blokk szintűre azaz:

h1{
display: inline;
}

igy nem húzza ki a sor végéig a hátteret

**HAL9000** · 2010-02-14, 12:03

Már majdnem jó, de így belelóg a háttere az alatta és felette lévő div-ekbe

**ARTidas** · 2010-02-14, 12:07

<br clear="all" />

Elemmel tudod eltörni, hogy ne tűnjön át másba. Alatta és felette.

Cheers,

**HAL9000** · 2010-02-14, 12:07

h2{
font-family: Georgia;
font-size: 20px;
margin: 20px 0px 0px 0px;
color: #666666;
font-weight: normal;
background-color: #F8F8F1;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 20px;

Most ez a helyzet, és ezzel már majdnem jó: display: inline;