Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Css

Victorgg

Perguntado por Victorgg,

 Share

Pergunta

Victorgg

Victorgg

Postado
Postado (editado)

Olá, estou finalizando um site, esta tudo indo muito bem, mas me bateu uma duvida na cabeça :blush: .

O código do site é baseado em "divs" para TODOS elementos, já li artigos que a "div mania" é errado, mas enfim.

Todas elas então com "position:relative; ". Meu pai leu o codigo e disse que estava horrivel e que eu não tinha notado o espaço em branco que fica no final na pagina por causa dessas "position" :angry:.

Mas enfim, isso vai influir em algo de caráter maior no layout ou só irá perpetuar o espaço em branco no fim?

Editado por Victorgg
Removido [Duvida] do título
Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

  • 0
Victorgg

Victorgg

Postado
  • Autor
Postado (editado)

Desculpe pelo double post.

Segue aqui o código do layout modificado, todas as imagens estão em links externos ! Gostaria de uma opinião sincera.

Se eu sou um retardado que não sei programar, pode falar! Por mais simples que seja a critica...

Dê uma olhada nas divs, que eu lhe disse. Muito obrigado :x

Ps: ignore o java script.

(Usei "code" pois não achei a tag html)

index.html:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

&lt;script type="text/javascript" src="script.js"> </script>

<link rel="icon" href="imagens\favicon.ico" type="image/x-icon"/>

<link href="estilo.css" rel="stylesheet" type="text/css" />

<title>Jeed Fitas - Excelência em processo têxtil. Cadarços, fitas, gorgurões, confecções, aviamentos e elásticos.</title>


</head>
<body  class="papel_de_parede_menor" onload="index()">
<div class="imagem_gif"><img src="http://img833.imageshack.us/img833/6720/maps.gif" width="280" height="188" alt="Informação" /></div>
<div class="imagem_informativa"><img src="http://img38.imageshack.us/img38/9673/img1gf.png" alt="Imagem informativa"/></div>
<div class="links"><a href="index.html" onmouseover="index();return true">.</a> 
<a href="produtos.htm" onmouseover="index();return true">.</a>
<a href="contato.htm" onmouseover="index();return true">.</a>
</div>
<div id="texto_empresa"><span class="titulo_texto">Empresa</span><p>A empresa Jeed Fitas, iniciou suas atividades em abril de 2009. Através de seus idealizadores, foi crescendo e hoje traz inúmeras soluções em elásticos e fitas.</p></div>
<div id="texto_pessoas"><span class="titulo_texto">Pessoas</span><p>Pessoas competentes e empenhadas em desenvolver produtos com alta qualidade para a satisfação e fidelização de seus clientes. Para nós o cliente é um parceiro comercial que conquistamos com competência e respeito.</p></div>
<div id="texto_produtos"><span class="titulo_texto">Produtos</span><p>A empresa Jeed Fitas é especializada em produtos de alta qualidade dentro do ramo têxtil, visando sempre soluções criativas e inovadoras aos seus clientes.</p></div>
<div id="rodape_index">Copyright © 2010 | Jeed Fitas Ltda. | Desenho por <strong><a href='#' onclick='abrir()' title='Contato'>The Five Creators</a></strong></div>
<div class="baner"></div>

<div class="link1"><a href="index.html" onmouseover="index();return true"><img src="http://img237.imageshack.us/img237/8199/link1.gif" border="0" /></a></div>
<div class="link2"><a href="index.html" onmouseover="index();return true"><img src="http://img43.imageshack.us/img43/4823/link2y.gif" border="0" /></a></div>
<div class="link3"><a href="index.html" onmouseover="index();return true"><img src="http://img408.imageshack.us/img408/1500/link3l.gif" border="0" /></a></div>

</body>
</html>
estilo.css : 
@charset "utf-8";
/* CSS Document */

.papel_de_parede_contato{
    background-attachment:scroll;
    background-repeat:no-repeat;
    background-color:white;
    background-image:url(imagens/back5.png);
    background-position:80px 0px;
    
    
}

.papel_de_parede_quadrado{
    background-attachment:scroll;
    background-repeat:no-repeat;
    background-color:white;
    background-image:url(imagens/back4.png);
    background-position:80px 0px;
    
}




.papel_de_parede_menor{
    background-attachment:scroll;
    background-repeat:no-repeat;
    background-color:white;
    background-image:url(http://img51.imageshack.us/img51/1271/backrm.png);
    background-position:80px 0px;
    
}

.imagem_informativa{
    margin-top: 23px;
    margin-right:0px;
    margin-bottom: 0px;
    margin-left: 190px;
        background-repeat:no-repeat;

    background-position:center center;
    
    width:600px;
    height:100px;
    
    }
    
    .imagem_gif{
     margin-top: 180px;
    margin-right:0px;
    margin-bottom: 0px;
    margin-left: 350px;
    border-width: 6px;
    border-color:silver;
    border-style:outset;
width:280px;
    height:188px;

        background-repeat:no-repeat;    
background-position:center center;
}
.links{
    font-family: "helvetica", "arial", sans-serif;
    position:relative;
    top: -300px;
    right: 0px;
    left: 685px;
    bottom: 0px;
    width:170px;
    height:105px;
    font-size: 30px;    
text-align:left;
}
.links a:link{text-decoration:none;color:#6FB9E1;}               
.links a:visited{text-decoration:none;color:#6FB9E1;}             
.links a:hover {color:; letter-spacing: 5px;}

a:link{text-decoration:none;color:#6FB9E1;}               
a:visited{text-decoration:none;color:#6FB9E1;}             
a:hover {color: orange; letter-spacing: 2px;}

.baner{
    position:absolute;
    top: 200px;
    left: 180px;
    background-repeat:no-repeat;
    background-image:url(http://img69.imageshack.us/img69/8936/banerxq.gif);
    background-position:center center;
    width:150px;
    height:150px;
        
}

.link1{
    position:absolute;
    top: 215px;
    left: 691px;
    width:auto;
    height:auto;
}
.link2{
    position:absolute;
    top: 255px;
    left: 691px;
    width:auto;
    height:auto;
}
    .link3{
    position:absolute;
    top: 295px;
    left: 691px;
    width:auto;
    height:auto;
}
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< INDEX >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

#texto_empresa{
    position:relative;
    top: -92px;
    right: 0px;
    left: 170px;
    bottom: 0px;
    width:170px;
    height:120px;
    padding: 5px 5px 5px 5px;
    border-width: 6px;
    border-color:#6FB9E1;
    border-style:outset;
    background-color:#F2F2F2;
    text-align: left;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
.titulo_texto{
    font-size: 15px;
    color: #6FB9E1;
    font-family: Arial, Helvetica, sans-serif;
}
#texto_pessoas{
position:relative;
    top: -238px;
    right: 0px;
    left: 393px;
    bottom: 0px;
    width:170px;
    height:150px;
    padding: 5px 5px 5px 5px;
    border-width: 6px;
    border-color:#6FB9E1;
    border-style:outset;
    background-color:#F2F2F2;
    text-align: left;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
#texto_produtos{
    position:relative;
    top: -416px;
    right: 0px;
    left: 615px;
    bottom: 0px;
    width:170px;
    height:120px;
    padding: 5px 5px 5px 5px;
    border-width: 6px;
    border-color:#6FB9E1;
    border-style:outset;
    background-color:#F2F2F2;
    text-align: left;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
#rodape_index {
    position:relative;
    top: -260px;
    right: 0px;
    left: 310px;
    bottom: 0px;
    
    
    width: 440px;
    height: 20px;

    color:black;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
        }

Editado por Victorgg
Link para o comentário
Compartilhar em outros sites
  • 0
_Vinny_

_Vinny_

Postado
Postado

Bom, realmente há o espaço no rodape. Mas isso não quer dizer que seja 'retardado'. (brincadeira)

Mas se tu trocar o position:relative;, e colocar uns floats, alinhar com margin, vai ficar uma maravilha.

Pode haver outra maneira, mas no momento me veio essa, vai dar um trabalho, mas vai resolver o problema do espaço.

Link para o comentário
Compartilhar em outros sites
  • 0
Victorgg

Victorgg

Postado
  • Autor
Postado
Bom, realmente há o espaço no rodape. Mas isso não quer dizer que seja 'retardado'. (brincadeira)

Mas se tu trocar o position:relative;, e colocar uns floats, alinhar com margin, vai ficar uma maravilha.

Pode haver outra maneira, mas no momento me veio essa, vai dar um trabalho, mas vai resolver o problema do espaço.

Nossa, realmente vai dar trabalho :( , ela deve ter mais umas 20 paginas, vou ter que editar todas u_ú

Mas fazer o que ! Vivendo e aprendendo.

Para mim que estou começando agora... uma opinião de alguém experiente não esta em nenhum livro ou tutorial e é de grande serventia.

Obrigado.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...