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

SonicSpot

DIVs não ficam paralelos

Recommended Posts

SonicSpot

Viva pessoal! Tenho uma dúvida, que tenho a certeza que é simples, mas como tenho muito pouca experiência com CSS, estou completamente à nora. Tenho 3 divs (um wrapper, um content e um menu), e gostaria que  content e o menu aparecessem paralelos, e sempre centrados na página, o que não acontece, já que o menu aparece sempre abaixo da posição onde o content aparece. Deixo aqui um código de exemplo:

<html>
<head>
	<style type="text/css">
		#wrapper {
			width:100%;
			text-align:center;
		}
		#content {
			position:relative;
			border: 2px solid #00ff00;
			padding: 4px 10px;
			width:500px;
			left:-150px;
		}
		#menu {
			position:relative;
			border: 2px solid #ff0000;
			padding: 4px 10px;
			width:250px;
			left:250px;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="content">
			<p>Content			</p>
			<p>sfsfsdsf</p>
			<p> </p>
			<p>sdfsfsdfsdf</p>
			<p> </p>
			<p>sdfsdfsff    </p>
		</div>
		<div id="menu">
			<p>Menu</p>
			<p>link</p>
			<p>link</p>
			<p>link</p>
			<p>link</p>
		</div>
	</div>
</body>
</html>

Espero ter sido suficientemente claro. O que eu quero, é o site típico, com o conteúdo, e o menu ao lado (neste caso, do lado direito). Agradecia imenso que me podessem ajudar!

Cumprimentos!

Share this post


Link to post
Share on other sites
softklin

Os divs são elementos de bloco, nunca ficam ao lado uns do outros, troca os 2 div por span

Vitortomaz, esse nunca é muito forte, porque eu já vi, e já consegui fazer isto, desde que as div's estejam num container, basta jogar com os tamanhos e os floats..

EDIT:

Experimenta assim:

#content {
    	width: 500px;
    	float: left;
}

#menu {
    	width: /* o que quiseres */
    	float: right;
}


Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Share this post


Link to post
Share on other sites
vitortomaz

Vitortomaz, esse nunca é muito forte, porque eu já vi, e já consegui fazer isto, desde que as div's estejam num container, basta jogar com os tamanhos e os floats..

se eu meter 2 divs, um em cada coluna de uma tabela também vão ficar ao lado um do outro, mas ok, era só para se perceber a diferença entre o div e o span

Share this post


Link to post
Share on other sites
softklin

Não, eu referia-me a soluções exclusivamente por CSS! O que pus em cima, quando editei a minha mensagem, foi o que eu usei para ter 2 div's paralelos.


Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Share this post


Link to post
Share on other sites
SonicSpot

Obrigado pela ajuda pessoal! Já consegui fazer mais ou menos o que queria, mas continuo com um pequeno problema. Deixo aqui dois ficheiros, um com o layout, e outro com a folha de estilo. Como podem ver, o "container" (a laranja), aparece em cima, enquanto que todos os outros divs aparecem em baixo. O que eu pretendo, é que o container apareça no meio dos outros. Espero ter sido suficientemente claro. Deixo aqui então os ficheiros:

style.css

/* --------------------- General CSS -------------------- */

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-color: #000000;
background-image:url(../img/bg.jpg);
text-align:center;
}

a {
text-decoration:none;
color:#000000;
border: 0;
}

a:hover {
text-decoration:underline;
}

input, select, textarea {
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* --------------------- Main Blocks ------------------------ */

#mainwrapper {
width: 1001px;
height:768px;
margin:0 auto;
text-align:left;
overflow:visible;
border: solid;
border-width:1px;
border-color:#F00;
}


#mainlogo {
width:230px;
height:100px;
float:left;
margin: 0;
background-color:#00F;
}

#mainCountryRank {
width:230px;
height:150px;
float:left;
clear:left;
overflow:visible;
margin:0;
background-color:#0F0;
}

