Ir para o conteúdo
SonicSpot

DIVs não ficam paralelos

Mensagens Recomendadas

SonicSpot    0
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!

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
softklin    12
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;
}

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
vitortomaz    1
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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
softklin    12
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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
SonicSpot    0
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>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
lugh    0
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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
SonicSpot    0
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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
SonicSpot    0
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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
lugh    0
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?

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
ppeixoto    0
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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
yoda    139
yoda

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

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


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade