imagem sobre outra

Ivan161195 · Agosto 8, 2012

Galera alguém pode me ajudar tem uma bandera q fica no canto da pagina e quando eu diminuo a resoluçao da tela para 800X600 ela ta ficando em cima da imagem que ta escrito "Vereador Professor Neivaldo" como q eu faço para a imagem do "Vereador Professor Neivaldo" fica em cima da bandeira

A bandera fica na div="bandera"

e o neivaldo fica na div="neivaldo"(é a primeira imagem)

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" />
<meta name="author" content="Iventoo" />
<meta name="description" content="vereador Professor Neivaldo" />
<meta name="keywords" content="vereador Professor Neivaldo" />
<title>Vereador Professor Neivaldo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<!--Header-->
            
<div id="header">
<div id="bandera"><img src="header/bandeira-cort.fw.png" /></div>
    <div id="topo">
        <div id="alinhador">
            <!--Rede Sociais-->
            <div id="rede-sociais">
                <ul>
                    <li id="facebook" class="background">
                        <a href="" title="Facebook" target="_blank"></a>
                    </li>
                    <li id="twitter" class="background">
                        <a href="" title="Twitter" target="_blank"></a>
                    </li>
                    <li id="wordpress" class="background">
                        <a href="" title="WordPress" target="_blank"></a>
                    </li>
                    <li id="youtube" class="background">
                        <a href="" title="YouTube" target="_blank"></a>
                    </li>
                    <li id="flickr" class="background">
                        <a href="" title="Flickr" target="_blank"></a>
                    </li>
                    <li id="mail" class="background">
                        <a href="" title="E-mail" target="_blank"></a>
                    </li>
                </ul>
            </div>
            <!--Fim Rede Sociais-->
        </div>
        <div id="topo-foto">
            <div id="alin">
            <div id="fotos-tudo" style="position: relative; z-index: 20">
                 <div id="gilmar" style="position:relative;top:0px;left:530px;width: 250px;">
                    <img src="header/gilmar131.png" />
                    <img src="header/parceria.png" />
                </div>
                <div id="neivaldo" style="position: absolute; width: 561px; bottom: 0px;;">
                    <img src="header/neivaldo-num1.png" style="float:left; position: relative; top: 60px;z-index: 30"/>
                    <center><div><img src="header/neivaldo-gilmar.png" style="float:right; position:relative; top: 4px;"/></div></center>
                </div>
               </div>    
             </div>
        </div>
    </div>
<!--Menu Superior-->    
<div id="menu-superior">
    <div id="alinhador-m">
        <div id="menu">
            <ul>
                <li id="inicio">
                    <a href="">Inicio</a>
                </li>
                <li class="tarja"><img src="Botoes/Untitled-14.png" /></li>
                <li id="historico">
                    <a href="">Historico</a>
                </li>
                <li class="tarja"><img src="Botoes/Untitled-14.png" /></li>
                <li id="projetos">
                    <a href="">Projetos</a>
                </li>
                <li class="tarja"><img src="Botoes/Untitled-14.png" /></li>
                <li id="blog">
                    <a href="">Blog</a>
                </li>
                   <li class="tarja"><img src="Botoes/Untitled-14.png" /></li>
                <li id="contato">
                    <a href="">Contato</a>
                </li>
            </ul>
        </div>
    <div id="formulario">
        <form id="for">
            <input type="text" name="cbusca" value="Buscar no site" id="barra-busca"/>
            <input type="submit" id="image-buscar" value=""/>
        </form>
    </div>
    </div>
</div>
    </div>
</div>
<!--Fim Header-->
<!--************************-->
<!--************************-->
<!--************************-->
<!--Fim Corpo-->
</body>
</html>

CSS

*{margin: 0; padding: 0;}
/****Topo****/
#bandera{
    position: absolute;
    z-index: 3;
    width: 312px;
    height: 98px;
}
div#alin{
    margin: 0 auto;
    width: 790px;
    height: 180px;
}
div#alinhador{
    padding-top: 0px;
    margin: 0 auto;
    width: 790px;
    clear:both;
}
#body{
    font-family: Arial, Helvetica, sans-serif;
}
#topo{
    background: #EEE;
    height: 50px;
}
/****Rede Sociais****/
#rede-sociais{
    z-index: 50;
    width: 250px;
    height: 32px;
    position: relative;
    top: 7px;
    float: left;
}
#rede-sociais ul{
    list-style: none;
    padding: 0;
}
#rede-sociais li{
    float: left;
}
.background a{
    padding: 1px 16px 12px 16px;
}
#rede-sociais li#facebook a{
    background:url(rede%20sociais/facebook.png) no-repeat;
    margin-right: 10px;
}
#rede-sociais li#facebook a:hover{
    background: url(rede%20sociais/face-azul.png) no-repeat;
}
#rede-sociais li#twitter a{
    background:url(rede%20sociais/twitter.png) no-repeat;
    margin-right: 10px;
}
#rede-sociais li#twitter a:hover{
    background: url(rede%20sociais/twitter-azul.png) no-repeat;
}
#rede-sociais li#wordpress a{
    background:url(rede%20sociais/worpress.png) no-repeat;
    margin-right: 10px;
}
#rede-sociais li#wordpress a:hover{
    background:url(rede%20sociais/wordpress-azul.png) no-repeat;
}
#rede-sociais li#youtube a{
    background:url(rede%20sociais/youtube.png) no-repeat;
    margin-right: 10px;
}
#rede-sociais li#youtube a:hover{
    background:url(rede%20sociais/youtube-n.png) no-repeat;
}
#rede-sociais li#flickr a{
    background:url(rede%20sociais/flickr.png) no-repeat;
    margin-right: 10px;
}
#rede-sociais li#flickr a:hover{
    background: url(rede%20sociais/flickr-cor.png) no-repeat;
}
#rede-sociais li#mail a{
    background:url(rede%20sociais/mail.png) no-repeat;
}
#rede-sociais li#mail a:hover{
    background: url(rede%20sociais/mail-verm.png) no-repeat;
}
/****Fim Rede Sociais****/
#topo-foto{
    background:url(rede%20Sociais/fundo/cortado.jpg) center no-repeat;
    position:relative;
    z-index: 1;
    top: 22px;
}
/****MENU****/
#menu-superior{
    background:url(header/menu-fundo.fw.png) repeat-x;
    position: relative;
    top: 130px;
    z-index: 11;
    height: 30px;
}
div#alinhador-m{
    margin: 0 auto;
    width: 790px;
    padding-top: 6px;
}
#menu ul{
    padding: 0;
}
#menu li {
    list-style: none;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin-left: 10px;
}
#menu li#inicio{
    margin-left: 0px;
}
#menu li a{
    text-decoration: none;
    color: #FFF;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    margin-left: 0px;
    font-weight: bold;
}
#menu li a:hover{
    color: #900002;
}
#menu li#contato a{
    margin-right: 0px;
}
#image-buscar{
    background:url(Botoes/buscar.png) no-repeat;
    width: 65px;
    height: 21px;
}
.tarja{
    padding-top: 2px;
    margin-left: 10px;
    height: 10px;
}
#formulario{
    float: right;
    position: relative;
    bottom: 2px;
    right: 30px;
    z-index: 8;
}
/****Fim MENU****/
/****************/
/****Fim Topo****/
/****************/
/****Corpo****/
div#alinhador-corpo{
    width: 790px;
    margin: 0 auto;
    height: 0;
}

Me ajuda ai galera eu preciso disso o mais rapido possivel

T4TSU · Agosto 9, 2012

Tente mudar o css da

#bandera{
    position: absolute;
    z-index: 3;
    width: 312px;
    height: 98px;

PARA:

#bandera{
    position: relative;
    z-index: 3;
    width: 312px;
    height: 98px;

Pois o position absolute se sobrepoe, o z-index da div com o nome dele já esta com um z-index mais alto... então deve ser isso

Entrar

imagem sobre outra

Pergunta

Ivan161195

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

T4TSU

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades