Tags UL e UI

[robson cavalcante 0]

Caro Maurício,tenho um site www.informandos.com.br no ar, porém criei um menu drop-down horizontal utilizando o próprio Dreamweaver, trabalhando com camadas, etc. Ao utilizar o Dreamweaver, tive sérios problemas quanto ao Mouse Over e Mouse Out, pois quando tiro o mouse sobre o mesmo ele se contrai de forma muito rápida e as vezes o usuário nem consegue se quer ter tempo entre o link do menu e a caixa que se abre. Já tentei a possibilidade de usar a timeline do Dreamweaver, mais foi algo sem sucesso.Andei dando uma pesquisada nos seus tutoriais e deparei com o tal de UL e LI. Tentei somente pesquisar mais não obtive nenhum sucesso quanto as bordas, já que no meu site,se olhar sobre os menus elas aparentam como tracejado nas bordas, porém, eu utilizo dentro das caixas, tabelas e assim respectivamente imagens, fica fácil de aplicar desta forma.Tenho uma pergunta, pois nunca vi uma tag UL e UI. Dá para aplicar tabelas dentro destas tags? como funcionam realmente.Se puder me ajudar agradeço e muito.Abraços.

[pa_bruno 0]

faz uma pesquisa ae no forum... tem alguns topicos sobre menus deste estilo... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[robson cavalcante 0]

faz uma pesquisa ae no forum... tem alguns topicos sobre menus deste estilo...  http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

<{POST_SNAPBACK}>

sabemos que tem, porém quero studar as tags que o Maurício Samy postou na página pessoal.

 

Abraços.

[pa_bruno 0]

cara, <ul> saum listas naum ordenadas... assim como <ol> saum listas ordenadas... <li> saum seus respectivos itens... ae você poderia fazer uma busca no forum d html mesmo... ou entaum apostilas por ae na internet, ou ateh mesmo no imasters... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[robson cavalcante 0]

cara, <ul> saum listas naum ordenadas... assim como <ol> saum listas ordenadas... <li> saum seus respectivos itens... ae você poderia fazer uma busca no forum d html mesmo... ou entaum apostilas por ae na internet, ou ateh mesmo no imasters... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Ok. Obrigado brumo.Abraços.

[pa_bruno 0]

falae robson, malz se naum mostrei o q eh... mas eh q aki naum seria o lugar certo e sim no forum d html, q lah q fala sobre tags html, etc... ;)

 

mas foi como eu disse, ul saum listas naum ordenadas e ol ordenadas, li saum seus itens, um exemplo:

<ol>

<li>Primeiro Item</li>

<li>Segundo Item</li>

<li>Terceiro Item</li>

<li>Quarto Item</li>

</ol>

 

isso fará o seguinte layout:

[*]Primeiro Item

[*]Segundo Item

[*]Terceiro Item

[*]Quarto Item

ou entaum:

<ul>

<li>Primeiro Item</li>

<li>Segundo Item</li>

<li>Terceiro Item</li>

<li>Quarto Item</li>

</ul>

 

isso fará o seguinte layout:

[*]Primeiro Item

[*]Segundo Item

[*]Terceiro Item

[*]Quarto Item

deu pra dar uma clareada? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[robson cavalcante 0]

falae robson, malz se naum mostrei o q eh... mas eh q aki naum seria o lugar certo e sim no forum d html, q lah q fala sobre tags html, etc... ;)

 

mas foi como eu disse, ul saum listas naum ordenadas e ol ordenadas, li saum seus itens, um exemplo:

<ol>

<li>Primeiro Item</li>

<li>Segundo Item</li>

<li>Terceiro Item</li>

<li>Quarto Item</li>

</ol>

 

isso fará o seguinte layout:

[*]Primeiro Item

 

[*]Segundo Item

 

[*]Terceiro Item

 

[*]Quarto Item

ou entaum:

<ul>

<li>Primeiro Item</li>

<li>Segundo Item</li>

<li>Terceiro Item</li>

<li>Quarto Item</li>

</ul>

 

isso fará o seguinte layout:

[*]Primeiro Item

 

[*]Segundo Item

 

[*]Terceiro Item

 

[*]Quarto Item

deu pra dar uma clareada? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Fala Bruno.. beleza?

Bom vamos lá.. a sua explicação beleza.. porém, gostaria de saber se dá para colocar <Table><tr><td> dentro das UL e UI.

 

Abraços amigo.

[pa_bruno 0]

q dah, dah... mas eh a semantica eh cpompletamente incorreta... pq você quer colocar tabelas dentro d li's??

[robson cavalcante 0]

q dah, dah... mas eh a semantica eh cpompletamente incorreta... pq você quer colocar tabelas dentro d li's??

Por favor, de uma olhada em meu site www.informandos.com.br e veja o menu, tem imagens para formar os serrilhados.O problema deste meu menu, é que uso mouse over e mouse out, é muito rápido até a chegada do mouse sobre o submenu. Tentei usar Timeline pelo Dreamweaver mais foi sem sucesso.Abraços.

