problemas e mais problemas. [EDIT]

Mad · Março 25, 2011

Oi gente, é.. eu sou novo aqui no fórum, conheci através de um amigo e acho que um de vocês pode me ajudar rs.

Não sou exatamente um 'expert' nisso, pois tudo que sei aprendi na internet, então vários, senão todos os erros devem estar diretamente relacionados rs.

Certo, aqui vão as dúvidas/erros:

Duvida
Como eu faço pra deixar o layout num modelo 'fixado' para que nada de mexa pra lado nenhum independente da resolução? (to desenvolvendo o site num monitor de 1360x768)
Problema
Os botões de mídia social no topo vão para a esquerda e o box de pesquisa pra direita ao ir pra uma resolução maior.

Duvida
Como eu faço pra transformar as 'imagens-links' em links clicáveis?
Problema
Os links de mídia social, da barra de menu e os botões no layout, apesar de mudarem com o comando hover não são links clicáveis, mesmo com a tag <a href> em cada um deles.

Duvida/Problema
As partes da Discografia e do Facebook simplesmente resolveram não funcionar, e nada do que eu faço funciona pra eles serem exibidos de maneira correta. O que exatamente aconteceu?

____

Consegui liberação pra subir os arquivos via ftp, fica mais facil de vizualizar o problema, acho.

Aqui o link do site

http://jotadomingos.com.br/newsite/index.html

na verdade o css carrega 4 'sheets' (acho que é esse o nome) porque três são da parte de slides.

O 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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/platformhttp://www.facebook.com/#!/pages/Jota-Domingos/141438965914912" width="645" colorscheme="dark" show_faces="true" stream="false" header="true"></fb:like-box>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jota Domingos :: Home</title>
</head>

<body>
<div id="geral">a
    <div id="header">a
        <div id="titulo">b
            <div id="menusocial">
                <p class="facebook"><a href="#">facebook</a></p>
                <p class="orkut"><a href="#">orkut</a></p>
                <p class="youtube"><a href="#">youtube</a></p>
                <p class="twitter"><a href="#">twitter</a></p>
            </div>
            <div id="pesquisa"><input name="pesquisar" type="text" value="Digite sua pesquisa aqui..." />
            </div>
            <div id="musicplayer">
                
            </div>
        </div>
        <div id="menu">
            <p class="homeactive"><a href="#">home</a></p>
            <p class="fotos"><a href="#">fotos</a></p>
            <p class="videos"><a href="#">videos</a></p>
            <p class="discografia"><a href="#">discografia</a></p>
            <p class="blog"><a href="#">blog</a></p>
            <p class="shows"><a href="#">shows</a></p>
            <p class="contato"><a href="#">contato</a></p>
            <p class="anuncie"><a href="#">anuncie</a></p>
        </div>
        <div id="corpo">c
                <script type="text/javascript">
                    function startGallery() {
                        var myGallery = new gallery($('myGallery'), {
                            timed: true
                        });
                    }
                    window.addEvent('domready',startGallery);
                </script>
                <div class="content">
                    <div id="myGallery">
                        <div class="imageElement">
                            <h3>Entrevista com alguém</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <a href="#" title="open image" class="open"></a>
                            <img src="images/brugges2006/1.jpg" class="full" />
                            <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
                        </div>
                        <div class="imageElement">
                            <h3>Show em algum lugar</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <a href="#" title="open image" class="open"></a>
                            <img src="images/brugges2006/2.jpg" class="full" />
                            <img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
                        </div>
                        <div class="imageElement">
                            <h3>Irmãs Galvão</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <a href="#" title="open image" class="open"></a>
                            <img src="images/brugges2006/3.jpg" class="full" />
                            <img src="images/brugges2006/3-mini.jpg" class="thumbnail" />
                        </div>
                        <div class="imageElement">
                            <h3>Rio Negro & Solimões</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <a href="#" title="open image" class="open"></a>
                            <img src="images/brugges2006/4.jpg" class="full" />
                            <img src="images/brugges2006/4-mini.jpg" class="thumbnail" />
                        </div>
                        <div class="imageElement">
                            <h3>Entrevista em outro lugar</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <a href="#" title="open image" class="open"></a>
                            <img src="images/brugges2006/5.jpg" class="full" />
                            <img src="images/brugges2006/5-mini.jpg" class="thumbnail" />
                        </div>
                    </div>
                </div>
                <div id="tweets">a
                    <div id="tweetstopo">b
                    </div>
                    <div id="twittadas">
                    <ul id="twitter_update_list"><li>Twitter feed loading</li></ul>
                    </div><br />
                    <div id="seguirtwitter"><p class="botaoseguir"><a href="#">seguir</a></p>
                    </div>
                </div>
                <div id="dividerA">a
                </div>
                <div id="fotosrecentes">a
                    <p class="tfotosrecentes">fotosrecentes</p>
                    <div id="fotosr"><a href="#"><img src="img/fr_p1.jpg" /></a><a href="#"><img src="img/fr_p2.jpg" /></a><a href="#"><img src="img/fr_p3.jpg" /></a><a href="#"><img src="img/fr_p4.jpg" /></a>
                    </div>
                    <div id="todasfotos"><p class="botaofotos"><a href="#">veja a galeria completa</a></p>
                    </div>
                </div>
                <div id="dividerA">a
                </div>
                <div id="videosrecentes">a
                    <p class="tvideosrecentes">videosrecentes</p>
                    <div id="videosconstrucao">em construção</div>
                </div>
                <div id="dividerA">a
                </div>
                <div id="blog">
                    <p class="blogtitulo">Blog Postagens</p>
                        <div id="post1">
                            <p class="titulopostagem"><a href="#">Show em São Paulo/SP</a></p>
                            <p class="infopostagem"><i><u>05/03/2011</u> por <b><a href="#">Autor</a></b> - <a href="#">04 Comentários.</a></i></p>
                            <div align="justify" id="postagem"><p class="postagem"><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum egestas dictum. Pellentesque ligula est, venenatis at commodo vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum egestas dictum. Pellentesque ligula est, venenatis at commodo vitae...</i></p></div>
                            <div id="continuarlendo"><p class="continuarlendo"><a href="#">Continuar Lendo..."</a></p></div>
                        </div>
                        <div id="dividerS">s
                        </div>
                        <div id="post2">
                            <p class="titulopostagem"><a href="#">Show em Osasco/SP</a></p>
                            <p class="infopostagem"><i><u>01/01/2011</u> por <b><a href="#">Autor</a></b> - <a href="#">24 Comentários.</a></i></p>
                            <div align="justify" id="postagem"><p class="postagem"><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum egestas dictum. Pellentesque ligula est, venenatis at commodo vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum egestas dictum. Pellentesque ligula est, venenatis at commodo vitae...</i></p></div>
                            <div id="continuarlendo"><p class="continuarlendo"><a href="#">Continuar Lendo..."</a></p></div>
                        </div>
                </div>
                <div id="dividerB">b
                </div>
                <div id="discographic">d
                    <div id="discotitulo">Discografia</div>
                </div>
                <div id="dividerC">b
                </div>
                <div id="facebook">
                    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatformhttp%3A%2F%2Fwww.facebook.com%2F%23%21%2Fpages%2FJota-Domingos%2F141438965914912&amp;width=655&amp;colorscheme=dark&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=300" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:655px; height:300px;" allowTransparency="true"></iframe>
                </div>
        </div>
        <div id="rodape">
            <div id="linksrodape">
                <a href="#">Home</a> | <a href="#">Fotos</a> | <a href="#">Vídeos</a> | <a href="#">Discografia</a> | <a href="#">Blog</a> | <a href="#">Shows</a> | <a href="#">Contato</a> | <a href="#">Anuncie</a>
            </div>
        </div>
        <div id="spacer">a
        </div>
        <div id="rotulo"><img src="img/copyright.png" />
        </div>
        <div id="massive"><a href="#"><img src="img/massivearts.png" /></a>
    </div>
</div>
<script type="text/javascript" src="scripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/JDomingos_Real.json?callback=twitterCallback2&count=3"></script>
</body>
</html>

e o css:

@charset "utf-8";

* {
    margin:0;
    padding:0;
    background:url(../img/bg.jpg);
    font-family:"HelveticaNeueLT Com 65 Md";
}

#geral {
    background:url(../img/bg.jpg);
    font-size:0%;
}

#header {
    height:320px;
    text-align:center;
    background:#000;
    font-size:0%;
    border-bottom:#FFF 1px solid;
}

#input {
    background-image:none;
}

#menusocial {
    float:left;
    background-image:none;
    margin:0 0 0 550px;
    position:static;
}

#menusocial p {
    display:inline;
    float:left;
    margin: 35px 5px 5px 5px;
}

.facebook {
    width:51px;
    height:54px;
    background:url(../img/facebook_bt.png) no-repeat bottom;
}

.facebook:hover {
    width:51px;
    height:54px;
    background:url(../img/facebook_bt.png) no-repeat top;
}

.orkut {
    width:51px;
    height:54px;
    background:url(../img/orkut_bt.png) no-repeat bottom;
}

.orkut:hover {
    width:51px;
    height:54px;
    background:url(../img/orkut_bt.png) no-repeat top;
}

.youtube {
    width:51px;
    height:54px;
    background:url(../img/youtube_bt.png) no-repeat bottom;
    
}

.youtube:hover {
    width:51px;
    height:54px;
    background:url(../img/youtube_bt.png) no-repeat top;
}

.twitter {
    width:51px;
    height:54px;
    background:url(../img/twitter_bt.png) no-repeat bottom;
}

.twitter:hover {
    width:51px;
    height:54px;
    background:url(../img/twitter_bt.png) no-repeat top;
}

#pesquisa {
    background:url(../img/pesquisa_base.png);
    width:250px;
    height:31px;
    font-family:"HelveticaNeueLT Com 65 Md";
    font-size:14px;
    float:right;
    margin: 45px 200px 0 0;
}

#pesquisa input {
    background-image:none;
    border:none;
    font-family:"HelveticaNeueLT Com 65 Md";
    width:200px;
    height:auto;
    margin:7px 0 0 30px;
}

#principal {
    width:auto;
}

#titulo {
    background:url(../img/header_title.jpg) center no-repeat;
    height:320px;
    width:auto;
}

#musicplayer {
    margin:160px 350px 200px 200px;
    background-image:none;
    float:right;
}

#menu {
    background:url(../img/menu_bg.jpg) center repeat-x;
    width:1000px;
    height:33px;
    text-align:center;
    margin:0 auto;
}

#menu p {
    display:inline;
    float:left;
}

.home {
    width:59px;
    height:31px;
    background:url(../img/home.png) no-repeat;
    background-position:top;
}

.homeactive {
    width:59px;
    height:31px;
    background:url(../img/home.png) no-repeat;
    background-position:bottom;
}

.home:hover {
    width:59px;
    height:31px;
    background:url(../img/home.png) no-repeat;
    background-position:bottom;
}

.fotos {
    width:56px;
    height:31px;
    background:url(../img/fotos.png) no-repeat;
    background-position:top;
}

.fotos:hover {
    width:56px;
    height:31px;
    background:url(../img/fotos.png) no-repeat;
    background-position:bottom;
}

.fotosactive {
    width:56px;
    height:31px;
    background:url(../img/fotos.png) no-repeat;
    background-position:bottom;
}

.videos {
    width:63px;
    height:31px;
    background:url(../img/videos.png) no-repeat;
    background-position:top;
}

.videos:hover {
    width:63px;
    height:31px;
    background:url(../img/videos.png) no-repeat;
    background-position:bottom;
}

.videosactive {
    width:63px;
    height:31px;
    background:url(../img/videos.png) no-repeat;
    background-position:bottom;
}

.discografia {
    width:94px;
    height:31px;
    background:url(../img/discografia.png) no-repeat;
    background-position:top;
}

.discografia:hover {
    width:94px;
    height:31px;
    background:url(../img/discografia.png) no-repeat;
    background-position:bottom;
}

.discografiaactive {
    width:94px;
    height:31px;
    background:url(../img/discografia.png) no-repeat;
    background-position:bottom;
}

.blog {
    width:49px;
    height:31px;
    background:url(../img/blog.png) no-repeat;
    background-position:top;
}

.blog:hover {
    width:49px;
    height:31px;
    background:url(../img/blog.png) no-repeat;
    background-position:bottom;
}

.blogactive {
    width:49px;
    height:31px;
    background:url(../img/blog.png) no-repeat;
    background-position:bottom;
}

.shows {
    width:63px;
    height:31px;
    background:url(../img/shows.png) no-repeat;
    background-position:top;
}

.shows:hover {
    width:63px;
    height:31px;
    background:url(../img/shows.png) no-repeat;
    background-position:bottom;
}

.showsactive {
    width:63px;
    height:31px;
    background:url(../img/shows.png) no-repeat;
    background-position:bottom;
}

.contato {
    width:72px;
    height:31px;
    background:url(../img/contato.png) no-repeat;
    background-position:top;
}

.contato:hover {
    width:72px;
    height:31px;
    background:url(../img/contato.png) no-repeat;
    background-position:bottom;
}

.contatoactive {
    width:72px;
    height:31px;
    background:url(../img/contato.png) no-repeat;
    background-position:bottom;
}

.anuncie {
    width:70px;
    height:31px;
    background:url(../img/anuncie.png) no-repeat;
    background-position:top;
}

.anuncie:hover {
    width:70px;
    height:31px;
    background:url(../img/anuncie.png) no-repeat;
    background-position:bottom;
}

anuncieactive {
    width:70px;
    height:31px;
    background:url(../img/anuncie.png) no-repeat;
    background-position:bottom;
}

#corpo {
    background:url(../img/corpo_bg.png) repeat-y;
    width:1014px;
    height:1800px;
    text-align:center;
    margin:0 auto;
}

#tweets {
    float:right;
    background-image:none;
    margin:-68px 35px 0 0;
}

#tweetstopo {
    background:url(../img/ultimostweets.png) no-repeat;
    width:415px;
    height:58px;
}

#twittadas {
    background-image:none;
    font-size:9px;
    text-decoration:none;
    width:400px;
    float:right;
    background-image:none;
}

#twittadas ul {
    background-image:none;
    list-style:none;
}

#twittadas ul li {
    background-image:none;
}

#seguirtwitter {
    float:left;
    background-image:none;
}

.botaoseguir {
    background:url(../img/seguir_twitter.png) no-repeat bottom;
    width:127px;
    height:27px;
}

.botaoseguir:hover {
    background:url(../img/seguir_twitter.png) no-repeat;
    width:127px;
    height:27px;
}


#dividerA {
    background:url(../img/divider.jpg) repeat-x;
    width:1000px;
    height:2px;
    margin:20px 0 0 7px;
    float:left;
}

#dividerS {
    background:url(../img/divider.jpg) repeat-x;
    width:311px;
    height:2px;
    margin:20px 0 0 -13px;
    float:left;
}

#dividerB {
    background:url(../img/divider_v.jpg) repeat-y;
    width:2px;
    height:570px;
    float:left;
    margin:2px 0 0 0;
}

#dividerC {
    background:url(../img/divider.jpg) repeat-x;
    width:600px;
    height:2px;
    margin:-200px 0 0 350px;
    float:left;
}

#rodape {
    background:url(../img/rodape.png) no-repeat;
    width:1014px;
    height:41px;
    text-align:center;
    margin:0 auto;
    font-size:16px;
    font-family:Verdana, Geneva, sans-serif;
    text-decoration:none;
}

#rodape a {
    color:#FFF;
    text-decoration:none;
    background-image:none;
    text-shadow: 0px 1px 0px #000;
}

#rodape a:hover {
    background-image:none;
    text-shadow: 0 0 2px #f7e2ad, 0 0 10px #f7e2ad, 0 0 7px #f7e2ad, 0 0 10px #43310d, 0 0 15px #43310d, 0 0 20px #43310d, 0 0 50px #43310d, 0 0 30px #43310d;
}

#linksrodape {
    background-image:none;
}

#spacer {
    height:60px;
    background-image:none;
}

#rotulo {
    background:url(../img/gradiente_barra.jpg) repeat-x;
    width:auto;
    height:30px;
    text-align:center;
}

#rotulo img {
    background-image:none;
    margin: 7px 0 0 0;
    border:hidden;
    list-style:none
}

#massive {
    float:right;
    margin: 5px 20px 0 0;
}

#massive a img {
    outline:none;
    border-width:0;
}

#twitter_update_list {
    background-image:none;
    font-size: 13px;
    line-height: 21px;
    list-style: none;
}

#twitter_update_list li {
    background:url(../img/divider.jpg) repeat-x fixed;
    padding-bottom: 7px;
    margin-bottom: 9px;
    width:415px;
    margin:0 0 0 -10px;
    font-style:italic;
}

#twitter_update_list span, #twitter_update_list span a {
    color: #ababab;
    text-decoration: none;
    background-image:none;
}

#twitter_update_list a {
    color: #6f7276;
    background-image:none;
    font-variant:small-caps;
}

#fotosrecentes {
    float:left;
    background-image:none;
    margin:10px 0 0 100px;
    height:230px;
    width:1000px;
}

.tfotosrecentes {
    background:url(../img/FotosRecentes.png) no-repeat;
    width:315px;
    height:38px;
}

#fotosr {
    background-image:none;
    float:left;
    margin:20px 0 0 -40px;
}

#fotosr img {
    margin:0 10px 0 10px;
}

#fotosr a img {
    outline:none;
    border-width:0;
}

#todasfotos {
    float:right;
    background-image:none;
    margin:20px 167px 0 0;
}

.botaofotos {
    background:url(../img/mais_fotos.png) no-repeat bottom;
    width:176px;
    height:33px;
}

.botaofotos:hover {
    background:url(../img/mais_fotos.png) no-repeat top;
    width:176px;
    height:33px;
}

#videosrecentes {
    float:left;
    background-image:none;
    margin:10px 0 0 100px;
    height:190px;
    width:1000px;
}

.tvideosrecentes {
    background:url(../img/VideosRecentes.png) no-repeat;
    width:334px;
    height:38px;
}

#videosconstrucao {
    background:url(../img/em_construcao.png) no-repeat;
    width:444px;
    float:left;
    height:117px;
    margin:30px 200px 0 180px;
}

#blog {
    background-image:none;
    float:left;
    height:400px;
    width:300px;
    margin:10px 0 0 20px;
}

#blog a {
    color:#999;
    text-decoration:underline;
    background-image:none;
    text-shadow: 0px 1px 0px #000;
}

#blog a:hover {
    color:#FFF;
    background-image:none;
    text-shadow: 0 0 2px #f7e2ad, 0 0 10px #f7e2ad, 0 0 7px #f7e2ad, 0 0 10px #43310d, 0 0 15px #43310d, 0 0 20px #43310d, 0 0 50px #43310d, 0 0 30px #43310d;
}

#blog b {
    background-image:none;
    color:#999;
}

#blog i {
    background-image:none;
    color:#999;
}

#blog u {
    background-image:none;
    color:#999;
}

.blogtitulo {
    background:url(../img/BlogPostagens.png) no-repeat;
    width:275px;
    height:34px;
}

.titulopostagem {
    margin:20px 0 0 -15px;
    background-image:none;
    font-size:20px;
    color:#FFF;
}

.infopostagem {
    font-size:14px;
    background-image:none;
    margin:2px 0 0 -15px;
    color:#999;
}

.postagem {
    font-size:14px;
    background-image:none;
    margin:10px 0 0 -15px;
    color:#999;
}

#postagem {
    background-image:none;
    width:264px;
    height:auto;
    margin:0 0 0 20px;
}

#continuarlendo {
    background:url(../img/continuar_lendo.png) no-repeat bottom;
    width:122px;
    height:27px;
    float:right;
    margin:20px 15px 0 10px;
}

#continuarlendo:hover {
    background:url(../img/continuar_lendo.png) no-repeat top;
    width:122px;
    height:27px;
    float:right;
}

.continuarlendo {
    background-image:none;
}

#post1 {
    background-image:none;
}

#post2 {
    background-image:none;
    margin:90px 0 0 0;
}

#discographic {
    float:right;
    width:300px;
    height:100px;
    margin:10px 370px 0 20px;
    font-size:20px;
}

#discotitulo {
    background:url(../img/TituloDiscografia.png) no-repeat;
    width:228px;
    height34px;
}

.TDisco {
    background-image:none;
}

#facebook {
    background-image:none;
    margin:-190px 0 0 350px;
    float:left;
}

#facebook iframe {
    background-image:none;
}

Grato desde já!

Editado Março 28, 2011 por Mad

Mad · Março 28, 2011

up.

_Vinny_ · Março 28, 2011

Sem UP, por favor. Leias as regras do fórum: http://scriptbrasil.com.br/forum/index.php?act=boardrules

1 - Para tornar site fixo, precisa definir um tamanho fixo a ele, ou seja, a largura no site deve ser definida em um valor fixo em pixels.

2 - Os links clicaveis com imagens devem ser feitos da seguinte forma:

<a href="http://www.google.com.br"><img src="http://www.google.com.br/images/logo.gif" alt="*" /></a>

3 - Qual é exatamente os erros/problemas nesta parte?

Mad · Março 28, 2011

Sem UP, por favor. Leias as regras do fórum: http://scriptbrasil.com.br/forum/index.php?act=boardrules
1 - Para tornar site fixo, precisa definir um tamanho fixo a ele, ou seja, a largura no site deve ser definida em um valor fixo em pixels.
2 - Os links clicaveis com imagens devem ser feitos da seguinte forma:
<a href="http://www.google.com.br"><img src="http://www.google.com.br/images/logo.gif" alt="*" /></a>
3 - Qual é exatamente os erros/problemas nesta parte?

Desculpe sobre a parte do up, falha minha rs.

Então, nessa parte eu consegui resolver, foi só definir no css o width e o height da tag 'a' e mudar de <p> independente pra uma ul com vários li com classes.

O que eu to batendo na mesma tecla ainda é sobre a parte do layout lá embaixo. '-'

_Vinny_ · Março 29, 2011

Explique melhor sobre o problema no rodape do layout.

Alias, tentei acessar o URL do seu site para visualizar melhor, e ele esta fora do ar.

Entrar

problemas e mais problemas. [EDIT]

Pergunta

Mad

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

Mad

Link para o comentário

Compartilhar em outros sites

_Vinny_

Link para o comentário

Compartilhar em outros sites

Mad

Link para o comentário

Compartilhar em outros sites

_Vinny_

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades