[Resolvido] Alerta com Css

[fabricioblz 0]

como vcs fazer seus alertas sem javascrit?

 

eu criei um:

#erro{
	text-align:center;
	display: none;
	position: absolute;
	top: 30px;
	right: 43%;
	

}

mas para messagens mt grandes ele nao fica no centro

como a messagem podem ter qualquer tamanho nao posso deixar o width fixo(entao margin:0 auto; nao funciona)

 

alguma solucao?

 

desculpe se me expressei mau, caso nao entendao a duvida em avisem, que faço um nova tentativa

[RafaelNMNM 0]

O conteúdo da mensagem não fica no centro por causa do "right: 43%;", tente trabalhar com margin ou padding.

 

Tente assim:

#erro{
        text-align:center;
        display: none;
        position: absolute;
        top: 30px;
	padding:0 100px;
}

[fabricioblz 0]

eu tentei nem da... ele sempre vai ficar com o padding de 100px na equerda e na direita.... e a messagem pode auementar a div...

 

eu nao sei o que o gmail fez, mas a messagem deles a div absolute esta sempre no centro...

[João Prado 64]

Coloque um width:auto na div e coloque o margin:0 auto, deve funcionar http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[fabricioblz 0]

Coloque um width:auto na div e coloque o margin:0 auto, deve funcionar http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

http://fabricioblz.freevar.com/divAbsoluteTopo.html

 

eu tentei

 

mas nao fui feliz...

 

o negocio eh o absolute...

 

mesmo assim vlw MoOiO

[Thiago Retondar 18]

style="background:#FFFFCC; width: 100px;position:absolute;top:0px;left: 50%; margin: 0 0 0 -50px;"

E use z-index para ele ficar em cima de outros elementos, caso deseje.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[fabricioblz 0]

olá Thiago!

 

isso da um certo... porem o width esta fixo: '100px'; O grande problema eh que a div deve assumir o tamanho do texto digitado para o 'alert'

 

usei o seu exemplo: http://fabricioblz.freevar.com/divAbsoluteTopo.html com um texto grande e com width fixo

e sem o width fixo: http://fabricioblz.freevar.com/divAbsoluteTopo2.html

 

observe que ele 'desobedece o left:50%;'

observe tb que o do orkut e gmail fica no meio independente do tamanho do 'aviso' e em uma linha só

 

mesmo assim agradeço!!

[Thiago Retondar 18]

Fiz para menu, mas acho que da para aplicar o seu caso http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://ogordo.com/centralizar-menu-sem-width/

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[João Prado 64]

então defina um width:100%

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Thiago Retondar 18]

então defina um width:100%

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Mas aí como ficará centralizado? :P

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[João Prado 64]

Só não colocar 100% e sim um tamanho menor

 

acho que resolve né?

[angelorubin 142]

Boa tarde,

 

Eu acredito que esta técnica do MAUJOR posso lhe ajudar quanto a centralizar o aviso.

 

http://maujor.com/tutorial/meio_tela.php

 

Segue o codigo que testei aqui.

 

Folha de Estilo (CSS)

 

#div_pos {
position:absolute;
left:50%;
top:50%;
margin-left:-110px;
margin-top:-40px;
width:220px;
height:auto;
padding:5px;
text-align:justify;
border:1px solid #999999;
}

XHTML

 

<div id="div_pos">

Lorem ispum dolor
Lorem ispum dolor
Lorem ispum dolor
Lorem ispum dolor
Lorem ispum dolor
Lorem ispum dolor

</div>

Espero que seja o que necessita.

[Thiago Retondar 18]

Angelo,

 

já demos tal sugestão, mas o ele não quer com largura definida.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Evandro Oliveira 331]

.container {
position: absolute;
width: 100%;
top: 0;
left: 0;
text-align: center;
}

.message {
background: yellow;
padding: 5px 30px;
}

<p class="container"><span class="message">Teste de mensagem de erro muito muito muito grande para verificar a centralização.</span></p>

[fabricioblz 0]

Fiz para menu, mas acho que da para aplicar o seu caso http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://ogordo.com/centralizar-menu-sem-width/

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Thiago,

 

Mt obrigado pela dica! esse menu pode ser util para outras ocasioes

 

parabens pelo blog, ta Favoritado!

 

.container {
position: absolute;
width: 100%;
top: 0;
left: 0;
text-align: center;
}

.message {
background: yellow;
padding: 5px 30px;
}

<p class="container"><span class="message">Teste de mensagem de erro muito muito muito grande para verificar a centralização.</span></p>

 

Evandro,

 

brigadao cara realmente resolveu meu problema = D

 

até a proxima