Problema com css
Olá
Em meu projeto há um pasta Thema com um stylesheet dentro. Até ai tudo bem, o problema que quando eu crio um background-image, a imagem não aparece quando rodo o site dentro do localhost. Estou achando que é o endereço da imagem. Meu link tá assim:
background-image: url('file:///C:/Documents and Settings/Administrador/Meus documentos/Visual Studio 2008/HofStore/HofStore/HofStore/../../imagems/background.jpg');
Quando aplico um cor ou outra coisa funciona. Já testei o site com htm fora do localhost e funciona perfeitamente.
outra coisa, gostaria que me explicasse o contole position: absolut, fixed, relative, static, inherit;
obrigada
Em meu projeto há um pasta Thema com um stylesheet dentro. Até ai tudo bem, o problema que quando eu crio um background-image, a imagem não aparece quando rodo o site dentro do localhost. Estou achando que é o endereço da imagem. Meu link tá assim:
background-image: url('file:///C:/Documents and Settings/Administrador/Meus documentos/Visual Studio 2008/HofStore/HofStore/HofStore/../../imagems/background.jpg');
Quando aplico um cor ou outra coisa funciona. Já testei o site com htm fora do localhost e funciona perfeitamente.
outra coisa, gostaria que me explicasse o contole position: absolut, fixed, relative, static, inherit;
obrigada
Lorena Menelli
Curtidas 0
Respostas
Luiz Maia
10/04/2009
Oi Lorena,
O problema imagem é realmente o link, que vc esta colocando o caminho absoluto, e deve ser o caminho relativo, por exemplo:
background-image: url('~/imagems/background.jpg'); // mas isto depende da disposição do seu diretorio, ok
Nunca use caminhos absolutos em links, pq quando vc mudar sua aplicação me servidor ou ambiente, os mesmo param de funcionar.
Quanto ao atributo position:
position: static
Esse é o valor default para todo elemento HTML, o que significa que o elemento não tem posicionamento definido e seu fluxo ocorre normalmente no documento HTML. Não é necessário definir position:static para os elementos da página pois esse é o valor default. position: relative
Especificando position:relative agora você pode utilizar top ou bottom, right ou left para posicionar os elementos na página em relação ao lugar que ele ocuparia no fluxo do documento. #div1 {
position: relative;
top: 40px;
left: 20px;
}
Nesse exemplo posicionamos o elemento a 40px do topo e a 20px da esquerda em relação ao lugar que ele ocuparia no fluxo do documento. Vale lembrar que utilizando position:relative todo esse espaço que foi definido ainda continua sendo ocupado pelo elemento na página. position: absolute
Utilizando position: absolute agora podemos posicionar exatamente nosso elemento em relação ao primeiro elemento pai com posição diferente de “static” numa sequência até parar no body. #div1 {
position: absolute;
top: 40px;
right:0;
}
Vale lembrar que a patir do momento que utilizamos position: absolute ele perde a ordem no fluxo do documento e o espaço ocupado passa a não existir mais. position:relative + position: absolute
Observe o seguinte código HTML: <div id="div1">
<div id="div2"></div>
</div>
Se definirmos position: relative para a div1 e position: absolute para a div2 a partir de agora a div2 se posicionará absolutamente em relação a div1, não mais em ralação ao body da página. position: fixed
#div1 {
position: fixed;
top:40px;
left:10px;
}
Posiciona um elemento fixadamente na página em relação a janela, ou seja, independente de a pagina conter um scroll ou não, o elemento sempre ficará visíve ao usuário em relação as medidas definidas. Vale lembrar que esse tipo de posicionamento não funciona no Internet Explorer. Espero ter ajudado. Aguardo se retorno Lorena. Abraços Att Luiz Maia
Esse é o valor default para todo elemento HTML, o que significa que o elemento não tem posicionamento definido e seu fluxo ocorre normalmente no documento HTML. Não é necessário definir position:static para os elementos da página pois esse é o valor default. position: relative
Especificando position:relative agora você pode utilizar top ou bottom, right ou left para posicionar os elementos na página em relação ao lugar que ele ocuparia no fluxo do documento. #div1 {
position: relative;
top: 40px;
left: 20px;
}
Nesse exemplo posicionamos o elemento a 40px do topo e a 20px da esquerda em relação ao lugar que ele ocuparia no fluxo do documento. Vale lembrar que utilizando position:relative todo esse espaço que foi definido ainda continua sendo ocupado pelo elemento na página. position: absolute
Utilizando position: absolute agora podemos posicionar exatamente nosso elemento em relação ao primeiro elemento pai com posição diferente de “static” numa sequência até parar no body. #div1 {
position: absolute;
top: 40px;
right:0;
}
Vale lembrar que a patir do momento que utilizamos position: absolute ele perde a ordem no fluxo do documento e o espaço ocupado passa a não existir mais. position:relative + position: absolute
Observe o seguinte código HTML: <div id="div1">
<div id="div2"></div>
</div>
Se definirmos position: relative para a div1 e position: absolute para a div2 a partir de agora a div2 se posicionará absolutamente em relação a div1, não mais em ralação ao body da página. position: fixed
#div1 {
position: fixed;
top:40px;
left:10px;
}
Posiciona um elemento fixadamente na página em relação a janela, ou seja, independente de a pagina conter um scroll ou não, o elemento sempre ficará visíve ao usuário em relação as medidas definidas. Vale lembrar que esse tipo de posicionamento não funciona no Internet Explorer. Espero ter ajudado. Aguardo se retorno Lorena. Abraços Att Luiz Maia
GOSTEI 0
Devmedia
10/04/2009
Lorena,
a resposta do consultor sanou sua dúvida? Podemos encerrar o chamado?
a resposta do consultor sanou sua dúvida? Podemos encerrar o chamado?
GOSTEI 0
Lorena Menelli
10/04/2009
Sim. mais estive ocupada com outra coisa. mais logo vou tentar acertar o problema com ele me falow, seu tiver alguma dificuldade eu posto aqui..
abraçu..
abraçu..
GOSTEI 0
Luiz Maia
10/04/2009
Ok Lorena, aguardo um retorno.
Abraços
Att
Luiz Maia
GOSTEI 0
Lorena Menelli
10/04/2009
Olá Luiz, voltando ao nosso assunto.
não estou conseguindo colocar uma imagem de fundo no meu css.
html
{
background-position: top;
font: 12px Verdana;
background-image:url('~/images/bg_image.jpg')
}
mais isso não funciona
GOSTEI 0
Luiz Maia
10/04/2009
Lorena,
Para usar uma imagem como background, vc deve ter um controle que aceite isto, como uma div, tr, td, th, span e assim por diante. Para isto use o exemplo abaixo:
.cabecalho {
BACKGROUND: url(../imagens/sistema.png) no-repeat;
FLOAT: right;
MARGIN: 5px;
WIDTH: 230px;
HEIGHT: 31px
}
E no HTML:
<div class=cabecalho></div>
Abraços e espero ter ajudado.
Aguardo retorno
Att
Luiz Maia
GOSTEI 0
Luiz Maia
10/04/2009
E ai Lorena, conseguiu chegar na solução?
Aguardo retorno.
Att
Luiz Maia
GOSTEI 0
Lorena Menelli
10/04/2009
Isso eu sei fazer, olha como está meu código:
css...
html
{
background-position: top;
font: 12px Verdana;
background-image:url('~/images/bg_image.jpg')
}
.header
{
background-position: top;
border-bottom: solid 1px blue;
padding: 0px;
padding-bottom: 0px;
background-color: #666666;
top: 0px;
background-image: url('~/images/bg_image.jpg');
}
.login
{
position: absolute;
right: 100px;
top: 50px;
padding: 0px;
}
.topMenu
{
float:right;
height:50px;
padding-right: 50px;
}
.content
{
margin: auto;
border: solid 1px black;
width: 760px;
background-color: White;
}
.LeftColumn
{
float: left;
width: 100px;
padding: 5px;
background-color: #D1DDE9;
}
.CenterColumn
{
float: right;
width: 500px;
padding: 8px;
}
.footer
{
margin: 10px 0px 0px 0px;
clear: both;
border-top: solid 0px navy;
font-size: x-small;
padding: 20px 0px 20px 500px;
background-color: #394655;
font-family: Tahoma;
color: #FFFFFF;
border-width: 0px;
left: 500px;
}
masterPage...
.centerColumn
{
width: 651px;
}
.footer
{
width: 499px;
}
login
Copyright © 2009 by the HOFFMANN
Eu quero colocar uma imagem se repetindo na posição x, no fundo do site, pois estou fazendo meu site como 1024x778 e não quero deixar uma cor chapada no background.
( esse componente que o Devmedia está usado para digitação, não está aceitando a formação do texto ao copiar e colar dentro dele)
GOSTEI 0
Lorena Menelli
10/04/2009
Isso eu sei fazer, olha como está meu código:
css...
html
{
background-position: top;
font: 12px Verdana;
background-image:url('~/images/bg_image.jpg')
}
.header
{
background-position: top;
border-bottom: solid 1px blue;
padding: 0px;
padding-bottom: 0px;
background-color: #666666;
top: 0px;
background-image: url('~/images/bg_image.jpg');
}
.login
{
position: absolute;
right: 100px;
top: 50px;
padding: 0px;
}
.topMenu
{
float:right;
height:50px;
padding-right: 50px;
}
.content
{
margin: auto;
border: solid 1px black;
width: 760px;
background-color: White;
}
.LeftColumn
{
float: left;
width: 100px;
padding: 5px;
background-color: #D1DDE9;
}
.CenterColumn
{
float: right;
width: 500px;
padding: 8px;
}
.footer
{
margin: 10px 0px 0px 0px;
clear: both;
border-top: solid 0px navy;
font-size: x-small;
padding: 20px 0px 20px 500px;
background-color: #394655;
font-family: Tahoma;
color: #FFFFFF;
border-width: 0px;
left: 500px;
}
masterPage...
.centerColumn
{
width: 651px;
}
.footer
{
width: 499px;
}
login
Copyright © 2009 by the HOFFMANN
Eu quero colocar uma imagem se repetindo na posição x, no fundo do site, pois estou fazendo meu site como 1024x778 e não quero deixar uma cor chapada no background.
( esse componente que o Devmedia está usado para digitação, não está aceitando a formação do texto ao copiar e colar dentro dele)
GOSTEI 0
Lorena Menelli
10/04/2009
isso é um teste com outro navegador
body
{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
background-image:url('~/images/bg_image.jpg')
}
html
{
background-position: top;
font: 12px Verdana;
background-image:url('~/images/bg_image.jpg')
}
.header
{
background-position: top;
border-bottom: solid 1px blue;
padding: 0px;
padding-bottom: 0px;
background-color: #666666;
top: 0px;
background-image: url('~/images/bg_image.jpg');
}
.login
{
position: absolute;
right: 100px;
top: 50px;
padding: 0px;
}
.topMenu
{
float:right;
height:50px;
padding-right: 50px;
}
.content
{
margin: auto;
border: solid 1px black;
width: 760px;
background-color: White;
}
.LeftColumn
{
float: left;
width: 100px;
padding: 5px;
background-color: #D1DDE9;
}
.CenterColumn
{
float: right;
width: 500px;
padding: 8px;
}
.footer
{
margin: 10px 0px 0px 0px;
clear: both;
border-top: solid 0px navy;
font-size: x-small;
padding: 20px 0px 20px 500px;
background-color: #394655;
font-family: Tahoma;
color: #FFFFFF;
border-width: 0px;
left: 500px;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.centerColumn
{
width: 651px;
}
.footer
{
width: 499px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<div class="header">
<asp:ImageButton ID="ImageButton1" ImageUrl="~/images/top_header.jpg"
runat="server" Height="358px" Width="999px" />
</div>
<div class="login">
login
</div>
<div class = "topMenu">
</div>
<div class = "LeftColumn">
<asp:ContentPlaceHolder id="ContentLeft" runat="server">
<div class="Menu">
</div>
</asp:ContentPlaceHolder>
</div>
<div class="centerColumn">
<asp:ContentPlaceHolder id="ContentCenter" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footer">
Copyright ¸ 2009 by the HOFFMANN
</div>
</div>
</form>
</body>
</html>
GOSTEI 0
Luiz Maia
10/04/2009
Oi Lorena,
Para que a imagem repita, use:
background: url(../imagens/bkgAguardar.jpg) repeat-x top;
É isto que vc quer?
Aguardo seu retorno Lorena.
Att
Luiz Maia
GOSTEI 0
Lorena Menelli
10/04/2009
em qual div devo colocar isso, pq já tentei em todas. Já tentei comocar no html do css no body e na div header.
olha meu codigo css
body
{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
background: url(../imagens/bg_image.jpg repeat-x top;
}
html
{
background-position: top;
font: 12px Verdana;
background: url(../imagens/bg_image.jpg repeat-x top;
}
.header
{
background-position: top;
border-bottom: solid 1px blue;
padding: 0px;
padding-bottom: 0px;
background-color: #666666;
top: 0px;
background: url(../imagens/bg_image.jpg repeat-x top;}
.login
{
position: absolute;
right: 100px;
top: 50px;
padding: 0px;
}
.topMenu
{
float:right;
height:50px;
padding-right: 50px;
}
.content
{
margin: auto;
border: solid 1px black;
width: 760px;
background-color: White;
}
.LeftColumn
{
float: left;
width: 100px;
padding: 5px;
background-color: #D1DDE9;
}
.CenterColumn
{
float: right;
width: 500px;
padding: 8px;
}
.footer
{
margin: 10px 0px 0px 0px;
clear: both;
border-top: solid 0px navy;
font-size: x-small;
padding: 20px 0px 20px 500px;
background-color: #394655;
font-family: Tahoma;
color: #FFFFFF;
border-width: 0px;
left: 500px;
}
minha MasterPage
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.centerColumn
{
width: 651px;
}
.footer
{
width: 499px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<div class="header">
<asp:ImageButton ID="ImageButton1" ImageUrl="~/images/top_header.jpg"
runat="server" Height="358px" Width="999px" />
</div>
<div class="login">
login
</div>
<div class = "topMenu">
</div>
<div class = "LeftColumn">
<asp:ContentPlaceHolder id="ContentLeft" runat="server">
<div class="Menu">
</div>
</asp:ContentPlaceHolder>
</div>
<div class="centerColumn">
<asp:ContentPlaceHolder id="ContentCenter" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footer">
Copyright ¸ 2009 by the HOFFMANN
</div>
</div>
</form>
</body>
</html>
GOSTEI 0
Luiz Maia
10/04/2009
Lorena,
Primeiramente, esta faltando fechar as chaves nas tagas da URL:
Errado:
background: url(../imagens/bg_image.jpg repeat-x top;
Correto:
background: url(../imagens/bg_image.jpg) repeat-x top;
Tem como me enviar seu codigo ou projeto pelo Disco Virtual, ai faço aqui para vc e dai pode ver como foi feito?
Aguardo
Att
Luiz Maia
GOSTEI 0
Lorena Menelli
10/04/2009
Não consigo usar o disco. No IE e no mozila abre o meu space e no google Chrome da o seguinte erro Arquivo de imagem invalido. Seu IP e login foram salvos no log do servidor.
Estou clicando no botão file UpLoad.
GOSTEI 0
Luiz Maia
10/04/2009
Lorena,
aconselho a utilizar o firefox ou I.E. depois que vc chegar no caixa de seleção de imagem, vc deve escolher a imagem.
Deve aparecer uma mensagem no canto superior esqerdo dizendo que a imagem foi upada.
Depois escolha a mesma e clique em ok.
Se tiver problemas, assita ao video para responder um chamado com texto.
GOSTEI 0
Lorena Menelli
10/04/2009
tá isso que vc disse é para fazer upload de imagem, quero mandar a pasta zipada com o meu projeto. Estou clicando no File Uploads daí aparece isso
Este recurso nao esta disponivel. Para associar um arquivo de download, utilize a opcao "Associar Download" na Central do Autor
Equipe DevMedia
www.devmedia.com.br
Este recurso nao esta disponivel. Para associar um arquivo de download, utilize a opcao "Associar Download" na Central do Autor
Equipe DevMedia
www.devmedia.com.br
GOSTEI 0
Devmedia
10/04/2009
Lorena,
vc precisa utilizar o recurso "meu disco virtual". Existe um video explicativo sobre esse recurso.
após upar o arquivo para o seu disco, vc deve copiar o link desse arquivo e copiar o mesmo para o consultor, pois ele não tem acesso direto.
vc precisa utilizar o recurso "meu disco virtual". Existe um video explicativo sobre esse recurso.
após upar o arquivo para o seu disco, vc deve copiar o link desse arquivo e copiar o mesmo para o consultor, pois ele não tem acesso direto.
GOSTEI 0
Lorena Menelli
10/04/2009
não localizei esse video. Entrei em contato com a Hellen do suporte e ela tmb não localizou. Pode me passar o link para eu aprender a usar o disco?
GOSTEI 0
Devmedia
10/04/2009
Lorena,
na página principal da consultoria, a ultima opção do lado esqerdo é "meu disco virtual" e ao lado tem um link "video: como disponibilizar arquivos"
aparecerá pra vc o video passo a passo de como utilizar.
quando vc clica em "meu disco virtual", aparece uma tela onde vc tem o botão "arquivo". abrirá uma tela para escolher o arquivo, lembrando que vc deve upar somente arquivos .zip ou .rar.
Após isso, vc clica em "fazer upload do arquivo>>". Aparecerá uma mensagem confimando.
na página principal da consultoria, a ultima opção do lado esqerdo é "meu disco virtual" e ao lado tem um link "video: como disponibilizar arquivos"
aparecerá pra vc o video passo a passo de como utilizar.
quando vc clica em "meu disco virtual", aparece uma tela onde vc tem o botão "arquivo". abrirá uma tela para escolher o arquivo, lembrando que vc deve upar somente arquivos .zip ou .rar.
Após isso, vc clica em "fazer upload do arquivo>>". Aparecerá uma mensagem confimando.
GOSTEI 0
Lorena Menelli
10/04/2009
Meu projeto está no disco com o nome de hoffman.rar
GOSTEI 0
Luiz Maia
10/04/2009
Blz Lorena, vaou baixa-lo a fazer a correção para vc.
Assim que terminar te envio, ok?
Abraços
Att
Luiz Maia
GOSTEI 0
Lorena Menelli
10/04/2009
qual dos três devo baixar?
Downloads & Files
AJAXControlToolkit-Framework3.5SP1-DllOnly.zip
application, 744K, uploaded Wed - 3699 downloads
AJAXControlToolkit-Framework3.5SP1.zip
source code, 5260K, uploaded Wed - 2916 downloads
AJAXControlToolkit-ScriptFilesOnly.zip
application, 422K, uploaded Wed - 896 downloads
GOSTEI 0
Lorena Menelli
10/04/2009
ai ai ..não estou sabendo instalar esse treco.. naum era mais fácil apenas um executável..:-(
estou nessa página. tá certo?
http://download.codeplex.com/Project/Download/FileDownload.aspx?ProjectName=AjaxControlToolkit&DownloadId=68191&FileTime=128867370162370000&Build=15036
GOSTEI 0
Lorena Menelli
10/04/2009
Eu add a dll no toolbox, usando o Choose Item. mais isso eu já tinha feito. Tenho que instalar mais alguma coisa?
GOSTEI 0
Lorena Menelli
10/04/2009
Em meu projeto eu não criei um AJAX Control ToolKit WebSite, até mesmo pq eu não tenho esse tamplet instalado na minha maquina. Ao invés disso eu criei um ASP.NET Web Site. Pode ser esse o problema?
GOSTEI 0
Lorena Menelli
10/04/2009
Escrevi no post errado.
GOSTEI 0
Lorena Menelli
10/04/2009
Luiz, vou ter que sair e só volto para o pc amanhã de manhã. Daí seu demorar a responder vc já sabe.
o post sobre janela modal é mais importante pq eu dependo disso para continuar o projeto.
abraço
xau e obrigada
o post sobre janela modal é mais importante pq eu dependo disso para continuar o projeto.
abraço
xau e obrigada
GOSTEI 0
Luiz Maia
10/04/2009
Oi Lorena,
Preciso que me mando o LINK de onde fez o upload de seus arquivos. Caso contratio não tem como eu acha-los.
Aguardo.
GOSTEI 0
Devmedia
10/04/2009
Lorena,
vc precisa copiar o link completo do arquivo q vc upou pro seu disco virtual. O consultor não tem acesso ao seu disco virtual.
vc precisa copiar o link completo do arquivo q vc upou pro seu disco virtual. O consultor não tem acesso ao seu disco virtual.
GOSTEI 0
Lorena Menelli
10/04/2009
GOSTEI 0
Luiz Maia
10/04/2009
Oi Lorena,
Resolvido, vc deve usar no arquivo CSS assim:
.testeBackGround
{
background-image:url('../../images/bg_image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
height: 353px;
}
e no aspx:
<body>
<form id="form1" runat="server">
<div class="testeBackGround">
Teste Luiz Maia
</div>
</form>
</body>
Testei aqui em minha maquina usando seu projeto e funcionou perfeitament, caso ainda assim não consiga me avise que te mando o projt novamente com o arquivo implementado, ok?
Abraços
Att
Luiz Maia
GOSTEI 0
Lorena Menelli
10/04/2009
Deu certo aqui. Vc pode me mandar o projeto, mais com o site centralizado, pq isso não estou conseguindo.
depois pode fechar.
obrigada
depois pode fechar.
obrigada
GOSTEI 0
Luiz Maia
10/04/2009
Oi Lorena,
Para você centralizar seu site, vc precisa acrescentar o atributo no body align=center ou usar uma div em sua masterpage:
<div align="center">
Aguardo Retorno
Att
Luiz Maia
GOSTEI 0
Devmedia
10/04/2009
Lorena,
podemos encerrar o chamado?
podemos encerrar o chamado?
GOSTEI 0
Lorena Menelli
10/04/2009
Ok..Muito obrigada, estou esperando a resposta dos outros posts
GOSTEI 0