Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
sou noob em CSS, comecei hoje. nesse código abaixo, o que está errado, pq a imagem não aparece, era pra ser um menu, que quando passa o mouse, muda a cor, mais não deu certo, a img não aparece.
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"><!--
body {
background-image: url(Imagens/fundo.png);
background-repeat: repeat;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
font-size: 14px;
width: auto;
}
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Styling the footer</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background-color: #D6D6D6;
}
#container
{
margin: 1em auto;
width: 955px;
text-align: center;
border: 1px solid black;
}
#header
{
height: 175px;
margin-bottom: 40px
}
#menur {
width: 180px;
}#menur ul {
list-style-type: none;
margin: 0;
padding: 0;
font: bold 16px arial, helvetica, sans-serif;
}#menur li {
margin-bottom:1px;
}#menur a {
display: block;
padding: 1px 0 1px 25px;
border: 1px solid #000000;
width: 180px;
background-color: #339966;
color: #FFFFFF;
text-decoration: none;
background-image:url(Imagens/botao1.png);
voice-family: "\"}\"";
voice-family:inherit;
width:153px;
}
body>#menur a {width:153px;}
#menur a:hover {
background-color:#FFFF99;
background-image: url(Imagens/botaoc1.png);
color: #000000;
#contents
{
margin-right: 10px;
margin-left: 50px;
width: 800px;
height: 600px;
background-color: aqua;
margin-top: 40px
}
#footer
{
clear: both;
height: 20px;
background-color: lime;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="Imagens/banner.png" width="955" height="175" /></div>
<div id="menur"><ul>
<li>Home Page</li>
<li>Produtos</li>
<li>Equipe tecnica</li>
<li>Serviços</li>
<li>Album de fotos</li>
<li>Contato</li>
</ul></div>
<div id="contents"></div>
<div id="footer"></div>
</div>Mesmo com as aspas, não funcionou ;/
Você pode optar em deixar com ou sem. Eu prefiro deixar sem.
O caminho da imagem está correto?
Isso aqui é renderizado?
<img src="Imagens/banner.png" width="955" height="175" />
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
sim,esse é o banner la de cima
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background-image: url(Imagens/fundo.png);
}
#container
{
margin: 1em auto;
width: 955px;margin: auto;
text-align: center;
border: 1px solid black;
}
#header
{
height: 175px;
background-image: url(Imagens/banner.png);
}
#mainav
{
height: 25px;
background-color: green;
}
#menu
{
float: left;
width: 180px;
height: 100px;
}
#menu ul {font: bold 16px arial, helvetica, sans-serif;
} display: block;
padding: 1px 0 1px 25px;
border: 1px solid #000000;
width: 170px;
color: #FFFFFF;
text-decoration: none;
background-image: url(Imagens/botao2.png);
voice-family: "\"}\""; /*Box Model Hack*/
voice-family:inherit;
width:153px;
} border: 1px solid #000000;
background-image:url(Imagens/botaoc2.png);
color:#000000;
}
#contents
{
margin-right: 10px;
margin-left: 20px;
height: 800px;
width:800x;
}
#footer
{
clear: both;
height: 20px;
background-color: lime;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainnav"></div>
< <div id="menu"><ul>
</ul><img src="Imagens/botãomin.png" width="230" height="50">
<img src="Imagens/botao1.png" width="230" height="50">
<img src="Imagens/botao2.png" width="230" height="70">
<a href="index.html"><img src="Imagens/botao2.png" width="220" height="70"></a>
<a href="index.html"><img src="Imagens/botao2.png" width="230" height="70"></a></div>
<div id="contents"><img src="Imagens/textohome.png" width="635" height="600"></div>
<div id="footer"></div>
</div>
</body>
</html>A imagem até apareceu, mais o botão fico duplicado, o que será está errado ?
imagem: http://s285.photobucket.com/albums/ll72/Tuk_/?action=view¤t=img-1.png
Poste o link para seu site. Fica mais fácil de ajudar.
Não use o Dreamweaver para ver o resultado. Use algum browser, de preferência algum Webkit ou Mozilla Firefox.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Eu uso o Chrome para ver o result.
Consertei, fiz via Java.
Obrigado,
Resolviddo
É por que tem que estar entre aspas duplas ou simples:
background-image:url("Imagens/botao1.png");
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif