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 michael450
      Senhores, boa tarde.
       
      Estou com um probleminha... rss', preciso fazer a listagem de uma função da biblioteca "SPED-NFe"   na qual consulto quais as NFe que emitiram contra meu CNPJ, porém o ele executa toda a função e depois me trás o resultado, eu gostaria de trazer o resultado instantaneamente, como se fosse uma atualização segundo a segundo.
       
       
      Essas informações não são salvas em DB, é apenas para consulta.
      Se alguém puder ajudar serei muito grato,
       
      Abraço.
       
      Michael Douglas
    • By CyberBTW
      Eu estou começando a aprender html mas estou com um problema q n me deixa avançar http://prntscr.com/o3fb0g eu n sei oq esta dando de errado, sendo q todas as divs estão fechadas e estão é numeros pares.  Na video aula que eu estava vendo, o cara não teve esse problema então fiquei confuso, sendo q os codigos q eu digitei estão exatamente iguais ao do cara. Quem quiser saber q video é esta aqui: https://www.youtube.com/watch?v=qPYCnebQQ6U parei na parte 25:01
    • By drikscoelho
      Oi, gente! Não estou conseguindo resolver um problema que, aparentemente, é simples. Ajusto o html no dreamweaver e quando levo para ferramenta de email marketing, fica com espaçamento entre as imagens. Queria saber como resolver isso. 
    • By _FelipeOlvr
      Oi pessoal, blz?
       
      Bom, passei quase a tarde toda pra fazer o seguinte:
       
      Imagina que o body tem scroll Y.
      agora imagina que no meio do body tem um elemento que tem scroll no sentido X ( <--------> ).
       
      Minha dúvida é a seguinte: Como eu faço pra que, quando eu colocar o mouse em cima desse elemento que sofre scroll no sentido X, o scroll passe a acontecer nele, e não mais no body.
       
      ( Eu sei que se segurar o SHIFT e girar a rodinha do mouse, o scroll acontece somente nele. Mas eu queria tentar isso, pra dar um trabalho a menos pro usuário )
       
      Fiz um layout básico pra simular o layout em que quero fazer isso. Segue:
       
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> JS | Scroll </title> <style> body { min-height: 200vh ; display: flex ; flex-direction: column ; justify-content: center ; } .container-scroll-x { background-color: rgb(219, 237, 240) ; padding: 50px ; } .content { background-color: rgb(127, 189, 207) ; overflow-x: auto ; white-space: nowrap ; padding: 30px ; } </style> </head> <body> <div class="container-scroll-x"> <div class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. </div> </div> </body> </html> Desde já agradeço a ajuda.
       
       
×

Important Information

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