Jump to content
Fórum Script Brasil
  • 0

Alinhamento


Talarico
 Share

Question

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 to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

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 to comment
Share on other sites

  • 0
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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0
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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.8k
    • Total Posts
      646.6k
×
×
  • Create New...