Jump to content

  2. →
  3. →

Photo

Div Não Fica Do Tamanho Certo

Started By dddidan, 06/01/2010, 18:14

  • Faça o login para participar
13 replies to this topic

#1 dddidan

dddidan

    Ativo

  • Usuários
  • 381 posts
  • Sexo:Masculino
  • Localidade:Taboão da Serra - SP

Posted 06/01/2010, 18:14

Boa tarde pessoal =)

Estou com um pequeno pepino nas mãos que não tenho idéia de como resolver...
Sou inciante em tableless, e tenho um site com 5 divs, 4 delas funcionam perfeitamente, porém a div central, que contém o conteudo do site, não fica do tamanho certo, e quando se pula a linha com "<br />", a div é quebrada.
Como deixa-la no lugar certo?

Para entenderem melhor, o site fica assim:
Posted Image

a div:
<div id="centro">
    <img src="imagens/spacer.png" />
    &nbsp;
    aaa<br />
    aaa<br />
    aaa
    </div>

o código css da div:
#centro{
	background-image:url(../imagens/80.png);
	margin-left:5px;
	margin-right:2px;
	display:inline;
	width:598px;
	height:100%;
}

qualquer luz ja ajuda =)

Edição feita por: dddidan, 06/01/2010, 18:21.

Mais vale um Dev C++ na mão do que dois codeblocks voando

PHP - ||||||||||||||| MySql - |||||||||||||||
C/C++ - ||||||||||||||| Oracle - |||||||||||||||
PERL - |||||||||||||||

#2 Victor Hugo Odo

Victor Hugo Odo

    Doutor

  • Administradores
  • 779 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP
  • Interesses:Compartilhar conhecimentos!

Posted 06/01/2010, 20:58

Poste o link da página ou o código completo para podermos analisar.

(ok2)

Fórum WMO - Administrador

#3 dddidan

dddidan

    Ativo

  • Usuários
  • 381 posts
  • Sexo:Masculino
  • Localidade:Taboão da Serra - SP

Posted 06/01/2010, 21:28

código css e da pagina:

styleseet:
@charset "utf-8";
/* front_end.css */
body {
	font-family:arial;
	color:#FFF;
	background-image: url(../imagens/bg.jpg);
	background-repeat: no-repeat;
	
}
/*a:link {
	color: #FFF;
	text-decoration: none;
	font-style:italic;
}
a:visited {
	text-decoration: none;
	color: #FFF;
	font-style:italic;
}
a:hover {
	text-decoration: underline;
	color: #FFF;
	font-style:italic;
}
a:active {
	text-decoration: none;
	color: #FFF;
	font-style:italic;
}*/
#mestra{
	top:0px;
	width:1024px;
	position:absolute;
	left:50%;
	margin-left:-512px;
}
div.f-transp1{
position:absolute; top:0; left:0;
width:100%; height:100%;
width:inherit; height:inherit;
background:#000000;
       filter:alpha(opacity=70, finishopacity=70, style=1);
       opacity:.7;
      -khtml-opacity:.7;
	  -moz-opacity: 0.7;
border:none;
}
div.f-transp2{
position:absolute; top:0; left:0;
width:100%; height:100%;
width:inherit; height:inherit;
background:#000000;
       filter:alpha(opacity=80, finishopacity=80, style=1);
       opacity:.8;
      -khtml-opacity:.8;
	  -moz-opacity: 0.8;
border:none;
}
#menul{
	margin-left:3px;
	width:210px;
	height:100%;
	float:left;
	background-image:url(../imagens/70.png);
}
#menul a:link {
	color: #FFF;
	text-decoration: none;
	list-style:none;
	margin-left:-35px;
}
#menul a:visited {
	text-decoration: none;
	color: #FFF;
	margin-left:-35px

}
#menul a:hover {
	text-decoration: underline;
	color: #FFF;
	margin-left:-35px

}
#menul a:active {
	text-decoration: none;
	color: #FFF;
	margin-left:-35px
}
#menud{
	width:210px;
	height:100%;
	float:right;
	background-image:url(../imagens/70.png);
}
#menud a:link {
	color: #FFF;
	text-decoration: none;
	
}
#menud a:visited {
	text-decoration: none;
	color: #FFF;

}
#menud a:hover {
	text-decoration: underline;
	color: #FFF;

}
#menud a:active {
	text-decoration: none;
	color: #FFF;
}
#centro{
	background-image:url(../imagens/80.png);
	margin-left:5px;
	margin-right:2px;
	display:inline;
	width:598px;
	height:100%;
}
#topo{
	height:192px;
}
#navegar{
	margin-bottom:10px;
	margin-left:4px;
	background-image:url(../imagens/70.png);
	word-spacing:50px;
	
}
#navegar a:link {
	color: #FFF;
	text-decoration: none;

}
#navegar a:visited {
	text-decoration: none;
	color: #FFF;

}
#navegar a:hover {
	text-decoration: underline;
	color: #FFF;

}
#navegar a:active {
	text-decoration: none;
	color: #FFF;
}

index.php
<!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>SPL LFS Drift Team </title>
<link href="etc/front_end.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mestra">
	<div id="topo">
    <img src="imagens/spl.png" />
    </div>
    <div id="navegar">
    <a href="?go=inicio"> Inicio </a> <a href="?go=noticias"> Noticias </a> <a href="?go=galeria"> Galeria </a> <a href="?go=forum"> Forum </a> <a href="?go=downloads"> Downloads </a>
    <a href="?go=entrar"> Entrar </a> <a href="?go=historia"> História </a>
    </div>
    <div id="menul">
    
      <div id = "menuprincipal">
      <center>Menu Principal</center>
    	<ul>
            <a href="?go=inicio"> Inicio </a><br />
            <a href="?go=noticias"> Noticias </a><br />
            <a href="?go=galeria"> Galeria </a><br />
            <a href="?go=forum"> Forum </a><br />
            <a href="?go=downloads"> Downloads </a><br />
            <a href="?go=entrar"> Entrar </a><br />
            <a href="?go=historia"> História </a><br />	
            <br />
    	</ul>
      </div>
    </div>
    <div id="menud">
    
        <div id="equipe">
        aaa
        <?php
		?>
        </div>
    </div>
    <div id="centro">
    <img src="imagens/spacer.png" />
    &nbsp;aaa<br /> aaa<br /> aaa
    <?php 
	?>
    </div>
    
</div>
</body>
</html>

Mais vale um Dev C++ na mão do que dois codeblocks voando

PHP - ||||||||||||||| MySql - |||||||||||||||
C/C++ - ||||||||||||||| Oracle - |||||||||||||||
PERL - |||||||||||||||

#4 Victor Hugo Odo

Victor Hugo Odo

    Doutor

  • Administradores
  • 779 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP
  • Interesses:Compartilhar conhecimentos!

Posted 07/01/2010, 13:34

Olá!

Teste o seguinte código:

CSS
@charset "utf-8";
/* front_end.css */
body {
 	font-family:arial;
 	color:#FFF;
 	background-image: url(../imagens/bg.jpg);
 	background-repeat: no-repeat;
 	
}
/*a:link {
 	color: #FFF;
 	text-decoration: none;
 	font-style:italic;
}
a:visited {
 	text-decoration: none;
 	color: #FFF;
 	font-style:italic;
}
a:hover {
 	text-decoration: underline;
 	color: #FFF;
 	font-style:italic;
}
a:active {
 	text-decoration: none;
 	color: #FFF;
 	font-style:italic;
}*/
#mestra{
 	top:0px;
 	width:1024px;
 	position:absolute;
 	left:50%;
 	margin-left:-512px;
}
div.f-transp1{
position:absolute; top:0; left:0;
width:100%; height:100%;
width:inherit; height:inherit;
background:#000000;
 	filter:alpha(opacity=70, finishopacity=70, style=1);
 	opacity:.7;
 	-khtml-opacity:.7;
 	-moz-opacity: 0.7;
border:none;
}
div.f-transp2{
position:absolute; top:0; left:0;
width:100%; height:100%;
width:inherit; height:inherit;
background:#000000;
 	filter:alpha(opacity=80, finishopacity=80, style=1);
 	opacity:.8;
 	-khtml-opacity:.8;
 	-moz-opacity: 0.8;
border:none;
}
#menul{
 	margin-left:3px;
 	width:210px;
 	height:100%;
 	float:left;
 	background-image:url(../imagens/70.png);
}
#menul a:link {
 	color: #FFF;
 	text-decoration: none;
 	list-style:none;
 	margin-left:-35px;
}
#menul a:visited {
 	text-decoration: none;
 	color: #FFF;
 	margin-left:-35px

}
#menul a:hover {
 	text-decoration: underline;
 	color: #FFF;
 	margin-left:-35px

}
#menul a:active {
 	text-decoration: none;
 	color: #FFF;
 	margin-left:-35px
}
#menud{
 	width:210px;
 	height:100%;
 	float:left;
 	background-image:url(../imagens/70.png);
}
#menud a:link {
 	color: #FFF;
 	text-decoration: none;
 	
}
#menud a:visited {
 	text-decoration: none;
 	color: #FFF;

}
#menud a:hover {
 	text-decoration: underline;
 	color: #FFF;

}
#menud a:active {
 	text-decoration: none;
 	color: #FFF;
}
#centro{
 	background-image:url(../imagens/80.png);
 	margin-left:5px;
 	margin-right:5px;
		float:left;
 	width:588px;
 	height:100%;
}
#topo{
 	height:192px;
}
#navegar{
 	margin-bottom:10px;
 	margin-left:4px;
 	background-image:url(../imagens/70.png);
 	word-spacing:50px;
 	
}
#navegar a:link {
 	color: #FFF;
 	text-decoration: none;

}
#navegar a:visited {
 	text-decoration: none;
 	color: #FFF;

}
#navegar a:hover {
 	text-decoration: underline;
 	color: #FFF;

}
#navegar a:active {
 	text-decoration: none;
 	color: #FFF;
}

HTML
<body>
<div id="mestra">
 	<div id="topo">
	<img src="imagens/spl.png" />
	</div>
	<div id="navegar">
	<a href="?go=inicio"> Inicio </a> <a href="?go=noticias"> Noticias </a> <a href="?go=galeria"> Galeria </a> <a href="?go=forum"> Forum </a> <a href="?go=downloads"> Downloads </a>
	<a href="?go=entrar"> Entrar </a> <a href="?go=historia"> História </a>
	</div>
	<div id="menul" >
	
 	<div id = "menuprincipal">
 	<center>Menu Principal</center>
 	<ul>
 	<a href="?go=inicio"> Inicio </a><br />
 	<a href="?go=noticias"> Noticias </a><br />
 	<a href="?go=galeria"> Galeria </a><br />
 	<a href="?go=forum"> Forum </a><br />
 	<a href="?go=downloads"> Downloads </a><br />
 	<a href="?go=entrar"> Entrar </a><br />
 	<a href="?go=historia"> História </a><br /> 
 	<br />
 	</ul>
 	</div>
	</div>
	<div id="centro">
	<img src="imagens/spacer.png" />
 	aaa<br /> aaa<br /> aaa
	<?php 
 	?>
	</div>
	<div id="menud">
	
 	<div id="equipe">
 	aaa
 	<?php
 	?>
 	</div>
	</div>	
</div>
</body>


  • Arrumei a div retirando a propriedade display: inline;
  • Alterei a ordem das divs de: menul, menud, centro para: menul, centro, menud e deixei todos com float:left;
  • Quando você começou a fazer este layout estava usando como base para a largura total 1024px, certo? Só que você esqueceu da barra de rolagem do navegador. Então diminui um pouco a largura da div centro para evitar a quebra. Recomendo que para evitar problemas recomece o código usando como base 960px.
Bons ventos.

(ok2)

[]'s

Edição feita por: Victor Hugo Odo, 07/01/2010, 13:35.

Fórum WMO - Administrador

#5 dddidan

dddidan

    Ativo

  • Usuários
  • 381 posts
  • Sexo:Masculino
  • Localidade:Taboão da Serra - SP

Posted 11/01/2010, 10:30

Certo, entendi =)

Obrigado pela ajuda Victor, funciona perfeitamente!
sobre a largura, é complicado, eu tinha feito com 960px(com tabelas) só que o pessoal que usava monitor de 19" em diante, reclamava que o site ficava pequeno, então essa foi a solução que encontrei ;x
Mais vale um Dev C++ na mão do que dois codeblocks voando

PHP - ||||||||||||||| MySql - |||||||||||||||
C/C++ - ||||||||||||||| Oracle - |||||||||||||||
PERL - |||||||||||||||

#6 Victor Hugo Odo

Victor Hugo Odo

    Doutor

  • Administradores
  • 779 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP
  • Interesses:Compartilhar conhecimentos!

Posted 11/01/2010, 14:21

Bom uma solução seria usar medidas em porcentagem, assim ficaria praticamente a mesma coisa em diversas resoluções.

Ex: 960px → 100%

[]'s

Fórum WMO - Administrador

#7 dddidan

dddidan

    Ativo

  • Usuários
  • 381 posts
  • Sexo:Masculino
  • Localidade:Taboão da Serra - SP

Posted 11/01/2010, 14:48

mas o problema de usar 100%, seria que eu teria que ter uma imagem de fundo para cada resolução de monitor... meio complicado :ponder:
Mais vale um Dev C++ na mão do que dois codeblocks voando

PHP - ||||||||||||||| MySql - |||||||||||||||
C/C++ - ||||||||||||||| Oracle - |||||||||||||||
PERL - |||||||||||||||

#8 Victor Hugo Odo

Victor Hugo Odo

    Doutor

  • Administradores
  • 779 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP
  • Interesses:Compartilhar conhecimentos!

Posted 11/01/2010, 16:15

Não necessáriamente, afinal vc pode usar comandos CSS para repetir o background horizontal ou verticalmente:
body{
background: url("http://forum.wmonline.com.br/public/style_images/master/branding_bg.png") repeat-x;
}

Ou mesmo adicionando uma imagem grande e adicionando uma horientação:

body{
background: url("http://infoxp.files.wordpress.com/2008/10/wallpaper-padrao-seven.jpg") no-repeat center top;
}

[]'s

Fórum WMO - Administrador

#9 dddidan

dddidan

    Ativo

  • Usuários
  • 381 posts
  • Sexo:Masculino
  • Localidade:Taboão da Serra - SP

Posted 15/01/2010, 14:33

aaah!
Dessa eu não sabia...
e até que deu um resultado legal =)
Obrigado =D
Mais vale um Dev C++ na mão do que dois codeblocks voando

PHP - ||||||||||||||| MySql - |||||||||||||||
C/C++ - ||||||||||||||| Oracle - |||||||||||||||
PERL - |||||||||||||||

#10 Victor Hugo Odo

Victor Hugo Odo

    Doutor

  • Administradores
  • 779 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP
  • Interesses:Compartilhar conhecimentos!

Posted 15/01/2010, 15:02

Aqui tem mais conteúdo: http://maujor.com/

(ok2)

Fórum WMO - Administrador

#11 RonsisM

RonsisM

    Super Veterano

  • Usuários
  • 15724 posts
  • Sexo:Masculino
  • Localidade:Plovdiv

Posted 23/09/2017, 15:03

Powerpill cialis Lodine Online Without Precription Fluconazole Buy Cheap
Order Generic Cialis Online Conseils Pour Durer Plus Longtemps cialis Real Finasteride Drugs Shipped Ups Buy Now Legally Generic Macrobid Real Store Pharamcy Canada
What Is Amoxicillin Rx655 Zithromax For Gastric Emptying cialis buy online Purchase Of Viagra Prix Kamagra Pharmacies En Ligne Cialis Generique Prix

#12 RonsisM

RonsisM

    Super Veterano

  • Usuários
  • 15724 posts
  • Sexo:Masculino
  • Localidade:Plovdiv

Posted 22/10/2017, 06:56

Canadapharmacy viagra vs cialis vs levitra reviews Viagra Cialis Levitra Sample Pack Children'S Dosage For Amoxicillin Commander Viagra Quebec
Pak Zithromax Pharmay Cheapest viagra online prescription Amoxicillin Mobile Al 36619 Need Prescription
Prix Viagra Officiel France Clomid For Sale Visa Payment In Uk viagra Orth American Pharmacy Viagra Sildenafil Mujeres
Viagra A L Unite viagra Buy Cialis Online Uk Reviews Propecia Famosas

#13 RonsisM

RonsisM

    Super Veterano

  • Usuários
  • 15724 posts
  • Sexo:Masculino
  • Localidade:Plovdiv

Posted 03/11/2017, 20:05

Awc Canadian Pharmacy Mall levitra cheapest price Acquistare Kamagra Thailandia Stendra Ed Best Website Photosensitivity For Amoxicillin
Cheap Alternative To Prevacid viagra Canadian Online Drugstore
Is Outdated Amoxicillin Safe Robaxin Without A Script Doxycycline Where To Purchase viagra Keflex And Anxiousness Propecia Hsa Eligible Cialis Precio Farmacia Barcelona

#14 RonsisM

RonsisM

    Super Veterano

  • Usuários
  • 15724 posts
  • Sexo:Masculino
  • Localidade:Plovdiv

Posted 24/11/2017, 20:07

Get Real Macrobid Ups In Canada With Doctor Consult Viagra Benutzen Cialis Generika Europa viagra online Cipro Epocrates Online Cadian Viagra No Script
Priligy Y Viagra Son Compatibles viagra online Cephalexin Oral Suspension Dog Dosing
Voltar para HTML, CSS e Metodologias


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. Privacy Policy
  5. Regras ·
IPB Skin By Virteq