Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

.:: Chico ::.

Template: Coluna central e lateral

Por , em Desenvolvimento frontend

Recommended Posts

.:: Chico ::.    0

.:: Chico ::.
Postado

Olá,

estou brincando de fazer template/tema para o wordpress e aprendendo CSS/Tableless ao mesmo tempo.

 

A princípio vou fazer algo bem básico, porém estou tendo problemas com a organização das divs, a posição da coluna da direita.

 

O tema é básico, no centro os posts e ao lado apenas uma coluna, porém ela insiste em não ficar ao lado da div central.

 

Joguei pro servidor com as divs e containers com bordas e cores distintas.

Segue: www.e-mello.com/teste

 

Aqui segue um modelo já pronto ao qual fui me baseando, na verdade não me baseei muito: www.e-mello.com/modelo

 

Aqui vai o código html e css da minha página teste. Já olhei muito e não consigo achar o erro. Já olhei outros sites e modelos e não consegui identificar no que estou pecando.

 

Interessante é as grotesca diferença de visualização entre Firefox 3.0 e IE7.

No IE7 ele só me apresenta o problema que relato: a coluna não ficar ao lado e sim abaixo.

Já no FF3 ele me joga o rodapé lá para cima, não sei porque.

Visualizem nos 2 browsers, para entender.

 

Código 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>teste</title>
<script type="text/javascript" src=""></script>
<style type="text/css" media="screen">
@import url("style.css");
</style>
</head>
<body id="home">

<div id="container">

<div id="topo">
Banner
</div>
<!--Fim de topo-->

<div id="corpoebarra">

<div id="corpo">

<div id="postwrap-top">
</div>
<!--Fim de post-->

<div id="postwrap">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate  pretium orci. Nulla tortor risus, commodo ac, imperdiet quis, venenatis  sit amet, arcu. Aliquam arcu lectus, euismod sit amet, iaculis nec,  molestie eu, felis. Sed facilisis ante vitae sapien. Etiam aliquet.  Maecenas imperdiet vehicula neque. Fusce pellentesque sem eu massa. Sed  malesuada lectus eget nibh. Pellentesque a sapien. Proin iaculis ante  in sem. Etiam sem. </p>
  <p>Sed in velit eu quam pharetra mollis. Fusce velit justo, interdum  eu, euismod sollicitudin, placerat vitae, magna. Aliquam feugiat nulla.  Nam eros justo, pretium tempor, porttitor vitae, rutrum quis, odio.  Etiam mollis purus sit amet diam ultricies mattis. Aliquam eu dolor ac  risus blandit sodales. In fringilla, nibh et tincidunt porttitor, ipsum  eros gravida neque, sed ultrices dolor massa id odio. Sed tristique,  massa in commodo tincidunt, elit ipsum fermentum libero, eget dapibus  pede quam in eros. Nulla velit. Donec commodo. Donec erat libero,  viverra at, scelerisque et, pretium non, sapien. Vestibulum malesuada  nisl vel nunc. Mauris fringilla ornare enim. </p>
  <p>Sed tempor, augue eu sagittis suscipit, mauris ligula sollicitudin  diam, at porta ante leo ac metus. Maecenas porttitor, sem a vulputate  convallis, felis felis pharetra nibh, iaculis accumsan neque dolor nec  tortor. Vivamus tempus. Nulla adipiscing turpis non sapien. Quisque  magna. Phasellus justo. Curabitur enim nisi, semper id, hendrerit eget,  pretium sed, massa. Nulla facilisi. Nullam placerat congue nisi. Sed  venenatis odio ac eros. Morbi a nisi eget metus interdum volutpat.  Nulla cursus lacus in felis. Aliquam feugiat, quam vel aliquam  ullamcorper, felis ante dignissim nibh, quis dignissim diam velit sed  ipsum. In felis quam, placerat et, vehicula rhoncus, congue molestie,  erat. </p>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate  pretium orci. Nulla tortor risus, commodo ac, imperdiet quis, venenatis  sit amet, arcu. Aliquam arcu lectus, euismod sit amet, iaculis nec,  molestie eu, felis. Sed facilisis ante vitae sapien. Etiam aliquet.  Maecenas imperdiet vehicula neque. Fusce pellentesque sem eu massa. Sed  malesuada lectus eget nibh. Pellentesque a sapien. Proin iaculis ante  in sem. Etiam sem. </p>
  <p> </p>
</div>
<!--Fim de postwrap-->

<div id="postwrap-bottom">
</div>
<!--Fim de postwrap-bottom-->

</div>
<!--Fim de corpo-->

<div id="barralateral">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate pretium orci. Nulla tortor risus, commodo ac, imperdiet quis, venenatis sit amet, arcu. Aliquam arcu lectus, euismod sit amet, iaculis nec, molestie eu, felis. Sed facilisis ante vitae sapien. Etiam aliquet. Maecenas imperdiet vehicula neque. Fusce pellentesque sem eu massa. Sed malesuada lectus eget nibh. Pellentesque a sapien. Proin iaculis ante in sem. Etiam sem. 
</div>
<!--Fim de barralateral-->

</div>
<!--Fim de corpoebarra-->

<div id="rodape">
Rodapé
</div>
<!--Fim de rodape-->

</div>
<!--Fim de container-->

</body>
</html>

Código CSS:

 

@charset "utf-8";
/* CSS Document */
/*////////// ESTRUTURA POR APARECIMENTO //////////*/
body#home {
	background-color: #f3ebd5;
}

#container {
	border: 1px solid #0F0;
	margin: 0 auto;
	width: 900px;	
}

#topo {
	border: 1px solid #F00;
	width: 900px;
	height: 180px;
}

#corpoebarra {
	margin: 0 auto;
	border: 1px solid #00F;
}

#corpo {
	border: 1px solid #FF0;
	width: 700px; 
}

#postwrap-top {
	background: url(imagens/top-c.png) no-repeat bottom;
	margin: 0px;
	padding: 0px;
	float: left;
	height: 26px;
	width: 700px;
}

#postwrap {
	background: url(imagens/center-c.png) repeat-y;
	float: left;
	width: 660px;
	padding-right: 15px;
	padding-left: 25px;
	
}

#postwrap-bottom {
	background: url(imagens/bottom-c.png) no-repeat top;
	margin: 0px;
	padding: 0px;
	float: left;
	height: 55px;
	width: 700px;
}

#barralateral {
	float: right;
	border: 1px solid #ff9900;
	width: 200px;
	padding: 0px;
}

#rodape {
	border: 1px solid #F0F;
	height: 85px;
	width: 900px;
}

/*////////// TIPOGRAFIA - ORDEM ALFABÉTICA //////////*/

Obrigado pela atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito