Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Balero

Posicionamento de imagens

Por , em Desenvolvimento frontend

Recommended Posts

Balero    0

Balero
Postado

Olá pessoal,

 

Eu estou com um problema de Posicionamento de imagens, na resolução que eu uso (1280 x 1024) o Menu e o Banner ficam centralizado, mas só que em 1024 x 768 não ficam, para entenderem melhor, segue a imagem dele em 1024 x 768:

 

Imagem Postada

 

Queria que o Banner e o Menu ficasse no centralizado e também queria que não tivesse aquele "espaçinho em branco" antes da linha (ver a flecha verde)

 

Meu index.html:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Novo Site</title>
<link href="estilo2.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
</head>

<body onload="new ElementMaxHeight();">
	<div id="topo">
	<div id="main">
	<div id="header">
	<br/>
	<div id="menu">
			<div class="direitobg">
				<div class="esquerdobg">
					<div class="padding">
						<ul>
							<li><span>Início</span></li>
							<li><a href="index-1.html">Sobre mim</a></li>
							<li><a href="index-2.html">Serviços</a></li>
							<li><a href="index-3.html">Portifólio</a></li>
							<li><a href="index-4.html">Contato</a></li>
							<li><a href="index-5.html">Fórum</a></li>
						</ul>
						<br class="clear" />
					</div>
				</div>
			</div>
	</div>
	<div class="banner">
	<div class="clear"></div>
	</div>
	<div id="quadros">
			<div class="direitobg">
				<div class="esquerdobg2">
					<div class="padding2">
						Teste  TESTES TESTES TESTES TESTES TESTES TESTES TESTES TESTES  TESTES TESTES TESTES TESTES TESTES
					</div>
				</div>
			</div>
	</div>
	<div class="clear"></div>
	<div class="texto_principal">
		 Teste
	</div>
	<br/>
	<div class="p1">
		Teste.
	</div>
	<br/>
		<!--começo do rodapé -->
		<div id="rodape">
					 Testes - 2008 ©  • Direitos Reservados
		</div>
		<!--fim do rodapé-->	
	</div>
	</div>
	</div>
</body>

Meu estilo2.css:

 

html
{
		font-family:Times New Roman, tahoma; 
		font-size:13px;
		line-height:15px;
		color:#868686;		
	}
	
img {vertical-align:top;}
	
.clear  { clear:both;}

#main { margin:0 auto;}

#header
{
	height: 45px;
	width: 100%;
	background-image: url(header.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	border-bottom: 1px solid #fff;
	position: relative;
	border: 1px none #fff;
	border-bottom: 1px solid #fff;
}

#topo {background:url(images/header_tall.gif) top repeat-x;}

#menu 
{
	max-width: 780px; 
	background:url(images/menu_tall.gif) top repeat-x;
	margin:10px 0 12px 250px;
}
.direitobg {background:url(images/menu_right.gif) top right no-repeat;}
.esquerdobg {background:url(images/menu_left.gif) top left no-repeat; width:100%;}
.padding {padding:2px 0;}
#menu li {float:left; width:123px; background:url(images/menu_libg.gif) top right repeat-y; font-size:15px; text-align:center; padding:4px 0 5px 0; line-height:30px;}
#menu li a {color:#919191; text-decoration:none; font-weight:normal; font-size:15px;}
#menu li a:hover {color:#000000; text-decoration:underline;}
#menu li span {color:#000000; text-decoration:underline;}
#menu .last {background:none;}

.banner {background:url(images/banner.gif) top left no-repeat; padding:45px 300px 100px 414px; color:#ffffff; margin:10px 0 12px 250px;}

#quadros 
{
	max-width: 200px; 
	background:url(images/menu_tall.gif) top repeat-x; 
	margin:10px 0 12px 250px;
}
.direitobg2 {background:url(images/menu_right.gif) top right repeat-x;}
.esquerdobg2 {background:url(images/menu_left.gif) top left repeat-y; width:100%;}

.texto_principal {text-align: center; color: #3d6f92; font-size: 18px;}

.p1 {padding:1px 250px 7px 250px;}

#rodape {background:url(images/header_tall.gif) top repeat-x; padding:23px 0 0 250px; color:#868686; font-size:12px;}

Estou aprendendo CSS, sou muito leigo ainda, quem puder me ajudar.

 

Agradeço desde já.

 

Até mais! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

Balero, Boa Noite!

Vou tentar te auxiliar usando a busca, vamos ver se entendi suas dúvidas:

 

Centralizar Layout na Vertical

 

Espaçamento no topo do site

 

Observe os dois tópicos, caso tenha dúvidas poste que o pessoal te auxilia. ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Balero    0

Balero
Postado

inforsis, obrigado pelos Tópicos consegui resolver parte dos problemas http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

 

Só tem um problema, o 

width: [valor];
	margin: 0 auto;
funcionou perfeito no Menu, só que adicionei ele na no Banner e não deu certo (o Banner ficou a esquerda), segue a declaração do Banner:

 

.banner {background:url(images/banner.gif) top left no-repeat; width:750; height:137; padding:45px 300px 100px 414px; color:#ffffff; margin:0 auto;}

Estou usando o Firefox.

 

Se alguém puder ajudar.

 

Obrigado! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

.banner {background:url(images/banner.gif) top left no-repeat; width:750px; height:137px; padding:45px 300px 100px 414px; color:#ffffff; margin:0 auto;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

css reset 

* {
	margin: 0;
	padding: 0;
}

só na sua div

#topo {
	margin-top: 0;
}

 

o resto esta dificil de entender...

 

dê uma identada no seu código que dará tudo certo

 

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito