Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal sou novo em css e estou apanhando o dia todo.
usei como base o código citado pelos colegas desta página:
e no mu caso ficou da seguinte forma:
<div id="field">
<input type="text" size="40" />
<button type="button" id="Pesquisar_botao"><img src="pesquisar.png" alt="Pesquisar" /></button>
</div>_____________
#field {
border: 1px solid #000;
border-radius: 2px;
box-shadow: inset 0 1px 2px #000;
padding: 2px;
width: 200px;
margin-right:auto;
margin-left:auto;
}#field * {
background: transparent;
border: none;
}#field input {
display: block;
float: left;
font: 16pt bold Verdana, Geneva, sans-serif;
height: 40px;
line-height: 40px;
width: 150px;
}#field button {
display: block;
height: 40px;
margin: 0;
margin-left: 160px;
padding: 4px;
width: 40px;
}#field button img {
height: 32px;
width: 32px;
}Só que no meu caso na frente da caixa de texto eu tenho que colocar o palavra Pesquisar
ficaria:
"Pesquisar: + caixa de texto com a imagem dentro"
já tentei inclusive fazer dentro de uma tabela apagando bordas e tal mas não deu certo.
preciso de ajuda.
____________________________________________
meu XHTML COMPLETO:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>TRABALHO DE CSS / XHTML</title>
<link rel="stylesheet" type="text/css" href="Style/estilo.css" />
</head>
<body>
<p></p>
<div style="width: 48%; float: left;"></div>
<div style="width: 48%; float: right;"></div>
<div style="clear: both;"></div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<table>
<caption>Os 9 últimos filmes ganhadores do Oscar</caption>
<tr>
<th>TÍTULO</th>
<th>TÍTULO ORIGINAL</th>
<th>ANO</th>
<th>DIRETOR</th>
<th>ATORES PRINCIPAIS</th>
</tr>
<tr>
<td>O Discurso do Rei</td>
<td>The King Spreech</td>
<td>2010</td>
<td>Tom Hooper</td>
<td>Colin Firth e Geoffrey Rush</td>
</tr>
<tr>
<td>Guerra ao Terror</td>
<td>The hurt locker</td>
<td>2009</td>
<td>Kathryn Bigelow</td>
<td>Jeremy Renner e Anthony Mackie</td>
</tr>
<tr>
<td class="a">Quem quer ser um milionário?</td>
<td class="a">Slumdog Milionaire</td>
<td>2008</td>
<td>Danny Boyle</td>
<td>Dev Patel e Freida Pinto</td>
</tr>
<tr>
<td>Onde os fracos não têm vez</td>
<td>No Contry for old Men</td>
<td>2007</td>
<td>Joel Coen e Ethan Coen</td>
<td>Tommy Lee Jones e Javier Bardem</td>
</tr>
<tr>
<td class="b">Os infiltrados</td>
<td class="b">The Departed</td>
<td class="b">2006</td>
<td class="b">Martin Scorsese</td>
<td class="b">Jack Nicholson e Matt Damon</td>
</tr>
<tr class="c">
<td>Crach - no limite</td>
<td>Crash</td>
<td>2005</td>
<td>Paul Haggis</td>
<td>Sandra Bullock e Matt Dillon</td>
</tr>
<tr class="c">
<td>Menina de ouro</td>
<td>Million Dollar Baby</td>
<td>2004</td>
<td>Clint Eastwood</td>
<td>Morgan Freeman e Hilary Swank</td>
</tr>
<tr class="c">
<td>O senhor dos anéis : O retorno do rei</td>
<td>The lord of the rings: The Return of the King</td>
<td>2003</td>
<td>Peter Jackson</td>
<td>Elijah Wood e Liv Tyler</td>
</tr>
<tr class="c">
<td>Chicago</td>
<td>Chicago</td>
<td>2002</td>
<td>Rob Marshall</td>
<td>Renée Zellweger e Catherine Zeta-Jones</td>
</tr>
</table>
<p></p>
<table id="pes">
<tr>
<th>Pesquisar:</th>
<th>
<div id="field">
<input type="text" size="40" />
<button type="button" id="Pesquisar_botao"><img src="pesquisar.png" alt="Pesquisar" /></button>
</div>
</th>
</tr>
</table>
</body>
</html>______________________________________________
meu css completo:
@CHARSET "ISO-8859-1";
body {
text-align: justify;
margin-top:auto;
margim-right:auto;
margim-bottom:auto;
margim-left:auto;
}div {
font-style: normal;
font-family: verdana;
font-weight:bold;
}caption{
font-weight:bold;
background-color: #7c83e0;
color: #ffffff;
border-width: thin;
border-style: solid;
border-color: black;
text-align: center;
}table{
border-collapse:collapse;
margin-right:auto;
margin-left:auto;
font-style: normal;
font-family: sans-serif;
border-width: medium;
border-style: solid;
}table th{
background-color: #c4c7ea;
text-align: center;
}table .a{
color: blue;
text-decoration: underline;
border-top-style: solid;
border-color: black;
font-weight:bold;
}table .b{
background-color: red;
font-weight: bold;
}table .c{
border-width: thin;
border-style: solid;
border-color: black;
}border-top-style: solid;
border-width: thin;
}
}
#field {
border: 1px solid #000;
border-radius: 2px;
box-shadow: inset 0 1px 2px #000;
padding: 2px;
width: 200px;
margin-right:auto;
margin-left:auto;
}#field * {
background: transparent;
border: none;
}#field input {
display: block;
float: left;
font: 16pt bold Verdana, Geneva, sans-serif;
height: 40px;
line-height: 40px;
width: 150px;
}#field button {
display: block;
height: 40px;
margin: 0;
margin-left: 160px;
padding: 4px;
width: 40px;
}#field button img {
height: 32px;
width: 32px;
}Carregando comentários...