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 EdPaulino
      Bom dia pessoal, estou tentando inserir um menu responsivo no meu projeto, mas quando acesso pelo celular ele não se adapta, continua do mesmo jeito que no  computador, o que deve-se fazer pra forçar-lo a se adaptar?
       
      segue codigo:
       
      <!--
       
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>Menu RESPONSIVO</title>
          
          <!---<link rel="stylesheet" href="style.css">-->
      </head>
          <style>
              *{
                  margin: 0;
                  padding: 0;
               }
              
              .menu{
                  width: 100%;
                  height: 50px;
                  background-color: #f0f0f0;
                  font-family:'Arial';
              }
              .menu ul{
                  list-style:none;
                  position: relative;
              }
              .menu ul li{
                  width: 150px;
                  float: left;
              }
              .menu ul ul{
                  position: absolute;
                  visibility: hidden; 
              }
              
              .menu ul li:hover ul{
                  visibility: visible;
                  display:block;
              }
              .menu a{
                  text-decoration: none;
                  display: block;
                  padding: 15px;
                  text-align: center;
                  background-color: #f6f6f6;
                  color: #000;
              }
              .menu a:hover{
                  background-color: #f4f4f4;
              }

              .menu ul ul li{
                      float: none;
                      border-bottom: 1px solid #000;
              }
              .menu ul ul li a{
                      background-color: #f0f0f0;
              }
              label[for="bt_menu"]{
                          padding: 5px;
                          background-color: #d0d0d0;
                          font-family: 'Arial';
                          text-align: center;
                          font-size: 30px;
                          width: 50px;
                          height: 50px;
              }
              
              #bt_menu{
                  display: none ;
              }    
              label[for="bt_menu"]{
                          display: none;        
              }
          @media (max-width: 800px){
                  label[for="bt_menu"]{
                          display:block;
                          margin-left: 0;        
                  }
                  #bt_menu:checked ~ .menu{
                      margin-left: 0;
                      display: block;
                  }    
                  
                  .menu{
                      margin-top:5px;
                      margin-left: -100%;
                      transition: all .4s
                  }
                  .menu ul li{
                      width:100%;
                      float: none;
                  }
                  .menu ul ul{
                      position:static;
                      overflow: hidden;
                      max-height: 0;
                      transition: all 2s;
                  }
                  .menu ul li:hover ul{
                      height:auto;
                      max-height: 200px;
                  }
                          
          }    
          </style>
      <body>
          <input type="checkbox" id="bt_menu">
          <label for="bt_menu">&#9776;</label>
                 <nav class="menu">
                      <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Serviços</a>
                  <ul>
                  <li><a href="#">Criação de Sites</a></li>
                  <li><a href="#">Artes Visuais</a></li>
                  </ul>
              </li>
              <li><a href="#">Cursos</a>
                  <ul>
                  <li><a href="#">Java</a></li>
                  <li><a href="#">Photoshop</a></li>
                  <li><a href="#">HTML/CSS</a></li>
                  </ul>
              </li>
              <li><a href="#">Contato</a></li>
              </ul>
                  </nav>
      </body>
      </html>
       
      --->

    • By s3c0
      Olá pessoal,
       
      peguei um exemplo de um menu suspenso que utiliza somente CSS, porém não estou conseguindo adaptar para a minha aplicação.
       
      Segue abaixo:
       
      * { box-sizing: border-box; } body { margin: 0; } /*Configurações Padrões*/ ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none; width:100%; } ul.menu ul{ position:absolute; display:none;} /* Configurações nivel 1*/ ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; padding:0 5px;} .menu li{ float:left; width:auto; position:relative;} .menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; width:240px; transition:all 0.1s linear; } /* Configurações nivel 2*/ .menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:0px; width:250px; } .menu ul.submenu-1 a{ padding:0 20px; width:250px; } /* Configurações nivel 2*/ .menu li:hover > ul.submenu-2{ display:block; top:0; padding:0px; width:250px; left:240px; } .menu ul.submenu-2 a{ width:250px; padding:0 20px; } /* Configurações nivel 3*/ .menu li:hover > ul.submenu-3{ display:block; top:0; padding:0px; width:250px; left:240px; } .menu ul.submenu-3 a{ width:250px; padding:0 20px; } .column1 { float: left; width: 250px; padding: 10px; min-height: 250px; } .column1 a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column1 a:hover { } .column4 { float: right; width: 300px; padding: 10px; min-height: 250px; position:relative; top:0px; } .column4 a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column4 a:hover { } .row:after { content: ""; display: table; clear: both; } /*Configurações de cores*/ /*nivel 1*/ .menu{background:#CCC; } .menu a{ color:#000; } .menu li:hover > a{ color:#000; } /*nivel 2*/ .submenu-1{} .submenu-1 a{color:#000;} .submenu-1 li:hover > a{ color:#000; } /*nivel 3*/ .submenu-2{ } .submenu-2 a{color:#000;}; .submenu-2 li:hover > a{ color:#000; } /*nivel 3*/ .submenu-3{ } .submenu-3 a{color:#000;} .submenu-3 li:hover > a{ color:#000; }  
      <ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal --> <li><a href="#">Categorias <i class="fa fa-caret-down"></i></a> <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down --> <li><a href="#">Departamento 1 <i class="fa fa-caret-right"></i></a> <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down --> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 11</a></li> <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a> <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down --> <li><a href="#">Subcategoria 1</a></li> <li><a href="#">Subcategoria 11</a></li> <li><a href="#">Subcategoria 111</a></li> </ul> </li> </ul> </li> <li><a href="#">Departamento 2 <i class="fa fa-caret-right"></i></a> <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down --> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 11</a></li> <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a> <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down --> <li><a href="#">Subcategoria 1</a></li> <li><a href="#">Subcategoria 11</a></li> <li><a href="#">Subcategoria 111</a></li> </ul> </li> </ul> </li> </ul> </li> </ul>  
      A primeira imagem é o resultado e a segunda imagem, seria o que estou querendo fazer.
       
      Alguém consegue me explicar o que está de errado?
       
      Agradeço a atenção de todos!


    • By Ewerton Hugo
      Boa noite, estou tentando fazer um site, que mostre a hora no momento que é acessado, juntamente com uma imagem que represente os periodos do dia, manhã
      , tarde e noite.Porém não consigo fazer com que o código em java script funcione alguém pode me ajudar (sou iniciante)?
       
       
       
    • By huntressDc
      Estou com uma atividade de aula para fazer e gostaria de uma ajuda, devo receber do usuário o valor da compra e o valor pago, e então exibir o troco. Até aí ok, só que também pede para exibir numa textarea as notas utilizadas no troco, informando sempre o mínimo de notas possíveis, exemplo:
       
       
      vlrCompra = 53,00 vlrPago = 100,00 vlrTroco = 47,00 notasTroco = 4 notas de 10,00 1 nota de 5,00 2 notas de 1,00  
      Não sei como fazer essa última parte, alguém para me ajudar? AS NOTAS QUE EU TENHO DISPONIVEIS SAO 1, 5, 10, 50
      Eis o que fiz até agora:
       
      function calculaTroco(){          var valorCompra = parseFloat($("#valorCompra").val());     var valorPago = parseFloat($("#valorPago").val());     var valorTroco = 0;          if (validarCampos() && validarNan()){         if (valorPago == valorCompra){             valorTroco = 0;             $("#valorTroco").val(valorTroco);             alert("Não gerou troco");                      }else if(valorPago > valorCompra){                          valorTroco = valorPago - valorCompra;             $("#valorTroco").val(valorTroco);                      }else{             alert("Não gerou troco (Valor pago menor que valor da compra)");         }         notasUtilizadas();         $("#valorCompra").val("");         $("#valorPago").val("");         $("#valorCompra").focus();     } } validarCampos() e validarNan() são apenas funções de tratamento. A função notasUtilizadas() seria a função que não estou conseguindo fazer... Devo utilizar array, if, for nessa atividade.
       
      Se alguém puder me ajudar, me dar umas dicas, agradeço muito!
       
      Parte do HTML:
      <!DOCTYPE html>
      <html lang="pt-BR">
          <head>
              <meta charset="utf-8"/>
              <title>Calcular Troco</title>
              <script type="text/javascript" src="jquery.js"></script>
              <style type="text/css">
                  fieldset { width:250px; }
                  label { display:block; float:left; } 
                  label, input, textarea, select { width:150px; margin: 5px 0; }
                  th, td { border:1px solid #ccc; font-size:0.9em; }
              </style>
          </head>
          <body>
              
              <form id="formulario">
                  <fieldset>
                      <legend>Calcular Troco</legend>
                      
                      <label for="valorCompra" >Valor da compra:</label>
                      <input type="text" id="valorCompra" name="valorCompra" /><br />
                      
                      <label for="valorPago" >Valor pago:</label>
                      <input type="text" id="valorPago" name="valorPago" /><br /><br />
                      
                      <button type="button" id="button" onclick="calculaTroco()">Calcular troco</button><br /><br />
                      
                      <label for="valorTroco" >Valor do troco:</label>
                      <input type="text" id="valorTroco" name="valorTroco" readonly="readonly"/><br /><br />    
                      
                      <label for="notasUtilizadas">Notas utilizadas:</label>
                      <textarea rows="3" id="notasUtilizadas" readonly="readonly" ></textarea><br/>
                      
                  </fieldset>
              </form>
          <script type="text/javascript" src="troco.js"></script>
          </body>
      </html>
×

Important Information

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