Como centralizar site

Renan Pongeluppe · Maio 10, 2013

Sou um pouco leigo no assunto e gostaria q me ajudassem a centralizar meu site...

como faço pra deixar ele centralizado e auto expansivo ???

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Dayane makeup</title>

body

{

background-color: #4B0082;

background-image: url(images/_bkgrnd.png);

color: #000000;

}

</style>

a

{

color: #0000FF;

text-decoration: underline;

}

a:visited

{

color: #800080;

}

a:active

{

color: #FF0000;

}

a:hover

{

color: #0000FF;

text-decoration: underline;

}

</style>

#wb_Text1

{

background-color: transparent;

border: 0px #000000 solid;

padding: 0;

}

#wb_Text1 div

{

text-align: center;

white-space: nowrap;

}

#wb_Text2

{

background-color: transparent;

border: 0px #000000 solid;

padding: 0;

}

#wb_Text2 div

{

text-align: left;

}

#wb_Text3

{

background-color: transparent;

border: 0px #000000 solid;

padding: 0;

}

#wb_Text3 div

{

text-align: left;

}

#wb_Text4

{

background-color: transparent;

border: 0px #000000 solid;

padding: 0;

}

#wb_Text4 div

{

text-align: left;

}

#wb_CssMenu1 a

{

display: block;

float: left;

margin: 0px 0px 0px 0px;

color: #C0C0C0;

border: 1px #000000 solid;

background-color: #808080;

background: -moz-linear-gradient(bottom,#808080 0%,#000000 100%);

background: -webkit-linear-gradient(bottom,#808080 0%,#000000 100%);

background: -o-linear-gradient(bottom,#808080 0%,#000000 100%);

background: -ms-linear-gradient(bottom,#808080 0%,#000000 100%);

background: linear-gradient(bottom,#808080 0%,#000000 100%);

font-family: Adorable;

font-size: 27px;

font-weight: normal;

font-style: normal;

text-decoration: none;

padding: 15px 79px 15px 79px;

text-align: center;

}

#wb_CssMenu1 a:hover, #wb_CssMenu1 .active

{

color: #666666;

background-color: #C0C0C0;

background: -moz-linear-gradient(bottom,#C0C0C0 0%,#EEEEEE 100%);

background: -webkit-linear-gradient(bottom,#C0C0C0 0%,#EEEEEE 100%);

background: -o-linear-gradient(bottom,#C0C0C0 0%,#EEEEEE 100%);

background: -ms-linear-gradient(bottom,#C0C0C0 0%,#EEEEEE 100%);

background: linear-gradient(bottom,#C0C0C0 0%,#EEEEEE 100%);

border: 1px #C0C0C0 solid;

}

#Image2

{

border: 0px #000000 solid;

}

#wb_CssMenu2 a

{

display: block;

float: left;

margin: 0px 0px 0px 0px;

color: #C0C0C0;

border: 1px #000000 solid;

background-color: #808080;

background: -moz-linear-gradient(bottom,#808080 0%,#000000 100%);

background: -webkit-linear-gradient(bottom,#808080 0%,#000000 100%);

background: -o-linear-gradient(bottom,#808080 0%,#000000 100%);

background: -ms-linear-gradient(bottom,#808080 0%,#000000 100%);

background: linear-gradient(bottom,#808080 0%,#000000 100%);

font-family: Adorable;

font-size: 27px;

font-weight: normal;

font-style: normal;

text-decoration: none;

padding: 15px 79px 15px 79px;

text-align: center;

}

#wb_CssMenu2 a:hover, #wb_CssMenu2 .active

{

color: #666666;

background-color: #C0C0C0;

background: -moz-linear-gradient(bottom,#C0C0C0 0%,#EEEEEE 100%);

background: -webkit-linear-gradient(bottom,#C0C0C0 0%,#EEEEEE 100%);

background: -o-linear-gradient(bottom,#C0C0C0 0%,#EEEEEE 100%);

background: -ms-linear-gradient(bottom,#C0C0C0 0%,#EEEEEE 100%);

background: linear-gradient(bottom,#C0C0C0 0%,#EEEEEE 100%);

border: 1px #C0C0C0 solid;

}

#Image1

{

border: 0px #000000 solid;

}

</style>

$(document).ready(function()

{

$("#SlideShow1").conveyerbelt({speed:2, spacing: 5});

});

</script>

</head>

<body>

</div>

<div style="line-height:25px;"><span style="color:#FFFFFF;font-family:Tahoma;font-size:17px;"> Os PENTEADOS, CORTES E MAQUIAGENS, é um mundo em que as mulheres sempre se deslumbram, </span></div>

<div style="line-height:25px;"><span style="color:#FFFFFF;font-family:Tahoma;font-size:17px;">preincipalmente quando chega aquela ocasião especial como casamento, 15 anos e eventos importantes.<br></span></div>

<div style="line-height:25px;"><span style="color:#FFFFFF;font-family:Tahoma;font-size:17px;"> Noivas, Madrinhas e Debutantes, merecem uma atenção diferenciada, pois serão o centro das atenções </span></div>

<div style="line-height:25px;"><span style="color:#FFFFFF;font-family:Tahoma;font-size:17px;">do envento. Por isso viso sempre o melhor para as minhas clientes e busco produtos e técnicas </span></div>

<div style="line-height:42px;"><span style="color:#FFFFFF;font-family:Tahoma;font-size:17px;">profissionais para melhor atende-las.</span></div>

<div style="line-height:65px;"><span style="color:#FFFFFF;font-family:'Segoe Script';font-size:27px;">Trabalhar com a alta estima das pessoas é um máximo!</span></div>

</div>

<span style="color:#A9A9A9;font-family:Adorable;font-size:53px;">Dayane</span></div>

<span style="color:#A9A9A9;font-family:Angelina;font-size:35px;">Artist</span></div>

<a href="./Maquiagens.html">Maquiagens</a>

<a href="./Penteados.html">Penteados</a>

<a href="./Galeria.html">Galeria</a>

<a href="./Contato.html">Contato</a>

</div>

<a href="./Maquiagens.html">Maquiagens</a>

<a href="./Penteados.html">Penteados</a>

<a href="./Galeria.html">Galeria</a>

<a href="./Contato.html">Contato</a>

</div>

</body>

</html>

EduardoAugustoPHP · Maio 10, 2013

Não entendi sua pergunta. Você quer o site centralizado ou que seja de acordo com cada monitor?

Para centralizar, cire uma div com nome de "wrapper", "central", "principal" ou qquer coisa parecida e dentro dela você coloca TODO o conteúdo do site.

No css vc aplica o seguinte:

#wrapper{

position:relative;

margin: 0 auto;

width: 960px; //tamanho sugestivo, você quem decide o tamanho o tamanho da largura do site

height: auto; //sempre bom colocar para evitar a fadiga com o IE.

}

Feito isso....be happy!

Renan Pongeluppe · Maio 10, 2013

Muito obrigado eduardo pela resposta, mais jah tentei isso de várias maneiras e não deu certo, pois eu não manjo muito de HTML...não sei ao certo onde colocar esse cod.

Marcos Xavier · Maio 10, 2013

Recomendo ler

http://maujor.com/tutorial/layout-css-passo-a-passo.php

http://www.maujor.com/w3ctuto/firstcss.html

http://www.mxstudio.com.br/desenvolvimento/css/criando-layouts-css-a-partir-do-zero-1-coluna/

EduardoAugustoPHP · Maio 10, 2013

Muito obrigado eduardo pela resposta, mais jah tentei isso de várias maneiras e não deu certo, pois eu não manjo muito de HTML...não sei ao certo onde colocar esse cod.

Então vamos lá...

Logo depois da tag BODY vc abre uma div..tipo assim:

<body>

...cobnteudo do seu site...

</div>

</body>

aí no style da página...vc faz isso:

#wrapper{

position:relative;

width: 960px;

margin: 0 auto;

height:auto;

}

melhor..?

angelorubin · Maio 10, 2013

Boa tarde,

Aqui tem uma excelente explicação sobre design responsivo (inglês) - http://alistapart.com/article/responsive-web-design

Ou ainda você pode utilizar um framework como o twitter bootstrap para lhe facilitar a vida - http://twitter.github.io/bootstrap/index.html

É só montar a grid (fixa, fluida e/ou responsiva ) e sair para o abraço.

Espero que ajude.

Buchechafs · Maio 16, 2013

EduardoAugustoPHP se o Renan Pongeluppe está em busca de um site responsivo o css deve ser trabalhado com % e ter o seu min-width e o max-width.

EduardoAugustoPHP · Maio 16, 2013

EduardoAugustoPHP se o Renan Pongeluppe está em busca de um site responsivo o css deve ser trabalhado com % e ter o seu min-width e o max-width.

Sim, esqueci de falar pra criar a div antes da wrapper com o 100%

Arquivado

Como centralizar site

Recommended Posts

Renan Pongeluppe 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

EduardoAugustoPHP 27

Compartilhar este post

Link para o post

Compartilhar em outros sites

Renan Pongeluppe 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

EduardoAugustoPHP 27

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buchechafs 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

EduardoAugustoPHP 27

Compartilhar este post

Link para o post

Compartilhar em outros sites

Girls From Your Town - Anonymous Casual Dating - No Selfie

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante