Problema com site

.EXO · August 14, 2009 at 08:53 PM

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

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.

Phear99 · August 14, 2009 at 11:32 PM

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.

.EXO · August 15, 2009 at 04:28 PM

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

1.webp.66402517c76ccc9917da4a17caefbfda.

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

http://i228.photobucket.com/albums/ee306/ExoRoyaL/2.png

2.webp.af1b33c7cfdbd3a1662f1ac5cb1db0bc.

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.

Phear99 · August 15, 2009 at 08:47 PM

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.

.EXO · August 18, 2009 at 01:04 PM

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).

perdido_e_sozinho · August 18, 2009 at 02:11 PM

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

Sign In

Problema com site

Recommended Posts

.EXO

Phear99

.EXO

Phear99

.EXO

perdido_e_sozinho

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information