Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

PedroNunes

Alinhamento dentro de button.

Recommended Posts

Olá, estou com um problema para alinhar os nomes das redes sociais dentro desse button, tentei com padding, margin, coloquei em display block, inline e nada, ou não funciona ou meche com os ícones <i> também, aparentemente parece algo bem simples mas não consegui identificar a solução. Estou tentando deixar semelhante à imagem. É apenas um site para um trabalho de um curso que estou fazendo. Sou estou estudando desenvolvimento web a pouco tempo e ainda fico meio perdido em meio a coisas simples. Desde já agradeço.

<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
	<title>Portfolio | Pedro Nunes</title>
</head>

<!--HEADER + NAV-->
<body>
	<header>
		<h1><a href="#one">PedroNunes</a></h1>
		<nav>
			<ul>
				<li><a href="#two">About</a></li>
				<li><a href="#tree">Portfolio</a></li>
				<li><a href="#four">Contact</a></li>
			</ul>
		</nav>
	</header>

	<!--IMAGES-->
	<div class="img">
		<div id="one">
			<img src="https://i.imgur.com/gkfc9m4.jpg" alt="">
			<section>
				<button class="btn1"><i class="fab fa-github-square fa-2x"></i><a href="https://github.com/pedronuness" target="_blank"> GitHub</a></button>
				<button class="btn2"><i class="fab fa-facebook fa-2x"></i><a href="https://www.facebook.com/pedronuness10"> Facebook</a></button>
				<button class="btn3"><i class="fab fa-twitter-square fa-2x"></i><a href="https://twitter.com/Vector2500"> Twitter</a></button>
			</section>
		</div>

		<div id="two">
			<img src="https://i.imgur.com/A9rXfSU.jpg" alt="">
			<section>
				<h2>Hi, I'm Pedro</h2>
				<p>Hello, I'm So-and-so, I'm 19 and working with front-end development for 2 years. I am currently in the second year of the Information Systems course.
				My specialties include developing websites with HTML5, CSS3 and JavaScript. check my top jobs in my portfolio ou get in touch with me if you want to hire my services.</p>
			</section>
		</div>

		<div id="tree">
			<img src="https://i.imgur.com/22kB3E8.jpg" alt="">
			<section>
				<a href="https://github.com/pedronuness/projeto_google_glass" target="_blank"><img id="img1" src="https://i.imgur.com/iDsRVO3.png" alt=""></a>
				
				<a href="https://pedronuness.github.io/projeto_mirror_fashion/" target="_blank"><img id="img2" src="https://i.imgur.com/EpIkQnB.png" alt=""></a>
				
				<a href="https://pedronuness.github.io/projeto_noteshop/" target="_blank"><img id="img3" src="https://i.imgur.com/wNbk1we.png" alt=""></a>
				
				<a href="https://pedronuness.github.io/projeto_patas/" target="_blank"><img id="img4" src="https://i.imgur.com/0IyMlK2.png" alt=""></a>
			</section>
		</div>

		<div id="four">
			<img src="https://i.imgur.com/GwocD46.jpg" alt="">
			<h3>pedronuness10@gmail.com</h3>
			<section>				
				<button class="btn1"><a href="https://github.com/pedronuness" target="_blank">GitHub</a></button>
				<button class="btn2"><a href="https://www.facebook.com/pedronuness10" target="_blank">Facebook</a></button>
				<button class="btn3"><a href="https://twitter.com/Vector2500" target="_blank">Twitter</a></button>
			</section>
		</div>
	</div>
	
	<!--FOOTER-->
	<footer>
		<p>&copy; All rights reserved - 2018</p>
	</footer>
	
</body>
</html>
/*----------ALL----------*/
body{
	background-color: rgba(100, 100, 100, 0.69);
	margin: 0px 0 0 0;
	padding: 0;
	list-style: none;
	font-family: monospace;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
}
img{margin-top: -2px;}
a{text-decoration: none;}

/*----------HEADER----------*/
header{
	background: rgba(211, 211, 211, 0.88);
	width: 100%;	
	height: 50px;
	position: fixed;
	border-bottom: 2px solid;
	z-index: 1;
}
header h1{
	border-left: 2px solid;
	float: left;
	margin: 0 0 0 30px; 
	padding: 7px;
	word-spacing: -10px;
}
header a{
	color: #000;
}
header nav{
	float: right;
	margin: 0px 41px 0 0;
}
header nav ul li{
	display: inline-block;
	list-style: none;
}
header nav ul li a{
	background-color: rgba(100, 100, 100, 0.69);
	color: #fff;	
	text-transform: uppercase;
	padding: 16px 30px;
	border-right: 2px solid #000000;
	border-left: 2px solid #000000;
	margin-right: -6px;
}
header nav ul li a:hover{
	background-color: #191919;
}

/*----------CONTENT----------*/
div img{
	border: 2px solid;
	margin-top: -6px;
	box-sizing: border-box;	
}
div.img a{
	color: #fff;
}
/*-----------Primeira Imagem----------*/
div#one img{
	width: 100%;	
}
div#one section button{
	position: absolute;
	border: 2px solid #fff;
	width: 160px;
	height: 50px;
	cursor: pointer;
	font-size: 20px;	
	background-color: rgba(100, 100, 100, 0.69);
}
div#one section button i{
	color: rgba(0, 0, 0, 0.79);
}
div#one section button:hover{
	background-color: #191919;
}
div#one button.btn1{
	margin: -300px 0 0 400px;
}
div#one button.btn2{
	margin: -300px 0 0 600px;	
}
div#one button.btn3{
	margin: -300px 0 0 800px;	
}

/*----------Segunda Imagem----------*/
div#two img{
	margin-left: 30px; /*margin: o auto não funcionou*/
}
div#two section{
	border: 2px solid;
	width: 380px;
	height: 400px;
	position: absolute;
	margin: -550px 150px;
	background-color: rgba(100, 100, 100, 0.95);
	padding: 20px;
	line-height: 25px;
	
}
div#two section h2{
	color: #fff;
}
div#two section p{
	color: #fff;
}

/*Terceira Imagem*/
div#tree img{
	margin-left: 30px;
}
div#tree section a img{
	border: 2px solid black;
	position: absolute;	
}
div#tree section #img1{
	margin: -800px 70px;
}
div#tree section #img2{
	margin: -800px 730px;
	
}
div#tree section #img3{
	margin: -400px 70px;
}
div#tree section #img4{
	margin: -400px 730px;
}

/*Quarta Imagem*/
div#four img{
	margin-left: 30px;
}
div#four h3{
	position: absolute;
	margin: -350px 150px;
	font-size: 25px;
}
div#four section{
	position: absolute;
	margin: -250px 150px;
}
div#four section button{
	position: absolute;
	border: 2px solid #fff;
	width: 120px;
	height: 50px;
	cursor: pointer;
	font-size: 20px;	
	background-color: rgba(100, 100, 100, 0.69);
}
div#four section button:hover{
	background-color: #191919;
}
div#four button.btn1{
	margin: -70px 0 0 700px;
}
div#four button.btn2{
	margin: 30px 0 0 700px;	
}
div#four button.btn3{
	margin: 130px 0 0 700px;	
}

/*----------FOOTER----------*/
footer{
	width: 100%;
	background-image: url(https://i.imgur.com/hwYMH6L.png);
	height: 60px;
	border: 2px solid;
	box-sizing: border-box;
	margin-top: -6px;
}
footer p{
	margin-left: 15px;
}

 

Capturar.PNG

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa tarde Pedro,

 

Eu fiz umas mudanças na sua estruruta html para facilitar a estilização, mude isso no html:

<section>
  <div class="area-btns">
    <a href="https://github.com/pedronuness" target="_blank"><i class="fab fa-github-square fa-2x"></i>GitHub</a>
    <a href="https://www.facebook.com/pedronuness10"><i class="fab fa-facebook fa-2x"></i>Facebook</a>
    <a href="https://twitter.com/Vector2500"><i class="fab fa-twitter-square fa-2x"></i>Twitter</a>
  </div>
</section>

 

E isso no css:

/*-----------Primeira Imagem----------*/

div#one img{width: 100%;}

.area-btns{
	margin: -300px 0 0 400px;
	position: absolute;
	display: flex;
}

.area-btns a{
	display: flex;
    align-items: center;
	margin-right: 40px;
	border: 2px solid #fff;
	width: 150px;
	height: 50px;
	cursor: pointer;
	padding: 0 10px;
	font-size: 20px;	
	background-color: rgba(100, 100, 100, 0.69);
}
.area-btns a i{
	float: left;
	margin-right: 15px;
	color: rgba(0, 0, 0, 0.79);
}
.area-btns a:hover{background-color: #191919;}
.area-btns a:hover i{color: #fff;}

/*----------Segunda Imagem----------*/

Testa aí e veja se ficou do jeito que gostaria...

Para fazer dessa forma mais simples, não teve jeito, precisei mudar a sua estrutura html :/

 

Com essas modificações, está ficando assim no meu:

Sem-Título-1.jpg

 

Qualquer dúvida, fico à disposição ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sem alterar marcação defina as margens dos botões com uso de porcentagem.

div#one button.btn1{
	margin: -30% 0 0 20%;
}
div#one button.btn2{
	margin: -30% 0 0 40%;	
}
div#one button.btn3{
	margin: -30% 0 0 60%;	
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@PedroNunes Tinham várias formas de fazer o que você queria, usei o display flex porque além de ser uma propriedade mais moderna, estou tentando me acostumar a usa-lo para pegar prática rs.

 

Dava até para usa-lo de forma mais extensiva nesse seu exemplo, mas basicamente usei para alinhar os elementos do botão na vertical. ;)

 

:wink:

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
    • Por babylon
      Olá galera tudo bem?
      Deixa eu perguntar, estava mexendo no meu site e queria adicionar em html essa tabela porem esta dando erro pois fica assim:
       

      Porem gostaria que ficasse assim:

      Segue o código da tabela:
      <center><table border="0">
          <tr>
      <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Bicicleta<br> <font color="#0092df">..</font>Track Bikes<br> <font color="#0092df">..</font>Aro 29 TKS</b></a></span><br><br><font size="5"><center><span style="background-color: #A1CD44">DE:</span></font> <br><font size="5"><s>R$ 1.999,99</center></font></s> </td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itembicicleta.jpg"><br><font size="5"><center><span style="background-color: #A1CD44">COM - 60%:</span></font> <br><font size="5">1.199,99</font></center></a></td>
             <td><font color="#ffffff">....</font></td>
              <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Monitor 24"<br> <font color="#0092df">..</font>Samsung<font color="#0092df">aa.aa</font><br> <font color="#0092df">..</font>1ms 144hz</b></a></span></center></td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itemmonitor.jpg"></a></td>
          </tr>
          </table></center>
      O que estaria errado, pois não sei como colocar nessa tabela outro fundo de outra cor, veja que usei td bgcolor="#0092df" para o azul escuro mas não sei como usaria pro "#e4f1fb" para o fundo ficar de azul claro em baixo bem como não ficou correto em altura o "DE:" com o "COM - 60%:".
      Bom é isso, obg.


×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.