4

Sou iniciante/entusiasta e estou com dificuldades para largar de vez o "table", estou com problemas para fazer esta relação abaixo sem deixar um valor em pixels fixo.

Bom, foi resolvido e este foi o resultado:

*{
    margin: 0;
    padding: 0;
    font-family: "Open Sans";
}

/* menu superior */
.links{
    width: 100%;
    height: 50px;
    position: fixed;
    display: flex;
}

.links label{
    padding: 12px 0;
    flex-grow: 1;
    cursor: pointer;
    transition: all .4s;
    text-align: center;
    font-size: 100%;
    font-weight: Bold;
    color: #ffffff;
    background-color: rgba(000,000,000,.3);
}

.links label:hover{
    background-color: rgba(255,255,255,.3);
    color: #111111;
}
/* Botões */
.scroll{
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.scroll input{
    display: none;
}

.bloc{
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
}

/* páginas */
#inicio{
    background-color: #ffffff;
}

#sobre{
    background-color: #1aaf0b;
}

#processo{
    background-color: #d0d702;
}

#receitas{
    background-color: #d98000;
}

#social{
    background-color: #ffffff;
}

/* rolamento e transição de páginas */
.sections{
    transition: all .4s;
}

#rd_sobre:checked ~ .sections{
    margin-top: -100vh;
}

#rd_processo:checked ~ .sections{
    margin-top: -200vh;
}

#rd_receitas:checked ~ .sections{
    margin-top: -300vh;
}

#rd_social:checked ~ .sections{
    margin-top: -400vh;
}


/* TESTES */

#content
{
    position:relative;
    height:80%;
    width:80%;

}
#esquerda
{
    height:100%;
    width:32%;
    float:left;
}
#dirsup
{
    height:25%;
    width:66%;
    float:right;
    border: 1px solid black;
    background: green;
}
#dirinf
{
    position:absolute;
    height:69%;
    width:66%;
    border: 1px solid black;
    background: yellow;
    position: absolute;
    right: 0;
    bottom: 0;
}

#centlogo{
    position: relative;
    top: 40%;
    transform: translateY(-50%);
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <!-- Menu superior -->
    <nav class="links">
        <label for="rd_inicio">ÍNICIO</label>
        <label for="rd_sobre">SOBRE</label>
        <label for="rd_processo">PROCESSO</label>
        <label for="rd_receitas">RECEITAS</label>
        <label for="rd_social">SOCIAL</label>
    </nav>
    <div class="scroll">
        <!-- Botões menu superior -->
        <input type="radio" name="grupo" id="rd_inicio" checked="true">
        <input type="radio" name="grupo" id="rd_sobre">
        <input type="radio" name="grupo" id="rd_processo">
        <input type="radio" name="grupo" id="rd_receitas">
        <input type="radio" name="grupo" id="rd_social">

        <!-- Páginas -->
        <section class="sections">
            <!-- pagina 1 inicio -->
            <section class="bloc" id="inicio">
                <div id="content">
                    <div id="esquerda"><img src="imgs/logo.png" id="centlogo"></div>
                    <div id="dirsup">Teste</div>
                    <div id="dirinf">TESTE</div>
                </div>
            </section>
            <!-- pagina 2 sobre -->
            <section class="bloc" id="sobre"></section>
            <!-- pagina 3 processo -->
            <section class="bloc" id="processo"></section>
            <!-- pagina 4 receitas -->
            <section class="bloc" id="receitas"></section>
            <!-- pagina 5 social -->
            <section class="bloc" id="social"></section>
        </section>
    </div>
</body>
</html>

2
  • O que você já tentou, Mateus? É mais fácil postar o seu código e a gente te ajuda a ajustar do que pedir pra alguém te mostrar como faz do zero. Commented 21/11/2016 às 1:23
  • Desculpe, inclui o código no post agora. Commented 21/11/2016 às 1:35

2 Respostas 2

1

Basicamente você pode fazer desta forma:

<div id="content">
    <div id="esquerda"></div>
    <div id="dirsup"></div>
    <div id="dirinf"></div>
</div>
<style>
#content
{
     position:relative;
     height:100%;
     width:100%;

}
#esquerda 
{
    height:100%;
    width:32%;
    float:left;
    border: 1px solid black;
    background: green;
}
#dirsup 
{
    height:25%;
    width:66%;
    float:right;
    border: 1px solid black;
    background: green;
}
#dirinf 
{
    position:absolute;
    height:69%;
    width:66%;
    border: 1px solid black;
    background: yellow;
    position: absolute;
    right: 0;
    bottom: 0;
}
</style>

Qual dificuldade está encontrando ? Se não for isso, comenta que nós ajustamos...

6
  • Bom, a dificuldade seria deixar o relato abaixo do jeito que relatei na pergunta: i.gyazo.com/fc51723ea8031e270b383298328cd581.png Atualmente meu código está assim: i.gyazo.com/8ebcf534cfce969c2ab029b0713204af.png E não usei nada em css nas div ainda, estou pesquisando sobre, tentei usar seu código porém o resultado foi que tudo ficou a esquerda, vou tentar estuda-lo para adapta-lo. Este foi o resultado: i.gyazo.com/c0ccdbabd24f9b27a282855cbbff97bd.png Commented 21/11/2016 às 1:04
  • Edita sua pergunta e coloca o seu código não a imagem....
    – MagicHat
    Commented 21/11/2016 às 1:13
  • Coloquei, desculpe, primeira vez postando aqui. Commented 21/11/2016 às 1:27
  • Deu certo, eu apenas modifiquei do content de 100 para 80 que era meu objetivo, agora só falta centralizar a imagem na esquerda, pois ela não fica no meio da div que era o objetivo. Commented 21/11/2016 às 1:51
  • Dá um edit com a alteração vamos ver como está ficando...
    – MagicHat
    Commented 21/11/2016 às 1:56
0

Olá, você poderia utilizar um sistema de grid para estruturar seu site, eu faria algo assim:

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

aside{
  background-color: #27ae60;  
  margin: 0 3.33%;
  min-height: 70%;
  width:40%;
}

aside, #secao{
  display: inline-block;
  margin-top: 40px;  
  vertical-align: top;
}

body, html{
  height: 100%;
}

header{
  background-color: #34495e;
  diplay: block;
  padding: 40px;
}

#secao{
  background-color: #27ae60;
  width: 50%;
}

#secao > h2{
  padding: 20px;
}

#secao > section{
  background-color: #f39c12;
  border-top: 40px solid #fff;
  padding: 20px;
}
<header></header>
<aside>
  <h2>Sua imagem aqui</h2>
</aside
><section id="secao">
  <h2>título da seção</h2>
  <section>
    <h3>Sub título</h3>
  </section>
</section>

Observe que os elementos aside e a section#secao estão com display inline-block e a margin é calculada para não quebrar a estrutura.

Enfim existem várias formas de fazer, qualquer dúvida só comentar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .