Jump to content

Dois comteudos um debaixo do outro

pebat

By pebat,
in CSS

 Share

Recommended Posts

pebat boolean user

pebat

Posted
Posted

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 🙂

Link to comment
Share on other sites
perdido_e_sozinho void

perdido_e_sozinho

Posted
Posted

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>

ser.gifsartim.gif

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept