Problem med CSS och <span>

EDIT: Annat CSS-problem i botten av tråden, villle inte starta en ny tråd då det bygger på det gamla!

Hej!

Sitter och gör en site för företaget. Använder inte tabeller, utan satsar på CSS och <span>. Har dock ett problem, som jag inte har en aning om hur man löser. Jag placerar all design i en CSS-fil (gör span-klasser med width, top och så vidare).

Problemet är att jag nu har en rektangel (en span class) med en ram, som jag vill placera innehåll i. Däri lägger jag ytterligare en span, som jag ska placera text i. Problemet är att jag vill att när text-spannen växer på höjden (när det blir mer text), så ska det påverka ram-spannen så att den utvigdar sig nedåt, med texten inom.

Såhär ser HTML-filen ut:

<span class="news">
<span class="newsHeadline">Testrubrik<br></span>
<span class="newsContent">Textinnehåll
</span></span>

Jag lyckas inte med detta. Någon som kan hjälpa mig?

Mycket tacksam för svar,
Andreas Öjerfors
PC Gaming World

Använd <div> i stället för <span>.

Hjälper det? Vad är det för skillnad på span och div?

Hjälper det?

Testa :i

Vad är det för skillnad på span och div?

http://www.juhlin.nu/wf/blockvsinline.html

Jepp, jag håller på att testa. Var dock lite osäker på vad som skulle vara div och vad som skulle vara div. Låter helt enkelt kontrollen av placering styras av div och formateringen skötas av span. Det verkar rätt, va?

Lite skumt dock, i och med att man kan låta allt skötas av span. Så jag har gjort det tidigare.

Kan dock meddela att det inte hjälper!

<div class="news">
<span class="newsHeadline">Testrubrik<br>
</span>
<span class="newsContent">Textinnehåll</span></div>

Det inom "newsContent" går fortfarande utanför "news" ramar.

Sen kanske någon har en aning om hur jag färgar hela bakgrunden av raden (hela bredden på "news", där "newsContent" har något skrivet). Som det är nu har jag en bakgrund inställd på "newsContent" och bredden på den ställd till 100%, men det var tydligen ett trick som inte fungerar.

Vad är det som inte fungerar?

<div class="news" style="border:1px solid #000">
	<span class="newsHeadline" style="background-color:#DDD; width:100%;">Testrubrik<br></span>
	<span class="newsContent">Textinnehåll<br>
		Nästa rad<br>
		En rad till
	</span>
</div>

Varför inte använda de taggar som skall användas för rubriker och teststycken istället?

<div id="news">
<h1>Rubrik</h1>
<p>
Textinnehåll
</p>
</div>

Tack för din hjälp! =)

Alltså, all positionering och formatering finns i en CSS-fil. "news" har en absolut position, bredd och höjd. Sen kommer rubriken, och sedan innehåller "newsContent".

Problemen är 2:

1. När längden (antalet rader) i "newsContents" blir längre än "news" är positionerad till att vara, så följer inte den boxen med och utvidgar sig i förhållande till innehållet.

2. Jag vill att hela raden (i hela "news" bredd) i allt "newsContents"-innehåll ska ha en färgad bakgrund. Nu blir det bara där själva orden är, och inte hela raden.

Oj oj oj så rostig jag var. Var alldeles för länge sedan jag pysslade med webbdesign! =)

Insider> Och omdefiniera de taggarna i CSS menar du? Först och främst tänker jag inte använda det utseende de gör, och omdefinierar jag deras formatering, så hjälper inte det mycket, eftersom jag använder olika utseende på olika rubriker. Menyrubrik, nyhetsrubrik osv.

Jag länkar till koden så kanske det går bättre:
Vad är det som inte fungerar med den här koden?

Har missat en sak, ramen sköts av en div i toppen! Men jag har kollat alla taggar, och de avslutas på rätt plats.

La upp sidan så man kan ta en kik:
http://www.pcgw.com/index/

.contents {
	border: 1px solid #000000;
	height: 500px; <<<<-----

Höjden är ju bara 500px. Ta bort den.

Problemet är att du positionerar .news absolut. Då spelar det inte någon roll att du lagt den inuti en annan tagg.

Insider> Ok! Testar det!

Tor> Ahopp! Men som static lägger det sig till höger, och som relative så hamnar det fel då också!

Insider> Ok! Testar det!

Det är ingen idé. Det kommer inte funka ändå. ;)

Som jag skrev: Har du skrivit att .news är placerad absolut så är den det. Då spelar det inte någon roll var själva koden ligger i HTMl-filen.

Men realative fungerar?

Nja... Det kommer lösa problemet med att ramen inte täcker hela .news men det kommer inte att se ut som du vill.

Så vad gör jag då? Jag hade tänkt att undvika tabeller den här gången.