Jump to content


Photo

Espaço Entre Imagens


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

#1 Helene

Helene

    Turista

  • Usuários
  • 41 posts
  • Sexo:Não informado

Posted 08/02/2006, 19:28

Fala povo! :)
To aqui de novo, porque empaquei no tableless...rsrsrsrs
O problema é o seguinte:
No menu, quero colocar uma imagem embaixo da outra dentro de uma div usando a tag <img ....> mesmo, mas fica um vão entre elas.. vejam só... as listras verdes são o vão:
Posted Image
Aqui está o css desse menu:

#menu1 {
width:150px;
margin-top:27px;
height:80px;
}

Ah... aproveitando que estou aqui, pra que serve clear:both; no css?

Agradeço muito a ajuda! :)

#2 stavis

stavis

    Novato no fórum

  • Usuários
  • 18 posts
  • Sexo:Não informado
  • Localidade:Curitiba, PR

Posted 08/02/2006, 22:24

No tableless você faz diferente... Utilize UL e LI para colocar o conteúdo do menu e depois formate pelo css.

clear:both - serve para quando você utiliza float nas div's. Ex: Se todas estiverem alinhadas a esquerda (float:left) e vc quiser adicionar uma que crie um novo paragrafo ao em vez de se alinhar com as outras. Basicamente isso diz ao navegador que não deve ter outras divs posicionadas nos lados.
OXPED . NET > Hospedagem e Revenda de Espaço Web
Preços Ecônomicos e Alta Quantidade de Recursos.
Planos Windows e Linux de Alta-Performance
http://www.oxped.net

#3 Helene

Helene

    Turista

  • Usuários
  • 41 posts
  • Sexo:Não informado

Posted 10/02/2006, 19:40

ah, valeu! ^^
Entendi bem agora o clear:both.. Usava sem saber..rsrsrsrs
Com o negócio do menu, não consegui... não sei configurar o ul pelo css, fui atrás de um tutorial, mas acho que não fiz certo.
Alguém pode me ajudar?
O código da página:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt"> 
<head>
	<meta http-equiv="pragma" content="no-cache" />
	<meta name="revisit-after" content="1" />
	<meta name="description" content="Internet" />
	<meta name="keywords" content="" />
	<meta name="robots" content="ALL" />
	<meta name="rating" content="General" />
	<meta name="author" content="" />
	<meta name="language" content="pt-br" />

  <title>teste</title>
<style type="text/css">
<!--
body {
text-align:center;
}

#geral {
width:801px;
border:1px solid black;
margin:0 auto;
text-align:left;
overflow:hidden;

}

#topo {
height:155px;
background-color: gray;
clear:both;
width:801px;
}

#conteudo {
float:right;
width:651px;
height:451px;
background-color:#3399FF;
}

#basemenu {
background-color:#000000;
margin-top:27px;
width:150px;
height:450px;
float:left;
}

ul#menuac {
margin:0;
padding:0;
width:150em;
list-style-type: none;
}

ul#menuac li {
position:relative;
}

#menu2 {
width:150px;
margin-top:29px;
clear:both;

}

p {
text-indent:50px;
}

-->
</style>
</head>
<body>

<div id="geral">

<div id="topo">

</div>

<div id="basemenu">
<ul id="menuac">
<li>
<img border="0" src="http://img.photobucket.com/albums/v233/leneenha/pagin.jpg" onMouseOver="this.src='http://img.photobucket.com/albums/v233/leneenha/overpagin.jpg'" onMouseOut="this.src='http://img.photobucket.com/albums/v233/leneenha/pagin.jpg'">
</li>
<li>
<img border="0" src="http://img.photobucket.com/albums/v233/leneenha/hora.jpg" onMouseOver="this.src='http://img.photobucket.com/albums/v233/leneenha/overhora.jpg'" onMouseOut="this.src='http://img.photobucket.com/albums/v233/leneenha/hora.jpg'">
</li>
<li>
<img border="0" src="http://img.photobucket.com/albums/v233/leneenha/loca.jpg" onMouseOver="this.src='http://img.photobucket.com/albums/v233/leneenha/overloca.jpg'" onMouseOut="this.src='http://img.photobucket.com/albums/v233/leneenha/loca.jpg'">
</li>
<li>
<img border="0" src="http://img.photobucket.com/albums/v233/leneenha/foto.jpg" onMouseOver="this.src='http://img.photobucket.com/albums/v233/leneenha/overfoto.jpg'" onMouseOut="this.src='http://img.photobucket.com/albums/v233/leneenha/foto.jpg'">
</li>
</ul>

</div>
<div id="conteudo">


</div>

</div>
</body>
</html>

Aproveitando..rs existe algum jeito mais fácil de fazer mudar a imagem quando passa o mouse? Caso não tenha, essa aí que eu coloquei funciona em todos os browsers?

Fico muito agradecida! :P

#4 Klaus

Klaus

    @ ubuntu jaunty

  • Ex-Admins
  • 7924 posts
  • Sexo:Masculino
  • Localidade:127.0.0.1

Posted 10/02/2006, 22:20

As CSS:

#menu ul li a {
display: block;
height: 0px;
padding: 16px 0px 0px 150px;
width: 0px;
}

#menu ul li a.inicial {
background: transparent url("http://img.photobuck...enha/pagin.jpg") no-repeat 0px 0px;
}

#menu ul li a.inicial:hover {
background: transparent url("http://img.photobuck.../overpagin.jpg") no-repeat 0px 0px;
}


O markup:

<div id="menu">

  <ul>
    <li>
      <a href="#" class="inicial">Página inicial</a>
    </li>
  </ul>

</div> <!-- / menu -->


Existem técnicas melhores de fazer esse Image Replacement. Faça uma pesquisa para saber mais sobre o assunto.
Klaus Paiva
Conheça também: Taperás

#5 Helene

Helene

    Turista

  • Usuários
  • 41 posts
  • Sexo:Não informado

Posted 11/02/2006, 11:08

Valeu Klaus! Tô meio perdida...rsrsrs Vou dar uma pesquisada sim :)
E agora eu entendo porque todos abominam o ie..rsrsrsrsrs nunca tinha tido problema, até agora..rsrs
http://img.photobuck...nha/odeioie.jpg
Parece que meu ie não aceita deixar os links escritos embaixo da img..rsrs
Tentei consertar, mas não mudou.. Tinha horas que surgia aquela bolinha que aparece na lista, aí coloquei list-style-type: none em tudo o que era relacionado a lista. Pelo menos não apareceu mais.

#6 Klaus

Klaus

    @ ubuntu jaunty

  • Ex-Admins
  • 7924 posts
  • Sexo:Masculino
  • Localidade:127.0.0.1

Posted 11/02/2006, 11:13

:D eu errei na hora de construir as CSS:

#menu ul li a {
display: block;
height: 0px;
overflow: hidden;
padding: 16px 0px 0px 150px;
width: 0px;
}

#menu ul li a.inicial {
background: transparent url("http://img.photobuck...enha/pagin.jpg") no-repeat 0px 0px;
}

#menu ul li a.inicial:hover {
background: transparent url("http://img.photobuck.../overpagin.jpg") no-repeat 0px 0px;
}


Se quiser ver um exemplo funcionando, usei ele aqui:

http://wifi.uol.com.br/ (veja o botão "instalar agora")

-----

Se você ver as CSS do site acima, neste botão instalar tem algumas formatações que eu coloquei apenas para dar um efeito necessário naquele layout. Segue as CSS daquele botão (as partes importantes estão em negrito):

#instalar h3 a {
background: transparent url("http://wifi.i.uol.co...o-instalar.gif") no-repeat 0px 0px;
display: block;
height: 0px;

left: -3px;
overflow: hidden;
padding: 47px 0px 0px 228px;

position: absolute;
width: 0px;
}

#instalar h3 a:hover {
background-position: 0px -47px;
}


Repare que eu uso a mesma imagem, só troca a posição dela como background.
Klaus Paiva
Conheça também: Taperás

#7 Helene

Helene

    Turista

  • Usuários
  • 41 posts
  • Sexo:Não informado

Posted 11/02/2006, 12:17

Agora deu certinho, muitíssimo obrigada! Nem tinha pensado nessa possibilidade..rs
deixa eu ver se entendi direitinho o exemplo que você passou: fica uma imagem aparecendo, a outra fica escondida, qdo vc passa o mouse ela volta e fica normal, em cima da outra.
é isso? :P
O legal do css é que tem vários jeitos de fazer a mesma coisa, e o ruim é isso também, rsrs porque quem tá aprendendo direitinho acaba se perdendo...rsrsrs

#8 Klaus

Klaus

    @ ubuntu jaunty

  • Ex-Admins
  • 7924 posts
  • Sexo:Masculino
  • Localidade:127.0.0.1

Posted 11/02/2006, 12:23

Isso! O segredo é esse. O link (a) é como se fosse um buraco, onde eu defino o que vai ser visível. No meu exemplo, eu defini assim:

padding: 47px 0px 0px 228px;


Um "buraco" de 47 pixels de altura e 228 pixels de largura. Minha imagem (que possui o estado normal e "over") possui 94 pixels de altura e 228 pixels de largura.

Se você reparar, a altura do link (a) é exatamente metade da imagem. Daí, pra fazer o efeito, é só trocar a posição da imagem para parecer que ela foi trocada.

A vantagem de ser a mesma imagem e não outra é que, a imagem já foi carregada, daí o efeito é instantâneo.

Espero que tenha entendido e, qualquer coisa, só avisar.
Klaus Paiva
Conheça também: Taperás

#9 Helene

Helene

    Turista

  • Usuários
  • 41 posts
  • Sexo:Não informado

Posted 12/02/2006, 16:50

Nossa..rsrsrs isso que você explicou agora me deixou confusa, mas aí deu um click e entendi. rs
Fica mais rápido.. hm.. é um jeito pra eu fazer nessa página aí..
Klaus, apesar da sua ajuda enorme, tanto na página que eu tô fazendo tanto no CSS que você explicou aí... os links continuam separados :cry:
Fica um espacinho de 3 pixels..
Mas tive uma idéia que talvez possa funcionar... Ao invés de usar imagens, mudar a cor do fundo quando passar o mouse e usar um efeito de sombra na fonte pra ficar igual. Será que dá certo, pelo menos parecido?rsrs :blink:

edit: bom, consegui fazer direitinho, tirei as ul e li, coloquei só os links mesmo..
Tem algum jeito de fazer uma margem nos links, alinhando eles à esquerda?
edit2 rsrsrs: efeito de sombra usando o css só funciona no IE mesmo ? =/ Se for isso mesmo, vou ter que deixar essa idéia de lado... aiai..rsrsrs como é complicado isso :blink:

Edição feita por: Helene, 12/02/2006, 17:34.


#10 Klaus

Klaus

    @ ubuntu jaunty

  • Ex-Admins
  • 7924 posts
  • Sexo:Masculino
  • Localidade:127.0.0.1

Posted 13/02/2006, 08:08

Sobre o post original:

Faz assim, coloca num servidor as imagens pra gente usar no menu, naquele estilo que eu falei: a imagem vai ter os dois estados normal e "over" na mesma imagem.

Assim que você colocar, a gente constrói o menu.

E se no seu menu ficou um espaço de 3 pixels no IE... talvez tenha sido um bug do IE. Tente remover os espaços em branco entre um li e outro pra testar, assim:

<ul>
  <li>
    bla
  </li>
  <li>
    bla
  </li>
  <li>
    bla
  </li>
</ul>


Para assim:


<ul>
  <li>
    bla
  </li><li>
    bla
  </li><li>
    bla
  </li>
</ul>


Repare que eu removi os espaços em branco e as quebras de linha entre um </li> e outro <li>.

Sobre o edit:

Não entendi muito bem... Os links vão ficar na vertical ou na horizontal?

Sobre o edit2:

Você usou o filter shadow? Sim, só IE. Para sombras é melhor usar imagens mesmo... (dá pra fazer só com CSS e mais algum markup mas... fica mais complicado...)
Klaus Paiva
Conheça também: Taperás

#11 Helene

Helene

    Turista

  • Usuários
  • 41 posts
  • Sexo:Não informado

Posted 13/02/2006, 18:14

Nossa.. Brigadão Klaus! E me desculpe por estar te alugando.
Vou fazer as imagens rapidinho, hospedar e editar meu post.
Bom.. mudar o lugar do <li></li> não deu certo, infelizmente..rs

sobre o edit:
Os links continuam a mesma coisa, só que os textos dos links grudam à esquerda (não gosto muito de centralizado, sabe?rsrs), queria que os textos seguissem uma linha reta, como nas imagens. Desculpe se fui muito confusa pra explicar.. rsrs

sobre o edit2:
Não usei ainda, e acho que nem vou usar..rs Não teria sentido eu fazer um site inteiro pra todos os browsers verem da mesma forma e usar um efeito que só um browser entende. rsrs

Mas nossa.. como é complicado quando não dá certo.. rsrsrs

Aqui estão as imagens. Tão certinhas??
http://img.photobuck...eneenha/web.gif
http://img.photobuck...localizacao.gif
http://img.photobuck...nha/inicial.gif
http://img.photobuck...nha/horario.gif
http://img.photobuck...eenha/fotos.gif

Edição feita por: Helene, 14/02/2006, 18:59.


#12 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 13201 posts

Posted 16/09/2017, 04:46

Vente Xenical En Ligne online pharmacy Amoxicillin Clavulanate Use In Children
Informacion Sobre La Viagra Canine Dosage Amoxicillin
Cephalexin Client Information Sheet <a href=http://cialtobuy.com>buy cialis</a> Tadalafil Tablets India
Canada Buy Kamagra cheap cialis Azithromycin Vs Amoxicillin Chlamidia
Comprare Levitra Generico Acquisto Cialis Senza Ricetta Medica Comment Acheter Du Viagra
isotretinoin tablet in germany <a href=http://cialtobuy.com>generic cialis</a> Propecia Packungsgro?E
Can Amoxicillin Be Taken When Expired cialis buy online Priligy Ca Marche
Cialis Generique Comparer Prix Taking Expired Cephalexin
Amoxicillin Dosage For Tooth Infections <a href=http://cialtobuy.com>cialis</a> Looking For Viagara
Swelling From Amoxicillin Reaction online pharmacy Amoxicilina Amoxycillin Price With Free Shipping
Amoxicillin .25g Dosage Information Prix Levitra 10 Mg 1777 Canadian 24 Hr Pharmacy
Cialis Andere Medikamente <a href=http://cialtobuy.com>cheap cialis</a> Hair Treatments For Propecia
Levitra Drug Interactions viagra cialis Clomid Acheter Cialis Dauererektion isotretinoin with overnight delivery Cialis 5 Vidal cialis Cheap Cialsis No Prescription
Amoxicillin For Dogs Colds cialis Kamagra Oral Jelly France
Medicina Levitra Generisches Cialis Erfahrungen Dapoxetina Modo De Empleo
Amoxicillin Allergt Diagnose <a href=http://cialtobuy.com>cialis</a> Keflex Dosing For Cats
Kamagra Best Place To Buy cialis price Viagra Generique Livraison 24h
Sky Pharmacy Canada Mail Order Lioresal Posologie
Amoxicillin Liquid No Prescription <a href=http://cialtobuy.com>online pharmacy</a> Cialis Precio Farmacia Espana
Interactions Amoxicillin Betaseron cialis price Keflex Used To Treat Ear Infections Lasix Usa Sale Amoxicillin After Lap Band Surgery Symtoms From Amoxicillin online pharmacy Accutane Tablets Buy
Generique Lioresal 25mg cialis Cytotec 200 ОÑg
Can Amoxicillin Cause Low Blood Pressure Cialis Gratis
Propecia Y Aminexil <a href=http://cialtobuy.com>buy cialis</a> Provera Cheap Free Shipping
Where To Order Alli cialis What Is Generic Priligy
New Primatene Mist Inhaler Viagra Apotheke Schweiz
Keflex Treat Urinary Tract Infection Dosage <a href=http://cialtobuy.com>cialis online</a> Silagra Online Bestellenatomoxetine

#13 LarPhozyHah

LarPhozyHah

    Super Veterano

  • Usuários
  • 14515 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 17/09/2017, 07:16

Amoxicillin And Clavulanate Potassium Infants cialis Tadacip 60mg Notice Cialis 20mg Order Medications Online Generika Viagra Erfahrungen cialis price Buy Diclofenac Without A Prescription
Will Amoxicillin Casue A Kidney Infection viagra cialis Worldwide Levaquin Price
Canadian Medicines Online Zithromax With Alcohol Consumption buy accutane online no prescription
Levitra Precio En Farmacia <a href=http://cialtobuy.com>cialis</a> Uk Pharmacies That Deliver To Usa

#14 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 13201 posts

Posted 03/10/2017, 13:18

Levitra In Deutschland Kaufen viagra Levothroid 200 Cheap No Rx Viagra Available At Boots Online
Vigra On Line Buy Metoprolol Without A Prescription online pharmacy Effet Cialis Ou Viagra Was Kostet Cialis 20mg Buy Xenical Orlistat In Canada
Cialis 10mg France Acheter Propecia Sur Internet viagra online pharmacy Viagra Jelly Uk Apodefil Kamagra Celebrex Buy
Buy Cialis Online Credit Card Levitra 10 Mg Quotazione generic viagra Avelox Vs Amoxicillin Buy Wellbutrin Sr 150mg In Usa

#15 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 13201 posts

Posted 14/10/2017, 19:01

Purchase Medicine viagra online Viagra Und Alkohol
Amoxil Clavulanique Genuine Viagra 100mg filitra vardenafil tablets Order Online Stendra
Amoxicillin Swelling Propecia 08 viagra Baclofen Riva Cycloprine Cialis 10 Mg Efectos Viagra Online Without Persciption
Kamagra Oral Acheter buy cialis Priligy 60 Mg Forum Crotamiton




1 user(s) are reading this topic

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

IPB Skin By Virteq