/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Headings og width
Fra : Jonas Delfs


Dato : 28-12-06 02:35

Hej gruppe

Er det muligt at sætte bredden på et heading-element (h1, h2, etc) så
den automatisk tilpasser sig teksten, som det er tilfældet med andre
tekst-elementer (p, span, etc)?
Min situation er at jeg skal have stylet nogle headings bl.a. med en
baggrundsfarve som helst ikke skulle strække sig udover selve teksten.

Jeg har søgt og søgt, med uden at finde nogen som helst dokumentation.

--
Mvh. Jonas Delfs, http://delfs.dk

 
 
Erik Ginnerskov (28-12-2006)
Kommentar
Fra : Erik Ginnerskov


Dato : 28-12-06 03:12

Jonas Delfs wrote:
> Hej gruppe
>
> Er det muligt at sætte bredden på et heading-element (h1, h2, etc) så
> den automatisk tilpasser sig teksten, som det er tilfældet med andre
> tekst-elementer (p, span, etc)?

Det er muligt, ja. Men det er ikke en default egenskab med p, som du
åbenbart mener.

h1 {
display: inline;
color: #fff;
background-color: #f00;
}

<h1>Noget hvid overskrifttekst på rød baggrund</h1>

--
Godt nytår
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



Jørn Andersen (28-12-2006)
Kommentar
Fra : Jørn Andersen


Dato : 28-12-06 03:37

On Thu, 28 Dec 2006 02:34:59 +0100, Jonas Delfs <jonas@delfs.dk>
wrote:

>Er det muligt at sætte bredden på et heading-element (h1, h2, etc) så
>den automatisk tilpasser sig teksten, som det er tilfældet med andre
>tekst-elementer (p, span, etc)?
>Min situation er at jeg skal have stylet nogle headings bl.a. med en
>baggrundsfarve som helst ikke skulle strække sig udover selve teksten.

H1, h2 opfører sig på samme måde som p.
De er blok-elementer og fylder normalt den fulde bredde af den blok,
de er indlejret i, dvs. sidens bredde, hvis ikke de er pakket ind i en
div eller andet.

Span er et inline-element og fylder kun som den tekst den omklamrer.

Så din løsning er nok at lægge en span om teksten i din h1, h2 og så
sætte baggrundsfarvenm på span'en i stedet for på fx h1'en.

H1, h2 og p fylder stadig den fulde bredde, men du kan nøjes med at
farvelægge baggrunden på selve teksten ved at lægge farven på den
indlejrede span.

Jeg har lavet et eksempel på:
<url: http://www.marxisme.dk/test/baggrund.htm>

I eks. 1 er der lagt farve på h1, h2 og p, mens den i eks.2 er lagt på
en indlejret span.

I eks.2, afsnit 2 er lagt forskellige farver på p'en og den indlejrede
span. Jeg har givet lidt forskellig padding, så det bliver tydeligere,
hvad der er hvad.

Som du kan se af den lyserøde farve, fylder p'en stadig den fulde
bredde.

Good luck!

--
Jørn Andersen,
Brønshøj

Erik Ginnerskov (28-12-2006)
Kommentar
Fra : Erik Ginnerskov


Dato : 28-12-06 16:52

Jørn Andersen wrote:

> Så din løsning er nok at lægge en span om teksten i din h1, h2 og så
> sætte baggrundsfarvenm på span'en i stedet for på fx h1'en.

Den går ikke. Da span er et inline-element, må det ikke indeholde et
blocklevel-element. Hvis du prøver at lave en validering på en sådan
konstruktion, vil du få fejl.

Løsningen er - som jeg skrev kl. 0312 - at omdefinere hx-elementerne til at
blive vist som inline-elementer.

--
Godt nytår
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



Jonas Delfs (28-12-2006)
Kommentar
Fra : Jonas Delfs


Dato : 28-12-06 17:33

Erik Ginnerskov skrev:
> Jørn Andersen wrote:
>
>> Så din løsning er nok at lægge en span om teksten i din h1, h2 og så
>> sætte baggrundsfarvenm på span'en i stedet for på fx h1'en.
>
> Den går ikke. Da span er et inline-element, må det ikke indeholde et
> blocklevel-element.

Det siger han vel heller ikke - han foreslår jo netop at putte
span-elementet inden i h1-elementet.
Det ser ud til at validere fint som XHTML 1.0 Strict.

--
Mvh. Jonas Delfs, http://delfs.dk

Jonas Delfs (28-12-2006)
Kommentar
Fra : Jonas Delfs


Dato : 28-12-06 21:24

Jonas Delfs skrev:
> Erik Ginnerskov skrev:
>> Jørn Andersen wrote:
>>
>>> Så din løsning er nok at lægge en span om teksten i din h1, h2 og så
>>> sætte baggrundsfarvenm på span'en i stedet for på fx h1'en.
>>
>> Den går ikke. Da span er et inline-element, må det ikke indeholde et
>> blocklevel-element.
>
> Det siger han vel heller ikke - han foreslår jo netop at putte
> span-elementet inden i h1-elementet.
> Det ser ud til at validere fint som XHTML 1.0 Strict.

- og tak for svar til alle bidragydere. Så blev jeg dét klogere...

--
Mvh. Jonas Delfs, http://delfs.dk

Livemusik i København: http://kbhlive.dk

Jens Gyldenkærne Cla~ (28-12-2006)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 28-12-06 17:31

Erik Ginnerskov skrev:

>> Så din løsning er nok at lægge en span om teksten i din h1,
>> h2 og så sætte baggrundsfarvenm på span'en i stedet for på fx
>> h1'en.
>
> Den går ikke. Da span er et inline-element, må det ikke
> indeholde et blocklevel-element. Hvis du prøver at lave en
> validering på en sådan konstruktion, vil du få fejl.

Du læser Jørns tekst forkert. Han foreslår span *inden* i h-
elementet, men *uden* om teksten.
Altså <h1><span>[tekst]</span></h1> - hvad der er helt legalt.

Hans eksempelside validerer også uden problemer.


> Løsningen er - som jeg skrev kl. 0312 - at omdefinere
> hx-elementerne til at blive vist som inline-elementer.

Begge dele er muligt. Hvis man ikke har brug for at fjerne
blokvisningen af overskriften (for fx at få den efterfølgende tekst
til at starte på samme linje som overskriften), vil jeg foretrække
Jørns model.
--
Bolig søges. Andel eller leje i Emdrup, Nordvest, Nørrebro, Søborg
eller Brønshøj, max 6000 pr. måned.
Kontakt pr. mail - nospam(at)gyros.dk
Jens Gyldenkærne Clausen

Erik Ginnerskov (28-12-2006)
Kommentar
Fra : Erik Ginnerskov


Dato : 28-12-06 17:52

Jens Gyldenkærne Clausen wrote:

>>> Så din løsning er nok at lægge en span om teksten i din h1, ...

>> Den går ikke. Da span er et inline-element, ...
>
> Du læser Jørns tekst forkert. Han foreslår span *inden* i h-
> elementet, men *uden* om teksten.
> Altså <h1><span>[tekst]</span></h1> - hvad der er helt legalt.

Det er da også rigtigt. Og den konstruktion er helt valid. Jeg undskylder.

> Hvis man ikke har brug for at fjerne
> blokvisningen af overskriften (for fx at få den efterfølgende tekst
> til at starte på samme linje som overskriften), vil jeg foretrække
> Jørns model.

Der kan ganske rigtigt komme nogle småproblemer, hvis efterfølgende element
også er et inline-element og man ønsker et linjeskift imellem. De kan
klares, men med span inde i h er det noget enklere at lave.

--
Godt nytår
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste