← HTML + CSS

Colocar imagem posicionada a direita

Lida 3923 vezes

Offline

Carlos Faria 
Membro
Mensagens 551 Gostos 5
Feedback +2

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

Boa tarde,

Estou com um pequeno problema...  #-o

Quero colocar esta imagem no fundo do lado direito do site www.judo.com.pt ou seja quero isto:




Já tentei tanta coisa..  #-o mas ta complicado..  :-#

Tentei isto:

Código: (css) [Seleccione]
html {
color:#333;
background:url(http://judo.com.pt/wp-content/uploads/2011/08/WJC2011.png) no-repeat;
background-position:right;
}

Também tentei criar uma div própria e etc... mas nada resultou..


Alguém tem sugestões?
Offline

alopes 
Membro
Mensagens 373 Gostos 8
Feedback -1

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

Tenta usar:

Código: [Seleccione]

background-position: [u]eixo-x[/u]px [u]eixo-y[/u]px;

Offline

Carlos Faria 
Membro
Mensagens 551 Gostos 5
Feedback +2

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

Não resultou alopes.. :/
Offline

adriano 
Membro
Mensagens 79 Gostos 0
Feedback +1

Troféus totais: 17
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 50 Posts 10 Posts First Post Karma

Na sua div body, além do background url, tente usar o float:right, colocando também o margin-right
Offline

Roberto Francisco 
Membro
Mensagens 669 Gostos 1
Feedback +3

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

Não tentei mas podes sempre criar uma imagem maior com a cor do fundo e do lado direito colocar a imagem que queres adicionar.
Ou então cria uma div especifica para a imagem e usas algo deste género:

html
Código: [Seleccione]
<div id="imagem_back"><img src="url_da_imagem"></div>

css

Código: [Seleccione]
#imagem_back {
      postion: absolute;
      right: 0;
      top: 0;
}

Isso depende muito da imaginação e da estrutura que já tens, só olhando para o código todo é que se consegue algo mais especifico.

No entanto, para a largura que o teu site (sem background) tem, para a maioria dos utilizadores possivelmente a imagem não vai aparecer.
Offline

Carlos Faria 
Membro
Mensagens 551 Gostos 5
Feedback +2

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

Na sua div body, além do background url, tente usar o float:right, colocando também o margin-right

Já tinha experimentado isso e não funciona.. :/

@Roberto

Sim isso foi umas das minhas tentativas, mas lembrei-me de uma coisa agora, o que fiz foi:

No index.php

Acrescentei isto:

Código: (php) [Seleccione]
<!-- Background para os eventos -->

<img src="http://judo.com.pt/wp-content/uploads/2011/08/WJC2011.png" alt="Campeonato do Mundo de Seniores 2011" width="190" height="932" id="eventos" />

<!-- FIM -- Background para os eventos -->

Ficando assim o index.php

Código: (php) [Seleccione]
<!-- Background para os eventos -->

<img src="http://judo.com.pt/wp-content/uploads/2011/08/WJC2011.png" alt="Campeonato do Mundo de Seniores 2011" width="190" height="932" id="eventos" />

<!-- FIM -- Background para os eventos -->


<?php get_header(); ?>

<div id="container">

  <div id="content">

<div class="clear">
<?php include(TEMPLATEPATH'/includes/home-featured.php'); ?>
<?php include(TEMPLATEPATH'/includes/home-latest.php'); ?>
</div>

<?php if(get_theme_mod('home_carousel_status') == "Yes") include(TEMPLATEPATH'/includes/home-carousel.php'); ?>

<?php if(get_theme_mod('home_ad1_status') == "Yes") include(TEMPLATEPATH'/ads/home-ad1.php'); ?>

<?php if(get_theme_mod('home_onecol_status') == "Yes") include(TEMPLATEPATH'/includes/home-onecol.php'); ?>

<?php if(get_theme_mod('home_ad2_status') == "Yes") include(TEMPLATEPATH'/ads/home-ad2.php'); ?>

<?php if(get_theme_mod('home_twocol_status') == "Yes") include(TEMPLATEPATH'/includes/home-twocol.php'); ?>

  </div><!--end #content-->

</div><!--end #container-->


<?php get_sidebar(); ?>
<?php get_footer(); ?>


E no CSS como disseste e já tinha feito:

Código: (css) [Seleccione]
#eventos {
position:absolute;
right:600px;
}


Ou seja em vez de colocar id na div, coloquei na imagem.. o resultado é este: http://judo.com.pt

A imagem encontra-se em cima do conteúdo...  sim, já alterei o valor "right" para todos os valores possíveis... e nada.. também já tentei o "left" e ficou pior.. está a me escapar algo? :O


Sim, devo reduzir a largura do site durante o evento..


Preciso de uma resposta atempada.. não devo manter o site online naquele estado.. :P
Offline

betanalista 
Membro
Mensagens 2564 Gostos 0
Feedback +18

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

põe isto

#eventos {
position:absolute;
right:0px;
}


troca o que tens por isso que já aparece direito
Offline

Carlos Faria 
Membro
Mensagens 551 Gostos 5
Feedback +2

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

@betanalista, também tentei o 0.. e fica pior nem sei onde vai parar a imagem.. :X
Offline

Carlos Faria 
Membro
Mensagens 551 Gostos 5
Feedback +2

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

Vou deixar o site como estava.. sem aquele backgroud, porque mesmo que ele vai para o sitio certo.. vai ser meio complicado devido aos vários tamanhos dos monitores...


Mas obrigado pela ajuda pessoal
Offline

betanalista 
Membro
Mensagens 2564 Gostos 0
Feedback +18

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

aqui a 0 ia para o sitio certo e em qualquer motitor com tamanho suficiente ficava no sitio certo, pois ia ficar sempre colada no monitor do lado direito.

só devia aparecer direito em monitores de 15"/14" para cima
Offline

Carlos Faria 
Membro
Mensagens 551 Gostos 5
Feedback +2

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

Como tu disseste betanalista

fica assim o site:

Offline

betanalista 
Membro
Mensagens 2564 Gostos 0
Feedback +18

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

eu testei aqui e funciona, quando testei tinhas isto:


#eventos {
position:absolute;
left:1000px;
}


eu mudei para

#eventos {
position:absolute;
right:0px;
}

e ficou onde querias :)