CSS: Grozavie

Ma chinui si eu de ceva vreme sa rezolv o problema idioata. Am intr-o pagina, pus bannerul ca imagine de fundal la o celula de tabel. Vreau sa fac un login in celula asta, aliniat pe dreapta. Am pus un <form> intr-un <div>, iar toate elementele formulatului sunt puse in interiorul tagului <form>.

Am urmatoarele declaratii CSS:

.noselect{
 -moz-user-select: none;
 -khtml-user-select: none;
 user-select: none;
 cursor: default;
}

img{border-width: 0;}
body{
 font-family: Tahoma;
 font-size: 12px;
 background-image: url(Images/bg.jpg);
}

#pageTable,td,tr{
border-collapse:collapse;
margin:0;
padding:0;
border:0;
vertical-align: top;
}

#banner{
 text-align: right;
 vertical-align: bottom;
 width: 745px;
 height: 150px;
 background-image: url(Images/banner.bmp);
}

#LoginBox{
display:block;
padding: 10px;
text-align:right;
font-family:"courier new";
border-width: 1px;
border-color: black;
border-style: dotted;
background-color: #F0F0F0;
}

La care se adauga declaratiile HTML:

<td id="banner">
 <div id="LoginBox" class="hide">
  <h1>Login</h1>
  <form id="LoginForm" onsubmit="Login();return false;">
   .........
  </form>
 </div>
</td>

Problemele sunt:
-- div-ul se intinde de la stanga la dreapta, pe tot spatiul disponibil; in IE se intinde si de sus in jos.
-- div-ul se aliniaza spre stanga, nu spre dreapta, desi am specificat peste tot sa se alinieze la dreapta

Ziceti-mi si mie unde gresesc, ca e prea de tot procaria asta.

In DIV-ul ce contine fundalul, il asezi pe cel care contine caseta de Login:

<div id="banner" style="width:745px; height:150px; background-color: red;">
   <div id="LoginBox" style="float:right; border: solid 1px;">
	  <h1>Login</h1>
	  <form id="LoginForm"">
		...
	  </form>
   </div>
</div>

N-ar trebui sa mai amesteci tabele cu div-uri. Daca mergi pe TABELE foloseste align="right" in celula corespunzatoare:

<table>
<tr>
<td id="banner" align="right">
  <form>
  ...
  </form>
</td>
</tr>
</table>

Aruncă un ochi aici, poate te ajută
Oricum, combinaţia ta de tablele şi div-uri este dubioasă :|

Chiar nu stiam faza asta cu tabele/div-uri. Nici nu mi-ar fi trecut prin cap ca asta era problema.

Mersi mult.

LE: M-am grabit sa declar problema rezolvata. Tot nu merge. Am scos div-ul, l-am inlocuit cu un tabel. Am scot tabelul, l-am inlocuit cu 2 div-uri. Tot nu se rezolva cu nimic. Macar pe IE merge.

Edited by chri5ty, 03 December 2008 - 09:04.

chri5ty, on Dec 3 2008, 09:03, said:

Ce anume nu merge? Nu se aliniaza formularul la dreapta?
Pune codul HTML.

Forumlarul e scris aici din HTML, dar initial l-am facut din Javascript. Problema ramane aceeasi, pana la urma. TOT ce e mai jos are rostul lui, chiar daca unele lucruri par dubioase. Pagina va fi in totalitate, dinamica, deci Javascript la greu. Nu va fi pic de text in HTML. Fiecare litera si cuvintel de pe ecran vor fi adaugate dinamic.

Uite codul HTML la tot tabelul:

  <table id="gameTable" class="hide">
   <tr style="height: 8px;">
	<td style="background: url(Images/corner1.bmp);width: 8px;"></td>
	<td style="background: url(Images/border_h.bmp)"></td>
	<td style="background: url(Images/corner2.bmp);width: 8px;"></td>
   </tr>

   <tr>
	<td style="background: url(Images/border_v.bmp)"></td>
	<td id="banner" align="right"> <!-- Eu, unul, as vrea sa scot align="right" si sa il pun in CSS-->


	 <table id="LoginBox"><tr><td>
	  <form onsubmit="Login();return false;">
	   <h1>LOGIN</h1>
	   Username:<input size="30" class="hide" type="text" id="altUsrField" value="Type your username"/><input size="30" type="text" id="username"/><br/>
	   Password:<input size="30" class="hide" type="text" id="altPwdField" value="Type your password"/><input size="30" type="password" id="password"/><br/>
	  <input id="submitBtn" type="submit" value="Login"/>
	  </form>
	 </td></tr></table>


	</td>
	<td style="background: url(Images/border_v.bmp)"></td>
   </tr>
   
   <tr style="height: 8px;">
	<td style="background: url(Images/corner1.bmp);width: 8px;"></td>
	<td style="background: url(Images/border_h.bmp)"></td>
	<td style="background: url(Images/corner2.bmp);width: 8px;"></td>
   </tr>
   
   <tr>
	<td style="background: url(Images/border_v.bmp)"></td>
	<td id="gameMenu"></td>
	<td style="background: url(Images/border_v.bmp)"></td>
   </tr>

   <tr>
	<td style="background: url(Images/border_v.bmp)"></td>
	<td id="gameArea">

	</td>
	<td style="background: url(Images/border_v.bmp)"></td>
   </tr>
   
   <tr style="height:8px;">
	<td style="background: url(Images/border_v.bmp)"></td>
	<td style="background: url(Images/border_h.bmp)"></td>
	<td style="background: url(Images/border_v.bmp)"></td>
   </tr>
   
   <tr>
	<td style="background: url(Images/border_v.bmp)"></td>
	<td id="footer"></td>
	<td style="background: url(Images/border_v.bmp)"></td>
   </tr>
   
   <tr style="height:8px;">
	<td style="background: url(Images/corner4.bmp)"></td>
	<td style="background: url(Images/border_h.bmp)"></td>
	<td style="background: url(Images/corner3.bmp)"></td>
   </tr>
  </table>

Uite aici mai tot codul CSS:

img{border-width: 0;}
body{
 font-family: Tahoma;
 font-size: 12px;
 background-image: url(Images/bg.jpg);
}
#gameTable,td,tr{
border-collapse:collapse;
margin:0;
padding:0;
border:0;
vertical-align: top;
}


.noOverFlow{overflow: hidden;}
.hide{visibility:hidden;display:none;}


input{
font-size: 12px;
font-family: tahoma;


}

.noInput{
font-style: italic;
color:#c0d0f0;
}

#noJS{
 text-align: center;
 font-size: 20px;
}

#gameMenu{
background-image: url(Images/menu_bg.bmp);
}

#gameArea{
height: 400px;
background-color: #053489;
}

#footer{
height:80px;
background-color: #871346;
}

#banner{
 text-align: right;
 vertical-align: bottom;
 width: 745px;
 height: 150px;
 background-image: url(Images/banner.bmp);
}
#LoginBox{
display:block;
padding: 10px;
text-align:right;
font-family:"courier new";
border-width: 1px;
border-color: black;
border-style: dotted;
background-color: #F0F0F0;

}

La modul in care ai scris html-ul mai poti sa faci urmatoarele:

Pui align="right" la tabelul care contine LoginBox:

<table id="LoginBox" align="right">
<tr><td>formular login</td></tr>
</table>

SAU:

<table id="LoginBox" style="margin-left: auto; margin-right: 0px; width:300px;>
<tr><td>formular login</td></tr>
</table>

Ai grija la width, caci daca nu o specifici, caseta ce contine formularul se va intinde pe toata suprafata celulei.

Quote

ASTA ERA !!  
Mersi mult.