Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Sucul natural de visine fara zaha...

Auchan Gavana - ce pun aștia...

AQUAVIA - apa cu ph 9,4 in noul r...

Recomandare pom pentru umbra
 Se canta manele la nunta?

Nelamurire TVA auto cumparat in UE

Transfer in US

¨leziuni voinicești¨?
 Cu mașina electrica spre ...

Cort in bagajul de mana

Go pro hero 8 black ,a luat apa d...

Aliniament de tuia
 Alcool fara tigari

Cum procedezi noaptea cand urla c...

Ajutor pentru un tanar cu prostat...

Cum dau tepe anumiti sellerii pe ...
 

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: 338,642
  • Î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

Chirurgia spinală minim invazivă Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

www.neurohope.ro

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