Tabless

xerife

Membro
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);
}

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:
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
 
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).
 
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.
 
(...) mas gostava que resumidamente me explicasses as aterações que fizeste.
Não fiz nenhuma alteração. Fiz tudo de novo.

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);
Como não fiz o download das imagens, tive de usar esse método.

E outra coisa como conseguiste fazer «editável» os menus de navegação. Muito tentei e não consegui
O que queres dizer com 'editável'? São apenas imagens com links.
 
Back
Topo