Fórum Alinhamentoo #499793
31/10/2014
0
Pessoal, queria poder alinhas os textos, todos eles corretos a 100 px a esquerda da caixa, só que ao fazer isso , cada um fica a uma distância ficando assim disproporcional, parece que os 100 px começam a contar após o texto, por isso eles ficam dessa maneira, oque eu posso fazer ??
sendo que preciso fazer o css inline !!!!
o código segue abaixo !!
<DOCTYPE html>
<html lang="pt-br">
<head>
<title>Classificação do Produto</title>
<meta charset="utf-8">
</head>
<body>
<div style="width:600px; text-align:justify">
<p style="background-color:#f5f5f5; width:300px; padding:5px; text-align:center; margin-top:15px"><b>Detalhes Técnicos do Pneu Aquiles</b></p>
<p style="background-color:FFF; width:500px; padding:5px" >Código do Produto<span style="margin-left:100px"> 39720</span></p>
<p style="background-color:#f5f5f5; width:500px; margin-top:-16px;padding:5px">Modelo <span style="margin-left:100px"> Brilhansis2</span></p>
<p style="background-color:FFF; width:500px; margin-top:-16px;padding:5px">Mediada <span style="margin-left:100px"> 185/65R14</span></p>
<p style="background-color:#f5f5f5; width:500px; margin-top:-16px;padding:5px">Aro <span style="margin-left:100px"> 14</span></p>
<p style="background-color:FFF; width:500px; margin-top:-16px;padding:5px">Largura <span style="margin-left:100px"> 185</span></p>
<p style="background-color:#f5f5f5; width:500px; margin-top:-16px;padding:5px">Perfil <span style="margin-left:100px"> 16</span></p>
<p style="background-color:FFF; width:500px; margin-top:-16px;padding:5px">Velocidade <span style="margin-left:100px"> T(até 190km/h)</span></p>
<p style="background-color:#f5f5f5; width:500px; margin-top:-16px;padding:5px">Carga <span style="margin-left:100px"> 86</span></p>
<p style="background-color:FFF; width:500px; margin-top:-16px;padding:5px">Imetro <span style="margin-left:100px"> 94.004/06m/h</span></p>
<p style="background-color:#f5f5f5; width:500px; margin-top:-16px;padding:5px">Garantia <span style="margin-left:100px"> 5 anos (direto do fabricante)</span></p>
</div>
</body>
</html>
Leonardo Xavier
Curtir tópico
+ 0Post mais votado
01/11/2014
Joel Rodrigues
Gostei + 1
Mais Posts
01/11/2014
Edcp_poa
1 - comece o teu aprendizado pelo básico de CSS, indo no site da W3C Schools;
2 - preste atenção ao que tu queres fazer: desenhe teu layout primeiro;
3 - utilize a ferramenta de visualizacao de código DP forum. Da forma como tu colocastes, a pessoa precisa copiar o código para uma IDE;
4 - em complemento aos exercício s da W3C Schools, compre e leia o livro sobre CSS do Samy, que e ótimo. Também tem o site do Major e Tableless.
CSS pode tirar nossa paciência, hehehe, mas e necessário recobra-la, afinal
Sucesso!
Gostei + 0
01/11/2014
Joel Rodrigues
<DOCTYPE html>
<html lang="pt-br">
<head>
<title>Classificação do Produto</title>
<meta charset="utf-8">
<style>
table{width:600px;}
table thead{font-weight: bold; background-color:#f5f5f5 }
table tr:nth-child(even){background-color: #f5f5f5}
table tr td:nth-child(1){width:100px;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td colspan="2">Detalhes técnicos do Pneu Aquiles</td>
</tr>
</thead>
<tbody>
<tr>
<td>Código do Produto</td>
<td>39720</td>
</tr>
<tr>
<td>Modelo</td>
<td>Brilhansis2</td>
</tr>
<tr>
<td>Mediada</td>
<td>185/65R14</td>
</tr>
<tr>
<td>Aro</td>
<td>15</td>
</tr>
<tr>
<td>Largura</td>
<td>185</td>
</tr>
<tr>
<td>Perfil</td>
<td>16</td>
</tr>
<tr>
<td>Velocidade</td>
<td>T(até 190km/h)</td>
</tr>
<tr>
<td>Carga</td>
<td>86</td>
</tr>
<tr>
<td>Inmetro</td>
<td>94.004/06m/h</td>
</tr>
<tr>
<td>Garantia</td>
<td>5 anos (direto do fabricante)</td>
</tr>
</tbody>
</table>
</body>
</html>Não sei por que você quer o CSS inline, então é só adaptar.
Gostei + 1
01/11/2014
Edcp_poa
A tabela é realmente uma boa, Joel. E sou da mesma opinião: dar código pronto não é ajudar.
Um bom final de semana a todos.
Gostei + 0
03/11/2014
Leonardo Xavier
Gostei + 0
04/11/2014
Joel Rodrigues
Enfim, é só adaptar.
Boa sorte.
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)