Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Teii din fața casei

E-Mail in serie prin Excel si Out...

Modul alimentare rulou/jaluzea ex...

Recuperare fișiere dupa form...
 Aplicatii stress test RAM

Asigurare auto hibrid

Asus B550M - PC-ul nu porneste di...

Tzanca Uraganu - Inconjurat de Fe...
 explicatie montaj breadboard

3 Doors Down - Kryptonite

Semnalizati cand virati pe un dru...

Succesiune - mostenire apartament...
 Donez Siofor de 1000mg ( diabet t...

Izolatie intre parter si etaj

Hranirea pasarilor din orase -pro...

[unde] goarna tramvai
 

CSS: Grozavie

- - - - -
  • Please log in to reply
7 replies to this topic

#1
chri5ty

chri5ty

    Junior Member

  • Grup: Members
  • Posts: 143
  • Înscris: 31.01.2008
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.

#2
Alta_

Alta_

    Active Member

  • Grup: Members
  • Posts: 1,197
  • Înscris: 22.05.2007
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>


#3
MembruAnonim

MembruAnonim

    MembruAnonim

  • Grup: Banned
  • Posts: 398,226
  • Înscris: 08.10.2015
Aruncă un ochi aici, poate te ajută :)
Oricum, combinația ta de tablele și div-uri este dubioasă :|

#4
chri5ty

chri5ty

    Junior Member

  • Grup: Members
  • Posts: 143
  • Înscris: 31.01.2008
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.


#5
Alta_

Alta_

    Active Member

  • Grup: Members
  • Posts: 1,197
  • Înscris: 22.05.2007

View Postchri5ty, on Dec 3 2008, 09:03, said:

Chiar nu stiam faza asta cu tabele/div-uri. Nici nu mi-ar fi trecut prin cap ca asta era problema.
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.
Ce anume nu merge? Nu se aliniaza formularul la dreapta?
Pune codul HTML.

#6
chri5ty

chri5ty

    Junior Member

  • Grup: Members
  • Posts: 143
  • Înscris: 31.01.2008
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;

}


#7
Alta_

Alta_

    Active Member

  • Grup: Members
  • Posts: 1,197
  • Înscris: 22.05.2007
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.

#8
chri5ty

chri5ty

    Junior Member

  • Grup: Members
  • Posts: 143
  • Înscris: 31.01.2008

Quote

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

ASTA ERA !!  :punk:
Mersi mult.

Anunturi

Bun venit pe Forumul Softpedia!

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate