Ir para conteúdo

POWERED BY:

Arquivado

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

guigui825

Pagina no alinhamento

Por , em Desenvolvimento frontend

Recommended Posts

guigui825    0

guigui825
Postado

Ola a todos eu sou novo aqui no fórum então desculpem se eu estiver criado o tópico em área errada mais enfim vamos ao problema.

 

meu site de um dia pro outro fico estranho não sei o motivo mais enfim não consegui arrumar e gostaria de saber se vcs poderiam me ajudar com isso, o problema é o seguinte quando vc abre o site ele esta com tipo uma borda branca em volta do background e quando vc da zoom ele aumenta o tamanho dessa borda eu já tentei de tudo mais n consegui arrumar.

Segue os links e prints do erro:

 

site: http://pristonskins.6te.net/

 

O site quando abre fica assim:

site2.PNG

 

Ai quando do zoom nele ele fica assim:

site1.PNG

 

Segue código html e css:

HTML

 

<html>
<head>
    <title>Priston Skins</title>

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body background="#000000">

<div id="container">
<div id="Conteudo">
 <div id="header">
 <p id="logotipo"></p>
 <p id="sloganheader"></p>
  </div>

<ul id="menu">
        <li><a href="[url=http://pristonskins.6te.net/index.html]http://pristonskins.6te.net/index.html    [/url]"

target="_self">Home</a></li>
        <li><a href="[url=http://pristonskins.6te.net/armors.html]http://pristonskins.6te.net/armors.html    [/url]"

target="_self">Armaduras</a></li>
        <li><a href="[url=http://pristonskins.6te.net/robe.html]http://pristonskins.6te.net/robe.html    [/url]"

target="_self">Robes</a></li>
        <li><a href="[url=http://pristonskins.6te.net/shields.html]http://pristonskins.6te.net/shields.html    [/url]"

target="_self">Escudos</a></li>
        <li><a href="[url=http://pristonskins.6te.net/weapon.html]http://pristonskins.6te.net/weapon.html    [/url]"

target="_self">Armas</a></li>
        <li><a href="[url=http://pristonskins.6te.net/cabelo.html]http://pristonskins.6te.net/cabelo.html    [/url]"

target="_self">Cabelos</a></li>
        <li><a href="[url=http://pristonskins.6te.net/inventario.html]http://pristonskins.6te.net/inventario.html    [/url]"

target="_self">Inven</a></li>
        <li><a href="[url=http://pristonskins.6te.net/modificacoes.html]http://pristonskins.6te.net/modificacoes.html    [/url]"

target="_self">Modificações</a></li>
        <li><a href="[url=http://www.facebook.com/priston.skins]http://www.facebook.com/priston.skins    [/url]"

target="_self">FaceBook</a></li>
        <li><a href="[url=http://pristonskins.6te.net/creditos.html]http://pristonskins.6te.net/creditos.html    [/url]"

target="_self">Creditos</a></li>
        <li><a href="[url=http://pristonskins.6te.net/parceiros.html]http://pristonskins.6te.net/parceiros.html    [/url]"

target="_self">Parceiros</a></li>
</ul>


 <div id="barralateral">
 <h2>Hatake Kakashi</h2>
 <p>
 <div id="parent"></div>
 <div id="child"></div>


<p> Hatake Kakashi ou Kakashi Sempai do Anime Naruto Shippuuden, totalmente editado para

Priston tale download na aba de "Menu Armaduras", creditos totais de PristonSkins™ -

Guilherme.</p>

</div>

<div id="principal">



<br>
<br>
<h2>Parceria</h2>
<a href="[url=http://pristontaleblog.wordpress.com/]http://pristontaleblog.wordpress.com/    [/url]"><img src="[url=http://3.bp.blogspot.com/-]http://3.bp.blogspot.com/-    [/url]

ipjGuiqpdRc/T3ZGhydfLrI/AAAAAAAAAL8/uHhiHh1JWpM/s1600/botao+pareceria.jpg"></a>
<a href="[url=http://www.pristonfan.hd1.com.br/]http://www.pristonfan.hd1.com.br/    [/url]"><img

src="[url=http://j.imagehost.org/0618/pristonfan.png]http://j.imagehost.org/0618/pristonfan.png    [/url]"></a>
<a href="[url=http://www.photoshoplifevision.blogspot.com.br/]http://www.photoshoplifevision.blogspot.com.br/    [/url]"><img

src="[url=http://i.imgur.com/VKxh5.png]http://i.imgur.com/VKxh5.png    [/url]"></a>
</div>

 <div id="rodape">

 </div>

 </div>
 </div>

</body>
</html>

 

CSS

#container{
margin:-10 auto;
border: 0px solid;
padding:30px;
padding-bottom:30px;
padding-top:30px;
background:url(imagens/bg3.png);}

#child{
width:150px;
height:150px;
background: url(imagens/kakashi.jpg);
position: relative;
floadt: left;}

#conteudo{
width:1024px;
margin: 0 auto;
background-color:#c9c9c9;}

h2{
margin: 0 auto;}

#header{
background:url(imagens/skins.jpg);
height:400px;}

#sloganheader{
font-size:20px;
color:orange;
margin:0;}

#barralateral{
background-color:#c9c9c9;
width:480px;
float:left;
padding:20px;
text-align: justify;}

#principal{
text-aling: justify;
background-color:#c9c9c9;
color:#e7e7e7;
padding:10px;}


#parceiro{
background:black;
Color:white;
text-align:center;
height:70px;
padding:10px;
clear:both;}


#rodape{
background:url(imagens/rodape.png);
Color:white;
text-align:center;
height:40px;
padding:20px;
clear:both;}











ul#menu
{
    margin: 0;
    padding: 0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:30px;
    font-size:12px;
    font-weight:bold;
    background:transparent url(imagens/nav_bg.png) repeat-x top

left;
    font-family:Arial, Helvetica, sans-serif;
    border-bottom:1px solid #000000;
    border-top:1px solid #000000;
}

ul#menu li
{
    display:block;
    float:left;
    margin:0 auto;
    padding:0 auto;
}
    
ul#menu li a
{
    display:block;
    float:left;
    color:#999999;
    text-decoration:none;
    font-weight:bold;
    padding:8px 20px 0px 20px;
}
    
ul#menu li a:hover
{    
    color:#FFFFFF;
    height:22px;
    background:transparent url

(http://pristonskins.6te.net/Menu/images/nav_bg.png) 0px -30px no-

repeat;        
}
    

ul#menu li a.current
{
    display:inline;
    height:22px;
    background:transparent url

(http://pristonskins.6te.net/Menu/images/nav_bg.png) 0px -30px no-

repeat;    
    float:left;
    margin:0;
}

 

Será que tem como arrumar isso?

 

Obrigado ha todos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

O background deve ficar na tag body (que determina todo o corpo do site), e não dentro de um elemento container. Nesse caso, você estará colocando o background no corpo do elemento, e não no corpo do site.

 

A primeira coisa é remover o

<body background="#000000">

Há também uma margem branca no corpo. Sugiro que retire-a, zerando a propriedade margin. Segue o código:

body {
margin: 0;
background: #000;
}
Coloque em primeiro no seu CSS, de preferência.

 

E deixe o elemento container assim:

#container{
border: 2px solid;
padding:30px;
padding-bottom:30px;
padding-top:30px;
}
Retirei o margin:0 auto pois não está sendo útil pra nada, já que não há o que tirar de margem ou centralizar (para determinar margem automática, deve existir uma largura fixa).

 

Sugiro também que reorganize os elementos do seu CSS, se puder:

#container{
Deixe-os assim:
#container {
É um detalhe. Mas algumas ferramentas fazem isso para você :seta: http://tools.arantius.com/tabifier

 

Acredite, isso pode ser meio problemático. :bye:

Compartilhar este post

Link para o post
Compartilhar em outros sites

lucasevaldt    0

lucasevaldt
Postado

O body vem com uma margem automática por isso ta acontecendo aquela parte branca e voce teria que zera-lo, no seu código você não precisaria usar a div container só body ja dava conta. Na minha opinião se você apagasse a div container e usasse o estilo dela no body como a Diéssica sugeriu o problema estaria resolvido.

Compartilhar este post

Link para o post
Compartilhar em outros sites

guigui825    0

guigui825
Postado

Opa galera valeu pela ajuda agora eu estou no trabalho mais assim que chegar em casa eu farei as modificações e testarei se ira funcionar, agradeço todos vocês que me ajudarão e caso não funcione eu voltarei aqui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

guigui825    0

guigui825
Postado

Ah me esqueci de uma coisa como eu faço para o meu código css pegar tbm no internet explorer, porque quando abre o meu site pelo mesmo ele fica com a caixa do meio onde fica o conteúdo totalmente desaliado eu sei que tem um jeito de arrumar isso só nao sei qual é.

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