← WordPress

Como alinhar a caixa de pesquisa

Lida 3534 vezes

Offline

Filipe Santos 
Membro
Mensagens 201 Gostos 5
Feedback +7

Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts 10 Posts

Boa tarde   :+trafego:


Preciso de uma ajuda dos especialistas na matéria   :lol:

Estou a tentar colocar a caixa de pesquisa no lado direito do cabeçalho do meu blog mas não estou a conseguir. A caixa aparece-me sempre a meio do cabeçalho. Conforme Imagem abaixo:



Eu tenho um ficheiro "searchform.php" onde tinha uma caixa de pesquisa predefinida do theme e eliminei desse ficheiro o código da caixa do theme e coloquei o código da caixa de pesquisa do google e, por muitas voltas que já dei, ela aparece-me sempre centrada.

Apresento também o meu ficheiro .CSS onde está a parte do "searchform.php":

Código: [Seleccione]
#header #searchform {
    display: inline-block;
    max-width: 250px;
    float: right;
    clear: none;
    padding: 37px 0 !important;
}
#header #searchform fieldset { width: 100% }
#header #searchform label { display: none }
#searchform #s { background: url(images/search2.png) 7px 7px no-repeat; text-indent: 15%; max-width: 283px;}
#header #searchform #s {
    border: 1px solid #cccccc;
    width: 95.6%;
}
#searchform input { padding: 12px 3% 12px 0;}
.widget-header {
    float: right;
    max-width: 76%;
    margin-bottom: 2px;


Agradeço toda a ajuda possível para entender onde devo mexer para alinhar a caixa no lado direito do cabeçalho.

 :obrigado:
Offline
D

Diogo Pinto 
Administrador
Mensagens 4400 Gostos 371
Feedback +4

Troféus totais: 37
Trófeus: (Ver todos)
Avatar Search Level 6 Linux User Mobile User Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Experimenta:

Na div #header coloca:

position: relative;

Na div #header #searchform  coloca:

position: aboluste;
right: 0px;
top: 0px;
Offline

Filipe Santos 
Membro
Mensagens 201 Gostos 5
Feedback +7

Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts 10 Posts

Citação de: Diogo Pinto em 04/Jun/2013 19:17
Experimenta:

Na div #header coloca:

position: relative;

Na div #header #searchform  coloca:

position: aboluste;
right: 0px;
top: 0px;

Agradeço a tua ajuda, no entanto, fiz o que sugeristes e continua na mesma.
Offline

kongming 
Membro
Mensagens 183 Gostos 4
Feedback +7

Troféus totais: 20
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts 10 Posts

No sítio onde mudaste o código ainda tem lá id="searchform" ?
Offline
R

Ricardooo 
Membro
Mensagens 121 Gostos 0
Feedback +7

Troféus totais: 23
Trófeus: (Ver todos)
Linux User Mobile User Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1

#header #searchform {
    display: inline-block;
    max-width: 250px;
    float: right;
    clear: none;
    padding: 37px 0 !important;
    position:absolute;
    top:37px;
    right:15px;
}

deve funcionar.

Edit2: Se bem que deve haver outras e melhores alternativas ;)
Offline

Octávio Alves 
Membro
Mensagens 963 Gostos 36
Feedback +25

Troféus totais: 27
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Experimenta alterar isto:

Código: [Seleccione]
#searchform input { padding: 12px 3% 12px 0;}
.widget-header {
    float: right;
    max-width: 76%;
    margin-bottom: 2px;
Para isto:

Código: [Seleccione]
#searchform input { padding: 12px 3% 12px 0;}
.widget-header {
    float: right;
    max-width: 5%;
    margin-bottom: 2px;
Offline

Filipe Santos 
Membro
Mensagens 201 Gostos 5
Feedback +7

Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts 10 Posts

Citação de: kongming em 04/Jun/2013 20:04
No sítio onde mudaste o código ainda tem lá id="searchform" ?

Essa "id" eu eliminei para dar lugar á "id" da caixa de pesquisa do Google. Também já andei a ver se o erro era dessa chamada da "id" mas manteve-se tudo na mesma. De qualquer forma coloco os dois códigos, o que eliminei e o novo:

Código da caixa de pesquisa eliminado:

Código: [Seleccione]
<form method="get" id="searchform" class="search-form" action="<?php echo home_url(); ?>" _lpchecked="1">
<fieldset>
<input type="text" name="s" id="s" value="" onfocus="if(this.value=='Pesquisar...')this.value='';" x-webkit-speech onwebkitspeechchange="transcribe(this.value)">
</fieldset>
</fieldset>
</form>

Código da caixa de pesquisa do Google:


Código: [Seleccione]
<form action="http://www.xxxxxxx.com/pesquisa/" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxxxxxxxxx" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="35" />
    <input type="submit" name="sa" value="Pesquisar" />
  </div>
</form>

<script type="text/javascript" src="http://www.google.pt/coop/cse/brand?form=cse-search-box&amp;lang=pt"></script>

Citação de: Ricardooo em 04/Jun/2013 21:20
#header #searchform {
    display: inline-block;
    max-width: 250px;
    float: right;
    clear: none;
    padding: 37px 0 !important;
    position:absolute;
    top:37px;
    right:15px;
}

deve funcionar.

Edit2: Se bem que deve haver outras e melhores alternativas ;)


Agradeço a ajuda mas também não funcionou. E já agora, que outras alternativas?  :-k


Citação de: Octávio Alves em 04/Jun/2013 22:32
Experimenta alterar isto:

Código: [Seleccione]
#searchform input { padding: 12px 3% 12px 0;}
.widget-header {
    float: right;
    max-width: 76%;
    margin-bottom: 2px;
Para isto:

Código: [Seleccione]
#searchform input { padding: 12px 3% 12px 0;}
.widget-header {
    float: right;
    max-width: 5%;
    margin-bottom: 2px;


Mais uma vez não funcionou. Eu acredito que o problema esteja no código que alterei no ficheiro searchform.php por não estar a fazer a chamada para o ficheiro style.css.

Agradeço a vossa atenção e a vossa ajuda.
Offline

cjseven 
Administrador
Mensagens 1809 Gostos 26
Feedback +3

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

se indicasses o link para o site era mais facil de encontrar solucao.
Offline

Filipe Santos 
Membro
Mensagens 201 Gostos 5
Feedback +7

Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts 10 Posts

Citação de: cjseven em 05/Jun/2013 17:28
se indicasses o link para o site era mais facil de encontrar solucao.


Como o site ainda não está concluido e não está 100% online, optei por não colocar aqui o link, sei que dessa forma era mais fácil vocês ajudarem-me.

Contudo, o rtbfreitas, através de pm e a quem agradeço imenso pela grande ajuda e disponibilidade prestada, ajudou-me a resolver esta situação, para isso, bastou só colocar o seguinte atribudo no ficheiro CSS:

Código: [Seleccione]
#header form {
float: right;
margin: 30px 0;

Agradeço a todos a vossa ajuda.  :obrigado:


"Se eu podia viver sem o Mais Tráfego? Podia, mas não era a mesma coisa"  :superlol:

Páginas: 1

Posts relacionados

Conversa Geral

Caixa directa @ Caixa geral de Dépositos

p
poir0t

SMF

Como substituir a pesquisa built-in pela pesquisa do google, alguem sabe ?

D
Dub

Desenvolvimento

Criar caixa de pesquisa do google

Mister_Magoo