Alinhamentoo

Front-end

31/10/2014

Olá, boa tarde !!!!

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

Leonardo Xavier

Curtidas 0

Melhor post

Joel Rodrigues

Joel Rodrigues

01/11/2014

Isso é trabalho para uma <table>.
GOSTEI 1

Mais Respostas

Edcp_poa

Edcp_poa

31/10/2014

Bom dia Leandro.

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
Joel Rodrigues

Joel Rodrigues

31/10/2014

Não costumo dar código pronto pra ninguém, mas aí vai:
<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
Edcp_poa

Edcp_poa

31/10/2014

Boa tarde.

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
Leonardo Xavier

Leonardo Xavier

31/10/2014

É fiz com uma tabela , funcionou, preciso fazer inline, pq o site so permite eu colocar inline !!!!
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

31/10/2014

É fiz com uma tabela , funcionou, preciso fazer inline, pq o site so permite eu colocar inline !!!!

Enfim, é só adaptar.
Boa sorte.
GOSTEI 0
POSTAR