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

pebat

Dois comteudos um debaixo do outro

3 mensagens neste tópico

Boas...

  Tou a elaborar um site com tabeless a modo de aprender ;) entao tenho a estrutura pesada da seguinte maneira:

              -----------------------------------------------------------------------------------

                |                                    topo                                        |

                -----------------------------------------------------------------------------------

                |              |                                                |              |

|              |                                                |              |

|              |                                                |              |

|              |                                                |              |

|              |                                                |              |

|              |                                                |              |

|                |                                                |              |

|                |                                                |              |

|  coluna    |                                                |              |

|  direita1 |                                                |              |

|                |                                                |              |

|------------|                                                |              |

|                |                                                |              |

|  coluna    |                                                |              |

|  direita    |                                                |              |

|      2        |                                                |              |

  pronto uma estrutura assim .....

Já tenho o topo , a coluna da direita 1 defenida o conteudo do meio defenido e a coluna da esquerda tb defenida...

o meu problema e msm a coluna da direita 2 neste caso de exemplo.

O codigo que tenho e o seguinte:


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">

<head>
<title>C.A.E - Clube de Airsoft De Évora</title>
    <style type="text/css">

/* ==========================  
Aspecto  
========================== */
h1 { 
text-align:center; 
}
#geral { 
text-align:justify; 
font:70% Verdana, Arial, 'Sans-Serif';
margin:0 auto;
}




/* ==========================  
layout   
========================== */
#geral { 
width:700px;
border:1px solid black;

}
#direita { 
width:150px;
border:1px;
}

#esquerda {
width:150px;
float::left;
}

#esquerda_cima, #esquerda_baixo {
width:65px;

}
#topo{
    background-image:url(Imagens/topo.gif);
height:70px;
}

#esquerda_cima {
  float:left;
} 

#esquerda_baixo { 
float:left;	
}
#direita { 
float:right;
border:1px medium  black;
}
#conteudo {
width:370px; 
margin-left:160px;
}
-->
    </style>
</head>

<body>
<center>
    <div id="geral">
          <div id="topo"> 
	  
	  
	  </div>
	  
    <div id="esquerda">		  
  <div id="esquerda_cima">
   <table width="100%" border="0" cellspacing="0" cellpadding="4">
	         <tr bgcolor="#999999">
			      <td colspan="2"><a href="#">Lorem</a>
				  </td>
			 </tr>
			 <tr bgcolor="#CCCCCC">
			      <td>  
				  </td>
				   <td width="100%"><a href="#">Ipsum</a>
				   </td>
		     </tr>
			 <tr bgcolor="#CCCCCC">
			      <td>  
				  </td>
				  <td width="100%"><a href="#">Dolar</a>
				  </td>
			</tr>
			<tr bgcolor="#999999">
			     <td colspan="2"><a href="#">Sic Amet</a>
				 </td>
		    </tr>
			<tr bgcolor="#CCCCCC">
			     <td>  
			     </td>
			     <td width="100%"><a href="#">Consetetur</a>
			     </td>
			</tr>
			<tr bgcolor="#CCCCCC">
			     <td>>
				 </td>
				 <td width="100%">Sadipscing
				 </td>
			</tr>
			<tr bgcolor="#CCCCCC">
			     <td> 
				 </td>
				 <td width="100%"><a href="#">Elitr</a>
				 </td>
			</tr>
	</table> 
  </div>
      <div id="esquerda_baixo">

           <table width="100%" border="0" cellspacing="0" cellpadding="4">
	         <tr bgcolor="#999999">
			      <td colspan="2"><a href="#">Lorem</a>
				  </td>
			 </tr>
			 <tr bgcolor="#CCCCCC">
			      <td>  
				  </td>
				   <td width="100%"><a href="#">Ipsum</a>
				   </td>
		     </tr>
			 <tr bgcolor="#CCCCCC">
			      <td>  
				  </td>
				  <td width="100%"><a href="#">Dolar</a>
				  </td>
			</tr>
			<tr bgcolor="#999999">
			     <td colspan="2"><a href="#">Sic Amet</a>
				 </td>
		    </tr>
			<tr bgcolor="#CCCCCC">
			     <td>  
			     </td>
			     <td width="100%"><a href="#">Consetetur</a>
			     </td>
			</tr>
			<tr bgcolor="#CCCCCC">
			     <td>>
				 </td>
				 <td width="100%">Sadipscing
				 </td>
			</tr>
			<tr bgcolor="#CCCCCC">
			     <td> 
				 </td>
				 <td width="100%"><a href="#">Elitr</a>
				 </td>
			</tr>
	</table> 


   </div>
  </div>
  
      <div id="direita">
  	Conteúdo da Direita Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.
  </div>
      
  <div id="conteudo">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque. Integer facilisis, lorem ac malesuada dignissim, eros metus posuere urna, et vestibulum urna justo ac enim. Ut lectus lacus, semper non, fermentum ut, porta in, sapien. Suspendisse pharetra blandit wisi. Duis dui ante, lobortis in, volutpat eu, blandit ac, eros. Maecenas quis ante a dolor hendrerit congue. Vestibulum risus enim, mollis ultricies, venenatis non, euismod ac, tellus.</p><p> Maecenas congue, ipsum et elementum ullamcorper, urna velit ultrices massa, in accumsan velit ligula id purus. Sed metus elit, blandit nec, ultrices id, scelerisque ultrices, augue. Phasellus accumsan. Cras porta. Sed turpis urna, aliquet in, ornare et, congue bibendum, justo.</p><p> Proin in eros at justo lacinia varius. Proin nulla dui, euismod sit amet, lobortis non, porta vel, ipsum. Fusce malesuada accumsan tellus. Sed tincidunt justo a magna. In a nunc. Suspendisse placerat, quam a euismod auctor, massa eros tincidunt massa, quis hendrerit turpis justo in diam.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque. Integer facilisis, lorem ac malesuada dignissim, eros metus posuere urna, et vestibulum urna justo ac enim. Ut lectus lacus, semper non, fermentum ut, porta in, sapien. Suspendisse pharetra blandit wisi. Duis dui ante, lobortis in, volutpat eu, blandit ac, eros. Maecenas quis ante a dolor hendrerit congue. Vestibulum risus enim, mollis ultricies, venenatis non, euismod ac, tellus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque. Integer facilisis, lorem ac malesuada dignissim, eros metus posuere urna, et vestibulum urna justo ac enim. Ut lectus lacus, semper non, fermentum ut, porta in, sapien. Suspendisse pharetra blandit wisi. Duis dui ante, lobortis in, volutpat eu, blandit ac, eros. Maecenas quis ante a dolor hendrerit congue. Vestibulum risus enim, mollis ultricies, venenatis non, euismod ac, tellus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque. Integer facilisis, lorem ac malesuada dignissim, eros metus posuere urna, et vestibulum urna justo ac enim. Ut lectus lacus, semper non, fermentum ut, porta in, sapien. Suspendisse pharetra blandit wisi. Duis dui ante, lobortis in, volutpat eu, blandit ac, eros. Maecenas quis ante a dolor hendrerit congue. Vestibulum risus enim, mollis ultricies, venenatis non, euismod ac, tellus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque. Integer facilisis, lorem ac malesuada dignissim, eros metus posuere urna, et vestibulum urna justo ac enim. Ut lectus lacus, semper non, fermentum ut, porta in, sapien. Suspendisse pharetra blandit wisi. Duis dui ante, lobortis in, volutpat eu, blandit ac, eros. Maecenas quis ante a dolor hendrerit congue. Vestibulum risus enim, mollis ultricies, venenatis non, euismod ac, tellus.</p>

  </div>
    </div>
</center>	
</body>
</html>

Se alguem me ajudar agradecia :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

experimenta assim. Evita usar tabelas para os menus. Usa <ul> e <li> encadeaos para fazer os menus. Em relação à tua dúvida não precebi.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Esquerda {
float: left;
width: 25%;
}
#Fundo {
border: 1px solid #000000;
}
#Copyright {
width: 100%;
clear: both;
}
#Topo {
width: 100%;
height: 50px;
}
#Lateral {
width: 75%;
float: right;
clear: right;
}
#Esquerda li {
list-style-type: none;
margin: 0px;
padding: 1px;
color: #FFFFFF;
background-color: #666666;
}
#Esquerda ul {
margin: 0px;
padding: 0px;
}
#Fundo #Esquerda ul ul li {
color: #333333;
background-color: #CCCCCC;
}
#Direita {
width: 33%;
float: right;
}
#Centro {
width: 67%;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
color: 10;
}
-->
</style>
</head>

<body>
<div id="Fundo">
  <div id="Topo"></div>
  <div id="Esquerda">
    <ul>
      <li>hhjhjg
        <ul>
          <li>xzfgsdf</li>
          <li>dfgdfg</li>
        </ul>
      </li>
      <li>dfgdfg
        <ul>
          <li>dfgdfg</li>
          <li>dfgdfgdfg</li>
          <li>nhfndfg</li>
        </ul>
      </li>
      <li>fgjhdfh
        <ul>
          <li>gfhfg</li>
          <li>hfghfgh</li>
          <li>gfhdfh</li>
        </ul>
      </li>
      <li>dfghdf
        <ul>
          <li>ghdfgh</li>
          <li>dfgh</li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>hhjhjg
        <ul>
            <li>xzfgsdf</li>
          <li>dfgdfg</li>
        </ul>
      </li>
      <li>dfgdfg
        <ul>
            <li>dfgdfg</li>
          <li>dfgdfgdfg</li>
          <li>nhfndfg</li>
        </ul>
      </li>
      <li>fgjhdfh
        <ul>
            <li>gfhfg</li>
          <li>hfghfgh</li>
          <li>gfhdfh</li>
        </ul>
      </li>
      <li>dfghdf
        <ul>
            <li>ghdfgh</li>
          <li>dfgh</li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="Lateral">
    <div id="Direita">
      <p>Conteúdo da Direita Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque. </p>
    </div>
    <div id="Centro">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque. Integer facilisis, lorem ac malesuada dignissim, eros metus posuere urna, et vestibulum urna justo ac enim. Ut lectus lacus, semper non, fermentum ut, porta in, sapien. Suspendisse pharetra blandit wisi. Duis dui ante, lobortis in, volutpat eu, blandit ac, eros. Maecenas quis ante a dolor hendrerit congue. Vestibulum risus enim, mollis ultricies, venenatis non, euismod ac, tellus.</p>
      <p> Maecenas congue, ipsum et elementum ullamcorper, urna velit ultrices massa, in accumsan velit ligula id purus. Sed metus elit, blandit nec, ultrices id, scelerisque ultrices, augue. Phasellus accumsan. Cras porta. Sed turpis urna, aliquet in, ornare et, congue bibendum, justo.</p>
      <p> Proin in eros at justo lacinia varius. Proin nulla dui, euismod sit amet, lobortis non, porta vel, ipsum. Fusce malesuada accumsan tellus. Sed tincidunt justo a magna. In a nunc. Suspendisse placerat, quam a euismod auctor, massa eros tincidunt massa, quis hendrerit turpis justo in diam.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque. Integer facilisis, lorem ac malesuada dignissim, eros metus posuere urna, et vestibulum urna justo ac enim. Ut lectus lacus, semper non, fermentum ut, porta in, sapien. Suspendisse pharetra blandit wisi. Duis dui ante, lobortis in, volutpat eu, blandit ac, eros. Maecenas quis ante a dolor hendrerit congue. Vestibulum risus enim, mollis ultricies, venenatis non, euismod ac, tellus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque. Integer facilisis, lorem ac malesuada dignissim, eros metus posuere urna, et vestibulum urna justo ac enim. Ut lectus lacus, semper non, fermentum ut, porta in, sapien. Suspendisse pharetra blandit wisi. Duis dui ante, lobortis in, volutpat eu, blandit ac, eros. Maecenas quis ante a dolor hendrerit congue. Vestibulum risus enim, mollis ultricies, venenatis non, euismod ac, tellus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque. Integer facilisis, lorem ac malesuada dignissim, eros metus posuere urna, et vestibulum urna justo ac enim. Ut lectus lacus, semper non, fermentum ut, porta in, sapien. Suspendisse pharetra blandit wisi. Duis dui ante, lobortis in, volutpat eu, blandit ac, eros. Maecenas quis ante a dolor hendrerit congue. Vestibulum risus enim, mollis ultricies, venenatis non, euismod ac, tellus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque. Integer facilisis, lorem ac malesuada dignissim, eros metus posuere urna, et vestibulum urna justo ac enim. Ut lectus lacus, semper non, fermentum ut, porta in, sapien. Suspendisse pharetra blandit wisi. Duis dui ante, lobortis in, volutpat eu, blandit ac, eros. Maecenas quis ante a dolor hendrerit congue. Vestibulum risus enim, mollis ultricies, venenatis non, euismod ac, tellus.</p>
    </div>
  </div>
  <div id="Copyright"></div>
</div>

</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

era deixar espaço entre dois blocos de informaçao como custumamos ver .... mas acho que ja tou haver como e k vou fazer... nao sei se será a mais correcta

  Já Descubrir como fazer o que queira... Obrigado Perdido na mesma

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