Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde pessoal...
Preciso alinhar um texto na base de um parágrafo.
Como faço?
Desde já agradeço.
ZUCOLLI
Devo ter feito alguma coisa de errado, pois já tentei e nadaa...
ZUCOLLI
Posta o seus códigos.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Gostaria que neste paragrafo o texto ficasse alinhado pela base:
echo "<p id='descricoes' class='descricoes'>" . str_replace(' - ' , '<br />' , $descricao) . "</p>";<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ofertas WEB</title>
<link rel="stylesheet" href="estilos.css" type="text/css" />
</head>
<body>
<div id="geral">
<div id="header"><?php require_once("header.php"); ?></div>
<div id="produtos">
<?php
require_once("conexao.php");
$varSecao = $_GET[secao];
$sql = "SELECT * FROM produtos WHERE (secao = '$varSecao') ORDER BY preco";
$query = mysql_query($sql);
echo "<ul>";
while($ProdSecao = mysql_fetch_assoc($query)){
$descricao = $ProdSecao[descricao];
$preco = $ProdSecao[preco];
$img_baixa= $ProdSecao[img_baixa];
echo "<li>";
echo "<p id='imagens'><img class='imagens' src='" . $img_baixa . ".png'></p>";
echo "<p id='descricoes' class='descricoes'>" . str_replace(' - ' , '<br />' , $descricao) . "</p>";
echo "<p id='precos' class='preco'>R$ " . number_format($preco, 2, ',', '.') . "</p>";
echo "<p id='adicionar'><img src='imagens/adicionar.png' border='0'></p>";
echo "</li>";
}
echo "</ul>";
?>
</div>
<div id="footer"><?php require_once("footer.php"); ?></div>
</div>
</body>
</html>body {
background-color: #999933;
margin: 0px;
padding: 0px;
}
#geral {
height: auto;
width: 780px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#header {
float: left;
height: 190px;
width: 780px;
background-color: #343632;
background-position: center center;
margin: 0px;
padding: 0px;
}
#logo {
float: left;
height: 140px;
width: 180px;
background-color: #343632;
background-position: center center;
}
#testeira {
height: 100px;
width: 600px;
float: left;
background-image: url(imagens/testeira.jpg);
} font-family: Verdana;
font-size: 24px;
text-align: right;
margin-right: 10px;
margin-bottom: 10px;
width: 580px;
display: block;
margin-top: 10px;
color: #FFF;
} font-family: Verdana;
font-size: 12px;
text-align: right;
display: block;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 20px;
color: #FFF;
}
#menu {
height: 40px;
width: 600px;
background-color: #ff3300;
float: left;
} font-family: Verdana;
font-size: 12px;
color: #CCC;
list-style-type: none;
margin: 0px;
display: block;
height: 40px;
width: auto;
padding: 0px;
} width: auto;
float: left;
padding-right: 10px;
padding-left: 10px;
background-color: #ff3300;
display: block;
height: 27px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 13px;
} display: block;
text-decoration: none;
color: #CCC;
} width: auto;
float: left;
padding-right: 10px;
padding-left: 10px;
background-color: #3d4d5a;
display: block;
height: 27px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 13px;
}
#painel {
background-color: #b0c164;
height: 50px;
width: 780px;
display: block;
float: left;
clear: both;
} display: block;
list-style-type: none;
width: 780px;
height: 50px;
margin: 0px;
padding: 0px;
} display: block;
height: 23px;
font-family: Verdana;
font-size: 12px;
float: right;
text-align: center;
margin-right: 10px;
background-color: #999;
padding-top: 7px;
padding-right: 10px;
padding-left: 10px;
}
#imagem {
display: block;
width: 260px;
height: 140px;
margin: 0px;
background-color: #990000;
float: left;
}
.imagem {
height: 140px;
width: auto;
}
#descricao {
font-family: Verdana;
font-size: 12px;
display: block;
height: 45px;
width: 135px;
float: left;
margin-top: 0px;
margin-bottom: 0px;
text-align: right;
padding-right: 5px;
padding-left: 10px;
color: #000;
padding-top: 5px;
}
.descricao {
font-family: Verdana;
font-size: 12px;
text-align: right;
}
#preco {
display: block;
height: 50px;
width: 105px;
float: left;
margin-top: 0px;
margin-bottom: 0px;
padding-left: 5px;
text-align: left;
font-family: Verdana;
font-size: 32px;
color: #F00;
padding-top: 0px;
font-weight: bold;
}
.preco {
display: block;
height: 50px;
width: 105px;
float: left;
margin-top: 0px;
margin-bottom: 0px;
padding-left: 5px;
text-align: left;
font-family: Verdana;
font-size: 24px;
color: #F00;
padding-top: 0px;
font-weight: bolder;
}
#destaque1 {
height: 200px;
width: 260px;
float: left;
background-color: #cccc66;
text-align: center;
}
#destaque2 {
height: 200px;
width: 260px;
float: left;
background-color: #cccc66;
text-align: center;
}
#destaque3 {
height: 200px;
width: 260px;
float: left;
background-color: #cccc66;
text-align: center;
}
#produzida {
height: 300px;
width: 780px;
background-color: #000;
float: left;
background-image:url(<?php echo $dadosProd[0][6]?>);
} list-style-type: none;
display: block;
width: 260px;
height: 250px;
margin-top: 40px;
margin-bottom: 10px;
margin-left: 10px;
padding-left: 0px;
} width: 260px;
height: 45px;
margin-bottom: 5px;
}
#receita {
height: 180px;
width: 390px;
float: left;
background-color: #cccc66;
} font-family: Verdana;
font-size: 18px;
color: #333;
margin-right: 10px;
text-align: right;
display: block;
margin-left: 140px;
margin-top: 70px;
margin-bottom: 20px;
} font-family: Verdana;
font-size: 14px;
color: #666;
text-align: right;
display: block;
margin-top: 0px;
margin-right: 10px;
} font-family: Verdana;
font-size: 14px;
color: #333;
text-decoration: none;
} font-family: Verdana;
font-size: 14px;
color: #333;
text-decoration: underline;
}
#servicos {
height: 180px;
width: 390px;
background-color: #990000;
float: left;
}
#creditos {
height: 23px;
width: 773px;
background-color: #660000;
float: left;
clear: both;
font-family: Verdana;
font-size: 12px;
color: #FFF;
padding-top: 7px;
text-align: right;
padding-right: 7px;
} color: #999;
text-decoration: none;
} color: #999;
text-decoration: underline;
}
#produtos {
display: block;
width: 780px;
height: auto;
float: left;
background-color: #CFF;
margin: 0px;
padding: 0px;
} display: block;
margin: 0px;
height: auto;
width: 780px;
padding: 0px;
float: left;
} height: 250px;
width: 190px;
display: block;
float: left;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
} background-color: #CCC;
display: block;
height: 160px;
width: 190px;
float: left;
margin: 0px;
}#produtos #descricoes {
background-color: #999;
height: 50px;
width: 185px;
margin: 0px;
float: left;
padding-bottom: 0px;
} background-color: #666;
display: block;
width: 130px;
margin: 0px;
height: 40px;
float: left;
} background-color: #CCC;
display: block;
margin: 0px;
width: 55px;
height: 40px;
float: left;
}
.imagens {
background-color: #CCC;
display: block;
height: 160px;
float: left;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.textolegal {
font-family: Verdana;
font-size: 10px;
color: #FFF;
text-align: center;
margin: 0px;
padding: 10px;
display: block;
width: 550px;
height: 80px;
}
#rodape {
height: 100px;
width: 780px;
background-color: #cc0000;
float: left;
clear: both;
}
#footer {
float: left;
height: auto;
width: 780px;
}
.descricoes {
font-family: Verdana;
font-size: 12px;
text-align: left;
padding-left: 5px;
}Você tem o id's e classes com o mesmo nome em duas situações, isso pode dar confusão. Tenta diferenciar.
Você pode alinhar à base utilizando margin ou padding no descricoes mas isso não é de nenhuma forma garantido, vai ser mais caso a caso dependendo do tamanho do bloco, e como você está usando um while basicamente invalida esse caminho.
Falta semântica no seu código, você tem quatro P's dentro de um LI. Fica muito mais fácil de controlar a apresentação trocando cada P por um LI e o LI por um UL.
Se você puder postar a página no ar posso te ajudar melhor com o código interpretado. É difícil imaginar o css aplicado a um conteúdo indefinido.
abcs
você quer alinhar somente o TEXTO à parte de baixo do elemento?
Use padding-top...
Já tentou vertical-align? Se não der, atribua position: absolute com bottom: 0.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif