[Resolvido] <hr /> Não aparece

André Severino · Maio 21, 2010

Bom dia pessoal,

Insiro a tag <hr/> para criar uma linha horizontal só que ela não aparece no documento ela fica em cima da div. Tem algo relacionado há php? include e etc.. segue o códigos e uma print para ilustrar melhor

Imagem Postada

home.php

<h1>— Produtos em Destaques</h1>
<div id="wrap_destaque">

	<div id="prod_destaque1">
    	<div class="foto_destaque">foto</div><!--foto_destaque1-->
        <div class="detalhe_prod">detalhes</div>
        <div class="desc_foto">
        <span class="txt_dest_prod">Descrição do produto</span><br />
        <br />
        Preco: <span class="txt_dest_preco">00</span></div>
        <div class="form_prod"><form action="" id="form" name="form" method="get">
        <input name="comprar" type="image" id="bt_comprar" />
        </form></div><!--form_produto-->
    </div><!--prod_destaque1-->
    
	<div id="prod_destaque2">
    	<div class="foto_destaque">foto</div><!--foto_destaque1-->
        <div class="detalhe_prod">detalhes</div>
        <div class="desc_foto">
        <span class="txt_dest_prod">Descrição do produto</span><br />
        <br />
        Preco: <span class="txt_dest_preco">00</span></div>
        <div class="form_prod"><form action="" id="form" name="form" method="get">
        <input name="comprar" type="image" id="bt_comprar" />
        </form>
    </div><!--prod_destaque2-->
    
</div><!--wrap destaque-->
<hr width="600px" color="#FF00CC" style="clear:both;" />

estilo.css

/* ---------
--	PÁGINA HOME.PHP	-- 
--------- */
#wrap_destaque{ background-color:#009; height:160px; margin:0 auto;}
#prod_destaque1{ width:298px; height:152px; background-color:#0FF; float:left; margin-top:4px;} 
#prod_destaque2{ width:298px; height:152px; background-color:#FFF; float:right; margin-top:4px;}
.hr_home{ height:10px;}
.foto_destaque{ float:left; margin-top:4px; margin-bottom:50px; margin-left:4px; width:98px; height:98px; background-color:#060;}
.desc_foto{ float:right; background-color:#FF3; width:190px; margin-top:4px; text-align:left;}
.txt_dest_prod{ margin-left:2px; padding:1px; matext-align:right; font-family:Arial; font-size:14px; text-decoration:underline; font-weight:bold;}
.txt_dest_preco{ margin-left:15px; padding:1px; text-align:right; font-family:Arial; font-size:14px; text-decoration:underline; font-weight:bold;}
.detalhe_prod{ width:100px; border:1px solid #000; margin-left:4px; margin-top:120px; position:absolute;}
.form_prod{ width:100px; border:1px solid #000; margin-top:110px; margin-left:180px;}

GabrielFerrari · Maio 21, 2010

Cara não vejo nenhuma tag HR no seu código :huh:

Acho dificil ter relação com o php ou os includes a menos que neles sejam chamadas propriedades que alterem ela

de alguma forma.

André Severino · Maio 21, 2010

Então eu deletei ela do código acabei esquecendo de por :b

Ela não aparece, mas agora ela tá aparecendo só que só depois que eu utilizei clear:both; mas ela fica em cima da div ainda e não consigo utilizar margin-top para descer ela um pouco para baixo :huh:

GabrielFerrari · Maio 21, 2010

cara poste o código completo e o link da página

É dificil ajudar sem ver o qeu está acontecendo.

você está fazendo essa margin-top inline?

André Severino · Maio 21, 2010

Não, mas essa hr eu usei apenas de exemplo, esse é o código completo da página home.php, o outro codigo é da index. vou postar

index.php

<?php
	$host 		= "localhost";
	$usuario 	= "root";
	$senha		= "";
	$db			= mysql_connect($host,$usuario,$senha) or die ("Não foi possivel se conectar com o servidor de banco de dados");
	mysql_select_db("loja_template",$db) or die ("Não foi possível conectar com o banco de dados");
	
// leitura das datas
$dia = date('d');
$mes = date('m');
$ano = date('Y');
$semana = date('w');
// configuração mês
switch ($mes){
case 1: $mes = "Janeiro"; break; case 2: $mes = "Fevereiro"; break; case 3: $mes = "Março"; break; case 4: $mes = "Abril"; break; case 5: $mes = "Maio"; break; case 6: $mes = "Junho"; break; case 7: $mes = "Julho"; break; case 8: $mes = "Agosto"; break; case 9: $mes = "Setembro"; break; case 10: $mes = "Outubro"; break; case 11: $mes = "Novembro"; break; case 12: $mes = "Dezembro"; break;
}
// configuração semana
switch ($semana) {
case 0: $semana = "Domingo"; break;
case 1: $semana = "Segunda-feira"; break;
case 2: $semana = "Terça-feira"; break;
case 3: $semana = "Quarta-feira"; break;
case 4: $semana = "Quinta-feira"; break;
case 5: $semana = "Sexta-feira"; break;
case 6: $semana = "Sábado"; break;
}
?>
<!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" lang="pt-br" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pt-br" />
<meta name="description" content="Template loja virtual.">
<meta name="keywords" content="loja cd, cd, dvd, musica, artista, cd de musica, cd para comprar">
<meta name="robots" content="index,follow" />
<meta name="author" content="André da Silva Severino" />
<title>.:: Loja Virtual ::. Template por André S. Severino</title>
<link rel="stylesheet" href="css/estilo.css" type="text/css" />
</head>

<body>
<div id="divpai">

	<div id="tudo">
	<div class="banner">
    	<div id="publicidade"></div><!--publicidade-->
    </div><!--banner-->
    <div class="menu_sup">
    	<ul>
        	<li><a href="index.php">Página Inicial</a></li>
            <li><a href="#">Meu cadastro</a></li>
            <li><a href="#">Meu carrinho</a></li>
            <li><a href="#">Quem somos</a></li>
            <li><a href="#">Contato</a></li>
        </ul>
        <div id="bemvindo"><?php print ("Seja bem vindo - Hoje é $semana, $dia de $mes de $ano"); ?></div><!--msg bem vindo-->
    </div><!--menu-->
    	
<div id="paimeio">
    
<div class="container">
    	<div class="menu_esq">
        	<h3 id="m_suascompras"><!--img SUAS COMPRAS --></h3>
            	<p>Quantidade: <span id="m_suascompras_qtde">00</span></p>
                <p id="p_suascompras">Valor: <span id="m_suascompras_valor">00</span></p>
        	<h3 id="m_menuprincipal"><!--img MENU PRINCIPAL --></h3>
            	<ul>
        			<li><a href="index.php">Página inicial</a></li>
            		<li><a href="#">Meu carrinho</a></li>
            		<li><a href="#">Cadastro</a></li>
            		<li><a href="#">Login</a></li>
           			<li><a href="#">Fale conosco</a></li>
        		</ul>
             <h3 id="m_categorias"><!--img CATEGORIAS --></h3>
            	<ul>
        			<li><a href="index.php">Home</a></li>
            		<li><a href="#">Link 2</a></li>
        		</ul>
           
            <form action="" method="post" id="form_pesquisa">
            	<fieldset>
                <legend></legend>
                <span class="form_txt">Digite uma palavra-chave</span>
                <input type="text" name="nome" size="20" />
                <span class="form_txt">Selecione uma categoria</span><br />
                <select name="select_categoria"></select><br />
                <input type="button" value="Pesquisar" id="bt_pesquisar" />
                </fieldset>
            </form>	
        </div><!--menu_esq-->
    	
      	<div class="conteudo">
      	  <div id="wrap_destaque">
      	    <?php include "home.php" ?>
      	  </div><!--conteudo-->

</div><!--container-->
</div><!--paimeio-->
	
</div><!--div pai-->

<div id="pairodape">
	<div class="rodape"><p style="text-align:center;">© 2010 - Todos os direitos reservados</p>
      	<ul>
      		<li><a href="#">Política de privacidade</a></li>
    		<li><a href="#">Política de qualidade</a></li>
            <li><a href="#">Atendimento online - CHAT</a></li>
        </ul>
    </div><!--rodape-->
</div><!--pairodape-->
</body>
</html>

estilo.css - completo

@charset "utf-8";
*{padding:0px; margin:0px;}

body{ background-image:url(../imagens/bg_body.jpg); background-repeat:repeat-x; text-align:center;}
h1{ text-align:left; color:#FFF; font-family:Verdana; font-size:18px; background-color:#F90; line-height:22px; border:1px #FECFA0 solid; height:22px; margin-top:4px; padding-left:10px;}
h2{ text-align:left; color:#666; line-height:14px; font-size:14px; font-family:Arial, Helvetica, sans-serif; padding-top:20px;}
h3{}
h4{}

/* ---------
--	PÁGINA INDEX.PHP	-- 
--------- */
/* CONF. DIV'S PAI */
#divpai 		{ width:100%; margin:0 auto;}
#paimeio 		{ background-color:#F5F8FD;}
#pairodape 		{ background-image:url(../imagens/bg_rodape.jpg); background-repeat:repeat-x; clear:both;}
/* Banner, Conteúdo e Rodapé */
.banner{ width:800px; height:150px; margin:0 auto; background-image:url(../imagens/banner.jpg);}
.menu_sup{ width:532px; height:50px; margin:0 auto; background-image:url(../imagens/bg_menu.jpg);}
.container{ width:840px; margin:0 auto; background-image:url(../imagens/bg_fundo_conteudo.jpg); background-repeat:repeat-y; display:table;}
.rodape{ width:800px; margin:0 auto;}
/* Menu superior */
.menu_sup ul li{ display:inline; list-style-type:none;}
.menu_sup li a{ float:left; height:30px; color:#FFF; padding:0 15px; line-height:30px; text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:12px;}
.menu_sup li a:hover{ background-color:#000066;}
.menu_sup li a:active { background-color:#000066;}
#bemvindo { height:20px; width:530px; clear:both; text-align:center; font-size:12px; font-family:Tahoma, Geneva, sans-serif; line-height:20px;}
/* Menu esquerda */
.menu_esq{ width:200px; float:left; margin-left:21px;}
.menu_esq ul li{ list-style-type:none; text-align:left; margin-left:10px;}
.menu_esq li a{ color:#333; text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:12px;}
.menu_esq li a:hover{ text-decoration:underline; color:#06F;}
.menu_esq p{ text-align:left; font-weight:bold; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#333; margin-left:10px;}
h3#m_suascompras{ height:20px; background-image:url(../imagens/menu_esq_suascompras.png); margin-bottom:5px; margin-top:5px;}
#m_suascompras_qtde{ border-bottom:1px solid #999; margin-left:8px; padding:1px; font-weight:normal;}
#m_suascompras_valor{ border-bottom:1px solid #999; margin-left:8px; padding:1px; font-weight:normal;}
#p_suascompras{margin-left:51px; margin-top:4px;}
h3#m_menuprincipal{ height:20px; background-image:url(../imagens/menu_esq_menuprincipal.png); margin-bottom:5px; margin-top:5px;}
h3#m_categorias{ height:20px; background-image:url(../imagens/menu_esq_categorias.png); margin-bottom:5px; margin-top:5px;}
/* Formulário de pesquisa - menu esq */
#form_pesquisa { margin:0 auto; width:180px; margin-bottom:10px; margin-top:15px; text-align:center;}
.form_txt { font:13px "Segoe UI", sans-serif; border:none; color:#333;}
legend { font-size:16px; font-family:Arial; font-weight:bold;}
input{ color:#333; padding:2px 5px 2px 5px; background-color:#F8F8F8; border:0px; border:1px solid #999;}
input:focus{ color:#0A86B6; border: 1px solid #06F;}
#bt_pesquisar{ color:#333; padding:2px 5px 2px 5px; background-color:#F8F8F8; border:outset 2px #CCC;}
/* Banner - Publicidade */
#publicidade{ width:400px; height:45px; float:right; margin-top:52px; margin-right:20px; background-image:url(../imagens/publicidade.jpg); background-repeat:no-repeat;}
/* Rodapé */
.rodape{ height:50px; color:#FFF; text-align:left; font-family:"Segoe UI", Verdana, Geneva; font-size:11px; padding:5px;}
.rodape a{ text-decoration:none; color:#FFF;}
.rodape a:hover{ text-decoration:underline; color:#03F;}
.rodape ul li{ margin-left:20px;}
/* Conteúdo */
.conteudo{ width:597px; margin-right:21px; float:right;}

/* ---------
--	PÁGINA HOME.PHP	-- 
--------- */
#wrap_destaque{ background-color:#009; height:160px; margin:0 auto;}
#prod_destaque1{ width:298px; height:152px; background-color:#0FF; float:left; margin-top:4px;} 
#prod_destaque2{ width:298px; height:152px; background-color:#FFF; float:right; margin-top:4px;}
.hr_home{ height:10px;}
.foto_destaque{ float:left; margin-top:4px; margin-bottom:50px; margin-left:4px; width:98px; height:98px; background-color:#060;}
.desc_foto{ float:right; background-color:#FF3; width:190px; margin-top:4px; text-align:left;}
.txt_dest_prod{ margin-left:2px; padding:1px; matext-align:right; font-family:Arial; font-size:14px; text-decoration:underline; font-weight:bold;}
.txt_dest_preco{ margin-left:15px; padding:1px; text-align:right; font-family:Arial; font-size:14px; text-decoration:underline; font-weight:bold;}
.detalhe_prod{ width:100px; border:1px solid #000; margin-left:4px; margin-top:120px; position:absolute;}
.form_prod{ width:100px; border:1px solid #000; margin-top:110px; margin-left:180px;}

GabrielFerrari · Maio 21, 2010

Cara ainda não consegui entender a sua dificuldade :mellow:

Hospeda seu site ai para ficar mais fácil

André Severino · Maio 21, 2010

Cara ainda não consegui entender a sua dificuldade :mellow:

Hospeda seu site ai para ficar mais fácil

Consegui achar o erro :lol:

É que eu estava digitando <hr> e não estava aparecendo a linha horizontal embaixo dos produtos em destaque então achei que era algum erro no css ou algo do tipo, pois tinha virado o código do 'avesso' e não dava certo, era como se a linha estivesse atrás de todos os elementos, só que depois de examinar linha por linha, descobri que o erro estava na página home.php, esqueci de fechar a <div id="form_prod">. por isso a tag <hr /> não estava funcionando.

erro nesta linha - não fexei a div form_prod

<div class="form_prod"><form action="" id="form" name="form" method="get">
        <input name="comprar" type="image" id="bt_comprar" />
        </form>
    </div><!--prod_destaque2-->

corrigido fico assim

<div class="form_prod"><form action="" id="form" name="form" method="get">
        <input name="comprar" type="image" id="bt_comprar" />
        </form></div><!--form_prod-->
    </div><!--prod_destaque2-->

Obrigado pela ajuda e pela atenção http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

GabrielFerrari · Maio 21, 2010

hehehe esse é o tipo de erro difícil de se achar mesmo

pois você sempre acha que é algo pior

só por curiosidade você está utilizando o Dreamweaver para fazer o site?

ele deixa esse tipo de coisa bem mais complicada pois não avisa onde é o começo e o final de cada tag

tente dar uma olhada no notepad ++ ele tem muita coisa que facilita no desenvolvimento.

Arquivado

[Resolvido] <hr /> Não aparece

Recommended Posts

André Severino 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

André Severino 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

André Severino 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

André Severino 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

php + mysql - where do select em campo varchar com dados numéricos com zeros a direita

tratar hora no php

Navbar no Nextjs

Fóruns

Tempo Real

Informação importante