Problema em mapeamento de iframe (php/wordpress)

marianafsc · 21 de dezembro de 2011

Olá, Clube do Hardware! Estou com um problema quando vou montar meu blog:

www.aescritora.com/literando

Eu quero fazer um mapeamento de iframe no menu logo ao lado do nome do blog (Início / Mariana / Literando etc), de forma que quando eu passe o mouse a cor mude de preto para rosa e, ao clicar, redirecione para outra página em PHP. Mas não sei o que acontece, que o iframe não usa as coordenadas do próprio header, abrindo uma "nova imagem" logo abaixo dele (esse quadrado cinza). O que será que eu fiz de errado?

Segue abaixo um exemplo do menu (só o "início") no arquivo header.php:

<li class="inicio"><a href="http://www.aescritora.com/literando">inicio</a></li>

</ul></div>

E um exemplo do style.css:

#menu {margin-top: 437px; margin-left:238px; margin:0 auto; }

#menu ul li {width:auto; float:right; list-style:none; margin:0; padding:0;}

#menu ul li a {width:auto; float:right; margin:0; padding:0; font-size:0; text-indent:-10000px;}

#menu ul li.inicio a {background:url(http://img515.imageshack.us/img515/3359/frame1.png) 0 0; width:63px; height:66px; margin:46px 0 0 0;}

#menu ul li.inicio a:hover {background-position:-71px 0;}

Obrigada!

Urubu_Nicolas · 22 de dezembro de 2011

Eu olhei seu código e reparei que você usa o background headerkag.png que contém o texto dos links, tenta retirar isto e deixar apenas o logo e os divisores e coloca os frames até achar a posição correta, acho melhor..

marianafsc · 23 de dezembro de 2011

Obrigada por comentar, Urubu_Nicolas! Então, eu mudei o header e consegui fazer o "inicio" mudar de cor certinho ao passar o mouse, mas ainda continuo com o problema de não reconhecer o header como a imagem a mapear, e sim "criar" esse bloco cinza logo abaixo dele...

DiF · 23 de dezembro de 2011

olá, você nao precisa fazer um mapeamento de iframes, alias.. eu recomendo que nunca use iframes pois é uma tag dada como obsoleta pela webstandard da W3C.

faça seu menu em preto normal... e altere a cor pelo pseudo elemento no css

como o amigo ali disse.. você ta usando uma imagem para fazer essa transaçao. digo que usar imagens deixa o processo mais lento..

portanto é melhor você usar texto e usar um hover para alterar o color da fonte.

se você usa algum servidor para hospedar seu site... basta fazer um link normal

outra coisa que no menu você pode usar uma lista nao ordenada.. deixando lado a lado pelo atributo de float:left

bem foi issso +- que eu entendi

vi que seu logo é uma imagem inteira com aquelas divisorias... suigiro que você crie ali uma DIV dentro dela você divide em duas divs .. na esquerda você coloca o logo e na direita você coloca como background a imagem com aquela divisoria.. e coloca sue menu ali em lista nao ordenada.

qto menos imagem você usar melhor

marianafsc · 25 de dezembro de 2011

Olá, dif!

Entendi o que você quis dizer, acontece que essa fonte que eu estou usando pro menu não é original do windows, eu baixei... Aí não teria como colocar essa fonte na hora de fazer o menu em css, não é?

Então, o grande problema é que eu não estou conseguindo criar as divs DENTRO da imagem, o wordpress sozinho já joga "pra baixo" do header...

DiF · 25 de dezembro de 2011

Olá, dif!
acontece que essa fonte que eu estou usando pro menu não é original do windows, ... Aí não teria como colocar essa fonte na hora de fazer o menu em css, não é?

Mariana, é possivel sim utilizar uma fonte nao original e é bem simples de fazer. atualmente existe um atributo do CSS3 que permite a importaçao de fontes segue um exemplo:


1 @font-face {
2 font-family: NasalizationTeste;
3 font-style: normal;
4 font-weight: normal;
5 src: url(NASALIZ0.tff);
}

explicaçao:

bom, eu numerei as linhas para você identificar certo? aqueles numeros na frente nao entram no codigo é só uma numeraçao de linhas para você entender melhor.

na linha 1, é o atributo de importaçao de uma fonte via css3 e deve usar o @ na frente de font-face

na linha 2, o atributo font-family recebe um nome qualquer, você pode dar um nome a sua fonte utilizada( a sua escolha)

na linha 3, o atributo font-style recebe o tipo , ou seja eu defini ela como normal.

na linha 4, o atributo font-weight recebe o tipo tb, eu defini como normal, mas se você quiser negrito pode alterar para "bold"

a linha 5, é digamos a mais importante... pois é ali que você define o caminho da fonte baixada. o processo é o mesmo com uma imagem você define o source dela com a sintaxe: src: url(caminho da fonte/nome da fonte) para melhor visualizaçao, recomendo que deixe a fonte baixada na mesma pasta do seu css, assim você nao precisa colocar um caminho maior, bastando só colocar o nome da fonte seguida de sua extensao: exemplo: suaFonte.tff

----------------------------------

agora sobre o problema da imagem:

bom, o primeiro passo é identificar, onde esta alocada aquela imagem inteira que você colocou o logo e as divisorias.

se aquilo ali for uma div inteira, retire a imagem, e coloque duas divs lado a lado.

lembrando que a div do lado esquerdo você deve colocar como float left, e a da direita nao leva nenhum atributo a nao ser um width.

depois disso, na div da esquerda, você deve colocar seu logo apenas, como background, para isso você vai ter que editar sua imagem, que pelo jeito ela é inteira junto com as divisorias. assim deixando a imagem só com o tamanho do logo, você pode usar um background-position para definir a posiçao da imagem na div.

na div da direita... você primeiramente coloque a imagem com as divisorias como background, lembrando que é de muita importancia que você crie a div do tamanho da imagem para nao precisar usar um background-size e ajustar a imagem( podendo distorce-la). depois disso... dentro dessa div.. você cria uma lista nao ordenada com a seguinte estrutura:



<ul>
    <li> LINK 1 </li>
    <li> LINK 2 </li>
    <li> LINK 3 </li>
</ul>

e define para <ul> no css um list-style: none

e para a <li> você define um float: left e um margin: 0 10px;

para deixar lado a lado e espaçar cada LI, o valor você pode alterar.. testando como ficara melhor..

lembrando que estou falando tudo isso como sugestao, então nao foi testado..e nao garanto que funcionara a menos que você teste e veja o resultado. mas é por este caminho. veja que fazendo estes métodos, você evita dor de cabeças.. e dificuldades para fazer um hover com imagens.

Abraço e feliz natal.

marianafsc · 26 de dezembro de 2011

Olá, dif! Obrigada, ajudou bastante! Só tenho dois problemas: não consegui denifir a imagem como background para o menu e não consegui importar a fonte :/ Olha como ficou o código pro menu:

#menu{

color: #000000;

background-image: url(http://img844.imageshack.us/img844/6854/menust.png);

widht: 526px;

font: @font-face {font-family: BirchStd; font-style: normal; font-weight: normal; src: url(www.aescritora.com/literando/BirchStd.otf);};

display: inline;

text-transform: uppercase;}

.link a{

color: #000;}

.link a:hover{

color: #da9494;}

Novamente, obrigada!

DiF · 26 de dezembro de 2011

Olá mariana, tente fazer desta forma:



@font-face {
    font-family: BirchStd; 
    font-style: normal; 
    font-weight: normal; 
    src: url(www.aescritora.com/literando/BirchStd.otf);
}

#menu{
   color: #000000;
   background-image: url(http://img844.imageshack.us/img844/6854/menust.png);
widht: 526px;
display: inline;
text-transform: uppercase;}

.link a{
color: #000;}
.link a:hover{
color: #da9494;}

a pseudo-codigo @font-face nao pode ficar dentro de outro codigo css.

também pesquise a possibilidade de uma conversao de otf para eot ( para funcionar no IE5+

neste caso você deve colocar o mesmo codigo do @font-face antes do outro codigo similar.

para fazer a conversao.. existe um programa pequeno que faz que você pode encontrar aqui: http://circuitbomb.com/index.php/2009/09/easy-oft-to-eot-conversion-for-font-face-css3-and-internet-explorer/

espero ter ajudado mais uma vez

marianafsc · 28 de dezembro de 2011

Dif,

Tentei com esse código e também não funcionou. Será que o Wordpress suporta esse tipo de código?

Como, por algum motivo, o código não reconhece a background-image (o menu com as divisórias), eu hospedei só a divisória e coloquei no header, desse jeito:

<a href="http://www.aescritora.com/literando">Inicio</a>

<a href="http://www.aescritora.com/literando">Autora</a>

etc etc etc....

Mas aí o texto (Início e Autora) não fica no meio, e sim "na parte de baixo da divisória" (pode ver em www.aescritora.com/literando , porque eu falando fica tudo meio abstrato, não é?). Você acha que tem como deixar centralizado e conseguir usar mesmo aquela fonte?

Obs.: aproveitando, vou perguntar já aqui para não importunar demais: você sabe como fazer paginação dos posts só usando html, sem plugin? (por exemplo, quero deixar 2 posts por página).

Novamente, obrigada!

DiF · 28 de dezembro de 2011

ola, sim é possivel.

veja bem, o que eu te expliquei foi a importaçao da fonte certo? ate ai ta tudo bem.. só nao funcionou porque você de fato nao usou a fonte no texto do menu.

depois de importar.. você pode usar normalmente no css como você usaria outra fonte exemplo:


#menu{
   font-family: BirchStd;
   font-size: 16pt;
}

lembrando que no seu codiigo de importar você renomeou sua fonte para BirchStd

sobre a centralizaçao.. tente uma estilizaçao especifica do elemento LI

exemplo:


#menu  li {
	float: left;
	margin-right: 15px;
	position: relative;
	top: -40px;
}

onde você define a posiçao da li como relativa.. e usa um TOP negativo .. qto maior o numero, mais acima você colcoa seu menu.

é interessante usar como relativo.. pois se for usar absoluto.. terá que definir um top e em um left.. ou right.. ouseja os eixos X e Y

marianafsc · 28 de dezembro de 2011

Você quer dizer colocar o li no link para que ele "suba" e se alinhe com a divisória?

Ex.:

<li><a href="http://www.aescritora.com/literando">Inicio</a></li>

Tentei fazer isso, mas todos os links vão pra esquerda e não ficam entre as divisórias, fora que sempre fica essa "bolinha" na frente por causa da tag <li>... Sobre a fonte, continua não funcionando, vou tentar trocar a extensão dela ou hospedar em algum servidor online (não na própria conta do FTP) pra ver se funciona...

DiF · 28 de dezembro de 2011

você certamente esta fazendo alguma coisa de errado. aqui fiz um teste e funcionou.

sao duas coisas que você tem que fazer.

uma você ja fez que é a importaçao da sua fonte. você criou um nome prara ela quando importou. a partir disso ela é reconhecia pelo font-family.

sobre a bolinha na frente, eu mencionei que você tem que estilizar sua UL.

exemplo:

#menu ul {list-style: none; }

assim você tira a bolinha da frente.

sobre a imagem noto que você incorporou a imagem na div. é errado esse procedimento pois o elemento toma conta do espaço.. assim forçando seu menu ficar a baixo dele.

você deve colocar essa imagem como background e posicionar suas LI

mencionei que terias que mexer no elemento da LI. se você usar uma posiçao relativa e usar um top negativo suas LI vão subir.

bom.. eu fiz aqui uns testes.. você tem que estilizar seu menu de forma correta. vou mostrar os codigos que usei em um teste para acertar as divisorias como background. a partir disso você pode estilizar a posiçao de suas LI:

CSS:


* { margin: 0; padding: 0; }

@font-face {
	font-family: BirchStd;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	src: url(BirchStd.otf);
}

#menu {
	float: right;
	font-family: BirchStd;
	font-size: 26pt;
	width: auto;
}

#menu ul {
	list-style: none;
	margin: auto;

}

#menu  li {
	display: inline;
	margin-right: 15px;

}

#menu ul a{
	background: url(divh.png) no-repeat;
	background-position: right;
	padding-right: 32px;
	padding-left: 32px;
	text-decoration: none;
}

#menu ul li.end a{ background-image: none;}

menu:


<div id="menu">
		<ul>
			<li><a href="#">Teste</a></li>
			<li><a href="#">Teste</a></li>
			<li class="end"><a href="#">Teste</a></li>
		</ul>
	</div>

resultado observe que o menu eu defini na direita, e o background a sua divisoria.. juntamente com sua fonte que você quer usar:

marianafsc · 1 de janeiro de 2012

Agora funcionou, dif! Muito obrigada, de verdade!

DiF · 1 de janeiro de 2012

Olá mariana, Feliz ano novo!

que bom que funcionou.

estou sempre as ordens! você aprenderá muito aqui frequentando esta seção. assim como eu aprendi.. e o que eu nao sabia responder para as pessoas eu busquei e aprendi para ensinar!

gosto se ser voluntário e ajudar.

abraço