Impressão do comando DIV

[FSeolin 0]

Boa tarde,

 

Há pouco tempo estou pesquisando e testando sobre programação html, e estou com um problema onde não encontrei solução na web. Utilizo o editor Nvu e preciso gerar 3 linhas horizontais no rodapé da página, que seriam linhas para assinaturas. Utilizando comando hr não consigo alinhar corretamente as linhas, então estou usando comando div que me permite esse alinhamento de maneira mais fácil. Mas o problema que está ocorrendo é que na visualização do editor essa linhas ficam finas, mas na hora que abro ela no browse elas ficam grossas.

Se alguém pudesse me dar uma ajuda, tanto como criar essas linhas ou como fazer ela aparecer fina na visualização eu agradeceria. Abaixo está o trecho do codigo onde crio as linhas.

 

<tfoot>
  <tr>
     <td width="100%"><br>
     <br>
    	<div
style="background-color: rgb(0, 0, 0); position: relative; left: 0px; top: 10px; height: 1pt; width: 200px;"></div>
    	<div
style="background-color: rgb(0, 0, 0); position: relative; left: 415px; top: 9px; height: 1pt; width: 200px;"></div>
    	<div
style="background-color: rgb(0, 0, 0); position: relative; left: 835px; top: 8px; height: 1pt; width: 200px;"></div>
     <br>
     </td>
  </tr>
</tfoot>

[Ramael 0]

- Pra posicionar tente colocar "position: absolute", aí coloque as posições de top e left.

 

- Pra colocar a linha fina tente usar "border-top: 1px solid #000". Pode colocar a altura do DIV, mas sem um background-color.

 

 

 

t+

Ramael

[angelorubin 142]

Bom dia,

 

Minha sugestão é uma estrutura assim:

 

CSS

<style type="text/css">

* {
margin:0;
padding:0;
}

#box_rodape {
margin:5px;
width:99%;
height:auto;
overflow:hidden;
border:1px solid #CCC;
}

.p01 {
width:100%;
height:auto;
min-height:20px;
padding:3px;
margin:1px;
}

.p02 {
width:100%;
height:auto;
min-height:20px;
padding:3px;
margin:1px;
border-top:1px solid #CCC;
}

.p03 {
width:100%;
height:auto;
min-height:20px;
padding:3px;
margin:1px;
border-top:1px solid #CCC;
}

</style>

 

XHTML

<div id="box_rodape">
<p class="p01">lorem ipsum dolor simet</p>
<p class="p02">lorem ipsum dolor simet</p>
<p class="p03">lorem ipsum dolor simet</p>
</div>

 

Espero que ajude.