[pa_bruno 0]

cara, ae isso jah naum eh tableless, webstandards... ve lah com o pessoal d html, etc... pq o modo como está fazendo o menu eh completamente incorreto na parte d webstandards... foi postado um topico sobre menus dropdows em css, caso seja de seu interesse transformá-lo em menu totalmente css... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[robson cavalcante 0]

cara, ae isso jah naum eh tableless, webstandards... ve lah com o pessoal d html, etc... pq o modo como está fazendo o menu eh completamente incorreto na parte d webstandards... foi postado um topico sobre menus dropdows em css, caso seja de seu interesse transformá-lo em menu totalmente css... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Bruno, quanto ao Fórum, eu sei que o que fiz é em HTML, porém gostaria de avaliar o uso que fez Maurício em relação ao CSS, qué fica mais leve em relação ao que fiz.Vou procurar me informar quanto ao fórum ou de HTML ou Dreamweaver para ver o que falta fazer.Abraços.

[pa_bruno 0]

fica muito mais leve... ;)

[robson cavalcante 0]

fica muito mais leve... ;)

Rss.. eve ... rs fica uma pena em relação ao que fiz, porém no meunu que fiz, utilizei todas aquelas bordas com imagens, para dar um visual mais clean.Agradeço a ajuda.Abraços.

[pa_bruno 0]

se estiver falando do tracejado, isso se consegue fazer com algumas linhas somente:

#nomedoDiv table {

border-bottom: 1px dashed #000000;

}

 

#nomedoDiv tr {

border: 1px dashed #000000;

border-bottom: 0;

}

 

assim teu menu vai ficar tracejado... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[robson cavalcante 0]

se estiver falando do tracejado, isso se consegue fazer com algumas linhas somente:

#nomedoDiv table {

border-bottom: 1px dashed #000000;

}

 

#nomedoDiv tr {

border: 1px dashed #000000;

border-bottom: 0;

}

 

assim teu menu vai ficar tracejado... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

legal.. sabia desse detalhe, porém este macete não funciona em todos navegadores, taí a explicação para eu usar imagens. com este css que você postou, dá até para fazer menu com a borda da célula serrilhada.. rs..

 

Abraços.

[pa_bruno 0]

jah tentou fazer deste jeito???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Teste</title>

<style type="text/css">

body {

margin: 10px;

padding: 10px;

text-align: center;

}

 

table {

width: 400px;

margin: 0 auto;

background-color: #F2F3F3;

border-top: 1px dashed #666666;

border-left: 1px dashed #666666;

}

 

table td {

border-bottom: 1px dashed #666666;

border-right: 1px dashed #666666;

}

</style>

</head>

<body>

<table cellpadding="0" cellspacing="0">

<tr>

<td>Site:</td>

<td>www.brunodulcetti.com</td>

</tr>

<tr>

<td>Site:</td>

<td>www.brunodulcetti.com</td>

</tr>

<tr>

<td>Site:</td>

<td>www.brunodulcetti.com</td>

</tr>

<tr>

<td>Site:</td>

<td>www.brunodulcetti.com</td>

</tr>

</table>

</body>

</html>

 

tente sempre com os códigos postados, se alguns browsers naum reconhecerem, arrumar umas manhas para visualizarem... ;) eh batendo cabeça q se consegue... hehehehe http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[robson cavalcante 0]

jah tentou fazer deste jeito???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Teste</title>

<style type="text/css">

body {

margin: 10px;

padding: 10px;

text-align: center;

}

 

table {

width: 400px;

margin: 0 auto;

background-color: #F2F3F3;

border-top: 1px dashed #666666;

border-left: 1px dashed #666666;

}

 

table td {

border-bottom: 1px dashed #666666;

border-right: 1px dashed #666666;

}

</style>

</head>

<body>

<table cellpadding="0" cellspacing="0">

<tr>

<td>Site:</td>

<td>www.brunodulcetti.com</td>

</tr>

<tr>

<td>Site:</td>

<td>www.brunodulcetti.com</td>

</tr>

<tr>

<td>Site:</td>

<td>www.brunodulcetti.com</td>

</tr>

<tr>

<td>Site:</td>

<td>www.brunodulcetti.com</td>

</tr>

</table>

</body>

</html>

 

tente sempre com os códigos postados, se alguns browsers naum reconhecerem, arrumar umas manhas para visualizarem... ;) eh batendo cabeça q se consegue... hehehehe http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Dara até entendo a ajuda, porém este site tem pessoas de muitos lugares visualizando e cada uma delas tem um tipo de navegador e como se trata de estudantes cara.. piorou.. micros velhos adoidado. Portanto, tenho de entregar o trabalho redondinho.. rodanod a mil maravilhas.

 

Mais agradeço a ajuda.

Abraços.