Css testo a capo

**globalace** · 07-02-2013, 22:40

Salve utilizzo jquery validator per validare una form, nel mio css ho inserito

codice:

.error { 	
   color:red; 	
   font-size:10px; 	
   font-style: italic; 	
}

però vorrei che il mesaggio d'errore venisse riportato sotto il campo della form e non affianco, come posso gestire questa operazione dal css?
Ecco un estratto della mia form

codice:

<div class="riga">
	<div class="colonna">Nome:</div> 					
         <div class="colonna"><input id="nome" name="nome" type="text"></div> 				
</div>

**sgogghy** · 08-02-2013, 00:07

codice:

<div class="riga">
	<div class="colonna">Nome:</div> 					
         <div class="colonna"><input id="nome" name="nome" type="text"></div> 				
         <div class="errore"></div>
</div>

**icobi** · 08-02-2013, 00:47

yes

**globalace** · 09-02-2013, 00:34

purtroppo no

**sgogghy** · 09-02-2013, 03:22

allora metti la div errore fuori dalla div riga

**globalace** · 09-02-2013, 11:15

mmm purtroppo continua a non funzionare

in più quando si scatena l'errore la box di testo viene ristretta

**sgogghy** · 09-02-2013, 12:20

La box di testo?
Posta più codice html e css...

**globalace** · 13-02-2013, 18:36

Ciao ecco il codice

pagina web

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
  		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <title>Login</title>
		<link href="/resources/template/style.css" rel="stylesheet" type="text/css" /> 
		<link href="/resources/template/table.css" rel="stylesheet" type="text/css" /> 
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
	 	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
		<script src="/resources/js/jquery-1.8.2.js"></script>
		<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>		
		
		<script src="/resources/js/jquery.validate.js" ></script>
		<script src="/resources/js/jquery_pswLogin.js" ></script>
	
    </head>
    <body>
    
	<div id="container">
	        <div id="header">
	        	<h1>titolo</h1>
	        </div>
	        
	        <div id="navigation">
	     	  


<li class="menu"> 
  <ul>
    
    <li class="title">Menù
    <li class="sub-menu">
      <ul>[*]Home[*]Chi siamo[/list]
      [/list]

	        </div>
	        
	        <div id="content">
	        	
	  <div class="tabella">	
		<form name="f" id="f" action="/j_spring_security_check" method="POST">
		     <div class="riga">
					<div class="colonna">
						<h2>Login</h2>
				
					</div>
			 
			 		
					<div class="colonna">
						
					</div>
			</div>
			
		        <div class="riga">
					<div class="colonna">User:</div>

					<div class="colonna"><input type='text' name='j_username' 
					value=''/>
</div>
				
				</div>
				
				<div class="riga">
		        	<div class="colonna">Password:</div>

		        	<div class="colonna"><input type='password' name='j_password'>
</div>

		        </div>
			   

		        <div class="riga">
		      
		        	<div class="colonna"><input name="submit" type="submit" value="Login" class="button"></div>
					<div class="colonna"><input name="reset" type="reset" class="button"></div>
		      	</div>
		      
	
		    </form>
		    
	
		  </div>
    
	        </div>
	        
	        <div id="footer">
	        	xxxx</div>
	</div>
 
</body>
</html>

il css

codice:

html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 80%;text-align: center;}

div#container{width: 850px;margin: 0 auto;text-align: justify;
    border-left: 2px solid #36c;border-right: 2px solid #36c;
    background: url(/ROL_AVOLIO/resources/img/rightcol.jpg) repeat-y top right}


div#header{color: #69c;background:url(/ROL_AVOLIO/resources/img/registro.jpg) no-repeat #fff right top;}
h1,h2{margin: 0;padding:0.5em}
h1{padding-left:0.5em;font: bold 2.3em/100px arial,serif}
h2{color: #999;font-size: 1.5em; text-decoration: underline}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

/*definizione pseudo classi*/
/*stili specifici per il layout*/
div#navigation{float:right;width: 160px}
div#content{margin-right: 240px;padding: 1em;background-color: #fff}
div#footer{clear:right; text-align:center; padding: 0.5em;
    background-color: #69c; color: #000}

/*stili per la navigazione*/
div#navigation ul{margin: 1em 0 1em 1em;padding: 0; list-style-type: none; }
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#369;font: normal 1.0em/1.2em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}

.error {
	color:red;
	font-size:10px;
	font-style: italic;
}

/*creo i form con i div */
.tabella,
.riga,
.colonna { margin: 0; padding: 0; border: 0}
.tabella { display: table; width: 100%}
.riga { clear: both; display: block; display: table-row; width: 100%; height:25px;}
.colonna { float: left; width: 50%; display: table-cell}

.noIscrizione{ 
	color:red;
	font-size:14px;
	font-style: italic;
	font-weight:bold;
}

/*gestione button stile fb*/
.button {
	-webkit-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
	-moz-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
	box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
	background-color:#5B74A8;
	border:1px solid #29447E;
	font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
	font-size:11px;
	font-weight:700;
	padding:2px 8px;
	margin-right:5em;
	height:22px;
	width:100px;
	color:#fff;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px
}

.alignleft { float: left; padding: 15px 15px 15px 0; }

grazie in anticipo

**sgogghy** · 13-02-2013, 20:35

codice:

		<form name="f" id="f" action="/j_spring_security_check" method="POST">
		     <div class="riga">
					<div class="colonna">
						<h2>Login</h2>
				
					</div>
			 
			 		
					<div class="colonna">
						
					</div>
			</div>
			
		        <div class="riga">
					<div class="colonna">User:</div>
					<div class="colonna"><input type='text' name='j_username' 
					value=''/></div>
					<div >Errore</div>
				
				</div>
				


				<div class="riga">
		        	<div class="colonna">Password:</div>

		        	<div class="colonna"><input type='password' name='j_password'>
</div>
					<div >Errore</div>
		        </div>
			   


		        <div class="riga">
		      
		        	<div class="colonna"><input name="submit" type="submit" value="Login" class="button"></div>
					<div class="colonna"><input name="reset" type="reset" class="button"></div>
		      	</div>
		      
	
		    </form>

Così?

**globalace** · 13-02-2013, 23:47

<div >Errore</div> ????
non funziona

Discussione: Css testo a capo

Strumenti discussione

Ricerca discussione

Visualizza

Css testo a capo

Permessi di invio