Problem to diagram divs

Question

Problem to diagram divs

Navigation

#1 by (0 votes)

0

Problem to diagram divs favorite I need to pass as green and pink divs down the dark and light blue, leaving a larger div next to all but I do not know how to work this in CSS. Can anyone help me?

Below my html and css codes:

#forma{
  width:960px;
  height:930px;
  background-color:#000;    
  margin:auto;
  align:center;
}
#nav1{
    width: 480px;
    height: 30px;
    background-color:#DFF034;
    float: left;
}
#nav2{
    width: 480px;
    height: 30px;
    background-color:#50E53F;
    float: left;
}
#banner{
    width: 960px;
    height: 300px;
    background-color: #3028E9;
}
#body1{
    width: 320px;
    height: 300px;
    background-color: #2DD58A;
    float: left;
}
#body2{
    width: 320px;
    height: 300px;
    background-color: #020635;
    float: left;
}
#body3{
    width: 320px;
    height: 300px;
    background-color: #1A6AE5;
    float: left;
}
#corner{
    width: 320px;
    height: 300px;
    background-color: #000000;
    float: left;
    display: inline;
}
#incorner1{
    width: 160px;
    height: 150px;
    background-color: #050421;
    float: left;
}
#incorner2{
    width: 160px;
    height: 150px;
    background-color:#B4C5CD;
    float: left;
}
#incorner3{
    width: 160px;
    height: 150px;
    background-color: #37CB44;
    float: left;
}
#incorner4{
    width: 160px;
    height: 150px;
    background-color: #DC8082;
    float: left;
}
#bigcorner{
    width: 640px;
    height: 300px;
    background-color: #AC8329;
    float: right;
    display: inline;
}

<html>
<head>
<meta charset="utf-8">
<title>layout2</title>
<link style="text/css" href="css/estilo2.css"
rel="stylesheet"/>
</head>

<body>
<div id="forma">
    <div id="nav1"></div>
    <div id="nav2"></div>
    <div id="banner"></div>
    <div id="body1"></div>
    <div id="body2"></div>
    <div id="body3"></div>
    <div corner>
        <div id="incorner1"></div>
        <div id="incorner2"></div>
        <div id="incorner3"></div>
        <div id="incorner4"></div>
    </div>
    <div id="bigcorner"></div>
</div>
</body>
</html>

html css

asked by anonymous 13.02.2017 / 16:19

1 answer

JAAS with Wildfly does not work Error installing theme in Wordpress [duplicate]

score 0 · Answer 1

Missing name id="conner"

From what I've analyzed, you've done the buoyancy you need.

I just forgot to name the id="conner"

Tips

One advice for you to work better and to be able to reuse your structure is to use class instead of id in your structure. id is only used when it is unique elements such as forms or in some element that needs to have its unique identification. Using class you can reuse your framework without further problems and you will be happier.

Grid

Something that can help you improve your projects is also the use of some grid framework or even create your own.

Bootstrap has a great grid system, I advise the study.

link

This article would also help you better understand how a simple grid works.

link

I hope I have been able to help, any questions, please comment.

#forma{
  width:960px;
  height:930px;
  background-color:#000;    
  margin:auto;
  align:center;
}
#nav1{
    width: 480px;
    height: 30px;
    background-color:#DFF034;
    float: left;
}
#nav2{
    width: 480px;
    height: 30px;
    background-color:#50E53F;
    float: left;
}
#banner{
    width: 960px;
    height: 300px;
    background-color: #3028E9;
}
#body1{
    width: 320px;
    height: 300px;
    background-color: #2DD58A;
    float: left;
}
#body2{
    width: 320px;
    height: 300px;
    background-color: #020635;
    float: left;
}
#body3{
    width: 320px;
    height: 300px;
    background-color: #1A6AE5;
    float: left;
}
#corner{
    width: 320px;
    height: 300px;
    background-color: #000000;
    float: left;
    display: inline;
}
#incorner1{
    width: 160px;
    height: 150px;
    background-color: #050421;
    float: left;
}
#incorner2{
    width: 160px;
    height: 150px;
    background-color:#B4C5CD;
    float: left;        
}
#incorner3{
    width: 160px;
    height: 150px;
    background-color: #37CB44;
    float: left;
}
#incorner4{
    width: 160px;
    height: 150px;
    background-color: #DC8082;
    float: left;
}
#bigcorner{
    width: 640px;
    height: 300px;
    background-color: #AC8329;
    float: right;
    display: inline;
}

<html>
<head>
<meta charset="utf-8">
<title>layout2</title>
<link style="text/css" href="css/estilo2.css"
rel="stylesheet"/>
</head>

<body>
<div id="forma">
    <div id="nav1"></div>
    <div id="nav2"></div>
    <div id="banner"></div>
    <div id="body1"></div>
    <div id="body2"></div>
    <div id="body3"></div>
    <div id="corner">
        <div id="incorner1"></div>
        <div id="incorner2"></div>
        <div id="incorner3"></div>
        <div id="incorner4"></div>
    </div>
    <div id="bigcorner"></div>
</div>
</body>
</html>