Centralizar código html

3 participantes

Ir para baixo

Tópico resolvido Centralizar código html

Mensagem por coenzi 05.01.14 16:44

Qual é minha questão:
Então pessoal, recentemente eu coloquei 1 sistema super bom no meu fórum, é um sistema de noticias rotatórias, que fica passando banner por banner e dando as noticias do meu fórum, porém, não ficou como eu queria, a caixa de noticias esta deslocada ao canto direito, bem encostadinha na parede do fórum, ou seja ela não esta centralizada, e era isso que eu queria saber, como eu centralizo ela ?

Código:
<center><style>
.slide {font-family: verdana; font-size: 11px;}
</style><link rel="stylesheet" type="text/css" href="http://habboxhost1.orgfree.com/files/tooltip.css" /><script type="text/javascript" language="javascript" src="http://habboxhost1.orgfree.com/files/tooltip.js"></script><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script src="http://habboxhost1.orgfree.com/scripts/mootools.v1.11.js" type="text/javascript"></script><script src="http://habboxhost1.orgfree.com/scripts/jd.gallery.js" type="text/javascript"></script><style type="text/css">




a:link {
 
  color: #E3BD00;
 
  font-weight: bold;
  text-decoration: none;
 
}
 
a:visited {
 
  color: #E3BD00;
  text-decoration: none;
 
}
 
a:hover {
 
  color: #E3BD00;
  text-decoration: none;
 
}
 
a:active {
 
  color: #E3BD00;
  text-decoration: none;
 
}
 
.style2 {font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;}
 
body,td,th {
 
  color: #FFFFFF;
  font-family: Calibri, Verdana, Helvetica, sans-serif;
    font-size: 6px;
  background: #FFFFFF;
 
}
      
      
#myGallery, #myGallerySet, #flickrGallery
{
  width: 954px;
  height: 293px;
  z-index:5;
  border: 1px solid #350000;
}




#flickrGallery
{
  width: 300px;
  height: 334px;
}




#myGallery img.thumbnail, #myGallerySet img.thumbnail
{
  display: none;
}




.jdGallery
{
  overflow: hidden;
  position: relative;
}




.jdGallery img
{
  border: 0;
  margin: 0;
}




.jdGallery .slideElement
{
  width: 100%;
  height: 100%;
  background-color: #350000;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('img/loading-bar-black.gif');
}




.jdGallery .loadingElement
{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #350000;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('img/loading-bar-black.gif');
}




.jdGallery .slideInfoZone
{
  position: absolute;
  z-index: 10;
  width: 100%;
  margin: 0px;
  left: 0;
  bottom: 0;
  height: 70px;
  background: #333;
  color: #fff;
  text-indent: 0;
  overflow: hidden;
}




* html .jdGallery .slideInfoZone
{
  bottom: -1px;
}




.jdGallery .slideInfoZone h2
{
  padding: 0;
  font-size: 80%;
  margin: 0;
  margin: 2px 5px;
  font-weight: bold;
  color: inherit;
}




.jdGallery .slideInfoZone p
{
  padding: 0;
  font-size: 60%;
  margin: 2px 5px;
  color: #eee;
}




.jdGallery div.carouselContainer
{
  position: absolute;
  height: 135px;
  width: 100%;
  z-index: 10;
  margin: 0px;
  left: 0;
  top: 0;
}




.jdGallery a.carouselBtn
{
  position: absolute;
  bottom: 0;
  right: 30px;
  height: 20px;
  /*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
  text-align: center;
  padding: 0 10px;
  font-size: 13px;
  background: #333;
  color: #fff;
  cursor: pointer;
}




.jdGallery .carousel
{
  position: absolute;
  width: 100%;
  margin: 0px;
  left: 0;
  top: 0;
  height: 115px;
  background: #333;
  color: #fff;
  text-indent: 0;
  overflow: hidden;
}




.jdExtCarousel
{
  overflow: hidden;
  position: relative;
}




.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
  position: absolute;
  width: 100%;
  height: 78px;
  top: 10px;
  left: 0;
  overflow: hidden;
}




.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
  position: relative;
}




.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
  cursor: pointer;
  background: #350000;
  background-position: center center;
  float: left;
  border: solid 1px #fff;
}




.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
  margin-bottom: 10px;
}




.jdGallery .carousel .label, .jdExtCarousel .label
{
  font-size: 13px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  padding: 0;
  margin: 0;
}




.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
  font-size: 10px;
  position: absolute;
  bottom: 5px;
  right: 10px;
  padding: 1px 2px;
  margin: 0;
  background: #222;
  border: 1px solid #888;
  cursor: pointer;
}




.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{
  color: #b5b5b5;
}
  
  
/* Gallery Sets */




.jdGallery a.gallerySelectorBtn
{
  z-index: 15;
  position: absolute;
  top: 0;
  left: 30px;
  height: 20px;
  /*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
  text-align: center;
  padding: 0 10px;
  font-size: 13px;
  background: #333;
  color: #fff;
  cursor: pointer;
  opacity: .4;
  -moz-opacity: .4;
  -khtml-opacity: 0.4;
  filter:alpha(opacity=40);
}




.jdGallery .gallerySelector
{
  z-index: 20;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  background: #350000;
}




.jdGallery .gallerySelector h2
{
  margin: 0;
  padding: 10px 20px 10px 20px;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
}




.jdGallery .gallerySelector .gallerySelectorWrapper
{
  overflow: hidden;
}




.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
  margin-left: 10px;
  margin-top: 10px;
  border: 1px solid #888;
  padding: 5px;
  height: 40px;
  color: #fff;
  cursor: pointer;
  float: left;
}




.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
  background: #333;
}




.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
  background: #350000;
  background-position: center center;
  float: left;
  border: none;
  width: 40px;
  height: 40px;
  margin-right: 5px;
}




.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: normal;
}




.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: normal;
  color: #aaa;
}
 
<!--
 
#myGallery
 
{
 
width: 760px !important;
 
height: 293px !important;
 
}




 
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}




 
-->
 
        </style><script type="text/javascript">
 
function startGallery() {
 
var myGallery = new gallery($('myGallery'), {
 
timed: true
 
});
 
}
 
window.addEvent('domready', startGallery);
 
</script><style>
body{padding:0px;margin:0px;}
</style> 
<div align="center" class="content">
    
   <div id="myGallery">
       
      <div class="imageElement">
          
         <h3>
             <span style="font-size: 24px;">FASE BETA CHEGANDO AO FIM!!</span> 
         </h3>
          
         <p class="style2">
             <span style="font-size: 13px;">Mais algumas etapas e chegamos ao fim !! <a target="_blank" href="(Link)">Olimpicos RPG!</a></span> 
         </p><a href="#" title="  " class="open" target="conteudo_ihabbo"></a><img src="http://i56.servimg.com/u/f56/18/66/31/49/fase_b13.jpg" class="full" /><img src="http://i56.servimg.com/u/f56/18/66/31/49/fase_b13.jpg" class="thumbnail" /> 
      </div>
       
      <div class="imageElement">
          
         <h3>
             <span style="font-size: 24px;">CRIE SUA AVENTURA!</span> 
         </h3>
          
         <p class="style2">
             <span style="font-size: 13px;">Crie sua aventura e Se Divirta!<a target="_blank" href="http://olimpicosrpg.web-rpg.com/f8-criacao-de-ficha"> Clique aqui e Crie sua Ficha</a></span> 
         </p><a href="#" title="  " class="open" target="conteudo_ihabbo"></a><img src="http://i56.servimg.com/u/f56/18/66/31/49/crie_s10.jpg" class="full" /><img src="http://i56.servimg.com/u/f56/18/66/31/49/crie_s10.jpg" class="thumbnail" /> 
      </div>
       
      <div class="imageElement">
          
         <h3>
             <span style="font-size: 24px;">O COLISEU !! O Evento Surpresa!</span> 
         </h3>
          
         <p class="style2">
             <span style="font-size: 13px;">Premios, Alcunha e tudo mais para o Melhor da cidade! <a target="_blank" href="(colocar link aqui)">Olimpicos RPG</a></span> 
         </p><a href="#" title="  " class="open" target="conteudo_ihabbo"></a><img "="" src="http://i56.servimg.com/u/f56/18/66/31/49/colise11.jpg" class="full" /><img src="http://i56.servimg.com/u/f56/18/66/31/49/colise11.jpg" class="thumbnail" /> 
      </div>
       
   </div>
    
</div></center>


Endereço do meu fórum:
http://olimpicosrpg.web-rpg.com

Versão do fórum:
INVISION


Última edição por coenzi em 05.01.14 20:22, editado 1 vez(es)
coenzi
coenzi
****

Membro desde : 27/11/2013
Mensagens : 384
Pontos : 632

http://hero-rpg.web-rpg.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar código html

Mensagem por Hancki 05.01.14 17:03

Olá!

Use este CSS:
Código:
div.content[align="center"] {
width: 850px !important;
text-align: left !important;
}
Hancki
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar código html

Mensagem por coenzi 05.01.14 17:06

não funcionou.
coenzi
coenzi
****

Membro desde : 27/11/2013
Mensagens : 384
Pontos : 632

http://hero-rpg.web-rpg.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar código html

Mensagem por Hancki 05.01.14 17:09

Aqui funcionou: https://i.imgur.com/9LtQPN1.png
E aí tem também que funcionar.

Hancki
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar código html

Mensagem por coenzi 05.01.14 17:36

mas não funcionou ¬¬'
coenzi
coenzi
****

Membro desde : 27/11/2013
Mensagens : 384
Pontos : 632

http://hero-rpg.web-rpg.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar código html

Mensagem por coenzi 05.01.14 17:41

minha folha css
Código:
div.maintitle, table.ipbtable th {
  background-color: #F0F0F0 !important;
  background-image: url("http://i56.servimg.com/u/f56/18/66/31/49/111110.jpg") !important;
  background-repeat: repeat-x;
  color: #000000;
  padding: 8px 8px 8px 15px;
  vertical-align: middle;
}
.maintitle h2 {
  position: absolute !important;
  z-index: 100;
}
table.ipbtable th.forum {
  color: #F0F0F0;
  text-align: left !important;
  width: 280px !important;
}
.ipbtable.index-box thead {
  margin-top: -26px !important;
  position: absolute !important;
}
table.ipbtable th.topics {
  text-align: left !important;
  width: 190px !important;
}
table.ipbtable th.replies {
  text-align: left !important;
  width: 130px !important;
}
table.ipbtable td.icon {
  padding-top: 50px !important;
}
/*SEPARANDO AVATAR DO TEXTO COM RISCO PRETO*/
div.postbody {
border-left: 1px solid black !important;
}
/*BORDAS NO CAMINHO (PATH) DOS FORUNS*/
ul#navstrip {
border: 1px solid grey !important;
background-color: white !important;
padding: 10px !important;
 -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
div#emptyidcc {
padding-top: 15px !important;
}
/*COISA ESTRANHA ABAIXO DAS CATEGORIAS*/
table.ipbtable tfoot td {
  display: none !important;
}
/*CONTORNO NO FÓRUM*/
#ipbwrapper {
  border: 2px solid #B0B0A9;
  border-radius: 8px 8px 8px 8px;
  padding: 5px !important;
  position: relative !important;
  top: 10px !important;
}
/*LADO BOTÕES NOVO TÓPICO*/
div.pagination {
  float: right !important;
}
.posting-options.topic-options {
  float: left !important;
  width: auto !important;
}
/*Efeito nos ADMINISTRADOR*/
a[href="/u1"] {
text-shadow: 0 0 1px #5E0AAD;
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/21ee1p10.gif);
}
a[href="/u2"] {
text-shadow: 0 0 1px #5E0AAD;
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/21ee1p10.gif);
}
a[href="/u18"] {
text-shadow: 0 0 1px #5E0AAD;
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/21ee1p10.gif);
}
/*Efeito nos GAME MASTER*/
a[href="/u5"] {
text-shadow: 0 0 1px #FC8A8A;
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/21ee1p10.gif);
}
a[href="/u17"] {
text-shadow: 0 0 1px #FC8A8A;
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/21ee1p10.gif);
}
a[href="/u11"] {
text-shadow: 0 0 1px #FC8A8A;
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/21ee1p10.gif);
}
a[href="/u13"] {
text-shadow: 0 0 1px #FC8A8A;
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/21ee1p10.gif);
}
a[href="/u31"] {
text-shadow: 0 0 1px #FC8A8A;
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/21ee1p10.gif);
}
/*Efeito nos Grupos*/
a[href="/g1-administradores"] {
text-shadow: 0 0 1px #071E4A;
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/21ee1p10.gif);
}
a[href="/g2-game-master"] {
text-shadow: 0 0 1px #FC8A8A;
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/21ee1p10.gif);
}

/* Tirar sublinhar */
#chatbox .user a {
  text-decoration: none !important;
}
a {
    text-decoration: none !important;
}

/* Tirar o Faq */
a.mainmenu[href="/faq"]{
display: none !important;
}

/* CHAT-BOX PERSONALIZADO */
#chatbox_members {
background: rgb(246, 246, 248);
border: 1px solid rgb(204, 204, 204);
margin: 4px;
top: 43px;
bottom: 28px;
      left: 10;
}
#chatbox_members .member-title {
background: url(http://i58.servimg.com/u/f58/18/24/85/15/gm-loo10.jpg) repeat-x bottom #363636;
color: #fff;
padding: 5px;
text-align: left;
padding: 8px 10px;
}
#chatbox p {
background: transparent;
padding: 5px;
line-height: 1.3em;
}
#chatbox p span[style="color:green;"], #chatbox p span[style="color:red;"] {
  background: #FAFAD2;
}
#chatbox_footer {
  background: transparent;
  border: 0px;
}
#chatbox_footer .left {
  float: left;
}
#chatbox_messenger_form .right {margin-left: 8px;font-size:0}
input#message.post {
font-family: inherit;
min-width: 430px;
color: #000;
font-size: 13px;
background-color: #fff;
padding: 3px;
margin-bottom: 2px;
border-width: 1px;
border-style: solid;
border-top-color: rgb(192,192,192);
border-right-color: rgb(233,233,233);
border-bottom-color: rgb(233,233,233);
border-left-color: rgb(192,192,192);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
outline: 0;
}
input#message.post:focus {
background: rgb(255,255,240) url('http://i58.servimg.com/u/f58/18/24/85/15/form-e10.png') repeat-x;
border-top-color: rgb(150,150,150);
border-bottom-color: rgb(230,230,230);
  }
#submit_button, .fontbutton {
font-style: normal;
font-size: 12px;
font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
color: rgb(0, 0, 0);
background: rgb(220,220,235) url('http://i58.servimg.com/u/f58/18/24/85/15/form-b10.png') repeat-x top;
padding: 0px 6px;
border: 1px solid rgb(221, 221, 235);
border-top-color: rgb(255, 255, 255);
border-bottom-color: rgb(179, 179, 189);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
text-align: center;
-webkit-box-shadow: 0px 1px 4px 0px rgb(200,200,210);
-moz-box-shadow: 0px 1px 4px 0px rgb(200,200,210);
-khtml-box-shadow: 0px 1px 4px 0px rgb(200,200,210);
box-shadow: 0px 1px 4px 0px rgb(200,200,210);
text-shadow: 0 0 0 transparent, 0px -1px 2px white;
outline: none;
line-height: 23px;
display: inline-block;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
height: 23px;
}
#submit_button {
margin-left: 13px;
}
#submit_button:hover, .fontbutton:hover {
color: black;
background-color: rgb(255,255,200);
border-color: rgb(255,255,200);
border-top-color: white;
border-bottom-color: rgb(190,190,170);
}
#simple-wrap {
  background:white;
}
#chatbox_top {
  min-height: 280px;
}
#chatbox{
  top: 43px;
  bottom: 28px;
  margin: 5px;
  background: rgb(246, 246, 248);
  border: 1px solid rgb(204, 204, 204);
  padding: 5px;
  right: 0px;
  left:198;
}

Valide!
coenzi
coenzi
****

Membro desde : 27/11/2013
Mensagens : 384
Pontos : 632

http://hero-rpg.web-rpg.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizar código html

Mensagem por Shek 05.01.14 18:36

Boa tarde!

O senhor poderia por favor me informar o problema através de uma imagem? Usando o código informado ele está centralizado como deseja. Por favor, não envie mensagens consecutivas antes de atingir 24hrs.
Shek
Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos