• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

.EXO

Problema com site

6 mensagens neste tópico

Eu estou a fazer um site mas estou com um problema.

Semttulo-5.png

Aquilo que está seleccionado a vermelho não devia estar ali.

Aqueles espaços não deviam existir.

Aqui deixo os códigos html e css:

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>exo'09 - Bio</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id="header" class="largura"><img src="imagens/logo.gif" alt="Logotipo" /></div>
<div id="menu">
<div class="largura2">
     <ul>
         <li><a href="#" id="bio" class="select">BIO</a></li>
         <li><a href="#" id="work">PORTFOLIO</a></li>
         <li><a href="#" id="cont">CONTACTO</a></li>
     </ul>
</div>
</div>
<div><table width="100%" border="0">
  <tbody><tr>
    <td valign="top"><table style="width: 700px; height: 500px;" align="center" cellpadding="0" cellspacing="0">
      <tbody><tr>
        <td style="width: 43px; height: 32px;"><img alt="a" src="imagens/corpo_1.gif" width="43" height="32"></td>
        <td style="height: 32px;" class="style5" colspan="3"><strong>Biografica de .exoroyal~</strong></td>
        <td style="width: 43px; height: 32px;"><img alt="a" src="imagens/corpo_2.gif" width="43" height="32"></td>
      </tr>
      <tr>
        <td style="width: 30px;" class="style1"></td>
        <td colspan="3" class="style3" style="width: 700px; height: 400px;" valign="top"><table width="95%" align="center" border="0">
          <tbody><tr>
            <td colspan="2" valign="top"><p><img src="imagens/foto.gif" id="foto"</p><p class="style4" align="justify"><strong>Nome:</strong> Tiago Luís Oliveira Leite 
		<p><strong>Idade:</strong> 18 anos</p>
		<p><strong>Local de Residência:</strong> Vila Nova de Famalicão</p>
		<p><strong>Ocupações:</strong> Jogar PC, Programação, Design</p></p>
          </tr>
        </tbody></table>          </td>
        <td style="width: 42px;" class="style2"></td>
      </tr>
      <tr>
        <td style="width: 43px; height: 27px;"><img alt="a" src="imagens/corpo_3.gif" width="43" height="27"></td>
        <td style="height: 27px;" class="style7" colspan="3"></td>
        <td style="width: 43px; height: 27px;"><img alt="a" src="imagens/corpo_4.gif" width="43" height="27"></td>
      </tr>
      <tr>
        <td style="width: 42px;"> </td>
        <td colspan="3"> </td>
        <td style="width: 42px;"> </td>
      </tr>
      <tr>
        <td style="width: 42px; height: 32px;"> </td>
      </tr>
      <tr>
        <td style="width: 42px; height: 27px;"> </td>
        <td style="height: 27px;" colspan="3"><p class="style6"> </p>
<div id="menu2">
<div class="largura3">
     <ul>
         <li><a href="http://board.ogame.com.pt/index.php?page=Thread&threadID=72160" target="_blank" id="og">Ogame</a></li>
         <li><a href="http://extremedesigntuga.com" target="_blank" id="edt">Edt</a></li>
         <li><a href="http://exoroyal.deviantart.com/" target="_blank" id="da">DeviantArt</a></li>
     </ul>
</div>
</div>
         <p class="style6"> </p>
	 <p class="style6"> </p>
	 <p class="style6">Melhor visualização em resolução 1280x800</p>
         <p class="style6">© 2009, .exoroyal~, Todos os direitos reservados</p></td>
        <td style="width: 42px; height: 27px;"> </td>
      </tr>
    </tbody></table>
      </td>
  </tr>
</tbody></table>
</div>
</body>
</html>

css:

body {
     background:#000000 url(imagens/fundo.gif) 0px 0px repeat-x;
     }
#header {
     height:150px;
     padding-top:12px;
     }
 .largura {
     margin:0 auto;
     width:567px;
     }

#menu {
     height:60px;
     padding:0;
     margin:0 0 0 0;
     width:100%;
     }
 .largura2 {
     margin:0 auto;
     width:600px;
     }
#menu ul {
     margin:0;
     padding:0;
     }
#menu li {
     list-style:none;
     height:60px;
     padding:0;
     margin:0px;
     float:left;
     }
#menu a {
     display:block;
     height:60px;
     overflow:hidden;
     text-indent:10000em;
     text-decoration:none;
     width:200px;
     margin:0px;
     padding:0;
     }
#menu a:hover {
     background-position: 0 -60px;
     }
#menu #bio {
     background-image: url('imagens/bio.gif');
     }
     #work {
 background-image: url('imagens/works.gif');
 }
 #cont {
 background-image: url('imagens/contact.gif');
 }
#menu .select {
     background-position: 0 -120px;
     }

body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

}
.application { 
	color: #000000; 
	font-size: 12px; 
	font-family: Arial, Helvetica, sans-serif; 
	background-image:url('eingabe_back.gif');
	background-repeat:repeat-x;
	background-color: #F9F9F9;
	width:180px;
	border: 1px solid #000000;
	scrollbar-base-color:#F9F9F9;
	padding-left:5px}
.button { 
	color: #000000; 
	font-size: 10px; 
	font-family: Arial, Helvetica, sans-serif; 
	background-image:url('eingabe_back.gif');
	background-repeat:repeat-x;
	background-color: #F9F9F9;
	width:180px;
	border: 1px solid #000000;
	scrollbar-base-color:#F9F9F9;
	padding-left:5px}

.style1 {
background-image: url('imagens/corpo_5.gif');
}
.style2 {
background-image: url('imagens/corpo_6.gif');
}
.style3 {
background-color: #ffffff;
}
.style4 {
font-size: 10px;
}
.style5 {
background-image: url('imagens/corpo_7.gif');
text-align: center;
}
.style6 {
text-align: center;
margin-top: 0;
margin-bottom: 0;
color: #ffffff;
}
.style7 {
background-image: url('imagens/corpo_8.gif');
text-align: center;
}

#menu2 {
     height:60px;
     padding:0;
     margin:0 0 0 0;
     width:100%;
     }
     .largura3 {
 margin:0 auto;
 width:375px;
 }

#menu2 ul {
     margin:0;
     padding:0;
     }
#menu2 li {
     list-style:none;
     height:60px;
     padding:0;
     margin:0px;
     float:left;
     }
#menu2 a {
     display:block;
     height:60px;
     overflow:hidden;
     text-indent:10000em;
     text-decoration:none;
     width:120px;
     margin:0px;
     padding:0;
     }
#menu2 a:hover {
     background-position: 0 -60px;
     }
#menu2 #og {
     background-image: url('imagens/ogame.gif');
     }
     #edt {
 background-image: url('imagens/edt.gif');
 }
 #da {
 background-image: url('imagens/da.gif');
 }
#foto {
     padding:0;
     background-color:#ffffff;
     float:left;
     margin:0 20px 10px 10px;
     }

NOTA:Tem aqui códigos que pertencem a outras partes do site.

Podem ajudar-me? Onde está o problema? Já procurei por toda a parte e não encontro.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Boas.

Primeiro, um conselho. Existe um addon para o firefox chamado Firebug que ajuda muito nestas situações. O Firebug permite-te analisar o código html e respectivos estilos de qualquer parte da tua página, enquanto sublinha (na forma de um sombreado) a zona à qual a tag que estás a ver se refere. Desta forma, qualquer parte da tua página pode ser facilmente associada ao código que a originou.

Para o efeito descrito acima, o referido addon acrescenta ainda ao menu de contexto (botão direito do rato) a opção "Inspect Element", que podes utilizar em qualquer parte da página para que o addon te mostre de onde veio aquilo.

Como não consegui encontrar assim por alto nenhum código que fosse originar aquela linha, penso que será mais fácil para ti se usares este addon.

Espero ter ajudado. De qualquer forma vou dar uma olhadela mais a fundo no código :(

EDIT: Há algo no teu código que me salta à vista como potencial culpado. Corrige-me se estou enganado, mas as linhas não aparecem nos locais correspondentes a alguns limites das células da tabela? Foca a tua atenção nas células adjacentes e experimenta alterar o estilo para remover as borders. Penso ser esse o problema mas sem ver o site no browser é difícil dizer.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Instalei o Addon e tive a ver o código mas ainda não consegui descobrir o erro.

1.png

Se tiver esta parte seleccionada corresponde à imagem e ao espaço indesejado.

width=750 height=468http://i228.photobucket.com/albums/ee306/ExoRoyaL/2.png[/img]

Esta parte já só corresponde à imagem.

Ora bem... na parte de cima (a imagem e o espaço) bem que tentei alterar os "px" mas não alterou nada, pelo menos quando eu diminuía, quando aumentava os espaços aumentavam para cima e para baixo. 

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ora bem... na parte de cima (a imagem e o espaço) bem que tentei alterar os "px" mas não alterou nada, pelo menos quando eu diminuía, quando aumentava os espaços aumentavam para cima e para baixo. 

Então isso significa que se deve tratar de uma border "mal comportada". Adiciona ao style das imagens (ou, se não funcionar, tenta no style das células onde elas se encontram) códigos css que removam as borders:

border-collapse: collapse;    /* adiciona este à tag table */
border-style: none;               /* remove os limites */
border-width: 0px;                /* dá aos limites uma largura nula */

Assim por alto lembro-me destes, utiliza um de cada vez, começando de cima e pára se e quando algum deles funcionar. Não adiciones código que não precises.

PS: pelo que vejo do teu código acho que devias investir um pouco do teu tempo a estudar CSS. Muitas das coisas que inseres na tag deviam estar no estilo, como por exemplo, a width e height das imagens. Também o facto de utilizares uma table para formatares o layout não é o mais correcto (apesar de concordar que é muito fácil); devias utilizar divs.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eu pus esses códigos nos styles mas não aconteceu nada.

Pus isso no style da table e depois no style das imagens (isto no código html, no css não tenho nada para os imagens dos cantos).

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Boas,

Era um pouco mais simples analisar o código se o colocasses online num espaço gratuito como o simplesnet ou similar de forma a ser possível analisar o código em conjunto com as imagens.

Naquilo que pode analisar tinhas pelo menos um problema com uma tag de imagem que não estava fechada.

Com os melhores cumprimentos,

Sérgio Matias

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora