Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Marcos A.A

CSS Preciso deixar um texto exatamente na parte inferior da foto e responsivo.

Recommended Posts

Eu facilmente consigo deixar o texto dentro da imagem, sq n consigo fixar esse texto exatamente na parte inferior da imagem de um jeito que fique na parte inferior mesmo se for mobile.

Screenshot_1.png

Compartilhar este post


Link para o post
Compartilhar em outros sites
Postado (editado)

No site mais básico de todos sobre desenvolvimento web, eu me matando aqui cara euheueu mds do ceu, obrigado por ajudar na minha burrice. 

Editado por Marcos A.A
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ele fico solto dentro do container, ai eu arrumo a parte do bottom, so que no mobile ele n fica fixo.

Screenshot_2.png

Screenshot_3.png

Screenshot_1.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você arrumou os "position: absolute" do texto? caso sim, já tentou por porcentagem para o texto sempre se mover com a imagem?

 

Qual quer coisa também posta o código que a gente pode tentar te ajudar melhor.

Compartilhar este post


Link para o post
Compartilhar em outros sites
<?php
		# fazendo a pesquisa de todas as categorias cadastradas
		# ordenados por titulo em ordem crescente
		$rs = $con->query("SELECT * FROM **** ORDER BY ****** DESC LIMIT 6");
		# verificando se retornou algo do banco de dados
		if($rs->rowCount() > 0){
			# percorre o resultado vindo do banco de dados e exibe na tela em
			# forma de tabela
			while($linha = $rs->fetch(PDO::FETCH_OBJ)){

				$patch  = "****/****/";

				$**** = $linha->****;
				$**** = $linha->****;
				$**** = $linha->****;
				$**** = $linha->****;
	?>

		<div class="destaque-home col s12 m4 center-align">
			<img class="imagem-destaque" alt="Normay" src="<?=$patch . $****?>">
			<figcaption class="titulo-destaque"><?=$*****?></figcaption>
			<br>
			<?php  
			
			//Qualquer dispositivo movel
			if ( $detect->isMobile() ) {  ?>
				<h6 class="sub-texto flow-text" style="text-align: justify;">Lumina nubes. Sui eodem quia. Mixta pendebat stagna. Montes nunc posset:. Pronaque terram. Duae ardentior imagine mollia occiduo terras. Fulgura aequalis contraria.</h6>
			<?php  
				}
				else {
					?><h6 class="sub-texto flow-text">Lumina nubes. Sui eodem quia. Mixta pendebat stagna. Montes nunc posset:. Pronaque terram. Duae ardentior imagine mollia occiduo terras. Fulgura aequalis contraria.</h6>
			<?php  
				}
			?>

			
		
		</div>	

			<?php
							}
						# caso não tenha nenhum retorno, deverá exibir não foi encontrado
						# nenhum registro
						}else{
					?>
					<tr>
						<td colspan="4">Nenhum registro encontrado</td>
					</tr>
					<?php
						}
					?>

O primeiro é o html, o segundo css. coloquei "****" Por causa do contrato de confidencialidade.

div.container div.row div.destaque-home {
		position: relative;
    	text-align: center;
	}
div.container div.row div.destaque-home figcaption.titulo-destaque {
		position: absolute;
		background-color: #016AB4;
		color: white;
		padding-left: 0.7%;
		padding-right: 0.7%;
	    bottom: 6px;
	    left: 11px;

	}
h6.sub-texto {
		font-size: 14px;
		margin-top: 0;	
		width: 100%;
		text-align: left;
		position: absolute;
	}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Marcos A.A Creio que não vai funcionar do jeito que você espera desta forma.

 

A solução do @Leonardo0308  é válida. Mas para ela funcionar de forma certa, no seu caso, é necessário acrescentar as media queries, para responsividade.

 Veja que você precisa posicionar o elemento com position absolute, no caso o bottom e o left.   Então é aí que entra a media querie.  Você define uma regra para a resolução desktop e outra regra igual, mudando a posição do bottom e do left para se adequar as resoluções do mobile!

 

 

  • Curtir 3

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Marcos A.A OK, então por gentileza, poderia postar a sua solução encontrada?  Assim você vai ajudar outras pessoas que estiverem na mesma dúvida! 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Criar outra div e colocar a imagem e o titulo dentra da div, e o sub texto fora. e css --->

 

 

div-que-entra-a-imagem-e-tiutlo {
	position: relative;
}
.titulo-na-imagem {
  position: absolute;
  background-color: #016AB4;
  color: white;
  text-transform: uppercase;
  font-size: 16px;
  bottom: 3%; /*Bottom muda dependendo do tamanho da imagem*/

}
.img {
  position: relative
}

 

adicionado 1 minuto depois

So que tenho outra duvida sobre um problema que isso causou, vou abrir outra enquete.

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Marcos A.A Obrigado por compartilhar a sua solução.

 

3 horas atrás, Marcos A.A disse:

So que tenho outra duvida sobre um problema que isso causou, vou abrir outra enquete.

Não precisa abrir enquete. Basta usar este mesmo tópico se a dúvida for referente ao mesmo projeto.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×