Ir para conteúdo

POWERED BY:

Arquivado

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

Kaue Machado

Problemas gerais com alinhamento?

Recommended Posts

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...

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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... =/

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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....

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.