Jump to content


Photo

Seria Possível Fazer Sem Tabelas?


  • Faça o login para participar
24 replies to this topic

#16 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 14/03/2007, 14:35

Faz sem borda plzzz ... :lol:


hahaha quem me dera, já pensei nisso, mas da forma que tá ficando sem borda não tá legal, tá perdendo o estilo do site :( não tem idéia de como resolver isso da borda não? nem umazinha? por favor! alguem ajuda! não é possível que não tenha jeito.

edit: vou pular essa etapa mesmo. Vai sem bordas. Se alguém souber, é lucro e por favor posta aí :)

Bola pra frente pra não parar. Estava fazendo o menu (em lista) e tive um problema de espaço que não quero entre a DIV "curvas" e a DIV "menu". Olhem:

Attached File  espaco.jpg   13.71KB   11 downloads

Ja tentei usar margin:0, padding:0, definir altura... nada deu.

Meu CSS desse trecho:

#top #curvas {width:698px; height:39px;}


#menu ul {
list-style:none;
margin: 0
padding: 0;
width: 90%;
font: 18px tahoma;
color: #A96300;
text-align:center;
}

#menu ul li{
display: inline;
padding-left: 40;
padding-right: 40;
}

HTML:

<div id="curvas"><img src="imagens/curvas.jpg"></div>
	<div id="menu">
	<ul>
	<li>Localização</li>
<li>Previsão</li>
<li>Objetivo</li>
<li>Contato</li>
	</ul>
	</div>

Edição feita por: Firehalk, 14/03/2007, 15:07.

BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#17 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 14/03/2007, 15:22

Tá de boa aqui peixão ... só faltou colocar um:
#menu{ margin:0px;}

E só pra constar, dá pra dar uma arrumada ae no seu CSS ?? Tá meio relaxado, e isso me dá comixões ... :blink:
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#18 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 14/03/2007, 15:37

Tá de boa aqui peixão ... só faltou colocar um:

#menu{ margin:0px;}

E só pra constar, dá pra dar uma arrumada ae no seu CSS ?? Tá meio relaxado, e isso me dá comixões ... :blink:


como assim relaxado? por que?

Tô novamente com problemas no IE... o IE insiste em não alinhar certo as coisas... a DIV "menu" (que não tem nenhuma declaração no CSS) não tá bem no centro, tá mais pra direita (um tanto mais). Tentei por um text-align:center; na div menu pra resolver mas não deu, nada mudou. Idéias? Tô pesquisando que nem um louco aqui, mas as vezes não acho algumas coisas. Mas tá indo numa boa esse primeiro trabalho todo em css :) Meio demorado demais só.

Valeu o apoio até então!
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#19 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 14/03/2007, 15:46

Não é bem relaxado, é que eu não gosto de declarações assim:

property: 0;

Coloca o px ali, o em, o %, seja lá qual for a medida, já q é pra fazer com CSS faz direito p****, como diria meu amigo do covernation ... ^^

E seria interessante também fazer uso das propriedades resumidas:

padding-left: X;
padding-right: X;

por
padding: 0px Xpx;

Funciona assim, se setar só 2 valores ele entende como top+bottom / left+right ...
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#20 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 14/03/2007, 16:08

Hmmm certo, já alterei.

Agora algumas observações:

padding: 0px 40px 0px 40px; -> correto
padding: 40px 40px; -> ele só interpreta como sup e inf, e nao como dir e esq também (acabei de testar)

Tô quase terminando o menu... mas não consigo fazer aquele efeito de mudar a cor de fundo de todo o LI e não apenas no link. Já tentei usar display:block e nada certo. Além do que no Firefox fica só um fiapo acima do link com a cor que defini no background-color.

CSS:

#menu ul {
list-style:none;
margin: 5px auto 5px auto;
padding: 0px;
width: 620px;
font: 17px tahoma;
color: #A96300;
}

#menu ul li{
display: inline;
float:left;
padding: 0px 40px 0px 40px;
width: 73px;
}

#menu ul li a{
display:block;
}

#menu ul li a:hover{
background-color: #FEE3BC;
}

Edição feita por: Firehalk, 14/03/2007, 16:28.

BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#21 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 14/03/2007, 16:38

Muda o li pra display:block tbm ... seta um width e height pra o link e um height para o li, e só pra constar tbm, o padding seria assim padding: 0px 40px; - dessa forma ele faz o mesmo q você usou, não que o seu esteja errado, mas pra quem estava economizando até no px isso já deve servir ... :boxing:
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#22 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 14/03/2007, 16:52

Muda o li pra display:block tbm ... seta um width e height pra o link e um height para o li, e só pra constar tbm, o padding seria assim padding: 0px 40px; - dessa forma ele faz o mesmo q você usou, não que o seu esteja errado, mas pra quem estava economizando até no px isso já deve servir ... :boxing:


hahaha não perdeu a chance...

descobri que o erro era no padding que tava definido no li. A maior parte do espaço tinha sido dada por padding, ou seja, uma área "vazia", apenas de espaço. Resolvi isso retirando o padding e aumentando o width the cada LI.

Só não entendo agora pq no IE ele não consegue ficar bem centralizado... Olha só:

Attached File  marcas.jpg   13.46KB   13 downloads

No FF fica perfeito.
Que hack que corrige isso?

CSS

#menu ul {
list-style:none;
margin: 5px auto;
padding: 0px;
width: 620px;
font: 17px tahoma;
color: #A96300;
}

#menu ul li{
display: inline;
float:left;
width: 155px;
height: 21px;
text-align:center;
}

#menu ul li a{
display:block;
color: #A96300;
text-decoration: none;
}

#menu ul li a:hover{
background-color: #FEE3BC;
}

Edição feita por: Firehalk, 14/03/2007, 17:05.

BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#23 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 15/03/2007, 17:25

Só pra desencargo de consciência:

list-style-type: none;

ou

list-style: none inside none;

Falou bróder! :huh:
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#24 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 15/03/2007, 17:31

Não entendi qual o problema com o meu list-style: none;

Isso aí tá funcionando numa boa também, sem problemas. É incorreto usar só o style pra none? deveria ser style-type?
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#25 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 19/03/2007, 12:00

Incorreto não ... .list-style-type modifica somente o símbolo antes do elemento, e list-style modifica mais coisas, como a posição do símbolo também, em uma única declaração, a diferença é q ela precisa dos 3 parâmetros ...
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq