Jump to content

  2. →
  3. →
  4. →

Photo

Como Centralizar O Site Todo?

Started By Ch4p0L1N, 25/04/2007, 17:50

  • Faça o login para participar
16 replies to this topic

#1 Ch4p0L1N

Ch4p0L1N

    Normal

  • Usuários
  • 116 posts
  • Sexo:Masculino

Posted 25/04/2007, 17:50

como funciona o negócio de centralizar sites em tableless? pq eu faço uma DIV com o nome "tudo" e o site todo fica dentro dela, mas uso mto o comando "position:absolute" e posiciona as coisas colocando as coordendas em pixels... mas se eu centralizar o site vou ter q mudar os valores das outras divs que estão posicionadas por coordenadas em pixels??

nao sei como funciona

fiz isso:

#tudo {
 margin: 0px auto;
}

e deu certo... o problema eh q tem algumas divs que eu uso isso:

position:absolute;
	top: 15px;
	left: 482px;

pra posicionar a div onde eu quero, mas se eu fizer isso vai ficar certo numa resolução (1024x768) e em outras não (800x600)

como resolvo isso?

#2 Evitark

Evitark

    Normal

  • Usuários
  • 67 posts
  • Sexo:Masculino

Posted 26/04/2007, 11:39 

#tudo {
  margin-left: auto;
  margin-right: auto;
}

E não é uma boa prática usar posicionamento absoluto para tudo. Tem muitos outros jeitos de montar um site ;)

#3 Ch4p0L1N

Ch4p0L1N

    Normal

  • Usuários
  • 116 posts
  • Sexo:Masculino

Posted 26/04/2007, 13:54

o q eu posso usar pra posicionar as div onde eu quero??

#4 Nando.

Nando.

    Novato no fórum

  • Usuários
  • 15 posts
  • Sexo:Não informado

Posted 26/04/2007, 15:07

Ch4p0L1N,

body{
width: 776px;
margin: 0 auto;
}

Pode ser que dê certo.

#5 Ch4p0L1N

Ch4p0L1N

    Normal

  • Usuários
  • 116 posts
  • Sexo:Masculino

Posted 26/04/2007, 15:10

Nando.,

isso eu fiz e deu certo

mas tem o problemas do posicionamento das DIVs, qual a melhor forma de colocar a DIV na posição que eu quero sem usar position:absolute e posicionamento por pixels

#6 Nando.

Nando.

    Novato no fórum

  • Usuários
  • 15 posts
  • Sexo:Não informado

Posted 27/04/2007, 16:06

tu pode usar Float:left; ou float: right;
caso mude também a DIV de baixo, vc usa Clear:both;

Com "clear:both" indicamos que a camada deve se mostrar sem elementos flutuando à esquerda e à direita, de modo que a posição da camada será imediatamente abaixo da camada corpo e lateral.

Edição feita por: Nando., 28/04/2007, 12:29.

#7 savior

savior

    Campanha [codebox], use ou morra :D

  • Usuários
  • 1229 posts
  • Sexo:Masculino
  • Localidade:Curitiba, PR - Brasil
  • Interesses:Na vida ;P

Posted 27/04/2007, 16:38

Geralmente, se usa isso para centralizar um container.

html, body {
	  text-align: center;
	  // Outras coisas que desejar colocar...
}
#container {
	 margin: auto;
	 position: relative;
}

Sobre suas divs de position: absolute => O elemento pai delas tem que conter position: relative, senão elas irão tentar identar com o pai do pai (se for relativo o posicionamento), e vai subindo até não achar mais nada (body).

Deu para entender?

[lastfm] [blog]

Campanha codebox: use-a ou morra!
bfmaster_duran[at]yahoo.com.br

#8 William P.

William P.

    Novato no fórum

  • Usuários
  • 8 posts
  • Sexo:Não informado

Posted 28/04/2007, 00:03

tu pode usar Flot:left; ou flot: right;
caso mude também a DIV de baixo, vc usa Clear:both;

Com "clear:both" indicamos que a camada deve se mostrar sem elementos flutuando à esquerda e à direita, de modo que a posição da camada será imediatamente abaixo da camada corpo e lateral.

Nando., só uma correção, é float, não flot. ;)

---

Pra centralizar todo o site eu uso:

body {
text-align: center;
/* você pode adicionar mais atributos aqui, como font, por exemplo */
}
#principal { /* abrange o site todo */
text-align: left;
/* você pode adicionar mais atributos aqui, como font, por exemplo */
}

Edição feita por: William P., 28/04/2007, 00:08.

#9 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 28/04/2007, 09:01

Acho que o problema dele é que ele está usando position: absolute em alguns divs dentro da div "tudo" que já está centralizada na tela.

Você terá que alterar o posicionamento delas para relative e usar margin para definir as localizações dentro da div tudo

alguns links para estudo:

http://www.maujor.com/layout3col.shtml

http://www.maujor.co...rial/absrel.php

Artigo do Bruno Dulcetti

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum

#10 rsantana

rsantana

    Turista

  • Usuários
  • 50 posts
  • Sexo:Não informado
  • Localidade:Recife, PE

Posted 31/05/2007, 19:36

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>Centrar uma página com CSS</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background:#cccccc;
text-align:center; /* hack para o IE */
}
#tudo {
width: 760px;
margin:0 auto;
padding: 10px;
text-align:left; /* "remédio" para o hack do IE */
}
#conteudo {
padding: 5px;
background-color: #eeeeee;
}
</style>
</head>
<body>
<div id="tudo">
<div id="conteudo">
<h1>Pagina Centrada com CSS sem scroll ate 800x600</h1>
<p> Não use nenhum elemento HTML
(figuras, tabelas, etc...) com largura
superior a 750px.</p>
</div>
</div>
</body>
</html>

#11 Kuni Siri

Kuni Siri

    Novato no fórum

  • Usuários
  • 8 posts
  • Sexo:Não informado
  • Localidade:São Paulo - SP

Posted 21/06/2007, 15:21

text-align:center; /* hack para o IE */

(...)

text-align:left; /* "remédio" para o hack do IE */


Tecnicamente isso ae não é hack.

#12 pamellass

pamellass

    Novato no fórum

  • Usuários
  • 1 posts
  • Sexo:Feminino

Posted 20/12/2011, 23:06

Para centralizar o site, defina uma largura para Body, e defina 'auto' para as margens direita e esquerda:


body {
width:760px;
margin-left:auto;
margin-right:auto;
}




PS: "auto" é apenas uma forma de dizer ao navegador: "você decide", e como o valor é igual para os dois, ele sempre deixará o espaço dessas margens iguais, centralizando o body = site! ;)

#13 LarPhozyHah

LarPhozyHah

    Super Veterano

  • Usuários
  • 14515 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 02/10/2017, 17:06

Global Senario Amoxicillin Sodium Market Ciprofloxacin 127 viagra Buy Viagra Line Keflex And Pregnant Women Zithromax 1 Gm
Priligy Farmacia online pharmacy Compra Viagra Espana Cephalexin Not Tabs Canada Medications
Kamagra Deutschland Paypal levitra prices Prix Levitra Casablanca

#14 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 15385 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 03/10/2017, 16:22

Generic Viagra Discount viagra Kamagra Usage Purchase Tamoxifen Citrate Online
Doxycycline Buy Online Canada Is Generic Cialis Safe Viagra Jelly Reviews For Men viagra Low Cost Sctos Betaxolol Extra Super Levitra Frumforum.Co
Zithromax Swollen Gums Find isotretinoin best website Pills Dapoxetine Vendus En Amerique viagra Safest Place To Buy Ed Medicens

#15 LarPhozyHah

LarPhozyHah

    Super Veterano

  • Usuários
  • 14515 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 13/10/2017, 20:56

Hplc Amoxicillin Validation Kamagra En Ligne Avis viagra Cytotec En Estados Unidos
Keflex Personality Change Cephalaxin Secure Ordering Dutasteride Medication Price Shipped Ups Store Falkirk Will Lasix Help You Pass A Drug Test viagra Cheap Lasix Order Ce Qui Est Amoxil How To Buy Elocon
Buy Tretinoin Cream 0.025 Generico Cialis Roma Durer Plus Longtemps Au Lit Ce Soir viagra Yogurt And Amoxicillin
Ou Acheter Cialis Serieux cialis Viagra Quebec Amoxicillin 250 Mg Sta Prednisone Without A Script
Voltar para CSS & Semântica (Tableless)


0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. → CSS & Semântica (Tableless)
  5. Privacy Policy
  6. Regras ·
IPB Skin By Virteq