#container {
margin-left:240px;
margin-right:211px;
width:550px;
height:500px;
background-color:#F90;
}

#mainmenu {
width:201px;
height:300px;
float:right;
margin:0;
background-color:#C6C;
}

page.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=iso-8859-1" />
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="mainwrapper">
<div id="container">container</div>



<div id="mainlogo">mainlogo</div>
<div id="mainmenu">mainmenu</div>

<div id="mainCountryRank">mainCountryRank</div>

</div>


</body>
</html>

Share this post


Link to post
Share on other sites
lugh

Hey!

Isso acontece porque o teu container esta definido antes da div do logo.

As propriedades:

margin-left:240px;

margin-right:211px;

tambem nao ajudam muito.

Por isso a minha sugestão é:

<!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>title</title>
<style>
/* --------------------- General CSS -------------------- */

body {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:10px;
   font-color: #000000;
   background-image:url(../img/bg.jpg);
   text-align:center;
}

a {
   text-decoration:none;
   color:#000000;
   border: 0;
}

a:hover {
   text-decoration:underline;
}

input, select, textarea {
   font-size:10px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* --------------------- Main Blocks ------------------------ */

#mainwrapper {
   width: 1001px;
   height:768px;
   margin:0 auto;
   text-align:left;
   overflow:visible;
   border: solid;
   border-width:1px;
   border-color:#F00;
}


#mainlogo {
   width:230px;
   height:100px;
   float:left;
   margin: 0;
   background-color:#00F;
}

#mainCountryRank {
   width:230px;
   height:150px;
   float:left;
   clear:left;
   overflow:visible;
   margin:0;
   background-color:#0F0;
}

#container {
margin-left:10px;
float:left;
   width:550px;
   height:500px;
   background-color:#F90;
}

#mainmenu {
   width:201px;
   height:300px;
   float:right;
   margin:0;
   background-color:#C6C;
}
</style>
</head>

<body>
    <div id="mainwrapper">
    <div id="mainlogo">mainlogo</div>
    <div id="container">container</div>
    <div id="mainmenu">mainmenu</div>
    <div id="mainCountryRank">mainCountryRank</div>
</div>
</body>
</html>

Força aí e dispõe sempre.

Share this post


Link to post
Share on other sites
SonicSpot

Hmmm.. Antes de mais, obrigado por disponibilizares o teu tempo para me ajudar. Em relação à solução que forneceste, resolveu parcialmente o problema. Agora, tenho apenas o mainCountryRank fora de posição, aparece no canto inferior esquerdo do container.

template.jpg

Share this post


Link to post
Share on other sites
lugh

Com a zona do #mainlogo criada podes utiliza-la como miniContainer, dessa forma podes meter lá dentro o logo e o country ranking.

Cheers!

Share this post


Link to post
Share on other sites
SonicSpot

hmm... ok thanks! vou tentar isso mesmo, e penso que não será preciso mais nada! Mais uma vez, muito obrigado pela ajuda! :)

Share this post


Link to post
Share on other sites
SonicSpot

Já está a funcionar! :D Usei a tua sugestão, e criei dois divs "leftbar" e "rightbar", e já posso colocar o que me apetecer lá. Já agora, se eu quisesse que estes dois divs tivessem um position "fixed", o que seria necessário? Já tentei colocar "position:fixed" nas propriedades, mas os divs colam-se ao lado esquerdo da página.

Share this post


Link to post
Share on other sites
lugh

position: fixed 

An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)

http://www.w3schools.com/Css/pr_class_position.asp

Será que é isto que realmente pretendes?

Share this post


Link to post
Share on other sites
ppeixoto

Se usares a propriedade float podes colocar dois divs lado a lado! fazes float:left ou float:right e o div chegar-se á o máximo que pode pra um desses lados, passando a ser possível colocar dois lado a lado. Cumps

Share this post


Link to post
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

×

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.