Ir para conteúdo
Fórum Script Brasil
  • 0

Alinhamento

Talarico

Perguntado por Talarico,

 Share

Pergunta

Talarico

Talarico

Postado
Postado

Ola galera

eo seguinte alguém poderia por favor me ajudar com o alinhamento do meu site...

porque minha resolucao e 1027x780 e do meu amigo é 1280 x 1024, aki em casa o site fica certinhu ... já na casa dele fica desalinhado... o que faco pra solucionar isso

codigo.... 

/* CSS Document */

 DIV.corpo {font=family: "Arial";
    font-size: 1pt;
    background-color: #000000;
    position:absolute;
    width:780px;
    height:1017px;
    left:50%;
    margin-top: 172px;
    margin-left:-400px;
}

 .menu{
 position:absolute; left: 105px; top: 159px;
 }

 .topo1{
    position:absolute; left: 277px; top: 4px;
    border-top-width: 2px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 3px;
    border-top-style: groove;
    border-right-style: groove;
    border-bottom-style: groove;
    border-left-style: groove;
    border-top-color: #999999;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color: #999999;
 overflow:auto;
 }

 .topo2{
    position:absolute; left: 277px; top: 80px;
    border-top-width: 2px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 3px;
    border-top-style: groove;
    border-right-style: groove;
    border-bottom-style: groove;
    border-left-style: groove;
    border-top-color: #999999;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color: #999999;
 overflow:auto;
 }

 .topolateral{
    position:absolute; left: 740px; top: 4px;
    border-top-width: 2px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 3px;
    border-top-style: groove;
    border-right-style: groove;
    border-bottom-style: groove;
    border-left-style: groove;
    border-top-color: #999999;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color: #999999;
 overflow:auto;
 }
 .menulateral{
 position:absolute; left: 1px; top: 1px;
 }

 .logo{
    position:absolute;
    left:50%;
    margin-left:-410px;
    top: 1px;
    width: 179px;
    height: 121px;
 }

 .banner1{
    position:absolute; left: 210px; top: 10px;
    border-top-width: 2px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 3px;
    border-top-style: groove;
    border-right-style: groove;
    border-bottom-style: groove;
    border-left-style: groove;
    border-top-color: #999999;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color: #999999;
    overflow:auto;
 }

  .banner2{
    position:absolute; left: 210px; top: 132px;
    border-top-width: 2px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 3px;
    border-top-style: groove;
    border-right-style: groove;
    border-bottom-style: groove;
    border-left-style: groove;
    border-top-color: #999999;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color: #999999;
    overflow:auto;
 }

 .blateral1{
    position:absolute; left: 635px; top: 4px;
    border-top-width: 2px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 3px;
    border-top-style: groove;
    border-right-style: groove;
    border-bottom-style: groove;
    border-left-style: groove;
    border-top-color: #999999;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color: #999999;
 overflow:auto;
 }

 .video1{
  position:absolute; left: 200px; top: 10px;
  }
  .elateral1{
   position:absolute; left: 4px; top: 314px;
  }
  
  a{text-decoration:none}
  a:hover{text-decoration:underline}
  #menu {position:absolute; left:1; top:1;}
  #menu {font-family:Battlefield;font-size:13px;color:#CCCCCC}
  #menu a{line-height:25px;background-color:#000000;display:block;padding-left:5px;width:135px;border-left:8px solid #FF6600;color:#CCCCCC;border-top:1px solid #FFFFFF}
  #menu a:hover{color:#FFFFFF;background-color:#FF6600;border-left:8px solid #000000}
#menu1 {position:absolute; left: 105px; top: 163px}
#menu1 a{background-color:#000000;padding:7px 35px 7px 5px;border-top:1px solid #FFFFFF;border-left:8px solid
#FF6600;color:#000000;font-family:Battlefield;font-size:13px;color:#CCCCCC}
#menu1 a:hover{background-color:#FF6600;color:#FFFFFF;text-decoration:underline;border-left:8px solid #000000}

Link para o comentário
Compartilhar em outros sites

13 respostass a esta questão

Posts Recomendados

  • 0
Halfar

Halfar

Postado
Postado

estas coisas tem muito a ver com tipo de navegador, versão do navegador... tem navegador que aceita isto, mas não aceito aquilo outro...etc...

é um pé na jaca isto...

as vezes voce tem que fazer paginas diferentes para navegadores diferentes...

mas vamos ver o que o pessoal posta ai, vamos ver se tem alguma opiniao diferente...

Link para o comentário
Compartilhar em outros sites
  • 0
Talarico

Talarico

Postado
  • Autor
Postado
Tem como você fazer um PrintScreen da tela e hospedar?

Aí a gente terá uma noção do que tá acontecendo...

opa claro

meu amigo é 1280 x 1024

Amigo

minha resolucao e 1027x780

MINHA

então na dela ta sem as imagens mas da pra ver que o menu superior ( Agenda, Fotos,..., etc) ta desalinhado...

E que também as imagens la de cima estao no lugar errado... ( da pra ver pelo desenho quando não acha a foto)

se você quiser depois eu passo as imagens pra esse meu amigo e te dou um PRINT completo

falow obrigado

Link para o comentário
Compartilhar em outros sites
  • 0
Geleiaskt

Geleiaskt

Postado
Postado

Cara posta aí o código da página que vai ser exibida.

Olhando o código da página e o código CSS, podemos te ajudar.

De qualquer forma, já ajudei uns usuários aqui do fórum com problemas parecidos. Dá uma olhada:

1 - http://scriptbrasil.com.br/forum/index.php?showtopic=107299

2 - http://scriptbrasil.com.br/forum/index.php?showtopic=107205

Espero ter ajudado. Abraço!

Link para o comentário
Compartilhar em outros sites
  • 0
Talarico

Talarico

Postado
  • Autor
Postado
Cara posta aí o código da página que vai ser exibida.

Olhando o código da página e o código CSS, podemos te ajudar.

De qualquer forma, já ajudei uns usuários aqui do fórum com problemas parecidos. Dá uma olhada:

1 - http://scriptbrasil.com.br/forum/index.php?showtopic=107299

2 - http://scriptbrasil.com.br/forum/index.php?showtopic=107205

Espero ter ajudado. Abraço!

Ola amigo, não estou com problemas entre FFx IE, por incrivel que parece não é?... uhauah porque a maioria dos topicos e sobre isso..

bom ai segue o codigo da pagina.... o CSS ta no 1º POST

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK HREF="style.css" TYPE="text/css" REL="stylesheet">
<title>Universo da Balada</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body background="fundo.jpg">
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="0" width="150" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" bgcolor="#FFFFFF">
      <p align="left">
       <a href="http://www.simpleplanst.com.br/">Link 1</a></td>
       <a href="http://www.steffan2005.oi.com.br/" target="_blank">Link 3</a></td>
       <a href="http://www.google.com.br/"><img alt="Link 2 (pode ser imagem)" src="link3.gif" width="100" height="300" border="0"></a></td>
  </tr>
</table>
<!--END OF EDIT-->

</layer>

<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 850,
startY = 452;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
  var el=d.getElementById?d.getElementById(id):D.all?d.all[id]:D.layers[id];
  if(d.layers)el.style=el;
  el.sP=function(x,y){this.style.left=x;this.style.top=y;};
  el.x = startX;
  if (verticalpos=="fromtop")
  el.y = startY;
  else{
  el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
  el.y -= startY;
  }
  return el;
}
window.stayTopLeft=function()
{
  if (verticalpos=="fromtop"){
  var pY = ns ? pageYOffset : document.body.scrollTop;
  ftlObj.y += (pY + startY - ftlObj.y)/8;
  }
  else{
  var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
  ftlObj.y += (pY - startY - ftlObj.y)/8;
  }
  ftlObj.sP(ftlObj.x, ftlObj.y);
  setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
<div class="topolateral"> <img src="dubnovo.jpg"></div>

<div class="topo1"> <img src="electro.png"></div>

<div class="topo2"> <img src="electro.png"> </div>

       <div id="menu1">
         <a href="#">Agenda</a>
         <a href="#">Fotos</a>
         <a href="#">Videos</a>
         <a href="#">Cadastro</a>
         <a href="#">Loja</a>
         <a href="#">Contatos</a>
</div>

<div class="logo"> <img src="LOGO_arquivos/image001.gif" width="180" height="150"></div>

<div class="corpo"> 
  <div id="menu">
            <a href="java script:void(0);">Noticias</a>
            <a href="java script:void(0);">Entrevistas</a>
            <a href="java script:void(0);">Equipe</a>
            <a href="java script:void(0);">Prev. Tempo</a>
            <a href="java script:void(0);">Dj's</a>
            <a href="java script:void(0);">Radio</a>
            <a href="java script:void(0);">Estr/Rodov</a>
            <a href="java script:void(0);">Orkut</a>
            <a href="java script:void(0);">Musicas</a>
            <a href="java script:void(0);">Sites</a>
            <a href="java script:void(0);">Eventos</a>
        </div>
  <div class="blateral1"> <img src="blow.bmp"></div>
  <div class="elateral1"> <img src="blow.bmp"></div>
  <div class="video1"> 
    <object width="350" height="350">
      <param name="movie" value="http://www.youtube.com/v/RO0toeFpu-w"></param>
      <param name="wmode" value="transparent"></param>
      <embed src="http://www.youtube.com/v/RO0toeFpu-w" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>
  </div>
</div>
  <p><b>Talarico</b> </p>

</body>
</html>

Link para o comentário
Compartilhar em outros sites
  • 0
rostery

rostery

Postado
Postado

Hum...isso é um problema...

Tive um parecido esses dias, fiz uma pagininha no pc do serviço, aí quando cheguei em casa, nossa, que zona estava o layout...

então fiz o seguinte, coloquei minha resolução 800x600 e comecei arrumar o layout...

...

então, esses esquemas de apresentaçao na tela, sempre dá uns pipinos com resolução mesmo, o esquema é setar uma resolação padrão (atualmente deve ser 800x600, imagino) e desenvolver a página em cima dela, pois quando aumentar a resolução, é muito mais fácil os elementos ficarem corretos em uma maior...

[]'s boa sorte...

Em qual resolução foi desenvolvida sua página?

NA minha resolucao de 1027x780

Obrigado pela atenção!!

Link para o comentário
Compartilhar em outros sites
  • 0
yogodoshi

yogodoshi

Postado
Postado

se você está falando que o problema é no alinhamento geral da pagina (da div q engloba tudo) o prob estah aki:

DIV.corpo {font=family: "Arial";

font-size: 1pt;

background-color: #000000;

position:absolute;

width:780px;

height:1017px;

left:50%;

margin-top: 172px;

margin-left:-400px;

você criou o codigo alinhando para a sua resolucao de maneira absoluta ( como o Geleia disse acima) se alguém entrar com 800x600 talvez o layout fike MUITO para a direita... você uso essa maneira para centralizar o layout mas ela só vai funcionar direito na resolucao q você uso para criar. Uma solucao para isso é criar um div.corpo para cada resolucao.

Abraços!

Link para o comentário
Compartilhar em outros sites
  • 0
Geleiaskt

Geleiaskt

Postado
Postado

Isso mesmo yogodoshi.

Como não sei se o problema já foi resolvido, cara, vai umas dicas:

1 - PRIMEIRA DICA:

Modifica sua div corpo para esta abaixo:

DIV.corpo {font-family: Arial;

font-size: 1pt;

background-color: #000000;

width:780px;

margin: 0 auto 0 auto; /*Aqui vai centralizar esta div*/

}

2 - SEGUNDA DICA:

No inicio de seu arquivo CSS, inclua o código:

html{ margin:0; padding:0;}

body{ margin:0 auto 0 auto; padding:0; text-align:center;}

Agora tenta fazer como eu te disse: Tenta em vez de usar a propriedade position, usar a propriedade float.. =)

Abraço!

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...