Problemer med divs som ikkje vises. CSS relatert.

[siDDis]

Dette er det eg prøver å få til.

 

Alle divene skal vise bilder som top-left, top, top-right, middle-left, middle osv....

Problemet er at sånn som eg har gjort det nå så vises ikkje dei blå boksane.

 

Det fungerer når eg setter inn ein statisk høydeverdi, men eg vil at den skal være dynamisk og justere seg etter kor stor innholdet i middle blir. Er dette mulig å få til?

 

Stygg kode for dei som lurer på korleis det er i kodeform nå:

<div id="confirmationBox" 
style="width:500px; margin-left: auto; margin-right: auto;" 
onclick="closeConfirmationWindow()">
<div id="top_confirmationBox">
	<span id="top_confirm_left" 
		style="height: 40px; width: 40px; background: url('http://olavgg.com/olavgg/images/confirm_top_left.png'); float: left;"></span>
	<span id="top_confirm_center" 
		style="height: 40px; background: url('http://olavgg.com/olavgg/images/confirm_top.png'); width: 420px; float: left;">
		<span id="confirmBoxTitle" style="vertical-align: text-bottom;">Please Confirm</span>
	</span>
	<span id="top_confirm_right" 
		style="height: 40px; width: 40px; background: url('http://olavgg.com/olavgg/images/confirm_top_right.png'); float: left;"></span>
</div>
<div id="middle_confirmationBox">
	<span id="confirm_left" style="clear: left; min-height: 200px; width: 40px; background: url('http://olavgg.com/olavgg/images/confirm_left.png'); float: left;"></span>
	<span id="confirm_center" style="width: 420px; background-color: #cedae0; float: left;">jaja<br/>hehe</span>
	<span id="confirm_right" style="width: 40px; background: url('http://olavgg.com/olavgg/images/confirm_right.png'); float: left;"> </span>
</div>
<div id="bottom_confirmationBox">
	<span id="bottom_confirm_left" 
		style="clear:left; ;height: 40px; width: 40px; background: url('http://olavgg.com/olavgg/images/confirm_bottom_left.png'); float: left;"></span>
	<span id="bottom_confirm_center" 
		style="height: 40px; background: url('http://olavgg.com/olavgg/images/confirm_bottom.png'); width: 420px; float: left;">
		<span id="confirmBoxTitle2" style="vertical-align: text-bottom;">Bottom</span>
	</span>
	<span id="bottom_confirm_right" 
		style="height: 40px; width: 40px; background: url('http://olavgg.com/olavgg/images/confirm_bottom_right.png'); float: left;"></span>
</div>
</div>

[Stian Jacobsen]

ehh.. drop inline css... stygt, rotete og idiotisk...

Problemet ditt er ganske enkelt å fikse, bruk en container på hver rad

<div id="rad1">

<div></div>

<div></div>

<div></div>

</div>

<div id="rad2">

<div></div>

<div></div>

<div></div>

</div>

<div id="rad3">

<div></div>

<div></div>

<div></div>

</div>

[siDDis]

aha så du tenker på at eg heller skal lage vertikale rader? Nå har eg jo laga horisontale.

[JohndoeMAKT]

Han tenker nok noe som dette:

 

http://spackfish.com/hw/bilder/cssproblem.png

[siDDis]

Hmmmm, sliter framleis med det same problemet at høyre og venstre sida ikkje vises.

 

sånn er CSS'en nå

#confirmationBox
{
width:500px; 
margin-left: auto; 
margin-right: auto;
}

#top_confirmationBox
{
height: 40px;
float:left; 
clear:both;
}

#top_confirm_left {
height:100%;
width: 40px; 
background: url('http://olavgg.com/olavgg/images/confirm_top_left.png'); 
float: left;
}

#top_confirm_center
{
	height:100%;
	background: url('http://olavgg.com/olavgg/images/confirm_top.png'); 
	width: 420px; 
	float: left;
}

#top_confirm_right
{
height:100%;
width: 40px; 
background: url('http://olavgg.com/olavgg/images/confirm_top_right.png'); 
float: left;
}

#middle_confirmationBox
{
min-height: 80px;
float:left; 
clear:both;
}

#confirm_left {
height:100%; 
clear: left; 
width: 40px; 
background: url('http://olavgg.com/olavgg/images/confirm_left.png'); 
float: left;
}

#confirm_center
{
height:100%; 
width: 420px; 
background-color: #cedae0; 
float: left;
}

#confirm_right
{
height:100%; 
width: 40px; 
background: url('http://olavgg.com/olavgg/images/confirm_right.png'); 
float: left;
}

#bottom_confirmationBox
{
height: 40px;
float:left; 
clear:both;
}

#bottom_confirm_left {
clear:left;
height:100%; 
width: 40px; 
background: url('http://olavgg.com/olavgg/images/confirm_bottom_left.png'); 
float: left;
}

#bottom_confirm_center
{
height:100%;
background: url('http://olavgg.com/olavgg/images/confirm_bottom.png'); 
width: 420px; 
float: left;
}

#bottom_confirm_right
{
height:100%; 
width: 40px; 
background: url('http://olavgg.com/olavgg/images/confirm_bottom_right.png'); 
float: left;
}

 

og html'en

<div id="confirmationBox" onclick="closeConfirmationWindow()">
  <div id="top_confirmationBox" >
	  <div id="top_confirm_left"></div>
	  <div id="top_confirm_center">
		  Please Confirm
	  </div>
	  <div id="top_confirm_right"></div>
  </div>
  <div id="middle_confirmationBox">
	  <div id="confirm_left"></div>
	  <div id="confirm_center">
		  jaja<br/>hehe
	  </div>
	  <div id="confirm_right"></div>
  </div>
  <div id="bottom_confirmationBox">
	  <div id="bottom_confirm_left"></div>
	  <div id="bottom_confirm_center">
		  Bottom
	  </div>
	  <div id="bottom_confirm_right"></div>
  </div>
</div>

 

Her kan du sjå korleis det ser ut

http://www.olavgg.com/olavgg/index.html?news=5

trykk på submit så skal den html vises midt på skjermen.

Endret 4. november 2007 av siDDIs

[Stian Jacobsen]

Om boksen ikke skal endre fasong eller størrelse, så er problemet ditt lett

du bruker 4 divs

 

<div id="conf_box">
<div id="top"> </div>
<div id="center"><h2>Blah blah blah!</h2><p>Trallalal lalala lalalalala lal</p></div>
<div id="bottom"> </div>
</div>

 

i conf_box setter du hvor bred boksen skal være og plassering

i "top" legger du et bilde som er hele lengden på boksen

i "center" legger du et bilde som er hele lengden på boksen og 1px høy. Dette repeterer du nedover

i bottom legger du et bilde som er hele lengden på boksen

[siDDis]

Jo det fungerer fint, det har eg jo trossalt også gjort i den sidebar/poll greia

 

Men det er ikkje dette eg vil sidan eg planlegger å justere størrelsen osv.

[JohndoeMAKT]

Jeg melder meg ut av tråden. Dynamisk størrelse i to retninger med hjørnebilder er utenfor det jeg greier å komme på en løsning for.

[siDDis]

Satt fleire timer idag og prøvde hardt på mange forskjellige måter, til slutt gav eg opp og valgte tabeller, fungerte heilt smooth

 

<div id="middle_confirmationBox">
<table cellspacing=0 cellpadding=0>
	<tr>
		<td id="confirm_left"></td>
		<td id="confirm_center">jaja<br/>hehe</td>
		<td id="confirm_right"></td>
	</tr>
</table>
</div>