campo imput che scappa al fondo

[Barman@83]

Ciao a tutto è il mio primo post che faccio qui in CSS.

Sono 2 giorni che non ci dormo per questo problema.

Se notate in questa pagina Modifica Utente
e in quest'altra Inserisci Utente

il campo Indirizzo scatta al fondo della pagina.

Sapete dirmi perchè?

[Barman@83]

Questo è una parte del file Style.css

#Menu
{
    background-image: url(imm_menu/home_r1_c1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    width: 285px;
    height: 436px;
}

#Menu2
{
    
    width: 278px;
    height: 200px;
    
}
#Contenitore
{
    margin: 0px auto 0px auto; 
    background-image: url(fondo.jpg);    
    padding: 0;
    width: 750px;
    
}



#Contenuti
{
    background-image: url(immagini/lato_home_r6_c4.gif);
    background-repeat: repeat;
    background-position: left;
    height: 509px;
    width: 560px;
    position:absolute;
    top: 58px;
    left:295px;
    
}

#Contenuti_Alto
{
    /*background-image: url(immagini/alto.jpg);*/
    background-repeat: no-repeat;
    background-position: center;    
    width: 542px;
    text-align: center;
    height: 160px;    
    position:absolute;
    left :300px;
    top:60px;
    z-index:2;
    
}
#Contenuti_SX
{
    background-image: url(immagini/lato_home_r5_c2.gif);
    background-repeat: no-repeat;
    background-position: center;    
    width: 260px;
    text-align: justify;
    height: 315px;
    position:absolute;
    left : 304px;
    top:230px;
    z-index:2;
        
}
#Contenuti_DX_Newsletter
{
    background-image: url(immagini/lato_home_r7_c4.gif);
    background-repeat: no-repeat;
    background-position: center;    
    width: 253px;
    text-align: left;
    height: 90px;
    position:absolute;
    left : 571px;
    top:443px;
    z-index:2;
    
}

#Contenuti_DX_Registrazione
{
    background-image: url(immagini/lato_home_r5_c4.gif);
    background-repeat: no-repeat;
    background-position: center;    
    width: 253px;
    text-align: center;
    height: 210px;
    position:absolute;
    left : 570px;
    top:230px;
    z-index:2;
    
}

#Contenuti_DX_Barra
{
    width: 24px;
    height: 509px;    
    position:absolute;
    top:58px;
    left:855px;
}
#Indirizzo
{
    text-align: center;
    color: White;
    padding:0;
    margin-top:0;
    position:absolute;
    top:580px;
    left:300px;
} 

In linea ho anche un altro stile che è :

#scheda
{
    height: 470px;
    width: 500px;
    position:absolute;
    top: 78px;
    left:305px;
    z-index:2;
    background-color:#E6E6E6;
    border: 1px solid #333333 ;
} 

[fcaldera]

prova ad eliminare questa regola.

Style.css (line 180)

#Indirizzo {
color:White;
left:300px;
margin-top:0pt;
padding:0pt;
position:absolute;
text-align:center;
top:580px;
}

[Barman@83]

ma questa regola e quella che mette a posto la scritta sotto bianca

se la elimino come faccio ad allinearla ?

[fcaldera]

allora l'errore è un altro: hai dato id="indirizzo" sia al testo bianco che al campo di input e ciò non si può fare. Un id deve essere unico all'interno della pagina, e quella regola css viene applicata ad entrambi gli elementi con quell'id.

potresti cambiare l'id dell'input

[Barman@83]

hai ragione

Va che sono proprio un cretino in canna


E io che mi stavo ancora a segare le palle da 2 giorni quando la cosa era semplicissima


Grazie ancora

[fcaldera]

così "pour-parler", potresti fare la stessa pagina senza tabelle e senza posizionamenti assoluti (come quello che hai dato all'indirizzo in fondo)

[Barman@83]

per i form uso quasi sempre le tabelle in quanto sclero a chiudere uno per uno tutti gli elementi in un div.

Tu hai un altro metodo?

se mi insegni sono pronto a migliorare.

[fcaldera]

questa è una riga del tuo form (largo 500px, ereditato dal div contenitore)

<tr>
	<td >Nome:</td>
	<td width="722"><input name="nome" type="text"  id="nome" >*</td>
</tr>

Una possibile alternativa xhtml tableless usando i float potrebbe essere la seguente:

<fieldset>
     <label for="fldnome">Nome <sup>*</sup></label>
     <input type="text" id="fldnome" name="nome" />
</fieldset>

e il css relativo sarebbe

fieldset {
  margin: 0;  padding: 0; border: 0;
  width: 500px;
  height: auto;
  overflow: hidden;
}

sup {
  font : 8px "Courier New", sans-serif;
}

label, select, input {
  display: inline;  float: left;  margin: 0 15px 0 0;
}

label {  width: 120px; }
input, select {  width: 300px; }

[Barman@83]

Ho ancora u piccolo problema con gli stili differenziati per elementi

ho una regola generele per i link che è questa

a:link, a:visited{
    color:#003366;
    text-decoration: none;
    font-weight: bold;
    }

a:hover{
    color: Fuchsia;
    font-weight: bold;
} 

Poi ho l'elemento #Menu a cui ho assegnato anche delle regole per i Link interni a lui che sono :

#Menu
{
    background-image: url(imm_menu/home_r1_c1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    width: 285px;
    height: 436px;
}

#Menu  a:link, a:visited
{
    border: 1px solid #333333 ;
    background-color:#E6E6E6;
    color:#003366;
    margin: 2px;
    padding:3px;
    
}
    

#Menu a:hover{
    border: 1px solid #333333 ;
    background-color:#E6E6E6;
    margin: 2px;
    padding:3px;
    color: Fuchsia;
    
} 

Ora il problema e che gli stili dell'elemento #Menu sono diventati comuni per tutti i link del sito.

Ho provato a spostare anche l'ordine di scrittura mettendo prima le regole per l'elemento poi i quelle dei link dell'elemento e in fine le regole dei link generali ma non è cambiato nulla neanche se sposto prima le regole generali e poi le specifiche.

Tu che e pensi?