Jump to content
  • 0

Question

Boa tarde.

 

Estou a começar a trabalhar com o Dreamweaver e estou com dificuldade e conseguir este efeito na minha página (enviei foto). Já consegui montar a parte de cima, mas agora ao tentar fazer o bloco de baixo, com tit, foto e texto, não consigo que fique alinhado como está na foto. Será que podem ajudar-me? Eu tenho o seguinte código e CSS feito:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
<link href="exp.css" rel="stylesheet" type="text/css">
</head>

<body tracingsrc="Newsletter_2.jpg" tracingopacity="30">

  <div class="logo"><img src="imagens/Ellipse_1.png" width="221" height="42" alt=""/></div>
<header class="header">
  <div class="texto-topo">texto topo texto topo</div>
    </header>
<div class="bloco-a"><div class="tit-bloco-a">título bloco a</div>
<div class="foto-bloco-a"><img src="imagens/foto1.png" width="222" height="211" alt=""/></div>
<div class="txt-bloco-a">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
</div></div>

</body>
</html>

 

@charset "UTF-8";
*{
    margin:0 auto;
}
.logo {
    width: 30px;
    height: 20px;
    margin-top: 95px;
    margin-left: 356px;
    float: left;

}
.texto-topo {
    width: 600px;
    margin-left: 93px;
    margin-top: 20px;
    width: 591px;
    height: 42px;
    font-family: Rift;
    color: #0e3659;
    font-size: 35px;
    font-weight: 700;
    transform: scale(1.152,1.152);
}
.tit-bloco-a {
    width: 154px;
    height: 25px;
    float: left;
    margin-top: 724px;
    margin-left: -475px;
}
.foto-bloco-a img {
    width: 222px;
    height: 211px;
    float: left;
    float: left
}

}
.header {
    width: 688px;
    height: 390px;
    margin-left: 196px;
    margin-top: 301px;
    background-image: url(imagens/salty-wings-1432145-unsplash.png);
    position: absolute;
    
    
}
.tit-bloco-a{
    width: 154px;
    height: 25px;
    font-family: Rift;
    color: #0e3659;
    font-size: 35px;
    font-weight: 700;
    float: left;
}
.txt-bloco-a {
    width: 216px;
    height: 120px;
    font-family: Rift;
    color: rgba(14, 54, 89, 0.8);
    font-size: 15px;
    font-weight: 700;
    transform: scale(1.01,1.01);
    margin-top: 750px;
    text-align: center;
    float: left;
}
.bloco-a {
    width: 216px;
    height: 600;
    margin-top: 1000px;
    margin-left: 196;
    float: left;
    position: absolute;
}

foto.jpg

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0

1º - Você pode criar um "container" para definir um tamanho fixo,

assim, todos os elementos/itens dentro do mesmo, por padrão,

terão tamanhos relativos ao mesmo.

 

Segue exemplo para compreensão:

 

CÓDIGO

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>index.html</title>

		<style type="text/css">
		@charset "UTF-8";
		*{
			margin: 0;
			padding: 0;
		}
		.container {
			background-color: #dddddd;
			margin: 0 auto;
			width: 700px;
		}
		.logo {
			text-align: center
		}
		.logo img {
			width: 200px;
			height: 150px;
		}
		.header {
			width: 688px;
			height: 390px;
			margin: 0 auto;
			background-image: url(https://wallpaperaccess.com/full/51372.jpg);
			background-size: 100%;
		}
		.texto-topo {
			margin-top: 20px;
			padding: 0 20px;
			text-align: center;
			font-family: Rift;
			color: #ffffff; /* #0e3659 */
			font-size: 35px;
			font-weight: 700;
			transform: scale(1.152,1.152);
		}
		.cartoes {
			text-align: center;
			padding: 10px 0;
			margin: 0 auto;
			width: 688px;
		}
		.bloco-a {
			border: 1px solid #000;
			display: inline-block;
			margin-bottom: 5px;
			width: 32.6580%; /* 3 COLUNAS */
		}
		.tit-bloco-a {
			padding: 5px 0;
		}
		.tit-bloco-a {
			text-align: center;
			font-family: Rift;
			font-size: 35px;
			font-weight: 700;
			color: #0e3659;
		}
		.foto-bloco-a img {
			width: 100%;
			height: 200px;
		}
		.txt-bloco-a {
			color: rgba(14, 54, 89, 0.8);
			transform: scale(1.01,1.01);
			text-align: justify;
			padding: 10px 10px;
			font-family: Rift;
			font-weight: 700;
			font-size: 15px;
		}
		</style>
	</head>

	<body>
		<!-- ADICIONADO -->
		<div class="container">
			<div class="logo">
				<img src="https://images.vexels.com/media/users/3/139224/isolated/preview/b520fe439a25967a9ba04d81901002d9-logo-logo-safari-by-vexels.png" alt=""/>
			</div>

			<header class="header">
				<div class="texto-topo">texto topo texto topo</div>
			</header>

			<!-- ADICIONADO -->
			<div class="cartoes">
				<!-- CARD -->
				<div class="bloco-a">
					<div class="tit-bloco-a">título bloco a</div>

					<div class="foto-bloco-a">
						<img src="https://wallpaperaccess.com/full/51372.jpg" alt=""/>
					</div>

					<div class="txt-bloco-a">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
					</div>
				</div>
			</div>

			<!-- ADICIONADO -->
			<div class="cartoes">
				<!-- CARD -->
				<div class="bloco-a">
					<div class="tit-bloco-a">título bloco a</div>

					<div class="foto-bloco-a">
						<img src="https://wallpaperaccess.com/full/51372.jpg" alt=""/>
					</div>

					<div class="txt-bloco-a">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
					</div>
				</div>

				<!-- CARD -->
				<div class="bloco-a">
					<div class="tit-bloco-a">título bloco a</div>

					<div class="foto-bloco-a">
						<img src="https://wallpaperaccess.com/full/51372.jpg" alt=""/>
					</div>

					<div class="txt-bloco-a">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
					</div>
				</div>
			</div>

			<!-- ADICIONADO -->
			<div class="cartoes">
				<!-- CARD -->
				<div class="bloco-a">
					<div class="tit-bloco-a">título bloco a</div>

					<div class="foto-bloco-a">
						<img src="https://wallpaperaccess.com/full/51372.jpg" alt=""/>
					</div>

					<div class="txt-bloco-a">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
					</div>
				</div>

				<!-- CARD -->
				<div class="bloco-a">
					<div class="tit-bloco-a">título bloco a</div>

					<div class="foto-bloco-a">
						<img src="https://wallpaperaccess.com/full/51372.jpg" alt=""/>
					</div>

					<div class="txt-bloco-a">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
					</div>
				</div>

				<!-- CARD -->
				<div class="bloco-a">
					<div class="tit-bloco-a">título bloco a</div>

					<div class="foto-bloco-a">
						<img src="https://wallpaperaccess.com/full/51372.jpg" alt=""/>
					</div>

					<div class="txt-bloco-a">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

 

 

2º - Você pode fazer o mesmo com grids no css...

Caso queira dar uma olhada, segue link:

 

LINK

CSS GRID

Share this post


Link to post
Share on other sites
  • 0

Disponível ;)

O importante é começar, assim, o 'resto' é lucro!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By proflupin
      criei uma página que busca alguns dados no BD e retornar em forma de collapse. Como existe um WHILE executando o collapse, ele sempre o executa com o mesmo ID, ou seja, se eu tiver 20 collapse, todos vão ser abertos ao clicar no primeiro.
      A dúvida é, como eu posso criar um novo ID para o collapse a cada loop do While?
      Código:
       
      <?php while($result_inners = mysqli_fetch_object($result_inner)){ ?> <div class="card-footer "> <a class="text-muted" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapseExample"> <i class="fas fa-comment-alt"></i> <?php if(!empty($result_inners->nome_completo)) echo $result_inners->nome_completo . " respondeu..."; else echo "Aguardando resposta do técnico." ?> </a> <div class="collapse " id="collapse1"> <div class="bg-white mt-2 p-2"> <?php echo nl2br($result_inners->mensagem) ?> </div> <span style="color: #6c757d; float: right;"><?php echo date('d/m/Y H:i', strtotime($result_inners->data_hora)) ?></span> </div> </div> <?php } ?>  
    • By Lucas Trindade
      Boa noite galera!
       
      Estou desenvolvendo um site em Bootstrap e surgiu uma dúvida afinal nunca desenvolvi um layout desta forma.
       
      Na foto anexada os 3 cards estão deslocados para baixo do container e isto faz com que a seção seguinte dos cards fique em cima deles por conta deste deslocamento.
       
      Não sei se fui bem claro mas, como eu arrumaria isso? 
       
      Preciso desenvolver este site para enviar para uma empresa. Alguém poderia me ajudar? Se for necessário envio o arquivo com o site inteiro.Obrigado
    • By joicitias
      Olá, 
      Estou aprendendo a programar ainda, e preciso fazer com que ao clicar em um botão o  conteúdo selecionado de um select seja copiado para uma textarea. 
       
       

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.