Alinhar texto ao lado do logo
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Alinhar texto ao lado do logo
Qual é minha questão:
Gente gostaria de colocar esta parte:
Alinhada certa ao lado do meu logo!!
Códigos que uso:
Mensagem na página inicial:
CSS:
Endereço do meu fórum:
http://firstweb.forumeiros.com
Versão do fórum:
PUNBB
Gente gostaria de colocar esta parte:
Alinhada certa ao lado do meu logo!!
Códigos que uso:
Mensagem na página inicial:
- Código:
<div style="background:#2672C8;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:30px;padding:30px;width:500px;margin-right:64px"><h3 style="font-family:Verdana,Arial,sans-serif;font-size:2em!important;font-weight:700!important;margin-top:-15px;text-shadow:0 0 5px #000; color:#ff">Bem-vindo(a) SWD</h3><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px">Bem-vindo(a). Este fórum trata de Design , tutoriais , duvidas , sobre suporte de códigos, tratamos de assuntos para deixar seu fórum com um design melhor, ao que nos permite lhe ajudar.</p></div>
CSS:
- Código:
panel.introduction {position: absolute; margin-top: -400px !important; margin-left: 280px;}
Endereço do meu fórum:
http://firstweb.forumeiros.com
Versão do fórum:
PUNBB
Última edição por Yrley em 13.05.13 0:27, editado 1 vez(es)
Re: Alinhar texto ao lado do logo
Caro usuário,
Infelizmente nós não fornecemos mais suporte a códigos de tutoriais externos aos que criamos, ou seja, nós só damos auxílio em relação a códigos citados em nossos tutoriais.
Obrigado pela compreensão.
Infelizmente nós não fornecemos mais suporte a códigos de tutoriais externos aos que criamos, ou seja, nós só damos auxílio em relação a códigos citados em nossos tutoriais.
Obrigado pela compreensão.
Chongas- *
- Membro desde : 12/04/2013
Mensagens : 43
Pontos : 98
Re: Alinhar texto ao lado do logo
Deixa eu pensar... O que tu queres fazer é deslocar a mensagem?
Se for isso, basta fazer umas pequenas modificações no código HTML.
Valor em Laranja: Deslocará o texto para cima ou para baixo. Quanto maior o número, mais para baixo será deslocado o texto, logo, com valores menores, o texto será empurrado para cima.
Valor em Índigo: Deslocará o texto para esquerda ou para direita. Quanto maior o número, mais para esquerda será deslocado o texto, logo, com valores menores, o texto será empurrado para direita.
Vá alterando os valores até posicionar o texto no local desejado.
Se for isso, basta fazer umas pequenas modificações no código HTML.
<div style="background:#2672C8;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:30px;padding:30px;width:500px;margin-right:64px"><h3 style="font-family:Verdana,Arial,sans-serif;font-size:2em!important;font-weight:700!important;margin-top:-15px;text-shadow:0 0 5px #000; color:#ff">Bem-vindo(a) SWD</h3><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px">Bem-vindo(a). Este fórum trata de Design , tutoriais , duvidas , sobre suporte de códigos, tratamos de assuntos para deixar seu fórum com um design melhor, ao que nos permite lhe ajudar.</p></div>
Valor em Laranja: Deslocará o texto para cima ou para baixo. Quanto maior o número, mais para baixo será deslocado o texto, logo, com valores menores, o texto será empurrado para cima.
Valor em Índigo: Deslocará o texto para esquerda ou para direita. Quanto maior o número, mais para esquerda será deslocado o texto, logo, com valores menores, o texto será empurrado para direita.
Vá alterando os valores até posicionar o texto no local desejado.
Diehl- ****
- Membro desde : 30/09/2010
Mensagens : 221
Pontos : 377
Re: Alinhar texto ao lado do logo
Saudações!
Para que fique na posição desejada, veja abaixo: Lembrando o CSS que moverá a sua posição.
Vermelho >Mude o valor para posição que deseja, se você vai diminuindo ele vai para esquerda, quanto mais aumenta mais vai para direita.
Aconselho usar um código de JavaScript, veja abaixo o código:
Até.
Para que fique na posição desejada, veja abaixo: Lembrando o CSS que moverá a sua posição.
Verde >Vá mudando o valor para que ele se posicione mais acima, sempre aumentando o valor para que ele vá ao topo.panel.introduction {position: absolute; margin-top: -400px !important; margin-left: 280px;}
Vermelho >Mude o valor para posição que deseja, se você vai diminuindo ele vai para esquerda, quanto mais aumenta mais vai para direita.
Aconselho usar um código de JavaScript, veja abaixo o código:
- Código:
jQuery(document).ready(function(){jQuery('body').prepend('<div style="float:right;margin-top: 50px!important;padding:5px;width:550px;margin-right:184px position: absolute!important;"><tbody><table width="100px" style="padding: 0px; font-size: 12px; margin-bottom:0px; padding-bottom: 0px;margin-top: 15px;border-radius: 7px 7px 7px 7px;
box-shadow: 0 0 8px #666666;
margin: 3px;
width: auto;"><script>function dispindex(cat){$('#indexmenu > div.acc-seemore').slideUp(500);$('#catindex'+cat).slideDown(900)};function chgclass(){$('a.indtitl').removeClass("acc-open")}</script><div class="mes-txt"><div id="indexmenu"><img src="http://2img.net/i/fa/optimisation_fdf/fr/help11.png" id="acc-mons" alt="" />
<span id="acc-welc">Bienvenue Invité sur le Forum des Forums <span style="color: #00A5CD;">Forum</span><span style="color: #7CBA2C;">Actif</span></span>
Le Forum des Forums est le support officiel de la communauté des administrateurs et utilisateurs de forums <span style="color: #00A5CD;">Forum</span><span style="color: #7CBA2C;">Actif</span>. Celui-ci étant basé sur l'Entraide, il est nécessaire de <b>faire une recherche</b> avant de poster sa question ou son problème. Si aucun résultat ne correspond, vous pouvez alors ouvrir un sujet en <b>exposant clairement</b> votre problème.
<br />De plus, afin de faciliter le travail du staff de ce forum, pensez à cocher l'icône <img src="http://r24.imgfast.net/users/2413/10/00/00/smiles/505812.png" alt="Résolu" /> dès lors que votre problème a trouvé sa solution.
<br /><br />
<a onclick="dispindex(1); chgclass(); jQuery(this).addClass('acc-open');" class="indtitl">Faire une recherche</a><br /><div id="catindex1" class="acc-seemore" style="display: none;">Les sujets de l'Entraide ayant obtenus une solution sont archivés. Les autres sont supprimés après plusieurs jours. Faire une recherche permet donc généralement de trouver des sujets correspondant à votre problème, et déjà résolus !<br />
<form id="searchPA" action="/search?search_where=11" method="get">
<input type="text" class="inputbox" id="keywordsPA" name="search_keywords" /><button type="submit"><img src="http://2img.net/i/fa/optimisation_fdf/fr/search10.png" alt="" /></button><br />
<span style="font-size: 9px;">Pensez à utiliser l'étoile comme joker, ex : sign<b>*</b></span></form>
Pensez également à lire les <a href="http://forum.forumactif.com/t78679-"><b>Questions & Réponses fréquentes</b></a>. De nombreux tutoriels y sont disponibles.
</div>
<a onclick="dispindex(2); chgclass(); jQuery(this).addClass('acc-open');" class="indtitl">Bien exposer son problème</a><br /><div id="catindex2" class="acc-seemore" style="display: none"><a href="/t230834-comment-bien-exposer-son-probleme">Exposer votre problème clairement</a> est la base de l'Entraide. Si vous voulez obtenir une réponse, il faut que votre problème soit compréhensible. Pensez à <b><a href="/profile?mode=editprofile">remplir les champs techniques</a> de votre profil</b> et n'hésitez pas à donner le plus de précisions possibles : URL du forum, navigateur utilisé, version du forum, templates modifiées ou non, CSS personnalisé... etc.<br /><br />
<b>A lire :</b> <a href="http://forum.forumactif.com/t114085-topic">Règles générales</a> | <a href="http://forum.forumactif.com/t12987-topic">Ce qu'il ne faut pas faire</a> | <a href="http://forum.forumactif.com/t189659-topic">Garder l'email de fondation secret</a> | <a href="http://forum.forumactif.com/t179632-topic">Votre forum est en sécurité !</a></div>
<a onclick="dispindex(3); chgclass(); jQuery(this).addClass('acc-open');" class="indtitl">Proposer une suggestion</a><br /><div id="catindex3" class="acc-seemore" style="display: none">Si vous avez une amélioration à proposer, n'hésitez pas : la <u>grande majorité</u> de nos mises à jour proviennent de <u>vos</u> propositions ! Pour cela, vous pouvez visiter les <a href="http://forum.forumactif.com/f55-suggestions-ameliorations">Suggestions & Améliorations</a>.
<span style="display: block; padding-top: 8px;">Avant de poster votre suggestion, merci de <a href="/t277092-regles-de-la-section"><b>lire les règles</b></a> et d'<b>effectuer une recherche</b> afin d'avoir la certitude que votre suggestion n'existe pas déjà.</span></div>
<a onclick="dispindex(4); chgclass(); jQuery(this).addClass('acc-open');" class="indtitl">L'équipe du FDF</a><br /><div id="catindex4" class="acc-seemore" style="display: none">Le staff de ce forum ne fournit aucune aide par MP, afin que les solutions profitent au plus grand nombre. Si votre problème nécessite de contacter un membre du staff, vous pouvez voir la composition de celui-ci dans ce sujet : <br />
<a href="/t114086-l-equipe-forumactif-staff">L’Équipe ForumActif</a><br />
Merci de ne contacter qu'<b>un seul membre du staff</b>, pour éviter les traitements multiples. </div>
</div></div></div>')});
Até.
Convidado- Convidado
Re: Alinhar texto ao lado do logo
Crie um novo JavaScript e adicione o seguinte código:
Resulta?
- Código:
jQuery(document).ready(function(){jQuery('body').prepend('<div style="background:#FF;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:50px;padding:7px;width:300px;margin-right:64px"><h3 style="font-family:Verdana,Arial,sans-serif;font-size:2em!important;font-weight:700!important;margin-top:-15px;text-shadow:0 0 5px #000; color:#ff">Bem-vindo ao First Web</h3><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px"><div style="background:#2672C8;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:30px;padding:30px;width:500px;margin-right:64px"><h3 style="font-family:Verdana,Arial,sans-serif;font-size:2em!important;font-weight:700!important;margin-top:-15px;text-shadow:0 0 5px #000; color:#ff">Bem-vindo(a) SWD</h3><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px">Bem-vindo(a). Este fórum trata de Design , tutoriais , duvidas , sobre suporte de códigos, tratamos de assuntos para deixar seu fórum com um design melhor, ao que nos permite lhe ajudar.</p></div>')});
Resulta?
Chongas- *
- Membro desde : 12/04/2013
Mensagens : 43
Pontos : 98
Re: Alinhar texto ao lado do logo
Olá Chongas,
Posso falar que até funcionou, mais caso o senhor visualize a imagem abaixo o senhor poderá perceber que ficou meio estranho. Como faço para alinhar isto e arrancar aquele Bem vindo ao First Web!
Imagem:
Até Mais
Posso falar que até funcionou, mais caso o senhor visualize a imagem abaixo o senhor poderá perceber que ficou meio estranho. Como faço para alinhar isto e arrancar aquele Bem vindo ao First Web!
Imagem:
Até Mais
Última edição por Yrley em 12.05.13 21:57, editado 3 vez(es)
Re: Alinhar texto ao lado do logo
Substitua por esse:
Resulta?
- Código:
jQuery(document).ready(function(){jQuery('body').prepend('<div style="background:#FF;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:50px;padding:7px;width:300px;margin-right:64px"><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px"><div style="background:#2672C8;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:10px;padding:30px;width:500px;margin-right:64px"><h3 style="font-family:Verdana,Arial,sans-serif;font-size:2em!important;font-weight:700!important;margin-top:-15px;text-shadow:0 0 5px #000; color:#ff">Bem-vindo(a) SWD</h3><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px">Bem-vindo(a). Este fórum trata de Design , tutoriais , duvidas , sobre suporte de códigos, tratamos de assuntos para deixar seu fórum com um design melhor, ao que nos permite lhe ajudar.</p></div>')});
Resulta?
Chongas- *
- Membro desde : 12/04/2013
Mensagens : 43
Pontos : 98
Re: Alinhar texto ao lado do logo
Retirou o Bem vindo ao First Web! Mais ele não ficou ao lado do Logo! Você pode me dizer aonde arrumo o número para que ele suba?
Re: Alinhar texto ao lado do logo
Bom e na tag margin-top, mais peço que substua por esse:
- Código:
jQuery(document).ready(function(){jQuery('body').prepend('<div style="background:#FF;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:50px;padding:7px;width:300px;margin-right:64px"><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px"><div style="background:#2672C8;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:-5px;padding:30px;width:500px;margin-right:64px"><h3 style="font-family:Verdana,Arial,sans-serif;font-size:2em!important;font-weight:700!important;margin-top:-15px;text-shadow:0 0 5px #000; color:#ff">Bem-vindo(a) SWD</h3><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px">Bem-vindo(a). Este fórum trata de Design , tutoriais , duvidas , sobre suporte de códigos, tratamos de assuntos para deixar seu fórum com um design melhor, ao que nos permite lhe ajudar.</p></div>')});
Chongas- *
- Membro desde : 12/04/2013
Mensagens : 43
Pontos : 98
Re: Alinhar texto ao lado do logo
Não subiu e nem fez nada este último código
Re: Alinhar texto ao lado do logo
Substitua por esse:
A e visualizei o seu forum, o código enviado subiu sim a mensagem, ela so e maior que o espaço disponível no logo.
- Código:
jQuery(document).ready(function(){jQuery('body').prepend('<div style="background:#FF;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:50px;padding:7px;width:300px;margin-right:64px"><h3 style="font-family:Verdana,Arial,sans-serif;font-size:2em!important;font-weight:700!important;margin-top:-15px;text-shadow:0 0 5px #000; color:#ff">Bem-vindo ao First Web</h3><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px"><div style="background:#2672C8;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:30px;padding:30px;width:300px;margin-right:64px"><h3 style="font-family:Verdana,Arial,sans-serif;font-size:2em!important;font-weight:700!important;margin-top:-15px;text-shadow:0 0 5px #000; color:#ff">Bem-vindo(a) SWD</h3><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px">Bem-vindo(a). Este fórum trata de Design , tutoriais , duvidas , sobre suporte de códigos, tratamos de assuntos para deixar seu fórum com um design melhor, ao que nos permite lhe ajudar.</p></div>')});
A e visualizei o seu forum, o código enviado subiu sim a mensagem, ela so e maior que o espaço disponível no logo.
Chongas- *
- Membro desde : 12/04/2013
Mensagens : 43
Pontos : 98
Re: Alinhar texto ao lado do logo
Sim, fiz umas pequenas mudanças no código. Por isso ela subiu. Mais gostaria que ela ficasse mais perto do logo e que aquele espaço azul ficasse um pouco menor
Até mais
Até mais
Re: Alinhar texto ao lado do logo
Poderia me passar o código modificado?
Chongas- *
- Membro desde : 12/04/2013
Mensagens : 43
Pontos : 98
Re: Alinhar texto ao lado do logo
Olá,
Aqui está:
Até Mais
Aqui está:
- Código:
jQuery(document).ready(function(){jQuery('body').prepend('<div style="background:#FF;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:0px;padding:7px;width:500px;margin-right:4px"><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px"><div style="background:#2672C8;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:-5px;padding:30px;width:500px;margin-right:64px"><h3 style="font-family:Verdana,Arial,sans-serif;font-size:2em!important;font-weight:700!important;margin-top:-15px;text-shadow:0 0 5px #000; color:#ff">Bem-vindo(a) ao First Web</h3><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px">Bem-vindo(a). Aqui falamos de Códigos, Design, Games e ainda temos uma área RPG para aqueles fascinados.</p></div>')});
Até Mais
Re: Alinhar texto ao lado do logo
Tente esse:
- Código:
jQuery(document).ready(function(){jQuery('body').prepend('<div style="background:#FF;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:0px;padding:7px;width:500px;margin-right:4px"><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px"><div style="background:#2672C8;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:-5px;padding:30px;width:350px;margin-right:45px"><h3 style="font-family:Verdana,Arial,sans-serif;font-size:2em!important;font-weight:700!important;margin-top:-15px;text-shadow:0 0 5px #000; color:#ff">Bem-vindo(a) ao First Web</h3><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px">Bem-vindo(a). Aqui falamos de Códigos, Design, Games e ainda temos uma área RPG para aqueles fascinados.</p></div>')});
Chongas- *
- Membro desde : 12/04/2013
Mensagens : 43
Pontos : 98
Re: Alinhar texto ao lado do logo
Fiz algumas alterações no código, veja se tu gosta.
Valor em Laranja: Deslocará o texto para cima ou para baixo. Quanto maior o número, mais para baixo será deslocado o texto, logo, com valores menores, o texto será empurrado para cima.]
Valor em Índigo: Deslocará o texto para esquerda ou para direita. Quanto maior o número, mais para esquerda será deslocado o texto, logo, com valores menores, o texto será empurrado para direita.
Valor em Verde: Controla a parte azul em torno das letras. Quanto maior o valor, maior será a parte em azul.
jQuery(document).ready(function(){jQuery('body').prepend('<p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px"><div style="background:#2672C8;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:0px;padding:25px;width:500px;margin-right:64px"><h3 style="font-family:Verdana,Arial,sans-serif;font-size:2em!important;font-weight:700!important;margin-top:-15px;text-shadow:0 0 5px #000; color:#fff">Bem-vindo(a) ao First Web</h3><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px">Bem-vindo(a). Aqui falamos de Códigos, Design, Games e ainda temos uma área RPG para aqueles fascinados.</p></div>')});
Valor em Laranja: Deslocará o texto para cima ou para baixo. Quanto maior o número, mais para baixo será deslocado o texto, logo, com valores menores, o texto será empurrado para cima.]
Valor em Índigo: Deslocará o texto para esquerda ou para direita. Quanto maior o número, mais para esquerda será deslocado o texto, logo, com valores menores, o texto será empurrado para direita.
Valor em Verde: Controla a parte azul em torno das letras. Quanto maior o valor, maior será a parte em azul.
Diehl- ****
- Membro desde : 30/09/2010
Mensagens : 221
Pontos : 377
Re: Alinhar texto ao lado do logo
Olá Diehl,
Aonde posso editar aquela cor azul?
Até Mais
Aonde posso editar aquela cor azul?
Até Mais
Re: Alinhar texto ao lado do logo
Yrley escreveu:Olá Diehl,
Aonde posso editar aquela cor azul?
Até Mais
Editar em que sentido?
Diehl- ****
- Membro desde : 30/09/2010
Mensagens : 221
Pontos : 377
Re: Alinhar texto ao lado do logo
Olá,
Trocar a cor!
Até Mais
Trocar a cor!
Até Mais
Re: Alinhar texto ao lado do logo
Para mudar a cor, é só alterar a parte em índigo no código.
jQuery(document).ready(function(){jQuery('body').prepend('<p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px"><div style="background:#2672C8;box-shadow:0 0 10px #000;color:#FFFFFF;float:right;margin-top:0px;padding:25px;width:500px;margin-right:64px"><h3 style="font-family:Verdana,Arial,sans-serif;font-size:2em!important;font-weight:700!important;margin-top:-15px;text-shadow:0 0 5px #000; color:#fff">Bem-vindo(a) ao First Web</h3><p style="color:#FFFFFF;font-family:Arial,sans-serif;font-size:13px;padding-top:5px">Bem-vindo(a). Aqui falamos de Códigos, Design, Games e ainda temos uma área RPG para aqueles fascinados.</p></div>')});
Diehl- ****
- Membro desde : 30/09/2010
Mensagens : 221
Pontos : 377
Re: Alinhar texto ao lado do logo
Obrigado, podem fechar! Finalmente tudo resultou e.e
Diehl levou meu +
Diehl levou meu +
Tópicos semelhantes
» Alinhar imagens do campo de perfil lado a lado
» Texto ao lado do logo ?
» Texto ao lado do logo
» Alinhar divs lado a lado
» Alinhar logo do fórum
» Texto ao lado do logo ?
» Texto ao lado do logo
» Alinhar divs lado a lado
» Alinhar logo do fórum
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos