position input type text

frenkytribe

Utente Attivo
17 Gen 2013
87
0
0
Ciao a tutti,
come da titolo ho un problema nel posizionamento di un campo input, posterò anche degli screenshot per farvi capire meglio.

Questo è il codice semplicissimo:
Codice:
<html>
	<head>
		<title>PROVA</title>
	</head>
	<body bgcolor="#c0c0c0" style="padding-top: 30px; align:center;">
		<table align="center" border="0" cellspacing="0" cellpadding="0" width="1004" style="border: solid 2px black; position: center;">
			<tr>
				<td style=" background-image: url(bann.jpg); background-repeat: no-repeat; width: 1004px; height:400px;" >
					<div style="height: 100%;">
						<form method="get">
							<div style="position: absolute; top: 355px; left: 451px; float: left;">
								<input type="text" name="src" id="src" autocomplete="off" style="font: bold 30px 'Century Gothic', Century Gothic; background: transparent; width: 510px; height: 44px; border: 0;">
							</div>
							<div style="position: absolute; top: 355px; left: 970px; ">
								<input type="submit" name="cer" id="cer" value="" style="background: transparent; border: solid 1px; width: 138px; height: 44px;">
							</div>
						</form>
					</div>				
				</td>
			</tr>
			<tr>
				<td bgcolor="lightblue" height="1000">
					sd
				</td>
			</tr>
		</table>
	</body>
</html>

quando lo apro è tutto a posto! (vedi screenshot1).

[Screenshot 1]
ejydy1.jpg


Mentre se rimpicciolisco la finestra del browser entrambi i campi si spostano a destra e non combaciano più con l' immagine di sfondo (vedi screenshot2).

[Screenshot 2]
1zg93cz.jpg


Ho pensato che sarà un problema di proprietà del Div, nello specifico Top e Left perché fanno riferimento alla dimensione del body e non del div di appartenenza.

Sapete come aiutarmi? Ho provato ma non ci sono riuscito, causo solo più danno.
Grazie in anticipo,
Francesco.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
ciao
un paio di osservazioni sul css

  1. Century Gothic -> va messo tra apici
  2. align:center; -> si scrive text-align:center;
  3. position: center; -> ? mai sentito
eviterei cmq di usare la position absolute giusto perchè cambia in base alla risoluzione
 

frenkytribe

Utente Attivo
17 Gen 2013
87
0
0
ciao
un paio di osservazioni sul css

  1. Century Gothic -> va messo tra apici
  2. align:center; -> si scrive text-align:center;
  3. position: center; -> ? mai sentito
eviterei cmq di usare la position absolute giusto perchè cambia in base alla risoluzione

Ok, e come posso risolvere?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
non è consigliato nemmeno mischiare tabelle con div quindi io ti consiglio di cambiare completamente approccio
prova ad eseguire questo codice
HTML:
<html>
    <head>
        <title>PROVA</title>
        <style type="text/css">
            html body {
                text-align: center
            }
            div#contenitore { 
                margin:auto;
                width: 1004px;
                background-color:#ADD8E6; 
            }
            div#testata {
                background-color:#1AA2D2; 
                height:400px;
                width: 100%;
            }
            div#banner {
                width: 100%; 
                height:320px;                
            }
            div#ricerca { 
                margin:auto;  
                width: 80%;
                height:44px;
            }
            div#corpo {      
                width: 100%;
                height:1000px;

            }
            input#src {
                font: bold 30px 'Century Gothic', 'Century Gothic'; 
                background: white; 
                width: 510px; 
                height: 44px; 
                float:left;
                margin-left:12px;
                border: 0;
            }
            input#cer {
                background: transparent;
                border: solid 1px; 
                width: 138px; 
                height: 44px;
                float:left;
                margin-left:12px;
            }
        </style>
    </head>
    <body>
        <div id="contenitore">
            <div id="testata">
                <div id="banner"></div>
                <div id="ricerca">                
                    <form method="get">
                        <input type="text" name="src" id="src"/>
                        <input type="submit" name="cer" id="cer" value=""/>
                    </form>
                </div>
            </div>
            <div id="corpo">
                sd
            </div>				
        </div>
    </body>
</html>
 
Discussioni simili
Autore Titolo Forum Risposte Data
N Problema con position absolute e overflow HTML e CSS 4
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
N [PHP] ERRORE: SyntaxError: Unexpected token N in JSON at position 1 PHP 0
S [HTML] <nav> con position:fixed copre <main> HTML e CSS 0
L [HTML] Position:fixed e overlay HTML e CSS 12
P div fisso con offset() o position() jQuery 2
K position=fixed (contenuto al centro dello schermo anche durante lo scrolling) HTML e CSS 0
P proprietà Position in layout liquido... HTML e CSS 0
novello88 [css3] animated position HTML e CSS 0
F Problema position span con barretta dinamica HTML e CSS 0
I problema overflow con elementi "position absolute" HTML e CSS 3
A modificare comportamento 'position' in stile CSS Javascript 0
D Problema con lo scroll della pagina e del div position:fixed HTML e CSS 0
J Div in position fixed rispetto al suo contenitore jQuery 4
F tooltip position:relative Javascript 0
E Job position: Application developer microsoft dynamics ax Offerte e Richieste di Lavoro e/o Collaborazione 0
E Job position:web/system administartor Offerte e Richieste di Lavoro e/o Collaborazione 0
E Job position: Web /system administrator Offerte e Richieste di Lavoro e/o Collaborazione 0
E JOB POSITION: System Administrator/MS SQL Server Database Administrator Altri Annunci 0
A position:absolute HTML e CSS 3
PTKTheBest IEMOBILE: Position-Relative/Absolute HTML e CSS 0
wayer Position relative & Explorer MS HTML e CSS 7
S problema con position:absolute HTML e CSS 0
gladenko css con position relative HTML e CSS 1
G Input checkbox in CSS HTML e CSS 0
L Ripetere Campi disabilitando input in riferimento ad un valore della select jQuery 0
otto9due Input text: accetta solo numeri e non può essere vuoto. Javascript 9
M Come recuperare molteplici input form PHP 1
F Lettura "input number" dinamico PHP 4
B form gestione input PHP 2
M Creare un campo input select quantità di un numero intero prelevato dal db PHP 3
F Leggere e aggiornare dati di campi <input text> su file di test PHP 0
R Nome input testo+variabile PHP 1
L input (rilevare cambio dati) PHP 3
S riflettere valore di campo input range in live Javascript 0
L input dati con inser into select ? PHP 4
M Compilazione automatica campi in input stessa pagina PHP 0
A attributo "min" per input gestione date PHP 8
F Steps campo input field Javascript 1
C input in sostituzione della select PHP 2
C [RISOLTO]Inserimento variabile php in input html PHP 20
L input (controllo se è stato modificato o no). PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
S [PHP] Recupero nome immagine da Form con input file PHP 3
T [PHP] Autocompilazione input multiple da una select PHP 1
L [Javascript] input variabili di scrittura con canvas Javascript 2
MarkRed Come indicare, in una maschera, il primo controllo d'input, tipo "SetFocus" jQuery 9
L [Javascript] Select option in campi input Javascript 4
elpirata [RISOLTO][Javascript] Datapicker e autocompletamento campo input Javascript 2

Discussioni simili