Estou tentando fazer o texto ocupar 50% da "linha" e a imagem os outros 50%, tentei utilizando uma ul usando display: inline-block; e não funcionou, pensei em utilizar 2 Divs e tbm não funcionou, alguém pode me ajudar...
Solucionado
Estou tentando fazer o texto ocupar 50% da "linha" e a imagem os outros 50%, tentei utilizando uma ul usando display: inline-block; e não funcionou, pensei em utilizar 2 Divs e tbm não funcionou, alguém pode me ajudar...
Olá! Um modo de fazer isso com as 2 divs seria utilizando "display: flex;" no container pai dessas duas divs. Você pode então alinhar as duas divs utilizando a propriedade "justify-content" do flexbox. Essa propriedade também deve ser colocada no container pai. Depois basta colocar o width da imagem como 50vw, ou seja 50% do view width. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<main class="container">
<div class="filho-texto">
<h1>Sobre a Barbearia Alura</h1>
<p>Localizada no coração da cidade a Barbearia Alura traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.
Nossa missão é: "Proporcionar auto-estima e qualidade de vida aos clientes".
Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.
</p>
</div>
<div class="filho-imagem"><img src="imagem.jpg"></div>
</main>
</body>
</html>style.css
.container {
display: flex;
justify-content: space-between;
}
.filho-imagem {
width: 50vw;
}
n funcionou
Você pode postar o seu código HTML e CSS por favor?
Css
/*Index*/
.container {
display: flex;
justify-content: space-between;
}
.texindex {
text-align: left;
}
.imgindex {
width: 50%;
}
/*Produtoooooooo*/
header{
background: url("bg.jpg");
padding: 5px 0;
}
.caixa{
position: relative;
width: 940px; /* largura */
margin: 0 auto;
}
nav{
position: absolute;
top: 110px;
right: 0;
}
nav li{
display: inline;
margin: 0 0 0 30px;
}
nav a{
text-transform: uppercase;
color: #FFFFFF;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover{ /*:hover = comportamento do elemento com o mouse em cima dele*/
color: #CCCCCC;
font-size: 30px;
}
.produtos{
padding: 30px 0;
width: 940px;
margin: 0 auto;
}
.produtos li{
display: inline-block; /* quebra a linha do elemento, dando um tamanho unico a cada parte da lista */
text-align: center;
width: 30%; /* largura */
vertical-align: top;
margin: 1.5% 1.5%; /*margem externa do elemento primiro numero referente a pra cima e pra baixo, segudo numero é para os lados */
border-color: #000000;
border-width: 2px;
border-style: solid;
border-radius: 10px;
padding: 30px 20px; /* espaço interno do elemento */
box-sizing: border-box; /* mantem o tamanho da largura de width */
}
.produtos li:hover{ /*:hover = comportamento do elemento com o mouse em cima dele*/
border-color: red;
color: red;
}
.produtos li:active{ /*:active = comportamento do elemento muda o mouse clicando nele*/
color: green;
}
.produtos li:hover h2{ /* li:hover h2 esta sendo aplicado hover para a produtos li somente no h2*/
font-size: 40px;
}
.produtos h2{
font-weight: bold;
font-size: 30px;
}
.descricao{
font-size: 18px;
}
.preço{
font-weight: bold;
font-size: 22px;
margin-top: 20px;
}
footer {
text-align: center;
background: url("bg.jpg");
}
.copy {
color: #ffffff;
font-size: 13px;
margin-top: 40px;
}
main {
width: 940px;
margin: 0 auto;
}
form {
margin: 40px 0;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="logo-branco.png"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contatos</a></li>
</ul>
</nav>
</div>
</header>
<main class="container">
<div class="texindex">
<ul>
<li>
<h1>Sobre a Barbearia Alura</h1>
<p>Localizada no coração da cidade a Barbearia Alura traz para o mercado o que há de melhor para o seu cabelo e barba.
Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
<p>Nossa missão é: "Proporcionar auto-estima e qualidade de vida aos clientes".</p>
<p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda.
O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</li>
</ul>
</div>
<div class="imgindex">
<img src="beneficios.jpg">
</div>
</main>
<footer>
<img src="logo-branco.png">
<p class="copy">© Copyright Barbearia Alura – 2019 </p>
</footer>
</body>
</html>
No seu CSS você colocou o flexbox no início do arquivo. Porém é importante notar que no final do arquivo existe um seletor para o elemento main:
main {
width: 940px;
margin: 0 auto;
}O seletor main e a classe .container se referem ao mesmo elemento no arquivo no arquivo html, neste caso o
. Neste caso você está dizendo para o browser que o .container é flexbox, mas que a largura máxima dele é 940px. Portanto é importante verificar no seu código .css comandos que possam ser contraditórios ou que acrescentem novos estilos e gerem um resultado diferente do que você esperava. Nesse caso em particular eu recomendo retirar bloco main no final do seu .css, bem como os blocos .texindex e .imgindex no início do seu código:.texindex {
text-align: left;
}
.imgindex {
width: 50%;
}Recomendo a leitura deste artigo sobre a especificidade de aplicação do CSS: https://developer.mozilla.org/pt-BR/docs/Web/CSS/Specificity Caso tenha interesse também recomendo ler este artigo sobre flexbox da alura: https://www.alura.com.br/artigos/css-guia-do-flexbox
Gostei das indicações, minha ideia inicial é aprender bem o Html e o Css e passar para Javascript e outras tecnologias, entanto estou tendo bastante dificuldade com os posicionamentos, aprendi um pouco sobre o "display" "margin" "padding", entanto n me ajuda muito a fazer oq eu gostaria, existe algum curso que me ensine bem sobre posicionamento de elementos em html e css?
Eu recomendo que você faça as formações de front-end da Alura. Eu começaria pela formação https://cursos.alura.com.br/formacao-html-css que ensina o básico de html e css. Ao longo dessa formação você aprende uma base sólida de css, inclusive o básico de flexbox e grid. Em seguida faria a formação 'CSS: aprofunde em estilos' https://cursos.alura.com.br/formacao-css-estilos que possui um curso só de flexbox e outro só de grid, além de ensinar SASS e Tailwind. Somente depois faria os cursos de javascript, já que para usar javascript em front-end é necessário uma boa base de HTML e CSS.