Alinhar texto ao lado do logo

por Yrley 12.05.13 15:00

Qual é minha questão:
Gente gostaria de colocar esta parte:

Alinhar texto ao lado do logo 2zo8zev

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

por Chongas 12.05.13 15:21

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.

por Diehl 12.05.13 15:33

Deixa eu pensar... O que tu queres fazer é deslocar a mensagem?

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.

por Convidado 12.05.13 16:45

Saudações!

Para que fique na posição desejada, veja abaixo: Lembrando o CSS que moverá a sua posição.

panel.introduction {position: absolute; margin-top: -400px !important; margin-left: 280px;}

Verde >Vá mudando o valor para que ele se posicione mais acima, sempre aumentando o valor para que ele vá ao topo.
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>')});

Edite como queira.

Até. Piscada

por Chongas 12.05.13 16:55

Crie um novo JavaScript e adicione o seguinte código:

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>')});

Com investimento em todas as páginas.
Resulta?

por Yrley 12.05.13 18:58

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:

Alinhar texto ao lado do logo Lxtnq

Até Mais

por Yrley 12.05.13 21:38

por Chongas 12.05.13 22:24

Substitua 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: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?

por Yrley 12.05.13 22:25

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?

por Chongas 12.05.13 22:27

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>')});

por Yrley 12.05.13 22:29

Não subiu e nem fez nada este último código

por Chongas 12.05.13 22:36

Substitua 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"><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.

por Yrley 12.05.13 22:39

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 zen

por Chongas 12.05.13 22:46

Poderia me passar o código modificado?

por Yrley 12.05.13 22:48

Olá,

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

por Chongas 12.05.13 22:52

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>')});

por Diehl 12.05.13 22:59

Fiz algumas alterações no código, veja se tu gosta.

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.

por Yrley 12.05.13 23:52

Olá Diehl,

Aonde posso editar aquela cor azul?

Até Mais zen

por Diehl 12.05.13 23:59

Yrley escreveu:Olá Diehl,

Aonde posso editar aquela cor azul?

Até Mais

Editar em que sentido?

por Yrley 13.05.13 0:20

Olá,

Trocar a cor!

Até Mais zen

por Diehl 13.05.13 0:24

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>')});

por Yrley 13.05.13 0:27

Obrigado, podem fechar! Finalmente tudo resultou e.e

Diehl levou meu +

Hitskin.com

Alinhar texto ao lado do logo

Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo

Re: Alinhar texto ao lado do logo