Problemas gerais com alinhamento?

Kaue Machado · Maio 2, 2011

Bom, andei fuçando no css de uma página minha para resolver um problema. Utilizei um conjunto estilos para fazer um CSS reset. O resultado foi ótimo! Com excessão do Safari, os outros browsers exibem o conteúdo de forma idêntica. O problema é o seguinte: quando uso o css reset, não consigo definir uma margin-top liquida (em % ou auto) apenas valores exatos, isso quando position: relative; Quando position: absolute; não consigo definir margin nenhuma...

Outro problema é o seguinte: tenho uma div que tem um fundo que fica sobre o fundo da body, essa div também tem a função de centralizar as divs que estão dentro dela. O problema é que a imagem do fundo da div fica centralizada, mas a div em si não, não sei explicar bem com palavras, então vou postar uma ilustração:

Alinhamento do Fundo 1

Alinhamento do Fundo 2

Site do problema

Resumindo: O fundo fica centralizado, mas o conteúdo não, e só a parte onde o conteúdo da div pega o fundo é que o fundo aparece...

Abaixo vou postar o CSS E HTML:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OPS! Ainda não...</title>
<link href="temporaria/estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://use.typekit.com/htc8uxp.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">@import "/temporaria/jquery.countdown.css";</style> 
<script type="text/javascript" src="/temporaria/jquery.countdown.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
   $('#countdown').countdown({until: new Date(2011, 6-1, 01)}); });  </script>
</head>
<body>
<div id="canvas">
<div id="content1" style="float: left;">
   <p style="font-weight: 900; font-size: 120px; line-height: 80px; margin-bottom: 10px;">OPS!</p>
   <p style="line-height: 40px; font-size: 36px;">parece que nosso novo site</p>
   <p style="font-weight: 700; line-height: 40px; font-size: 48px;">ainda não está pronto...</p>
   </div>
   <div id="countdown" class="countarea"></div>
</div>
</body>
</html>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: transparent;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

html {
height: 100%;
background: url(/temporaria/imagens/body-bg.png) no-repeat center center;
;
}

#canvas {
position: absolute;
float: none;
height: 500px;
width: 750px;
margin: auto;
background: url(/temporaria/imagens/balloon.png) no-repeat fixed center center;
}
.countarea {
width: 20%;
float: right;
position: relative;
height: 100%;
text-align: center;
}
#content1 {
position: relative;
width: 80%;
float: left;
height: 100%;
font-family: museo-slab-1, museo-slab-2, sans-serif, arial;
font-weight: 100;
background: url(/temporaria/imagens/balloon.png) no-repeat fixed center center;
margin: auto;
background-color: none;
}

Se alguem souber ajudar, eu agradeço, porque eu ja nao sei mais o que fazer...

Nandel · Maio 2, 2011

Tenta tirar o position:absolute; do canvas e coloque text-align:center;

fiz essa operação rapidamente aqui pelo chrome e funcionou perfeitamente.

OBS: isso fara com que tenha de alinhar o seu conteudo novamente.

Kaue Machado · Maio 2, 2011

Tenta tirar o position:absolute; do canvas e coloque text-align:center;

fiz essa operação rapidamente aqui pelo chrome e funcionou perfeitamente.

OBS: isso fara com que tenha de alinhar o seu conteudo novamente.

Valeu pela dica Nandel, mas não funcionou, o resultado é o mesmo que aplicando "position: relative;", as margens funcionam apenas na horizontal, na vertical ainda não funciona... =/

Nandel · Maio 3, 2011

A sim, eu não tinha entendido direito o lay, agora q eu vi direito, mas pq você não pode utilizar um valor fixo para margem do topo?

Kaue Machado · Maio 3, 2011

Na verdade não, porque a div "canvas" é a div que está centralizando o conteúdo na tela, assim nao importa se a resolução do usuário é 768 ou 1280, o conteúdo estará centralizado na vertical. Para as divs de dentro eu ja posso definir uma margem fixa, porque a div principal ja vai centralizar o conteudo.

- KbeçãO - · Maio 3, 2011

cara, o css reset que eu uso é esse:

*{

margin: 0;
padding: 0;

}

só.

tentei usar esse mesmo que você, mas tbm ñ tive êxito,

mas ja deixo avisado, se com esse cs reset ai, você ja começou a trabalhar, se usar o meu, vai desarrumar um pouco sua pagina

ai vai ter q rever mto do codigo...

mas comigo, esse ai funcionou perfeitamente....

Kaue Machado · Maio 3, 2011

cara, o css reset que eu uso é esse:
*{

margin: 0;
padding: 0;

}
só.

tentei usar esse mesmo que você, mas tbm ñ tive êxito,

mas ja deixo avisado, se com esse cs reset ai, você ja começou a trabalhar, se usar o meu, vai desarrumar um pouco sua pagina

ai vai ter q rever mto do codigo...

mas comigo, esse ai funcionou perfeitamente....

O problema é que o seu reset só resetaria o margin e padding, eu estou usando esse css reset principalmente por causa do Safari e Opera, quando eu não usava esse reset o line-height variava MUITO nesses dois browsers, agora eles ficam idênticos aos outros browsers, só varia um pouco no Safari ainda quando eu defino um font-size: >100px (maior que 100px) e o line-height muito menor que 100px, mas é pouca coisa.

Entrar

Arquivado

Problemas gerais com alinhamento?

Recommended Posts

Kaue Machado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nandel 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kaue Machado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nandel 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kaue Machado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

- KbeçãO - 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kaue Machado 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante