Duvida Em Css!

#1 teknonet

Turista

Usuários
26 posts

Sexo:Masculino
Interesses:WebDesigner; parcerias; ajuda

Posted 20/02/2009, 11:16

Ola amigos do Forum WM,

Estou com uma duvida para fazer um site em CSS e nao estou conseguindo, to tentando fazer uma pagina com topo, menu lateral e conteudo no centro.

Mais o conteudo nao esta ficando no centro e vai para baixo de tudo.

Se alguem poder me ajudar o codigo esta abaixo.

Code CSS

body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.campo {
	border: #CCCCCC 1px solid;
	/*color: #2f2f2f;*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 105px;
	height: 16px;
	background-color: #ffffff;
	margin-right: 12px;
	padding-top: 3px;
	padding-left: 5px;
	padding-bottom: 3px;
}

#geral {
	border-right: 1px #CCCCCC solid;
	width: 950px;
	height: 100%;
	position: absolute;
	vertical-align: top; 
}

#logo {
	background-image: url(images/fundo_topo_01.jpg);
	background-position: top;
	width: 950px;
	height: 159px;
	position: absolute;
}

.texto {
	font-family: Tahoma, Helvetica, sans-serif;
}

#infologin {
	margin: 45px 0 0 238px;
}

#infologin .texto{
	font-size: 12px;
	word-spacing: 2px;
	line-height: 25px;
}

#fundomenu {
	margin: 0 0 0 0;
	width: 199px;
	height: 100%;
	background: url(images/menu_repeat.gif) repeat-y right;

}

#menu {
	width: 196px;
	background: #f9f9f9 url(images/menu_bg.gif) no-repeat top right;
	background-position: 1px 161px;
	border: 0px;
	padding-top: 161px;
	float:left;
}

#menu ul {
	margin: 0;
	padding: 5px;
	border: 0px;
	list-style: none;
	font: 12px Arial, Tahoma, Verdana;
}

#menu li {
	margin: 0 0 2px 0;
}

#menu li span {
	display: block;
	padding: 8px;
	color: #666;
	text-decoration: none;
	font-weight:bold;
	margin-top: 10px;
}

#menu li a {
	display: block;
	padding: 3px 8px 3px 16px;
	color: #666;
	text-decoration: none;
	vertical-align: middle;
}

#menu li a:hover {
	padding: 2px 8px 2px 15px;
	border: 1px solid #CCC;
	background: #FEFEFE;
	color: #007cc3;
}

#centro {
	width: 686px;
	float:right;
	
}

#conteudo {
	width: 400px;
	height: 350px;
	background-color:#009;
}

#topo_form {
	background: #CFD6D6;
	width: 686px;
	height: 25px;
	margin: 3px 0 0 0;
}

#topo_form .texto{
	font-size: 15px;
	word-spacing: 2px;
	line-height: 25px;
	margin-left: 3px;
	vertical-align:middle;
	
}

#campo {
	width: 686px;
	margin: 3px 0 0 0;
	padding: 2px;
}

#campo .texto{	
	font-size: 12px;
	word-spacing: 2px;
	line-height: 25px;
	vertical-align:middle;
	
}

#form {
	width: 686px;
	margin: 3px 0 0 0;
}

#form .texto{	
	font-size: 12px;
	word-spacing: 2px;
	line-height: 25px;
	vertical-align:middle;
	
}

#texto {
	width: 670px;
	margin: 5px 0 0 5px;
}

#texto .texto{	
	font-size: 12px;
	word-spacing: 2px;
	line-height: 25px;
	vertical-align:middle;
	
}

.checkbox{
	margin: 0 0 0 20px;	
	padding: 2px;
}

.checkbox_2{
	margin: 0 0 0 45px;	
	padding: 2px;
}

Code 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>Untitled Document</title>
<link href="estilos1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="geral">
<div id="logo"></div>
<div id="fundomenu">
	<div id="menu">
	  <ul>
		<li><span>Cadastros Gerais</span></li>
		<li><a href="#">Home</a></li>
		<li><a href="#">Serviços</a></li>
		<li><a href="#">Contato</a></li>
		<li><span>Outro Menu</span></li>
		<li><a href="#">Opção 1</a></li>
		<li><a href="#">Opção 2</a></li>
		<li><a href="#">Opção 3</a></li>
	  </ul> 
	</div>
  </div>
<div id="centro">
	<div id="conteudo"></div>
	</div>

</div>
</body>
</html>

Faleu pela ajuda....

Alessandro Bueno
B&D Informatica
www.bedinformatica.com.

#2 Maykel Esser

Super Veterano

Usuários
1536 posts

Sexo:Masculino
Localidade:Curitiba - PR

Posted 20/02/2009, 11:47

tente botar o menu como float:left; e tira o float:right do centro!

Se este post lhe ajudou, ajude o fórum também. Use a reputação de mensagens!

#3 teknonet

Turista

Usuários
26 posts

Sexo:Masculino
Interesses:WebDesigner; parcerias; ajuda

Posted 20/02/2009, 14:25

tente botar o menu como float:left; e tira o float:right do centro!

Ola amigo deu certo só q agora to com outro problema, será q vc pode me ajudar????

eu quero que a imagem de fundo e a borda lateral direita vao ate o final da pagina e nao esta indo

o codigo esta abaixo.

Code CSS

body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

/*.bodylogin {
	background-image: url(images/fundo.jpg);
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}

#centrologin{
	background-image:url(images/login_logo.jpg);
	height:295px;
	width:334px;
	/*float:none;
	text-align:center;
}

#caixacampos{
	width:334px;
	height:75px;
	/*margin-top:220px;
	vertical-align:middle;
	padding:0px;
}

.campo {
	border: #CCCCCC 1px solid;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 105px;
	height: 16px;
	background-color: #ffffff;
	margin-right: 12px;
	padding-top: 3px;
	padding-left: 5px;
	padding-bottom: 3px;
}
*/
#geral {
	border-right: 1px #CCCCCC solid;
	width: 950px;
	height: 100%;
	position: absolute;
	vertical-align: top;
}

#logo {
	background-image: url(images/fundo_topo_01.jpg);
	background-position: top;
	width: 950px;
	height: 159px;
	position: absolute;
}

.texto {
	font-family: Tahoma, Helvetica, sans-serif;
}

#infologin {
	margin: 45px 0 0 238px;
}

#infologin .texto{
	font-size: 12px;
	word-spacing: 2px;
	line-height: 25px;
}

#fundomenu {
	margin: 0 0 0 0;
	width: 199px;
	height: 100%;
	background: url(images/menu_repeat.gif) repeat;
	float:left;

}

#menu {
	width: 196px;
	background: #f9f9f9 url(images/menu_bg.gif) no-repeat top right;
	background-position: 1px 161px;
	border: 0px;
	padding-top: 161px;
	
}

#menu ul {
	margin: 0;
	padding: 5px;
	border: 0px;
	list-style: none;
	font: 12px Arial, Tahoma, Verdana;
}

#menu li {
	margin: 0 0 2px 0;
}

#menu li span {
	display: block;
	padding: 8px;
	color: #666;
	text-decoration: none;
	font-weight:bold;
	margin-top: 10px;
}

#menu li a {
	display: block;
	padding: 3px 8px 3px 16px;
	color: #666;
	text-decoration: none;
	vertical-align: middle;
}

#menu li a:hover {
	padding: 2px 8px 2px 15px;
	border: 1px solid #CCC;
	background: #FEFEFE;
	color: #007cc3;
}

#centro {
	width: 686px;
	padding-top: 161px;
	padding-left: 230px;
}

#topo_form {
	background: #CFD6D6;
	width: 686px;
	height: 25px;
	margin: 3px 0 0 0;
}

#topo_form .texto{
	font-size: 15px;
	word-spacing: 2px;
	line-height: 25px;
	margin-left: 3px;
	vertical-align:middle;
	
}

#conteudo {
	width: 686px;
	margin: 3px 0 0 0;
	padding: 2px;
}

#conteudo .texto{	
	font-size: 11px;
	color:#036;
	word-spacing: 2px;
	line-height: 25px;
	vertical-align:middle;
	
}

#form {
	width: 686px;
	margin: 3px 0 0 0;
}

#form .texto{	
	font-size: 12px;
	word-spacing: 2px;
	line-height: 25px;
	vertical-align:middle;
	
}

#texto {
	width: 670px;
	margin: 5px 0 0 5px;
}

#texto .texto{	
	font-size: 12px;
	word-spacing: 2px;
	line-height: 25px;
	vertical-align:middle;
	
}

.checkbox{
	margin: 0 0 0 20px;	
	padding: 2px;
}

.checkbox_2{
	margin: 0 0 0 45px;	
	padding: 2px;
}

Code 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>:: LUBBIC :: BRINDES PROMOCIONAIS</title>
<!--link href="screen.css" rel="stylesheet" type="text/css" /-->
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="geral">
  <!-- TOPO -->
<div id="logo">
	<div id="infologin"><span class="texto">Bem-Vindo <strong>João da Silva</strong>.<br />
	  IP: 200.000.000.001<br />
	  18 de Fevereiro de 2009</span>	</div>
  </div>
  
  <!-- MENU -->
<div id="fundomenu">
	<div id="menu">
	  <ul>
		<li><span>Cadastros Gerais</span></li>
		<li><a href="#">Home</a></li>
		<li><a href="#">Serviços</a></li>
		<li><a href="#">Contato</a></li>
		<li><span>Outro Menu</span></li>
		<li><a href="#">Opção 1</a></li>
		<li><a href="#">Opção 2</a></li>
		<li><a href="#">Opção 3</a></li>
	  </ul> 
	</div>
 </div>
   <!-- Conteudo -->
	<div id="centro">
		  <div id="topo_form"><span class="texto"><strong>Cadastro Cliente</strong><span></div>
			<div id="conteudo">
				<p><span class="texto">
				  <strong>Nome:  </strong>
				  <label>
					<input name="Nome" type="text" id="Nome" size="70"/>
				  </label>
				  <br/>
				  <strong>Nome: </strong>
				  Teste
				  <label>
					<input type="checkbox" name="texto2" id="texto2" />
				  </label>
				  Teste
				  <label>
					<input type="checkbox" name="texto3" id="texto3" />
				  </label> 
				  Teste
				  <label>
					<input type="checkbox" name="texto4" id="texto4" />
				  </label> 
				  Teste
				  <label>
					<input type="checkbox" name="texto5" id="texto5" />
				  </label> 
				  Teste
				  <label>
					<input type="checkbox" name="texto6" id="texto6" />
				  </label>
		   		</span><br />
				  <span class="texto">
				  <strong>Nome: </strong>
				  <label>
					<select class="campo1" name="cboNatureza">
					  <option value="">--Selecione--</option>
					</select>
				  </label>
				  <br/>
				  <span class="texto">
					<strong>Nome:</strong>
					Texto<input type="radio" name="radio" id="texto6" value="texto1" />
					Texto<input type="radio" name="radio" id="texto7" value="texto2" />
					Texto<input type="radio" name="radio" id="texto8" value="texto3" />
	   		  Texto				  </span></p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
		   	  <p> </p>
				<p><br />
				</p>
	  </div>
		</div>
	</div>  
	
</div>
</body>
</html>

Valeu pela força..........

ate mais.

Alessandro Bueno
B&D Informatica
www.bedinformatica.com.

#4 Édipo Costa Rebouças

Veterano

Ex-Admins
1079 posts

Sexo:Masculino
Localidade:Brasil - São Paulo

Posted 20/02/2009, 14:32

sobre a borda

#geral { overflow: auto; ...e o resto das suas declarações }

de qual fundo vc esta falando, de que elemento?

teknonet, não fica repetindo o código toda hora, só coloca a parte da alteração.

Edição feita por: Édipo Costa Rebouças, 20/02/2009, 14:35.

#5 teknonet

Turista

Usuários
26 posts

Sexo:Masculino
Interesses:WebDesigner; parcerias; ajuda

Posted 20/02/2009, 14:46

sobre a borda
#geral { overflow: auto; ...e o resto das suas declarações }
de qual fundo vc esta falando, de que elemento?

teknonet, não fica repetindo o código toda hora, só coloca a parte da alteração.

Amigo nao deu muito certo a minha barra lateral veio para o meio da tela

o que eu quero fazer é o seguinte

#fundomenu {
	margin: 0 0 0 0;
	width: 199px;
	height: 100%;
	background: url(images/menu_repeat.gif) repeat;
	float:left;

}

a imagem desse codigo fique acompanhando o tamanho da tela

e a borda direita desse codigo,

#geral {
	border-right: 1px #CCCCCC solid;
	width: 950px;
	height: 100%;
	position: absolute;
	vertical-align: top;
	overflow: auto;
}

faça a mesma coisa.

se vc intendeu e puder me ajudar faleu.

Alessandro Bueno
B&D Informatica
www.bedinformatica.com.

#6 Édipo Costa Rebouças

Veterano

Ex-Admins
1079 posts

Sexo:Masculino
Localidade:Brasil - São Paulo

Posted 20/02/2009, 15:03

tira o overflow: auto;

<span style="clear: both, display: block"><!-- --></span>

coloca isso antes de fechar o geral

isso vai fazer com que o div com float não estoure o div geral, era a mesma ideia do overflow auto mas sem mais código

de um float: left no #centro,

sobre o fundo, você vai ter que coloca-lo em outro lugar que englobe o #centro o #fundomenu, por exemplo, no #geral e pedir para se repetir horizontalmente dependendo do caso.

Edição feita por: Édipo Costa Rebouças, 20/02/2009, 15:05.

#1 teknonet

#2 Maykel Esser

#3 teknonet

#4 Édipo Costa Rebouças

#5 teknonet

#6 Édipo Costa Rebouças

1 user(s) are reading this topic

Entrar