1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Tabless

Discussão em 'Web Development' iniciada por xerife, 13 de Setembro de 2008. (Respostas: 6; Visualizações: 618)

  1. Boas,
    ja fiz 2 sites com tabelas, agora queria inovar e passar para o Tabless, isto é sem tabelas e substituir por Div´s. Comecei a fazer o site no Photoshop, fiz os recortes e agora estava a passar para o Dreamweaver. Não consigo colocar os menus de navegação ao lado do Logotipo dentro da #Header. Depois também não consigo linkar a imagem. Precisava de ajuda.
    Código:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
    <html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <title>Untitled Document</title>
    </head>
    <body>
    <div id="container">
      <div id="header">
     
          <div id="logotipo"></div>
        <div id="home"> </div>
        <div id="belaflor"></div>
        <div id="galeria"></div>
        <div id="contactos"></div>
     
      </div>
     
     <div id="barra"></div>
        <div id="menu">menu esquerdo</div>
      <div id="contents">conteudo</div>
       <div id="footer">rodapé</div>
    </div>
    </body>
    </html>
    
    css code
    Código:
    @charset "utf-8";
    /* CSS Document */
    #container{
    width:700px;
    height: 800px;
    background-color:#FFFBF0;
    }
    #header{
    width:700px;
    height:140px;
    }
    #menu{
    width: 192px;
    height: 540px;
    background-color:#D4FFAA;
    float:left;
    padding-right:11px;
    }
    #contents{
    width: 487px;
    height:540px;
    background-color:#2A1FFF;
    float:right;
    padding-left:10px;
    }
    #footer{
    width: 700px;
    height:48px;
    background-color:#808080;
    clear:both;
    }
    #barra{
    width:700px;
    height:30px;
    background:url(images/barraVermelha.jpg) no-repeat;
    float:inherit;
    }
    #logotipo {
     height: 108px;
     width: 221px;
     margin: 16px 0 16px 4px;
     background-image:url(images/logo.jpg);
    }
    #home {
     height: 47px;
     width: 91px;
     margin:53px 0 40px 229px;
     background-image:url(images/home.jpg);
    }
    #belaflor {
     height: 47px;
     width: 91px;
     margin:53px 0 40px 229px;
     /*margin:53px 0 40px 280px; */
     background-image:url(images/belaflor.jpg);
    }
    #servicos {
     height: 47px;
     width: 91px;
     background-image:url(images/servicos.jpg);
    }
    #galeria {
     height: 47px;
     width: 91px;
     background-image:url(images/galeria.jpg);
    }
    #contactos {
     height: 47px;
     width: 91px;
     background-image:url(images/contactos.jpg);
    }
    [​IMG]
    url do site com tabelas só pra ficarem com ideia do que pretendo mas não estou a conseguir com as divs.
    http://abelaflor.no.sapo.pt
     
    Última edição: 13 de Setembro de 2008
  2. nopaysoft

    nopaysoft Power Member

    Só olhei por alto portanto até pode faltar mais do que o que vou dizer mas à partida tens já o problema que nunca te deixaria produzir o resultado que querias. ;)
    Estas divs:
    logotipo, home, belaflor, galeria, contactos (e todas a que desejes produzir o efeito como no menu)
    devem ter no css:
    float:left;
    e claro, mas parece que já tens width definida ;)

    Cumps
     
  3. ainda não funca. Fiz as alterações mas os menus ficam fora do #Header.
    Ficam alinhados á esquerda, mas saem para fora do header.
     
  4. slack_guy

    slack_guy Power Member

    Vê lá se isto presta para alguma coisa:
    Código:
    <!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=iso8859-1" />
            <link href="styles.css" rel="stylesheet" type="text/css" />
            <title>A BELA FLOR</title>
            <style type='text/css'>
                body {
                    width : 698px;
                    margin : 0px 0px;
                    padding : 0px 0px;
                }
                img { border : 0px; }
    
                /* -------------- TOPO ------------ */
                #box_topo {
                    width : 100%;
                    background : #214D4C;
                    height : 140px;
                    border-bottom : 3px solid #FF3332;
                    display : inline-block;
                    clear : both;
                    overflow : hidden;
                }
                #box_logo {
                    width : 221px;
                    height : 108px;
                    display : block;
                    padding : 16px 1px 0px 4px;
                    border : 0px solid red;
                    float : left;
                    overflow : hidden;
                }
                #box_links_topo {
                    display : block;
                    float : left;
                    border : 0px solid red;
                    padding : 65px 4px 0px 4px;
                    overflow : hidden;
                }
                #box_links_topo a {
                    display : block;
                    float : left;
                    padding : 0px 1px 0px 0px;
                }
    
                /* -------------- CENTRO ------------ */
                #box_centro {
                    background : #013334;
                    padding : 15px 0px 0px 0px;
                    display : inline-block;
                    overflow : hidden;
                }
                #box_menus {
                    width : 200px;
                    display : block;
                    float : left;
                    overflow : hidden;
                }
                #box_conteudo {
                    width : 498px;
                    display : block;
                    float : left;
                }
    
                /* -------------- MENUS ------------ */
                .menu {
                    display : block;
                    clear : both;
                    width : 190px;
                    margin : 5px 5px 0px 10px;
                    background : #134141;
                }
    
                .menu a {
                    display : block;
                    clear : both;
                    width : 192px;
                    overflow : hidden;
                    padding : 0px 0px 0px 0px;
                }
                .topo_menu {
                    background : url('http://abelaflor.no.sapo.pt/images/logoSidebar.jpg') no-repeat;
                    width : 190px;
                    padding : 0px 5px 5px 10px;
                    height : 27px;
                    display : block;
                    overflow : hidden;
                }
                #topo_menu_ocasiao {
                    background : url('http://abelaflor.no.sapo.pt/images/infoSidebar.jpg') no-repeat;
                    margin : 0px 0px 0px 31px;
                    height : 27px;
                }
                #topo_menu_seleccao {
                    background : url('http://abelaflor.no.sapo.pt/images/infoSidebar1.jpg') no-repeat;
                    margin : 0px 0px 0px 31px;
                    height : 27px;
                }
                #topo_menu_links {
                    background : url('http://abelaflor.no.sapo.pt/images/infoSidebar2.jpg') no-repeat;
                    margin : 0px 0px 0px 31px;
                    height : 27px;
                }
                .menu_fim {
                    background : url('http://abelaflor.no.sapo.pt/images/layout_54.jpg') no-repeat;
                    width : 190px;
                    height : 18px;
                    display : block;
                }
    
                /* -------------- CONTEUDO ------------ */
                #box_main {
                    display : block;
                    clear : both;
                    width : 486px;
                    margin : 0px 0px 0px 5px;
                    background : #fff;
                    min-height : 400px;
                }
                #topo_conteudo {
                    background : url('http://abelaflor.no.sapo.pt/images/logoConteudo.jpg') no-repeat;
                    padding : 0px 0px 0px 82px;
                    height : 33px;
                    border-bottom : 1px solid #999;
                }
                #topo_main {
                    background : url('http://abelaflor.no.sapo.pt/images/infoConteudo.jpg') no-repeat;
                    padding : 0px 0px 0px 83px;
                    height : 33px;
                    width : 404px;
                }
    
                /* -------------- RODAPE ------------ */
                #box_rodape {
                    width : 100%;
                    background : #013334;
                    height : 50px;
                    display : inline-block;
                    clear : both;
                    overflow : hidden;
                }
                #rodape_menu {
                    display : block;
                    background : url('http://abelaflor.no.sapo.pt/images/layout_77.jpg') repeat-x;
                    width : 190px;
                    min-height : 48px;
                    margin : 0px 5px 0px 10px;
                    float : left;
                }
                #rodape_main {
                    display : block;
                    background : #184848;
                    width : 486px;
                    min-height : 48px;
                    margin : 0px 5px 0px 0px;
                    float : left;
                }
    
            </style>
        </head>
        <body>
            <!-- TOPO -->
            <div id='box_topo'>
                <div id='box_logo'><img src='http://abelaflor.no.sapo.pt/images/logo.jpg' alt='Home Page' /></div>
                <div id='box_links_topo'>
                    <a href=''><img src='http://abelaflor.no.sapo.pt/images/home.jpg' alt='Home Page' /></a>
                    <a href=''><img src='http://abelaflor.no.sapo.pt/images/belaflor.jpg' alt='Bela Flor' /></a>
                    <a href=''><img src='http://abelaflor.no.sapo.pt/images/servicos.jpg' alt='Serviços' /></a>
                    <a href=''><img src='http://abelaflor.no.sapo.pt/images/galeria.jpg' alt='Galeria' /></a>
                    <a href=''><img src='http://abelaflor.no.sapo.pt/images/contactos.jpg' alt='Contactos' /></a>
                </div>
            </div>
    
            <!-- CENTRO -->
            <div id='box_centro'>
                <div id='box_menus'>
                    <div class='menu'>
                        <div class='topo_menu'><div id='topo_menu_ocasiao'></div></div>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets.jpg' alt='.' /></a>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets-36.jpg' alt='.' /></a>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets-40.jpg' alt='.' /></a>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets-43.jpg' alt='.' /></a>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets-46.jpg' alt='.' /></a>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets-48.jpg' alt='.' /></a>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets-50.jpg' alt='.' /></a>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets-52.jpg' alt='.' /></a>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets-54.jpg' alt='.' /></a>
                        <div class='menu_fim'>&nbsp;</div>
                    </div>
    
                    <div class='menu'>
                        <div class='topo_menu'><div id='topo_menu_seleccao'></div></div>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets.jpg' alt='.' /></a>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets-36.jpg' alt='.' /></a>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets-40.jpg' alt='.' /></a>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets-43.jpg' alt='.' /></a>
                        <div class='menu_fim'>&nbsp;</div>
                    </div>
    
                    <div class='menu'>
                        <div class='topo_menu'><div id='topo_menu_links'></div></div>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets.jpg' alt='.' /></a>
                        <a href=''><img src='http://abelaflor.no.sapo.pt/images/bouquets-36.jpg' alt='.' /></a>
                        <div class='menu_fim'>&nbsp;</div>
                    </div>
    
                </div>
    
                <div id='box_conteudo'>
                    <div id='box_main'>
                        <div id='topo_conteudo'><div id='topo_main'></div></div>
                        texto
                    </div>
    
                </div>
    
            </div>
    
            <!-- RODAPE -->
            <div id='box_rodape'>
                <div id='rodape_menu'></div>
                <div id='rodape_main'></div>
            </div>
        </body>
    </html>
    
    Nota: tens de cortar melhor as imagens, principalmente as dos links (topo e menus).
     
  5. Obrigadissimo Slack_guy pelo tempo que perdeste para me tentar ajudar.
    Realmente funciona, mas gostava que resumidamente me explicasses as aterações que fizeste.
    Porque é que utilizaste os links do url? Se tivesses as imagens no teu desktop era igual, ou não? Por exemplo background-image:url(images/belaflor.jpg);
    E outra coisa como conseguiste fazer «editável» os menus de navegação. Muito tentei e não consegui.
    Obrigado.
     
  6. slack_guy

    slack_guy Power Member

    Não fiz nenhuma alteração. Fiz tudo de novo.

    Como não fiz o download das imagens, tive de usar esse método.

    O que queres dizer com 'editável'? São apenas imagens com links.
     

Partilhar esta Página