Caixas de texto em imagem
Boa noite! Sou iniciante em html e alguém poderia me ajudar a "integrar" uma caixa de texto a uma imagem?
- Basicamente o que eu fiz foi criar tudo na imagem do background (inclusive a caixa onde ficam as caixas de texto) e depois colocar as caixas de texto na posição que ficassem adequadas (Chrome):
- Entretanto, quando abro no Firefox elas ficam no local errado:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<form>
<input name="nome" type="text" id="nome" align: center; style="font-family: Arial; font-size: 10pt; color: #D4D4D4; vertical-align: middle; border: 0.5px solid #826F00; padding: 9px; background-color: #1e2327; width:331px" size="40"> <br/><br/><br/>
<input name="sobrenome" type="text" id="sobrenome" style="font-family: Arial; font-size: 10pt; color: #D4D4D4; vertical-align: middle; border: 0.5px solid #826F00; padding: 10px; background-color: #1e2327; width:331px">
</form>
<h1> </h1><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/> <br/><br/><br/> <br/><br/><br/><h1> </h1>
</body>
</hmtl>estilo.css
body {
background:url(nome-e-sobre.jpg) no-repeat;
background-size: cover;
background-attachment: scroll;
}input {
position: relative; top: 282px; left: 492px;
}Acho que as perguntas que eu queria fazer são:
- Como eu "integro" essas caixas de texto à caixa verde de login?
- Como deixo a caixa verde (com as caixas de texto) centralizada?
Desculpe as perguntas bobas, estou iniciando em html e preciso de uma ajuda quanto a isso. Obrigado, boa noite!
Discussão (1)
Carregando comentários...