h1 i div tar upp 100%

11 svar · 798 visningar · startad av MickeA.com 29 juli 2008

MickeA.comMedlem sedan feb. 20034 441 inlägg

Frågan29 juli 2008 14:08#1

Hej,

Jag har en sajt där tre divar ligger i rad, med float left.
I varje div ligger ett h1 element som är rubriken och under den ligger en tabell med data.

Det här funkar bra på min mall, men sajten ska in i dotnetnuke och här blir det problem.
Sajten som funkar ser ut såhär:

<div id="toplists-and-support">
	<div class="toplist">
		<h1>TOP LIST</h1>
		<div>
			<table cellpadding="0" cellspacing="0">
			<!-- data goes here -->
			</table>
		</div>
	</div>
	<div class="tournaments">
		<h1>TOURNAMENTS</h1>
		<div>
			<table cellpadding="0" cellspacing="0">
			<!-- data goes here -->
			</table>
		</div>
	</div>
	<div class="support-buttons">
		<h1>NEED HELP? ASK US!</h1>
		<a href="#"><img src="images/button/en-US/button.chat.jpg" alt="button: chat" /></a>
		<a href="#"><img src="images/button/en-US/button.support.jpg" alt="button: support" /></a>
	</div>
</div>

Tillhörande CSS:

div#toplists-and-support {
	margin:				30px 0px 0px 0px;
}

div#toplists-and-support div.toplist_container,
div#toplists-and-support div.tournaments_container {
	float:				left;
}

div#toplists-and-support div h1 {
	margin:				0px 0px 10px 0px;
	font-family:			arial, helvetica, verdana;
	font-size:			18px;
	font-weight:			bold;
	text-align:			left;
}

div#toplists-and-support div.toplist div.toplist_container {
	width:				202px;
	height:				210px;
	margin:				0px 20px 0px 0px;
	background-image:		url(../images/structure/toplist.background.gif);
	background-repeat:		no-repeat;
}

div#toplists-and-support div.tournaments div.tournaments_container {
	width:				410px;
	height:				210px;
	margin:				0px 20px 0px 0px;
	background-image:		url(images/structure/tournaments.background.gif);
	background-repeat:		no-repeat;
}

Problemet tror jag är dotnetnuke, när sidan parsas ser källkoden ut såhär:

<div id="toplists-and-support">
	<div id="dnn__pane_poker_toplist" class="poker-toplist" style="border: 1px #ff0000 dashed;">
		<a name="812"></a>
		<span id="dnn_ctr812_ContentPane" class="DNNAlignleft">
		<!-- Start_Module_812 -->
		<div id="dnn_ctr812_ModuleContent">
			<div id="dnn_ctr812_HtmlModule_lblContent" class="Normal">
				<h1>TOP LIST</h1>
			</div>
		<!-- End_Module_812 -->
		</div>
		</span>
			
		<a name="810"></a>
		<span id="dnn_ctr810_ContentPane" class="DNNAlignleft">
		<!-- Start_Module_810 -->
		<div id="dnn_ctr810_ModuleContent">
			<div class="toplist_container">
				<table cellpadding="0" cellspacing="0">
				<!-- data goes here -->
				</table>
			</div>
		<!-- End_Module_810 -->
		</div>
		</span>
	</div>

	<div id="dnn__pane_tournaments" class="poker-tournaments">
		<a name="813"></a>
		<span id="dnn_ctr813_ContentPane" class="DNNAlignleft">
		<!-- Start_Module_813 -->
		<div id="dnn_ctr813_ModuleContent">
			<div id="dnn_ctr813_HtmlModule_lblContent" class="Normal">
				<h1>TOURNAMENTS</h1>
		</div>
		<!-- End_Module_813 -->
		</div>
		</span>
		
		<a name="811"></a>
		<span id="dnn_ctr811_ContentPane" class="DNNAlignleft">
		<!-- Start_Module_811 -->
		<div id="dnn_ctr811_ModuleContent">
			<div class="tournaments_container">
				<table cellpadding="0" cellspacing="0">
				<!-- data goes here -->
				</table>
	
			</div>
		<!-- End_Module_811 -->
		</div>
		</span>
	</div>
</div>

Se bilden jag bifogar, så blir resultatet.
Har suttit i säkert en timma nu och försökt olika trixs, men lyckas inte lösa det.

Hur ska jag göra?

Tacksam för all hjälp jag kan få!

jarvkloMedlem sedan juli 20013 378 inlägg

29 juli 2008 15:41#2

Brrr....

No offence - men du har inte en länk till siten istället så att man kan undersöka vad som egentligen påverkar vad (baserat på *hela* källkoden) med lämpliga verktyg istället för att "gissa och torrsimma" ? ;) ( Det är inte *få* CSS-definitioner för id:n och klasser du inte bifogat i koden ;) )

... men om jag skall gissa, så tycker jag att det ser ut som om du har fått "ut" h1:an från sin container samtidigt som du float:ar "de grå rutorna"....
Kanske har du med en position: i #dnn_ctr813_HtmlModule_lblContent eller .normal - typ ?

MickeA.comMedlem sedan feb. 20034 441 inlägg

29 juli 2008 16:08#3

De id'n som DNN sätter har inget med Css'en att göra.
DNN's egna stilmallar är helt borttagna och hela sajten baseras på min css.

Av det jag ser ovan tycker jag att det är hemskt att se flera divar som ligger inuti ett span element.

jarvkloMedlem sedan juli 20013 378 inlägg

29 juli 2008 18:11#4

Yep - det är lätt att missa att varken .poker-toplist eller .poker-tournaments har float: left i din CSS - vilket verkar vara orsaken i FireFox iallafall;)

(fast det är klart, hade jag inte fått länken till sidan via PM hade jag nog inte upptäckt det i brådrasket eftersom jag hela tiden trodde att det fanns mer kod ;) )

Kommer du vidare med den del-hjälpen?

MickeA.comMedlem sedan feb. 20034 441 inlägg

29 juli 2008 19:10#5

jarvklo skrev:

Kommer du vidare med den del-hjälpen?

Ska ta en närmare titt när jag kommer tillbaka till jobbet imorgon, tack så länge, jag återkommer om det fortfarande strular!

MickeA.comMedlem sedan feb. 20034 441 inlägg

29 juli 2008 20:06#6

jarvklo skrev:

Yep - det är lätt att missa att varken .poker-toplist eller .poker-tournaments har float: left i din CSS

Nu testade jag att sätta float: left; på båda divarna genom firebug och då hoppar allt rätt.

Ser lovande ut, men återkommer imorgon när ändrat på riktigt.

jarvkloMedlem sedan juli 20013 378 inlägg

29 juli 2008 21:56#7

Låter hoppfullt som quick'n'dirty-lösning :bire

... men egentligen tror jag att du (och i förlängningen också din kund) skulle vinna i längden på att backa lite i det här läget och istället ge dig på de templates / kodmoduler i DNN som spottar ur sig de där mal-placerade span-elementen till att börja med så att koden som genereras mer liknar den utsende-mall du skrev för hand som underlag - håller du med mig ? ;)

MickeA.comMedlem sedan feb. 20034 441 inlägg

29 juli 2008 22:03#8

Jo, självklart håller jag med dig.
Däremot vet jag inte hur mycket jag kan styra portalens själv-genererade kod, vet du? :)
Anledningen till att jag löst det med rubrik i en modul och data i en annan beror på lokalisering, men jag ska ta en bättre koll på detta imorrn, förhoppningsvis finns det ett sätt att få renare kod.

DNN är expert på att spruta ur sig "skitkod", så jag är inte hundra på om det går att styra om det på nått bra sätt.

MickeA.comMedlem sedan feb. 20034 441 inlägg

30 juli 2008 07:43#9

Tack!
Det var inte svårare än så, känns så sjukt illa när man suttit i över en timma och så är det något sånt enkelt :)

jarvkloMedlem sedan juli 20013 378 inlägg

30 juli 2008 10:31#10

NP - Det första man blir blind på är ögonen - Been there, done that osv :e

... men gå gärna igenom dina masterpages m.m. och försök fnula bort de där span-elementen som sagt - du lär vinna på det i längden ;)

jarvkloMedlem sedan juli 20013 378 inlägg

31 juli 2008 08:30#11

Jo förresten...

<span id="dnn_ctr810_ContentPane" class="DNNAlignleft">

i din exempelkod är troligen automatgenererad via en asp:Label med id:t ContentPane (asp:Label lägger ut en span automagiskt när du tilldelar Text-"egenskapen" ett strängvärde ;) )

Pröva om det inte går att att använda t.ex. asp:Literal eller asp:PlaceHolder i dina masterpages (och usercontrols m.m.) istället där du lägger in modulerna ;)

... men det är en annan historia (sorry för OT :r )

MickeA.comMedlem sedan feb. 20034 441 inlägg

5 aug. 2008 13:28#12

Hej,

"ContentPane" ovan är det id som jag tilldelat min div där modulerna ligger.
Det är något "bakom" som gör att det blir ett spanelement, vet inte exakt vad bara :)