position input type text

frenkytribe · 12 Feb 2013

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]

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]

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 · 12 Feb 2013

ciao
un paio di osservazioni sul css

Century Gothic -> va messo tra apici
align:center; -> si scrive text-align:center;
position: center; -> ? mai sentito

eviterei cmq di usare la position absolute giusto perchè cambia in base alla risoluzione

frenkytribe · 12 Feb 2013

criric ha scritto:
ciao
un paio di osservazioni sul css

Century Gothic -> va messo tra apici

align:center; -> si scrive text-align:center;

position: center; -> ? mai sentito

eviterei cmq di usare la position absolute giusto perchè cambia in base alla risoluzione

Ok, e come posso risolvere?

criric · 12 Feb 2013

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>

Cerca

Cerca

position input type text

frenkytribe

Utente Attivo

criric

Super Moderatore

frenkytribe

Utente Attivo

criric

Super Moderatore

Discussioni simili