webForumDet fria alternativet

H-taggar ger problem

HTML & CSS

9 svar · 619 visningar · startad av SoulGod

Medlem sedan aug. 20051 200 inlägg
Frågan#1

Håller på att formatera min hemsida nu med CSS-kodning,
och har stött på ett problem med H1-tagg ( och förmodligen fler h-taggar ).
Koden ser ut såhär:
<h1>omBorlänge öppnar upp</h1><h6>( 2009-10-17 Kl 12:35 )</h6>

( Har även prövat denna )
<h1>xx öppnar upp<h6>( 2009-10-17 Kl 12:35 )</h6></h1>

Problemet är att den lägger texten på 2 olika rader.
xx öppnar upp
( 2009-10-17 Kl 12:35 )

Fast ingenting i koden säger att den ska göra det?
Har satt både H1 & H6 till olika storlekar i text,
och även prövat satt padding / margin till 0 på båda,
men den bryter ändå raden.

Varför?

Medlem sedan maj 20011 826 inlägg
#2

H-taggar används för rubriker och raden bryts automatiskt efter. Är det inte en rubrik du vill ha så ska du nog använda <span>-taggen.

Medlem sedan aug. 20051 200 inlägg
#3

Man brukar ju alltid kunna definiera om det med CSS, går inte det?

Medlem sedan maj 20011 826 inlägg
#4

SoulGod skrev:

Man brukar ju alltid kunna definiera om det med CSS, går inte det?

Jo, absolut, det går. Men det bör ju iallafall vara semantiskt rätt. Så är det inte en rubrik du vill ha så ska du inte använda H-taggarna.

Medlem sedan aug. 20051 200 inlägg
#5

Det är en rubrik, därför vill jag korrigera det :P
Men frågan är hur? Har som sagt försökt med både margin & padding

Medlem sedan maj 20011 826 inlägg
#6

Detta kanske kan vara till hjälp: http://www.netmechanic.com/news/vol5/css_no14.htm

Medlem sedan juni 20034 013 inlägg
#7

Det är som sagt h-taggen som i sig säger till att den ska stå på en egen rad. Det kallas för block element. Om du gör om dem till inline-element så kan de blandas med andra på samma rad.

display: inline;

Medlem sedan okt. 2007446 inlägg
#8

Edit: Gahh pucktvåa ;)

skall man vara petig så är det dessutom semantiskt "fel" att ha en h6 direkt efter en h1
Eftersom målet verkar vara att ha
"omBorlänge öppnar upp" stort och datumet lite mindre så skulle jag snarare valt att lägga datumet i en span efter h-taggen
ELLER
Lägga både omBorlänge.. och datumet i h-taggen så att de tillsammans bildar rubriken och sen lagt en span runt datumet och förminskat detta med css
<h1>omBorlänge öppnar upp <span>( 2009-10-17 Kl 12:35 )</span></h1>
h1 span{font-size:12px;}

Medlem sedan juli 2003555 inlägg
#9

Jag tycker att du gör fel.

Regel #1: Om du läser html-koden utifrån vad taggarna betyder så ska den vara meningsfull.

Om man tolkar din kod så _vill_ du ha två rubriker, "h" står ju för "header"/"heading", dvs. rubrik; två h-taggar är två rubriker.

Istället för att definera om vad html-taggarna betyder så tycker jag att du ska angripa problemet ifrån ett annat sätt; är rubriken en huvudrubrik, eller en annan sorts rubrik? (h1 är huvudrubrik, h6 är en liten skitrubrik djupt nere i ett enormt textdokument skrivet på byrokratsvenska)

När du väl vet vad det är för typ av rubrik så får du ta reda på vilken halva av rubriken är det som är den "viktiga" halvan, dvs. vilken halva är det som innehåller den viktigaste informationen i rubriken, den till höger eller den till vänster?

När du bestämt dig för vilken halva som är viktigast så ska du undersöka vad den mindre viktiga halvan är för typ av information; den informationen ska du innesluta i en lämplig tagg. Är det t.ex. en adress så ska den inneslutas i address-taggen. I det här fallet antar jag att det är klockslaget som är mindre viktig information då du försökte sätta den i en h6-tagg, och jag kan inte komma på någon lämplig tagg, så då kan man ta till span-taggen som är en allt-i-allo för inline-element, precis som div är en allt-i-allo för block-element

Mitt förslag är då i så fall:
<h1>xx öppnar upp <span>( 00:00:00 )</span></h1>

Sedan kan du med css få det att se ut som du vill :)

Medlem sedan aug. 20051 200 inlägg
#10

Tack för all hjälp, lösningen blev:
<h1>xx öppnar upp <span>( 00:00:00 )</span></h1>

253 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
124 ms — hämta tråd, inlägg och bilagor (db)
126 ms — ändringar (db)