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

SonicSpot

DIVs não ficam paralelos

16 mensagens neste tópico

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!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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;
}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

Cheers!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

float é "manhoso", mais vale usar a solução do Battousai e lugh

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