Structuring with html/div and css

Asked

Viewed 515 times

4

I am beginner/enthusiast and I’m having difficulty to drop the "table", I’m having problems to do this below without leaving a fixed pixel value.

Well, it was solved and this was the result:

*{
    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>

html css html5 css3

  • What have you tried, Matthew? It’s easier to post your code and we help you adjust than to ask someone to show you how to do it from scratch.

  • Sorry, include the code in the post now.

2 answers

1


Basically you can do it this way:

<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>

What difficulty are you encountering? Otherwise, he comments that we have adjusted...

  • Well, the difficulty would be to leave the report below the way I reported in the question: http://i.gyazo.com/fc51723ea8031e270b383298328cd581.png Currently my code looks like this: http://i.gyazo.com/8ebcfcf534cfce969c2ab029b0713204af.png I’m researching about, I tried to use your code but the result was that everything was left, I’ll try to study it to adapt it. This was the result: https://i.gyazo.com/c0ccdbabd24f9b27a282855cbbff97bd.png

  • Edit your question and place your code not the image....

  • I put, sorry, first time posting here.

  • It worked, I just modified the content from 100 to 80 that was my goal, now just need to center the image on the left, because it is not in the middle of the goal div.

  • Give an Edit with the change let’s see how it’s getting...

  • Solved, and already edited with the result.

Show 1 more comment

0

Hello, you could use a grid system to structure your site, I would do something like this:

*{
  -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>

Note that the elements aside and Section#secao are with inline-block display and the margin is calculated to not break the structure.

Anyway there are several ways to do, any doubt just comment.

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.